@bentoproject/accordion/dist/web-component.max.module.js

Displays content sections that can be collapsed and expanded.

// src/core/mode/prod.js
function isProd() {
  return false;
}

// src/core/mode/minified.js
function isMinified() {
  return false;
}

// src/core/mode/esm.js
function isEsm() {
  var _self$__AMP_MODE$esm, _self, _self$__AMP_MODE;
  if (isProd()) {
    return true;
  }
  return (_self$__AMP_MODE$esm = (_self = self) == null ? void 0 : (_self$__AMP_MODE = _self.__AMP_MODE) == null ? void 0 : _self$__AMP_MODE.esm) != null ? _self$__AMP_MODE$esm : true;
}

// src/core/types/array.js
function toArray(arrayLike) {
  return arrayLike ? Array.prototype.slice.call(arrayLike) : [];
}
function remove(array, shouldRemove) {
  const removed = [];
  let index = 0;
  for (let i = 0; i < array.length; i++) {
    const item = array[i];
    if (shouldRemove(item, i, array)) {
      removed.push(item);
    } else {
      if (index < i) {
        array[index] = item;
      }
      index++;
    }
  }
  if (index < array.length) {
    array.length = index;
  }
  return removed;
}

// src/core/types/object/index.js
var {
  hasOwnProperty: hasOwn_,
  toString: toString_
} = Object.prototype;
function map(opt_initial) {
  const obj = Object.create(null);
  if (opt_initial) {
    Object.assign(obj, opt_initial);
  }
  return obj;
}
function omit(o, props) {
  return Object.keys(o).reduce((acc, key) => {
    if (!props.includes(key)) {
      acc[key] = o[key];
    }
    return acc;
  }, {});
}
function memo(obj, prop, factory) {
  let result = obj[prop];
  if (result === void 0) {
    result = factory(obj, prop);
    obj[prop] = result;
  }
  return result;
}

// src/core/types/index.js
function isElement(value) {
  return (value == null ? void 0 : value.nodeType) == 1;
}

// src/core/error/message-helpers.js
function elementStringOrPassThru(val) {
  if (isElement(val)) {
    val = val;
    return val.tagName.toLowerCase() + (val.id ? `#${val.id}` : "");
  }
  return val;
}

// src/core/assert/base.js
function assert(sentinel, shouldBeTruthy, opt_message = "Assertion failed", var_args) {
  if (shouldBeTruthy) {
    return shouldBeTruthy;
  }
  if (sentinel && opt_message.indexOf(sentinel) == -1) {
    opt_message += sentinel;
  }
  let i = 3;
  const splitMessage = opt_message.split("%s");
  let message = splitMessage.shift();
  const messageArray = [message];
  while (splitMessage.length) {
    const subValue = arguments[i++];
    const nextConstant = splitMessage.shift();
    message += elementStringOrPassThru(subValue) + nextConstant;
    messageArray.push(subValue, nextConstant.trim());
  }
  const error = new Error(message);
  error.messageArray = remove(messageArray, (x) => x !== "");
  self.__AMP_REPORT_ERROR == null ? void 0 : self.__AMP_REPORT_ERROR(error);
  throw error;
}

// src/core/assert/dev.js
function devAssertDceCheck() {
  if (self.__AMP_ASSERTION_CHECK) {
    console.log("__devAssert_sentinel__");
  }
}
function devAssert(shouldBeTruthy, opt_message, opt_1, opt_2, opt_3, opt_4, opt_5, opt_6, opt_7, opt_8, opt_9) {
  if (isMinified()) {
    return shouldBeTruthy;
  }
  devAssertDceCheck();
  return assert("", shouldBeTruthy, opt_message, opt_1, opt_2, opt_3, opt_4, opt_5, opt_6, opt_7, opt_8, opt_9);
}

// src/core/dom/css-selectors.js
var scopeSelectorSupported;
function isScopeSelectorSupported(el) {
  if (scopeSelectorSupported !== void 0) {
    return scopeSelectorSupported;
  }
  return scopeSelectorSupported = testScopeSelector(el);
}
function testScopeSelector(el) {
  try {
    const doc = el.ownerDocument;
    const testElement = doc.createElement("div");
    const testChild = doc.createElement("div");
    testElement.appendChild(testChild);
    return testElement.querySelector(":scope div") === testChild;
  } catch (e) {
    return false;
  }
}
function prependSelectorsWith(selector, distribute) {
  return selector.replace(/^|,/g, `$&${distribute} `);
}

// src/core/dom/query.js
function assertIsName(name) {
  devAssert(/^[\w-]+$/.test(name), `Expected "${name}" to be a CSS name composed of alphanumerics and hyphens.`);
}
function scopedQuerySelectionFallback(root, selector) {
  const {
    classList
  } = root;
  const unique = "i-amphtml-scoped";
  classList.add(unique);
  const scopedSelector = prependSelectorsWith(selector, `.${unique}`);
  const elements = root.querySelectorAll(scopedSelector);
  classList.remove(unique);
  return elements;
}
function scopedQuerySelectorAll(root, selector) {
  if (isEsm() || isScopeSelectorSupported(root)) {
    return root.querySelectorAll(prependSelectorsWith(selector, ":scope"));
  }
  return scopedQuerySelectionFallback(root, selector);
}
function childElementsByTag(parent, tagName) {
  assertIsName(tagName);
  return scopedQuerySelectorAll(parent, `> ${tagName}`);
}

// src/core/dom/index.js
function toggleAttribute(element, name, forced) {
  const hasAttribute = element.hasAttribute(name);
  const enabled = forced !== void 0 ? forced : !hasAttribute;
  if (enabled !== hasAttribute) {
    if (enabled) {
      element.setAttribute(name, "");
    } else {
      element.removeAttribute(name);
    }
  }
  return enabled;
}

// src/bento/components/bento-accordion/1.0/base-element.js
import {
  createElement as createElement2
} from "@bentoproject/core";
import { useLayoutEffect as useLayoutEffect3, useRef as useRef2 } from "@bentoproject/core";
import { PreactBaseElement } from "@bentoproject/core";
import { forwardRef as forwardRef2 } from "@bentoproject/core";
import { useDOMHandle } from "@bentoproject/core";
import { useSlotContext } from "@bentoproject/core";

// src/bento/components/bento-accordion/1.0/component.jss.js
var $sectionChild = "section-child-76fac82";
var $header = "header-76fac82";
var $contentHidden = "content-hidden-76fac82";

// src/core/data-structures/promise.js
var resolved;
function resolvedPromise() {
  if (resolved) {
    return resolved;
  }
  resolved = Promise.resolve(void 0);
  return resolved;
}

// node_modules/obj-str/dist/obj-str.mjs
function obj_str_default(obj) {
  var k, cls = "";
  for (k in obj) {
    if (obj[k]) {
      cls && (cls += " ");
      cls += k;
    }
  }
  return cls;
}

// src/core/data-structures/id-generator.js
function sequentialIdGenerator() {
  let counter = 0;
  return () => String(++counter);
}
function randomIdGenerator(maxValue) {
  return () => String(Math.floor(Math.random() * maxValue));
}

// src/bento/components/bento-accordion/1.0/component.js
import {
  createContext,
  createElement
} from "@bentoproject/core";
import { useCallback as useCallback2, useContext, useEffect, useImperativeHandle, useLayoutEffect as useLayoutEffect2, useMemo, useRef, useState } from "@bentoproject/core";
import { forwardRef } from "@bentoproject/core";
import { WithAmpContext } from "@bentoproject/core";

// src/preact/utils.js
import { useCallback, useLayoutEffect } from "@bentoproject/core";
import { useAmpContext } from "@bentoproject/core";
function propName(name) {
  return name;
}
function tabindexFromProps(props, fallback = 0) {
  var _ref, _props$tabindex;
  return (_ref = (_props$tabindex = props.tabindex) != null ? _props$tabindex : props.tabIndex) != null ? _ref : fallback;
}

// src/core/dom/style.js
var propertyNameCache;
var vendorPrefixes = ["Webkit", "webkit", "Moz", "moz", "ms", "O", "o"];
function camelCaseToTitleCase(camelCase) {
  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
}
function camelCaseToHyphenCase(camelCase) {
  const hyphenated = camelCase.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
  if (vendorPrefixes.some((prefix) => hyphenated.startsWith(prefix + "-"))) {
    return `-${hyphenated}`;
  }
  return hyphenated;
}
function getVendorJsPropertyName_(style, titleCase) {
  for (let i = 0; i < vendorPrefixes.length; i++) {
    const propertyName = vendorPrefixes[i] + titleCase;
    if (style[propertyName] !== void 0) {
      return propertyName;
    }
  }
  return "";
}
function getVendorJsPropertyName(style, camelCase, opt_bypassCache) {
  if (isVar(camelCase)) {
    return camelCase;
  }
  if (!propertyNameCache) {
    propertyNameCache = map();
  }
  let propertyName = propertyNameCache[camelCase];
  if (!propertyName || opt_bypassCache) {
    propertyName = camelCase;
    if (style[camelCase] === void 0) {
      const titleCase = camelCaseToTitleCase(camelCase);
      const prefixedPropertyName = getVendorJsPropertyName_(style, titleCase);
      if (style[prefixedPropertyName] !== void 0) {
        propertyName = prefixedPropertyName;
      }
    }
    if (!opt_bypassCache) {
      propertyNameCache[camelCase] = propertyName;
    }
  }
  return propertyName;
}
function setStyle(element, property, value, opt_units, opt_bypassCache) {
  const propertyName = getVendorJsPropertyName(element.style, property, opt_bypassCache);
  if (!propertyName) {
    return;
  }
  const styleValue = opt_units ? value + opt_units : value;
  element.style.setProperty(camelCaseToHyphenCase(propertyName), styleValue);
}
function getStyle(element, property, opt_bypassCache) {
  const propertyName = getVendorJsPropertyName(element.style, property, opt_bypassCache);
  if (!propertyName) {
    return void 0;
  }
  if (isVar(propertyName)) {
    return element.style.getPropertyValue(propertyName);
  }
  return element.style[propertyName];
}
function setStyles(element, styles) {
  for (const k in styles) {
    setStyle(element, k, styles[k]);
  }
}
function isVar(property) {
  return property.startsWith("--");
}

// src/bento/components/bento-accordion/1.0/animations.js
var MAX_TRANSITION_DURATION = 500;
var MIN_TRANSITION_DURATION = 200;
var EXPAND_CURVE = "cubic-bezier(0.47, 0, 0.745, 0.715)";
var COLLAPSE_CURVE = "cubic-bezier(0.39, 0.575, 0.565, 1)";
function animateExpand(content) {
  return animate(content, () => {
    const oldHeight = getStyle(content, "height");
    const oldOpacity = getStyle(content, "opacity");
    const oldOverflowY = getStyle(content, "overflowY");
    setStyles(content, {
      height: 0,
      opacity: 0,
      overflowY: "auto"
    });
    const targetHeight = content.scrollHeight;
    setStyles(content, {
      height: oldHeight,
      opacity: oldOpacity,
      overflowY: oldOverflowY
    });
    const duration = getTransitionDuration(targetHeight);
    return content.animate([{
      height: 0,
      opacity: 0,
      overflowY: "hidden"
    }, {
      height: targetHeight + "px",
      opacity: 1,
      overflowY: "hidden"
    }], {
      easing: EXPAND_CURVE,
      duration
    });
  });
}
function animateCollapse(content) {
  return animate(content, () => {
    const startHeight = content.offsetHeight;
    const duration = getTransitionDuration(startHeight);
    return content.animate([{
      height: startHeight + "px",
      opacity: 1,
      overflowY: "hidden"
    }, {
      height: "0",
      opacity: 0,
      overflowY: "hidden"
    }], {
      easing: COLLAPSE_CURVE,
      duration
    });
  });
}
function animate(element, prepare, cleanup = void 0) {
  element.classList.add("i-amphtml-animating");
  let player = prepare();
  player.onfinish = player.oncancel = () => {
    player = null;
    if (cleanup) {
      cleanup();
    }
    element.classList.remove("i-amphtml-animating");
  };
  return () => {
    if (player) {
      player.cancel();
    }
  };
}
function getTransitionDuration(dy) {
  const maxY = window.innerHeight;
  const distanceAdjustedDuration = Math.abs(dy) / maxY * MAX_TRANSITION_DURATION;
  return Math.min(Math.max(distanceAdjustedDuration, MIN_TRANSITION_DURATION), MAX_TRANSITION_DURATION);
}

// src/bento/components/bento-accordion/1.0/component.js
var _excluded = ["animate", "as", "children", "expandSingleSection", "id"];
var _excluded2 = ["animate", "as", "children", "expanded", "id", "onExpandStateChange"];
function _toPropertyKey(arg) {
  var key = _toPrimitive(arg, "string");
  return typeof key === "symbol" ? key : String(key);
}
function _toPrimitive(input, hint) {
  if (typeof input !== "object" || input === null)
    return input;
  var prim = input[Symbol.toPrimitive];
  if (prim !== void 0) {
    var res = prim.call(input, hint || "default");
    if (typeof res !== "object")
      return res;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (hint === "string" ? String : Number)(input);
}
function _extends() {
  _extends = Object.assign || function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null)
    return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0)
      continue;
    target[key] = source[key];
  }
  return target;
}
var AccordionContext = createContext({});
var SectionContext = createContext({});
var EMPTY_EXPANDED_MAP = {};
var EMPTY_EVENT_MAP = {};
var generateSectionId = sequentialIdGenerator();
var generateRandomId = randomIdGenerator(1e5);
function BentoAccordionWithRef(_ref, ref) {
  let {
    animate: animate2 = false,
    as: Comp = "section",
    children,
    expandSingleSection = false,
    id
  } = _ref, rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const [expandedMap, setExpandedMap] = useState(EMPTY_EXPANDED_MAP);
  const eventMapRef = useRef(EMPTY_EVENT_MAP);
  const [randomPrefix] = useState(generateRandomId);
  const prefix = id || `a${randomPrefix}`;
  useEffect(() => {
    if (!expandSingleSection) {
      return;
    }
    setExpandedMap((expandedMap2) => {
      const newExpandedMap = {};
      let expanded = 0;
      for (const k in expandedMap2) {
        newExpandedMap[k] = expandedMap2[k] && expanded++ == 0;
      }
      return newExpandedMap;
    });
  }, [expandSingleSection]);
  const registerSection = useCallback2((id2, defaultExpanded, {
    current: onExpandStateChange
  }) => {
    setExpandedMap((expandedMap2) => {
      return setExpanded(id2, defaultExpanded, expandedMap2, expandSingleSection);
    });
    eventMapRef.current = _extends({}, eventMapRef.current, {
      [id2]: onExpandStateChange
    });
    return () => {
      setExpandedMap((expandedMap2) => omit(expandedMap2, id2));
      eventMapRef.current = omit(eventMapRef.current, id2);
    };
  }, [expandSingleSection]);
  const toggleExpanded = useCallback2((id2, opt_expand) => {
    setExpandedMap((expandedMap2) => {
      const newExpanded = opt_expand != null ? opt_expand : !expandedMap2[id2];
      const newExpandedMap = setExpanded(id2, newExpanded, expandedMap2, expandSingleSection);
      resolvedPromise().then(() => {
        for (const k in expandedMap2) {
          const onExpandStateChange = eventMapRef.current[k];
          if (onExpandStateChange && expandedMap2[k] != newExpandedMap[k]) {
            onExpandStateChange(newExpandedMap[k]);
          }
        }
      });
      return newExpandedMap;
    });
  }, [expandSingleSection]);
  const isExpanded = useCallback2((id2, defaultExpanded) => {
    var _expandedMap$id;
    return (_expandedMap$id = expandedMap[id2]) != null ? _expandedMap$id : defaultExpanded;
  }, [expandedMap]);
  const toggle = useCallback2((id2) => {
    if (id2) {
      if (id2 in expandedMap) {
        toggleExpanded(id2);
      }
    } else {
      if (!expandSingleSection) {
        for (const k in expandedMap) {
          toggleExpanded(k);
        }
      }
    }
  }, [expandedMap, toggleExpanded, expandSingleSection]);
  const expand = useCallback2((id2) => {
    if (id2) {
      if (!isExpanded(id2, true)) {
        toggleExpanded(id2);
      }
    } else {
      if (!expandSingleSection) {
        for (const k in expandedMap) {
          if (!isExpanded(k, true)) {
            toggleExpanded(k);
          }
        }
      }
    }
  }, [expandedMap, toggleExpanded, isExpanded, expandSingleSection]);
  const collapse = useCallback2((id2) => {
    if (id2) {
      if (isExpanded(id2, false)) {
        toggleExpanded(id2);
      }
    } else {
      for (const k in expandedMap) {
        if (isExpanded(k, false)) {
          toggleExpanded(k);
        }
      }
    }
  }, [expandedMap, toggleExpanded, isExpanded]);
  useImperativeHandle(ref, () => ({
    toggle,
    expand,
    collapse
  }), [toggle, collapse, expand]);
  const context = useMemo(() => ({
    registerSection,
    toggleExpanded,
    isExpanded,
    animate: animate2,
    prefix
  }), [registerSection, toggleExpanded, isExpanded, animate2, prefix]);
  return createElement(Comp, _extends({
    id
  }, rest), createElement(AccordionContext.Provider, {
    value: context
  }, children));
}
var BentoAccordion = forwardRef(BentoAccordionWithRef);
BentoAccordion.displayName = "Accordion";
function setExpanded(id, value, expandedMap, expandSingleSection) {
  let newExpandedMap;
  if (expandSingleSection && value) {
    newExpandedMap = {
      [id]: value
    };
    for (const k in expandedMap) {
      if (k != id) {
        newExpandedMap[k] = false;
      }
    }
  } else {
    newExpandedMap = _extends({}, expandedMap, {
      [id]: value
    });
  }
  return newExpandedMap;
}
function BentoAccordionSection(_ref2) {
  let {
    animate: defaultAnimate = false,
    as: Comp = "section",
    children,
    expanded: defaultExpanded = false,
    id: propId,
    onExpandStateChange
  } = _ref2, rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
  const [genId] = useState(generateSectionId);
  const id = propId || genId;
  const [suffix] = useState(generateRandomId);
  const [expandedState, setExpandedState] = useState(defaultExpanded);
  const [contentIdState, setContentIdState] = useState(null);
  const [headerIdState, setHeaderIdState] = useState(null);
  const {
    animate: contextAnimate,
    isExpanded,
    prefix,
    registerSection,
    toggleExpanded
  } = useContext(AccordionContext);
  const expanded = isExpanded ? isExpanded(id, defaultExpanded) : expandedState;
  const animate2 = contextAnimate != null ? contextAnimate : defaultAnimate;
  const contentId = contentIdState || `${prefix || "a"}-content-${id}-${suffix}`;
  const headerId = headerIdState || `${prefix || "a"}-header-${id}-${suffix}`;
  const onExpandStateChangeRef = useRef(null);
  onExpandStateChangeRef.current = onExpandStateChange;
  useLayoutEffect2(() => {
    if (registerSection) {
      return registerSection(id, defaultExpanded, onExpandStateChangeRef);
    }
  }, [registerSection, id, defaultExpanded]);
  const toggleHandler = useCallback2((opt_expand) => {
    if (toggleExpanded) {
      toggleExpanded(id, opt_expand);
    } else {
      setExpandedState((prev) => {
        const newValue = opt_expand != null ? opt_expand : !prev;
        resolvedPromise().then(() => {
          const onExpandStateChange2 = onExpandStateChangeRef.current;
          if (onExpandStateChange2) {
            onExpandStateChange2(newValue);
          }
        });
        return newValue;
      });
    }
  }, [id, toggleExpanded]);
  const context = useMemo(() => ({
    animate: animate2,
    contentId,
    headerId,
    expanded,
    toggleHandler,
    setContentId: setContentIdState,
    setHeaderId: setHeaderIdState
  }), [animate2, contentId, headerId, expanded, toggleHandler]);
  return createElement(Comp, _extends({}, rest), createElement(SectionContext.Provider, {
    value: context
  }, children));
}
function BentoAccordionHeader(_ref3) {
  let _propName = propName("class"), {
    as: Comp = "div",
    children,
    id,
    role = "button",
    [_propName]: className = ""
  } = _ref3, rest = _objectWithoutPropertiesLoose(_ref3, ["as", "children", "id", "role", _propName].map(_toPropertyKey));
  const {
    contentId,
    expanded,
    headerId,
    setHeaderId,
    toggleHandler
  } = useContext(SectionContext);
  useLayoutEffect2(() => {
    if (setHeaderId) {
      setHeaderId(id);
    }
  }, [setHeaderId, id]);
  return createElement(Comp, _extends({}, rest, {
    id: headerId,
    role,
    class: `${className} ${$sectionChild} ${$header}`,
    tabindex: tabindexFromProps(rest),
    "aria-controls": contentId,
    onClick: () => toggleHandler(),
    "aria-expanded": String(expanded)
  }), children);
}
function BentoAccordionContent(_ref4) {
  let _propName2 = propName("class"), {
    as: Comp = "div",
    children,
    id,
    role = "region",
    [_propName2]: className = ""
  } = _ref4, rest = _objectWithoutPropertiesLoose(_ref4, ["as", "children", "id", "role", _propName2].map(_toPropertyKey));
  const ref = useRef(null);
  const hasMountedRef = useRef(false);
  const {
    animate: animate2,
    contentId,
    expanded,
    headerId,
    setContentId
  } = useContext(SectionContext);
  useEffect(() => {
    hasMountedRef.current = true;
    return () => hasMountedRef.current = false;
  }, []);
  useLayoutEffect2(() => {
    if (setContentId) {
      setContentId(id);
    }
  }, [setContentId, id]);
  useLayoutEffect2(() => {
    const hasMounted = hasMountedRef.current;
    const content = ref.current;
    if (!animate2 || !hasMounted || !content || !content.animate) {
      return;
    }
    return expanded ? animateExpand(content) : animateCollapse(content);
  }, [expanded, animate2]);
  return createElement(WithAmpContext, {
    renderable: expanded
  }, createElement(Comp, _extends({}, rest, {
    ref,
    class: obj_str_default({
      [className]: true,
      [$sectionChild]: true,
      [$contentHidden]: !expanded
    }),
    id: contentId,
    "aria-labelledby": headerId,
    role
  }), children));
}

// src/bento/components/bento-accordion/1.0/base-element.js
function _extends2() {
  _extends2 = Object.assign || function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends2.apply(this, arguments);
}
var HEADER_SHIM_PROP = "__AMP_H_SHIM";
var CONTENT_SHIM_PROP = "__AMP_C_SHIM";
var SECTION_POST_RENDER = "__AMP_PR";
var EXPAND_STATE_SHIM_PROP = "__AMP_EXPAND_STATE_SHIM";
var BaseElement = class extends PreactBaseElement {
  init() {
    const getExpandStateTrigger = (section) => (expanded) => {
      var _section$SECTION_POST;
      toggleAttribute(section, "expanded", expanded);
      (_section$SECTION_POST = section[SECTION_POST_RENDER]) == null ? void 0 : _section$SECTION_POST.call(section);
      this.triggerEvent(section, expanded ? "expand" : "collapse");
    };
    const {
      element
    } = this;
    const mu = new MutationObserver(() => {
      this.mutateProps(getState(element, mu, getExpandStateTrigger));
    });
    mu.observe(element, {
      attributeFilter: ["expanded", "id"],
      subtree: true,
      childList: true
    });
    const {
      "children": children
    } = getState(element, mu, getExpandStateTrigger);
    return {
      "children": children
    };
  }
};
function getState(element, mu, getExpandStateTrigger) {
  const sections = toArray(childElementsByTag(element, "section"));
  const children = sections.map((section) => {
    if (!section[SECTION_POST_RENDER]) {
      section[SECTION_POST_RENDER] = () => mu.takeRecords();
    }
    const headerShim = memo(section, HEADER_SHIM_PROP, bindHeaderShimToElement);
    const contentShim = memo(section, CONTENT_SHIM_PROP, bindContentShimToElement);
    const expandStateShim = memo(section, EXPAND_STATE_SHIM_PROP, getExpandStateTrigger);
    const sectionProps = {
      "key": section,
      "expanded": section.hasAttribute("expanded"),
      "id": section.getAttribute("id"),
      "onExpandStateChange": expandStateShim
    };
    const headerProps = {
      "as": headerShim,
      "id": section.firstElementChild.getAttribute("id"),
      "role": section.firstElementChild.getAttribute("role") || void 0
    };
    const contentProps = {
      "as": contentShim,
      "id": section.lastElementChild.getAttribute("id"),
      "role": section.lastElementChild.getAttribute("role") || void 0
    };
    return createElement2(BentoAccordionSection, _extends2({}, sectionProps), createElement2(BentoAccordionHeader, _extends2({}, headerProps)), createElement2(BentoAccordionContent, _extends2({}, contentProps)));
  });
  return {
    "children": children
  };
}
function HeaderShim(sectionElement, {
  "aria-controls": ariaControls,
  "aria-expanded": ariaExpanded,
  id,
  onClick,
  role
}) {
  const headerElement = sectionElement.firstElementChild;
  useLayoutEffect3(() => {
    if (!headerElement || !onClick) {
      return;
    }
    headerElement.setAttribute("id", id);
    headerElement.classList.add("i-amphtml-accordion-header");
    headerElement.addEventListener("click", onClick);
    if (!headerElement.hasAttribute("tabindex")) {
      headerElement.setAttribute("tabindex", 0);
    }
    headerElement.setAttribute("aria-expanded", ariaExpanded);
    headerElement.setAttribute("aria-controls", ariaControls);
    headerElement.setAttribute("role", role);
    if (sectionElement[SECTION_POST_RENDER]) {
      sectionElement[SECTION_POST_RENDER]();
    }
    return () => {
      headerElement.removeEventListener("click", devAssert(onClick));
    };
  }, [sectionElement, headerElement, id, role, onClick, ariaControls, ariaExpanded]);
  return createElement2("header", null);
}
var bindHeaderShimToElement = (element) => HeaderShim.bind(null, element);
function ContentShimWithRef(sectionElement, {
  "aria-labelledby": ariaLabelledBy,
  id,
  role
}, ref) {
  const contentElement = sectionElement.lastElementChild;
  const contentRef = useRef2();
  contentRef.current = contentElement;
  useSlotContext(contentRef);
  useDOMHandle(ref, contentElement);
  useLayoutEffect3(() => {
    if (!contentElement) {
      return;
    }
    contentElement.classList.add("i-amphtml-accordion-content");
    contentElement.setAttribute("id", id);
    contentElement.setAttribute("role", role);
    contentElement.setAttribute("aria-labelledby", ariaLabelledBy);
    if (sectionElement[SECTION_POST_RENDER]) {
      sectionElement[SECTION_POST_RENDER]();
    }
  }, [sectionElement, contentElement, id, role, ariaLabelledBy]);
  return createElement2("div", null);
}
var bindContentShimToElement = (element) => forwardRef2(ContentShimWithRef.bind(null, element));
BaseElement["Component"] = BentoAccordion;
BaseElement["detached"] = true;
BaseElement["props"] = {
  "animate": {
    attr: "animate",
    type: "boolean",
    media: true
  },
  "expandSingleSection": {
    attr: "expand-single-section",
    type: "boolean"
  }
};

// src/bento/components/bento-accordion/1.0/build/web-component.js
import { defineBentoElement } from "@bentoproject/core";
function defineElement(win) {
  defineBentoElement("bento-accordion", BaseElement, win);
}
export {
  defineElement
};
/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */

//# sourceMappingURL=web-component.max.module.js.map