@vielzeug/refine 1.1.3 → 1.3.0

package/dist/accordion-item.cjs

@@ -1,13 +1,13 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/direction.cjs"),r=require("./accordion.cjs"),i=require("./disclosure/accordion-item/accordion-item.css?inline.cjs");let a=require("@vielzeug/ore");var o=`ore-accordion-item`;(0,a.define)(o,{props:{...t.disablableBundle,expanded:a.prop.bool(!1),size:a.prop.string(),variant:a.prop.string()},setup(e,{el:t,emit:i,onMounted:o,watch:s}){let c=(0,a.inject)(r.ACCORDION_CTX);c&&s(()=>{let e=c.size.value,n=c.variant.value;e!==void 0&&t.setAttribute(`size`,e),n!==void 0&&t.setAttribute(`variant`,n)});let l=`accordion-item-title`,u=(0,a.ref)(),d=(0,a.ref)(),f=!1,p=()=>{let e=u.value;!e||e.open||(e.classList.add(`opening`),e.open=!0,t.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:t}),requestAnimationFrame(()=>{let t=e.querySelector(`.content-inner`);if(!t){e.classList.remove(`opening`),f=!1;return}let n=()=>{e.classList.remove(`opening`),f=!1},r=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];r.length>0?Promise.allSettled(r.map(e=>e.finished)).then(n):n()}))},m=()=>{let e=u.value;if(!e||!e.open||f)return;f=!0,e.classList.add(`closing`);let n=e.querySelector(`.content-inner`),r=()=>{e.classList.remove(`closing`),e.open=!1,t.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:t}),f=!1};if(n){let e=n.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(r):r()}else r()},h=!1,g=0,_=()=>{if(e.disabled.value)return;let t=u.value;t&&(t.open?m():p())},v=e=>{g=e.touches[0]?.clientY??0},y=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-g)>10||(e.preventDefault(),h=!0,_())},b=e=>{if(h){h=!1,e.preventDefault();return}e.preventDefault(),_()},x=()=>{let n=u.value?.open??!1,r=!!e.expanded.value;n&&!r?(t.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:t})):!n&&r&&(t.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:t}))};return o(()=>{let e=u.value,r=d.value;if(!e||!r)return;let i=()=>{e.classList.toggle(`rtl`,n.elementDirection(t)===`rtl`)};i();let a=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&i()});for(let e=t;e;e=e.parentElement)a.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,x),r.addEventListener(`touchstart`,v,{passive:!0}),r.addEventListener(`touchend`,y,{passive:!1}),r.addEventListener(`click`,b),()=>{a.disconnect(),e.removeEventListener(`toggle`,x),r.removeEventListener(`touchstart`,v),r.removeEventListener(`touchend`,y),r.removeEventListener(`click`,b)}}),a.html` <details part="item" ?open="${e.expanded}" ref="${u}">
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/direction.cjs"),r=require("./accordion.cjs"),i=require("./disclosure/accordion-item/accordion-item.css.cjs");let a=require("@vielzeug/ore");var o=`ore-accordion-item`;(0,a.define)(o,{props:{...t.disablableBundle,expanded:a.prop.bool(!1),size:a.prop.string(),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),o=a.watchEffect,s=(0,a.inject)(r.ACCORDION_CTX);s&&o(()=>{let e=s.size.value,n=s.variant.value;e!==void 0&&t.setAttribute(`size`,e),n!==void 0&&t.setAttribute(`variant`,n)});let c=`accordion-item-title`,l=(0,a.ref)(),u=(0,a.ref)(),d=!1,f=()=>{let e=l.value;!e||e.open||(e.classList.add(`opening`),e.open=!0,t.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:t}),requestAnimationFrame(()=>{let t=e.querySelector(`.content-inner`);if(!t){e.classList.remove(`opening`),d=!1;return}let n=()=>{e.classList.remove(`opening`),d=!1},r=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];r.length>0?Promise.allSettled(r.map(e=>e.finished)).then(n):n()}))},p=()=>{let e=l.value;if(!e||!e.open||d)return;d=!0,e.classList.add(`closing`);let n=e.querySelector(`.content-inner`),r=()=>{e.classList.remove(`closing`),e.open=!1,t.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:t}),d=!1};if(n){let e=n.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(r):r()}else r()},m=!1,h=0,g=()=>{if(e.disabled.value)return;let t=l.value;t&&(t.open?p():f())},_=e=>{h=e.touches[0]?.clientY??0},v=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-h)>10||(e.preventDefault(),m=!0,g())},y=e=>{if(m){m=!1,e.preventDefault();return}e.preventDefault(),g()},b=()=>{let n=l.value?.open??!1,r=!!e.expanded.value;n&&!r?(t.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:t})):!n&&r&&(t.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:t}))};return(0,a.onMounted)(()=>{let e=l.value,r=u.value;if(!e||!r)return;let i=()=>{e.classList.toggle(`rtl`,n.elementDirection(t)===`rtl`)};i();let a=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&i()});for(let e=t;e;e=e.parentElement)a.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,b),r.addEventListener(`touchstart`,_,{passive:!0}),r.addEventListener(`touchend`,v,{passive:!1}),r.addEventListener(`click`,y),()=>{a.disconnect(),e.removeEventListener(`toggle`,b),r.removeEventListener(`touchstart`,_),r.removeEventListener(`touchend`,v),r.removeEventListener(`click`,y)}}),a.html` <details part="item" ?open="${e.expanded}" ref="${l}">
       <summary
         part="summary"
         :aria-expanded="${()=>String(e.expanded.value)}"
         :aria-disabled="${()=>e.disabled.value?`true`:`false`}"
         :tabindex="${()=>e.disabled.value?`-1`:null}"
-        ref="${d}">
+        ref="${u}">
         <slot name="prefix"></slot>
         <div class="header-content" part="header">
-          <span class="title" part="title" id="${l}">
+          <span class="title" part="title" id="${c}">
             <slot name="title"></slot>
           </span>
           <span class="subtitle" part="subtitle">
@@ -17,7 +17,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <slot name="suffix"></slot>
         <ore-icon class="chevron" name="chevron-down" size="20" stroke-width="2" aria-hidden="true"></ore-icon>
       </summary>
-      <div class="content-wrapper" part="content" role="region" aria-labelledby="${l}">
+      <div class="content-wrapper" part="content" role="region" aria-labelledby="${c}">
         <div class="content-inner">
           <slot></slot>
         </div>

package/dist/accordion-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.cjs","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../headless/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type OreAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type OreAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element ore-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires collapse - Emitted when item collapses. detail: { expanded: boolean; item: HTMLElement }\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-hover-bg - Background color on hover\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @part item - Item root element.\n * @part summary - Summary trigger row.\n * @part header - Header container.\n * @part title - Title text element.\n * @part subtitle - Subtitle text element.\n * @part content - Content container.\n * @example\n * ```html\n * <ore-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></ore-accordion-item>\n * <ore-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></ore-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = 'ore-accordion-item' as const;\ndefine<OreAccordionItemProps, OreAccordionItemEvents>(ACCORDION_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    expanded: prop.bool(false),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props, { el, emit, onMounted, watch }) {\n    // Inherit size/variant from a parent ore-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX);\n\n    if (accordionCtx) {\n      watch(() => {\n        const size = accordionCtx.size.value;\n        const variant = accordionCtx.variant.value;\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    let isAnimating = false;\n\n    const openItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || details.open) return;\n\n      details.classList.add('opening');\n      details.open = true;\n\n      el.toggleAttribute('expanded', true);\n      emit('expand', { expanded: true, item: el });\n\n      requestAnimationFrame(() => {\n        const inner = details.querySelector<HTMLElement>('.content-inner');\n\n        if (!inner) {\n          details.classList.remove('opening');\n          isAnimating = false;\n\n          return;\n        }\n\n        const onDone = () => {\n          details.classList.remove('opening');\n          isAnimating = false;\n        };\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      });\n    };\n\n    const closeItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || !details.open || isAnimating) return;\n\n      isAnimating = true;\n\n      details.classList.add('closing');\n\n      const inner = details.querySelector<HTMLElement>('.content-inner');\n      const onDone = () => {\n        details.classList.remove('closing');\n        details.open = false;\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n        isAnimating = false;\n      };\n\n      if (inner) {\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      } else {\n        onDone();\n      }\n    };\n\n    let touchHandled = false;\n    let touchStartY = 0;\n\n    const toggleDetails = () => {\n      if (props.disabled.value) return;\n\n      const details = detailsRef.value;\n\n      if (!details) return;\n\n      if (details.open) {\n        closeItem();\n      } else {\n        openItem();\n      }\n    };\n\n    const handleSummaryTouchStart = (e: TouchEvent) => {\n      touchStartY = e.touches[0]?.clientY ?? 0;\n    };\n\n    const handleSummaryTouchEnd = (e: TouchEvent) => {\n      const dy = Math.abs((e.changedTouches[0]?.clientY ?? 0) - touchStartY);\n\n      if (dy > 10) return;\n\n      e.preventDefault();\n      touchHandled = true;\n      toggleDetails();\n    };\n\n    const handleSummaryClick = (e: Event) => {\n      if (touchHandled) {\n        touchHandled = false;\n        e.preventDefault();\n\n        return;\n      }\n\n      e.preventDefault();\n      toggleDetails();\n    };\n\n    const handleToggle = () => {\n      // Only fires for programmatic open/close (e.g. from accordion parent)\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      if (isOpen && !wasExpanded) {\n        el.toggleAttribute('expanded', true);\n        emit('expand', { expanded: true, item: el });\n      } else if (!isOpen && wasExpanded) {\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n      }\n    };\n\n    onMounted(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL so plain CSS classes can target it (see `elementDirection` for the\n      // ancestor-dir / computed-style resolution rule).\n      const checkRTL = () => {\n        details.classList.toggle('rtl', elementDirection(el) === 'rtl');\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when `dir` changes on this element's own ancestor chain (not the whole\n      // document — `elementDirection` only ever looks at `el`'s ancestors, so that's all we\n      // need to watch).\n      const observer = new MutationObserver((mutations) => {\n        const dirChanged = mutations.some((m) => m.attributeName === 'dir');\n\n        if (dirChanged) {\n          checkRTL();\n        }\n      });\n\n      for (let ancestor: Element | null = el; ancestor; ancestor = ancestor.parentElement) {\n        observer.observe(ancestor, { attributeFilter: ['dir'], attributes: true });\n      }\n\n      details.addEventListener('toggle', handleToggle);\n      summary.addEventListener('touchstart', handleSummaryTouchStart, { passive: true });\n      summary.addEventListener('touchend', handleSummaryTouchEnd, { passive: false });\n      summary.addEventListener('click', handleSummaryClick);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n        summary.removeEventListener('touchstart', handleSummaryTouchStart);\n        summary.removeEventListener('touchend', handleSummaryTouchEnd);\n        summary.removeEventListener('click', handleSummaryClick);\n      };\n    });\n\n    return html` <details part=\"item\" ?open=\"${props.expanded}\" ref=\"${detailsRef}\">\n      <summary\n        part=\"summary\"\n        :aria-expanded=\"${() => String(props.expanded.value)}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : 'false')}\"\n        :tabindex=\"${() => (props.disabled.value ? '-1' : null)}\"\n        ref=\"${summaryRef}\">\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <ore-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"accordion-item.cjs","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, getHost, onMounted, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../headless/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type OreAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type OreAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element ore-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires collapse - Emitted when item collapses. detail: { expanded: boolean; item: HTMLElement }\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-hover-bg - Background color on hover\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @part item - Item root element.\n * @part summary - Summary trigger row.\n * @part header - Header container.\n * @part title - Title text element.\n * @part subtitle - Subtitle text element.\n * @part content - Content container.\n * @example\n * ```html\n * <ore-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></ore-accordion-item>\n * <ore-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></ore-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = 'ore-accordion-item' as const;\ndefine<OreAccordionItemProps>(ACCORDION_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    expanded: prop.bool(false),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAccordionItemEvents>();\n    const watch = watchEffect;\n\n    // Inherit size/variant from a parent ore-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX);\n\n    if (accordionCtx) {\n      watch(() => {\n        const size = accordionCtx.size.value;\n        const variant = accordionCtx.variant.value;\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    let isAnimating = false;\n\n    const openItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || details.open) return;\n\n      details.classList.add('opening');\n      details.open = true;\n\n      el.toggleAttribute('expanded', true);\n      emit('expand', { expanded: true, item: el });\n\n      requestAnimationFrame(() => {\n        const inner = details.querySelector<HTMLElement>('.content-inner');\n\n        if (!inner) {\n          details.classList.remove('opening');\n          isAnimating = false;\n\n          return;\n        }\n\n        const onDone = () => {\n          details.classList.remove('opening');\n          isAnimating = false;\n        };\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      });\n    };\n\n    const closeItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || !details.open || isAnimating) return;\n\n      isAnimating = true;\n\n      details.classList.add('closing');\n\n      const inner = details.querySelector<HTMLElement>('.content-inner');\n      const onDone = () => {\n        details.classList.remove('closing');\n        details.open = false;\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n        isAnimating = false;\n      };\n\n      if (inner) {\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      } else {\n        onDone();\n      }\n    };\n\n    let touchHandled = false;\n    let touchStartY = 0;\n\n    const toggleDetails = () => {\n      if (props.disabled.value) return;\n\n      const details = detailsRef.value;\n\n      if (!details) return;\n\n      if (details.open) {\n        closeItem();\n      } else {\n        openItem();\n      }\n    };\n\n    const handleSummaryTouchStart = (e: TouchEvent) => {\n      touchStartY = e.touches[0]?.clientY ?? 0;\n    };\n\n    const handleSummaryTouchEnd = (e: TouchEvent) => {\n      const dy = Math.abs((e.changedTouches[0]?.clientY ?? 0) - touchStartY);\n\n      if (dy > 10) return;\n\n      e.preventDefault();\n      touchHandled = true;\n      toggleDetails();\n    };\n\n    const handleSummaryClick = (e: Event) => {\n      if (touchHandled) {\n        touchHandled = false;\n        e.preventDefault();\n\n        return;\n      }\n\n      e.preventDefault();\n      toggleDetails();\n    };\n\n    const handleToggle = () => {\n      // Only fires for programmatic open/close (e.g. from accordion parent)\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      if (isOpen && !wasExpanded) {\n        el.toggleAttribute('expanded', true);\n        emit('expand', { expanded: true, item: el });\n      } else if (!isOpen && wasExpanded) {\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n      }\n    };\n\n    onMounted(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL so plain CSS classes can target it (see `elementDirection` for the\n      // ancestor-dir / computed-style resolution rule).\n      const checkRTL = () => {\n        details.classList.toggle('rtl', elementDirection(el) === 'rtl');\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when `dir` changes on this element's own ancestor chain (not the whole\n      // document — `elementDirection` only ever looks at `el`'s ancestors, so that's all we\n      // need to watch).\n      const observer = new MutationObserver((mutations) => {\n        const dirChanged = mutations.some((m) => m.attributeName === 'dir');\n\n        if (dirChanged) {\n          checkRTL();\n        }\n      });\n\n      for (let ancestor: Element | null = el; ancestor; ancestor = ancestor.parentElement) {\n        observer.observe(ancestor, { attributeFilter: ['dir'], attributes: true });\n      }\n\n      details.addEventListener('toggle', handleToggle);\n      summary.addEventListener('touchstart', handleSummaryTouchStart, { passive: true });\n      summary.addEventListener('touchend', handleSummaryTouchEnd, { passive: false });\n      summary.addEventListener('click', handleSummaryClick);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n        summary.removeEventListener('touchstart', handleSummaryTouchStart);\n        summary.removeEventListener('touchend', handleSummaryTouchEnd);\n        summary.removeEventListener('click', handleSummaryClick);\n      };\n    });\n\n    return html` <details part=\"item\" ?open=\"${props.expanded}\" ref=\"${detailsRef}\">\n      <summary\n        part=\"summary\"\n        :aria-expanded=\"${() => String(props.expanded.value)}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : 'false')}\"\n        :tabindex=\"${() => (props.disabled.value ? '-1' : null)}\"\n        ref=\"${summaryRef}\">\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <ore-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}

package/dist/accordion-item.js

@@ -2,69 +2,69 @@ import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
 import { disablableBundle as t } from "./shared/prop-bundles.js";
 import { elementDirection as n } from "./headless/direction.js";
 import { ACCORDION_CTX as r } from "./accordion.js";
-import i from "./disclosure/accordion-item/accordion-item.css?inline.js";
-import { define as a, html as o, inject as s, prop as c, ref as l } from "@vielzeug/ore";
+import i from "./disclosure/accordion-item/accordion-item.css.js";
+import { define as a, getHost as o, html as s, inject as c, onMounted as l, prop as u, ref as d, useEmit as f, watchEffect as p } from "@vielzeug/ore";
 //#region src/disclosure/accordion-item/accordion-item.ts
-var u = "ore-accordion-item";
-a(u, {
+var m = "ore-accordion-item";
+a(m, {
 	props: {
 		...t,
-		expanded: c.bool(!1),
-		size: c.string(),
-		variant: c.string()
+		expanded: u.bool(!1),
+		size: u.string(),
+		variant: u.string()
 	},
-	setup(e, { el: t, emit: i, onMounted: a, watch: c }) {
-		let u = s(r);
-		u && c(() => {
+	setup(e) {
+		let t = o(), i = f(), a = p, u = c(r);
+		u && a(() => {
 			let e = u.size.value, n = u.variant.value;
 			e !== void 0 && t.setAttribute("size", e), n !== void 0 && t.setAttribute("variant", n);
 		});
-		let d = "accordion-item-title", f = l(), p = l(), m = !1, h = () => {
-			let e = f.value;
+		let m = "accordion-item-title", h = d(), g = d(), _ = !1, v = () => {
+			let e = h.value;
 			!e || e.open || (e.classList.add("opening"), e.open = !0, t.toggleAttribute("expanded", !0), i("expand", {
 				expanded: !0,
 				item: t
 			}), requestAnimationFrame(() => {
 				let t = e.querySelector(".content-inner");
 				if (!t) {
-					e.classList.remove("opening"), m = !1;
+					e.classList.remove("opening"), _ = !1;
 					return;
 				}
 				let n = () => {
-					e.classList.remove("opening"), m = !1;
+					e.classList.remove("opening"), _ = !1;
 				}, r = t.getAnimations?.().filter((e) => e instanceof CSSTransition) ?? [];
 				r.length > 0 ? Promise.allSettled(r.map((e) => e.finished)).then(n) : n();
 			}));
-		}, g = () => {
-			let e = f.value;
-			if (!e || !e.open || m) return;
-			m = !0, e.classList.add("closing");
+		}, y = () => {
+			let e = h.value;
+			if (!e || !e.open || _) return;
+			_ = !0, e.classList.add("closing");
 			let n = e.querySelector(".content-inner"), r = () => {
 				e.classList.remove("closing"), e.open = !1, t.toggleAttribute("expanded", !1), i("collapse", {
 					expanded: !1,
 					item: t
-				}), m = !1;
+				}), _ = !1;
 			};
 			if (n) {
 				let e = n.getAnimations?.().filter((e) => e instanceof CSSTransition) ?? [];
 				e.length > 0 ? Promise.allSettled(e.map((e) => e.finished)).then(r) : r();
 			} else r();
-		}, _ = !1, v = 0, y = () => {
+		}, b = !1, x = 0, S = () => {
 			if (e.disabled.value) return;
-			let t = f.value;
-			t && (t.open ? g() : h());
-		}, b = (e) => {
-			v = e.touches[0]?.clientY ?? 0;
-		}, x = (e) => {
-			Math.abs((e.changedTouches[0]?.clientY ?? 0) - v) > 10 || (e.preventDefault(), _ = !0, y());
-		}, S = (e) => {
-			if (_) {
-				_ = !1, e.preventDefault();
+			let t = h.value;
+			t && (t.open ? y() : v());
+		}, C = (e) => {
+			x = e.touches[0]?.clientY ?? 0;
+		}, w = (e) => {
+			Math.abs((e.changedTouches[0]?.clientY ?? 0) - x) > 10 || (e.preventDefault(), b = !0, S());
+		}, T = (e) => {
+			if (b) {
+				b = !1, e.preventDefault();
 				return;
 			}
-			e.preventDefault(), y();
-		}, C = () => {
-			let n = f.value?.open ?? !1, r = !!e.expanded.value;
+			e.preventDefault(), S();
+		}, E = () => {
+			let n = h.value?.open ?? !1, r = !!e.expanded.value;
 			n && !r ? (t.toggleAttribute("expanded", !0), i("expand", {
 				expanded: !0,
 				item: t
@@ -73,8 +73,8 @@ a(u, {
 				item: t
 			}));
 		};
-		return a(() => {
-			let e = f.value, r = p.value;
+		return l(() => {
+			let e = h.value, r = g.value;
 			if (!e || !r) return;
 			let i = () => {
 				e.classList.toggle("rtl", n(t) === "rtl");
@@ -87,19 +87,19 @@ a(u, {
 				attributeFilter: ["dir"],
 				attributes: !0
 			});
-			return e.addEventListener("toggle", C), r.addEventListener("touchstart", b, { passive: !0 }), r.addEventListener("touchend", x, { passive: !1 }), r.addEventListener("click", S), () => {
-				a.disconnect(), e.removeEventListener("toggle", C), r.removeEventListener("touchstart", b), r.removeEventListener("touchend", x), r.removeEventListener("click", S);
+			return e.addEventListener("toggle", E), r.addEventListener("touchstart", C, { passive: !0 }), r.addEventListener("touchend", w, { passive: !1 }), r.addEventListener("click", T), () => {
+				a.disconnect(), e.removeEventListener("toggle", E), r.removeEventListener("touchstart", C), r.removeEventListener("touchend", w), r.removeEventListener("click", T);
 			};
-		}), o` <details part="item" ?open="${e.expanded}" ref="${f}">
+		}), s` <details part="item" ?open="${e.expanded}" ref="${h}">
       <summary
         part="summary"
         :aria-expanded="${() => String(e.expanded.value)}"
         :aria-disabled="${() => e.disabled.value ? "true" : "false"}"
         :tabindex="${() => e.disabled.value ? "-1" : null}"
-        ref="${p}">
+        ref="${g}">
         <slot name="prefix"></slot>
         <div class="header-content" part="header">
-          <span class="title" part="title" id="${d}">
+          <span class="title" part="title" id="${m}">
             <slot name="title"></slot>
           </span>
           <span class="subtitle" part="subtitle">
@@ -109,7 +109,7 @@ a(u, {
         <slot name="suffix"></slot>
         <ore-icon class="chevron" name="chevron-down" size="20" stroke-width="2" aria-hidden="true"></ore-icon>
       </summary>
-      <div class="content-wrapper" part="content" role="region" aria-labelledby="${d}">
+      <div class="content-wrapper" part="content" role="region" aria-labelledby="${m}">
         <div class="content-inner">
           <slot></slot>
         </div>
@@ -119,6 +119,6 @@ a(u, {
 	styles: [e, i]
 });
 //#endregion
-export { u as ACCORDION_ITEM_TAG };
+export { m as ACCORDION_ITEM_TAG };
 
 //# sourceMappingURL=accordion-item.js.map

package/dist/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../headless/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type OreAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type OreAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element ore-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires collapse - Emitted when item collapses. detail: { expanded: boolean; item: HTMLElement }\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-hover-bg - Background color on hover\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @part item - Item root element.\n * @part summary - Summary trigger row.\n * @part header - Header container.\n * @part title - Title text element.\n * @part subtitle - Subtitle text element.\n * @part content - Content container.\n * @example\n * ```html\n * <ore-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></ore-accordion-item>\n * <ore-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></ore-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = 'ore-accordion-item' as const;\ndefine<OreAccordionItemProps, OreAccordionItemEvents>(ACCORDION_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    expanded: prop.bool(false),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props, { el, emit, onMounted, watch }) {\n    // Inherit size/variant from a parent ore-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX);\n\n    if (accordionCtx) {\n      watch(() => {\n        const size = accordionCtx.size.value;\n        const variant = accordionCtx.variant.value;\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    let isAnimating = false;\n\n    const openItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || details.open) return;\n\n      details.classList.add('opening');\n      details.open = true;\n\n      el.toggleAttribute('expanded', true);\n      emit('expand', { expanded: true, item: el });\n\n      requestAnimationFrame(() => {\n        const inner = details.querySelector<HTMLElement>('.content-inner');\n\n        if (!inner) {\n          details.classList.remove('opening');\n          isAnimating = false;\n\n          return;\n        }\n\n        const onDone = () => {\n          details.classList.remove('opening');\n          isAnimating = false;\n        };\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      });\n    };\n\n    const closeItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || !details.open || isAnimating) return;\n\n      isAnimating = true;\n\n      details.classList.add('closing');\n\n      const inner = details.querySelector<HTMLElement>('.content-inner');\n      const onDone = () => {\n        details.classList.remove('closing');\n        details.open = false;\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n        isAnimating = false;\n      };\n\n      if (inner) {\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      } else {\n        onDone();\n      }\n    };\n\n    let touchHandled = false;\n    let touchStartY = 0;\n\n    const toggleDetails = () => {\n      if (props.disabled.value) return;\n\n      const details = detailsRef.value;\n\n      if (!details) return;\n\n      if (details.open) {\n        closeItem();\n      } else {\n        openItem();\n      }\n    };\n\n    const handleSummaryTouchStart = (e: TouchEvent) => {\n      touchStartY = e.touches[0]?.clientY ?? 0;\n    };\n\n    const handleSummaryTouchEnd = (e: TouchEvent) => {\n      const dy = Math.abs((e.changedTouches[0]?.clientY ?? 0) - touchStartY);\n\n      if (dy > 10) return;\n\n      e.preventDefault();\n      touchHandled = true;\n      toggleDetails();\n    };\n\n    const handleSummaryClick = (e: Event) => {\n      if (touchHandled) {\n        touchHandled = false;\n        e.preventDefault();\n\n        return;\n      }\n\n      e.preventDefault();\n      toggleDetails();\n    };\n\n    const handleToggle = () => {\n      // Only fires for programmatic open/close (e.g. from accordion parent)\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      if (isOpen && !wasExpanded) {\n        el.toggleAttribute('expanded', true);\n        emit('expand', { expanded: true, item: el });\n      } else if (!isOpen && wasExpanded) {\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n      }\n    };\n\n    onMounted(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL so plain CSS classes can target it (see `elementDirection` for the\n      // ancestor-dir / computed-style resolution rule).\n      const checkRTL = () => {\n        details.classList.toggle('rtl', elementDirection(el) === 'rtl');\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when `dir` changes on this element's own ancestor chain (not the whole\n      // document — `elementDirection` only ever looks at `el`'s ancestors, so that's all we\n      // need to watch).\n      const observer = new MutationObserver((mutations) => {\n        const dirChanged = mutations.some((m) => m.attributeName === 'dir');\n\n        if (dirChanged) {\n          checkRTL();\n        }\n      });\n\n      for (let ancestor: Element | null = el; ancestor; ancestor = ancestor.parentElement) {\n        observer.observe(ancestor, { attributeFilter: ['dir'], attributes: true });\n      }\n\n      details.addEventListener('toggle', handleToggle);\n      summary.addEventListener('touchstart', handleSummaryTouchStart, { passive: true });\n      summary.addEventListener('touchend', handleSummaryTouchEnd, { passive: false });\n      summary.addEventListener('click', handleSummaryClick);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n        summary.removeEventListener('touchstart', handleSummaryTouchStart);\n        summary.removeEventListener('touchend', handleSummaryTouchEnd);\n        summary.removeEventListener('click', handleSummaryClick);\n      };\n    });\n\n    return html` <details part=\"item\" ?open=\"${props.expanded}\" ref=\"${detailsRef}\">\n      <summary\n        part=\"summary\"\n        :aria-expanded=\"${() => String(props.expanded.value)}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : 'false')}\"\n        :tabindex=\"${() => (props.disabled.value ? '-1' : null)}\"\n        ref=\"${summaryRef}\">\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <ore-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, getHost, onMounted, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../headless/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type OreAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type OreAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element ore-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires collapse - Emitted when item collapses. detail: { expanded: boolean; item: HTMLElement }\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-hover-bg - Background color on hover\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @part item - Item root element.\n * @part summary - Summary trigger row.\n * @part header - Header container.\n * @part title - Title text element.\n * @part subtitle - Subtitle text element.\n * @part content - Content container.\n * @example\n * ```html\n * <ore-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></ore-accordion-item>\n * <ore-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></ore-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = 'ore-accordion-item' as const;\ndefine<OreAccordionItemProps>(ACCORDION_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    expanded: prop.bool(false),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAccordionItemEvents>();\n    const watch = watchEffect;\n\n    // Inherit size/variant from a parent ore-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX);\n\n    if (accordionCtx) {\n      watch(() => {\n        const size = accordionCtx.size.value;\n        const variant = accordionCtx.variant.value;\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    let isAnimating = false;\n\n    const openItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || details.open) return;\n\n      details.classList.add('opening');\n      details.open = true;\n\n      el.toggleAttribute('expanded', true);\n      emit('expand', { expanded: true, item: el });\n\n      requestAnimationFrame(() => {\n        const inner = details.querySelector<HTMLElement>('.content-inner');\n\n        if (!inner) {\n          details.classList.remove('opening');\n          isAnimating = false;\n\n          return;\n        }\n\n        const onDone = () => {\n          details.classList.remove('opening');\n          isAnimating = false;\n        };\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      });\n    };\n\n    const closeItem = () => {\n      const details = detailsRef.value;\n\n      if (!details || !details.open || isAnimating) return;\n\n      isAnimating = true;\n\n      details.classList.add('closing');\n\n      const inner = details.querySelector<HTMLElement>('.content-inner');\n      const onDone = () => {\n        details.classList.remove('closing');\n        details.open = false;\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n        isAnimating = false;\n      };\n\n      if (inner) {\n        const transitions = inner.getAnimations?.().filter((a) => a instanceof CSSTransition) ?? [];\n\n        if (transitions.length > 0) {\n          Promise.allSettled(transitions.map((a) => a.finished)).then(onDone);\n        } else {\n          onDone();\n        }\n      } else {\n        onDone();\n      }\n    };\n\n    let touchHandled = false;\n    let touchStartY = 0;\n\n    const toggleDetails = () => {\n      if (props.disabled.value) return;\n\n      const details = detailsRef.value;\n\n      if (!details) return;\n\n      if (details.open) {\n        closeItem();\n      } else {\n        openItem();\n      }\n    };\n\n    const handleSummaryTouchStart = (e: TouchEvent) => {\n      touchStartY = e.touches[0]?.clientY ?? 0;\n    };\n\n    const handleSummaryTouchEnd = (e: TouchEvent) => {\n      const dy = Math.abs((e.changedTouches[0]?.clientY ?? 0) - touchStartY);\n\n      if (dy > 10) return;\n\n      e.preventDefault();\n      touchHandled = true;\n      toggleDetails();\n    };\n\n    const handleSummaryClick = (e: Event) => {\n      if (touchHandled) {\n        touchHandled = false;\n        e.preventDefault();\n\n        return;\n      }\n\n      e.preventDefault();\n      toggleDetails();\n    };\n\n    const handleToggle = () => {\n      // Only fires for programmatic open/close (e.g. from accordion parent)\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      if (isOpen && !wasExpanded) {\n        el.toggleAttribute('expanded', true);\n        emit('expand', { expanded: true, item: el });\n      } else if (!isOpen && wasExpanded) {\n        el.toggleAttribute('expanded', false);\n        emit('collapse', { expanded: false, item: el });\n      }\n    };\n\n    onMounted(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL so plain CSS classes can target it (see `elementDirection` for the\n      // ancestor-dir / computed-style resolution rule).\n      const checkRTL = () => {\n        details.classList.toggle('rtl', elementDirection(el) === 'rtl');\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when `dir` changes on this element's own ancestor chain (not the whole\n      // document — `elementDirection` only ever looks at `el`'s ancestors, so that's all we\n      // need to watch).\n      const observer = new MutationObserver((mutations) => {\n        const dirChanged = mutations.some((m) => m.attributeName === 'dir');\n\n        if (dirChanged) {\n          checkRTL();\n        }\n      });\n\n      for (let ancestor: Element | null = el; ancestor; ancestor = ancestor.parentElement) {\n        observer.observe(ancestor, { attributeFilter: ['dir'], attributes: true });\n      }\n\n      details.addEventListener('toggle', handleToggle);\n      summary.addEventListener('touchstart', handleSummaryTouchStart, { passive: true });\n      summary.addEventListener('touchend', handleSummaryTouchEnd, { passive: false });\n      summary.addEventListener('click', handleSummaryClick);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n        summary.removeEventListener('touchstart', handleSummaryTouchStart);\n        summary.removeEventListener('touchend', handleSummaryTouchEnd);\n        summary.removeEventListener('click', handleSummaryClick);\n      };\n    });\n\n    return html` <details part=\"item\" ?open=\"${props.expanded}\" ref=\"${detailsRef}\">\n      <summary\n        part=\"summary\"\n        :aria-expanded=\"${() => String(props.expanded.value)}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : 'false')}\"\n        :tabindex=\"${() => (props.disabled.value ? '-1' : null)}\"\n        ref=\"${summaryRef}\">\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <ore-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}

package/dist/accordion.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./headless/nav.cjs"),t=require("./disclosure/accordion/accordion.css?inline.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=(0,n.createContext)(`AccordionContext`),a=`ore-accordion`;(0,n.define)(a,{props:{selectionMode:n.prop.string(),size:n.prop.string(),variant:n.prop.string()},setup(t,{bind:a,el:o,emit:s,provide:c}){let l=e=>{t.selectionMode.value===`single`&&(o.querySelectorAll(`:scope > ore-accordion-item[expanded]`).forEach(t=>{t!==e&&t.hasAttribute(`expanded`)&&t.removeAttribute(`expanded`)}),s(`change`,{expandedItem:e}))},u=()=>[...o.querySelectorAll(`:scope > ore-accordion-item:not([disabled])`)],d=()=>u().map(e=>e.shadowRoot?.querySelector(`summary`)).filter(Boolean),f=e.createListControl({getItems:()=>u(),loop:!0,onNavigate:(e,t)=>{d()[t]?.focus()}});return c(i,{selectionMode:(0,r.computed)(()=>t.selectionMode.value),size:t.size,variant:t.variant}),a({on:{expand:e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement),n=e.detail?.item??t;!n||n.localName!==`ore-accordion-item`||n.closest(`ore-accordion`)===o&&l(n)},keydown:e=>{let t=d();if(!t.length)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`summary`),r=n?t.indexOf(n):-1;r!==-1&&(f.set(r),f.handleKeydown(e))}}}),n.html`<slot></slot>`},styles:[t.default]}),exports.ACCORDION_CTX=i,exports.ACCORDION_TAG=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./headless/nav.cjs"),t=require("./disclosure/accordion/accordion.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=(0,n.createContext)(`AccordionContext`),a=`ore-accordion`;(0,n.define)(a,{props:{selectionMode:n.prop.string(),size:n.prop.string(),variant:n.prop.string()},setup(t){let a=(0,n.getHost)(),o=(0,n.useEmit)(),s=e=>{t.selectionMode.value===`single`&&(a.querySelectorAll(`:scope > ore-accordion-item[expanded]`).forEach(t=>{t!==e&&t.hasAttribute(`expanded`)&&t.removeAttribute(`expanded`)}),o(`change`,{expandedItem:e}))},c=()=>[...a.querySelectorAll(`:scope > ore-accordion-item:not([disabled])`)],l=()=>c().map(e=>e.shadowRoot?.querySelector(`summary`)).filter(Boolean),u=e.createListControl({getItems:()=>c(),loop:!0,onNavigate:(e,t)=>{l()[t]?.focus()}});return(0,n.provide)(i,{selectionMode:(0,r.computed)(()=>t.selectionMode.value),size:t.size,variant:t.variant}),(0,n.bind)({on:{expand:e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement),n=e.detail?.item??t;!n||n.localName!==`ore-accordion-item`||n.closest(`ore-accordion`)===a&&s(n)},keydown:e=>{let t=l();if(!t.length)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`summary`),r=n?t.indexOf(n):-1;r!==-1&&(u.set(r),u.handleKeydown(e))}}}),n.html`<slot></slot>`},styles:[t.default]}),exports.ACCORDION_CTX=i,exports.ACCORDION_TAG=a;
 //# sourceMappingURL=accordion.cjs.map

package/dist/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { createContext, define, html, prop } from '@vielzeug/ore';\nimport { computed, type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport styles from './accordion.css?inline';\n\n/** Context provided by ore-accordion to its ore-accordion-item children. */\nexport type AccordionContext = {\n  selectionMode: Readable<'single' | 'multiple' | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\n/** Accordion component properties */\n\nexport type OreAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type OreAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element ore-accordion\n * @element ore-accordion-item - Child element for each collapsible panel\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires change - Emitted when selection changes (single mode). detail: { expandedItem: HTMLElement }\n *\n * @slot - `ore-accordion-item` elements\n *\n * @cssprop --accordion-bg - Container background color (solid/flat/glass/frost variants)\n * @cssprop --accordion-border-color - Container border color (solid/flat variants)\n * @cssprop --accordion-divider-color - Divider color between items (text variant)\n * @cssprop --accordion-shadow - Container box shadow\n * @example\n * ```html\n * <ore-accordion selection-mode=\"single\">\n *   <ore-accordion-item>\n *     <span slot=\"title\">What is Refine?</span>\n *     <p>Refine is a headless web component library.</p>\n *   </ore-accordion-item>\n *   <ore-accordion-item>\n *     <span slot=\"title\">How do I install it?</span>\n *     <p>Run <code>npm install @vielzeug/refine</code>.</p>\n *   </ore-accordion-item>\n * </ore-accordion>\n * <ore-accordion variant=\"bordered\" selection-mode=\"multiple\">\n *   <ore-accordion-item expanded><span slot=\"title\">Open by default</span><p>Content</p></ore-accordion-item>\n * </ore-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = 'ore-accordion' as const;\ndefine<OreAccordionProps, OreAccordionEvents>(ACCORDION_TAG, {\n  props: {\n    selectionMode: prop.string<'single' | 'multiple'>(),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props, { bind, el, emit, provide }) {\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value !== 'single') return;\n\n      el.querySelectorAll(':scope > ore-accordion-item[expanded]').forEach((item) => {\n        if (item !== expandedItem && item.hasAttribute('expanded')) {\n          item.removeAttribute('expanded');\n        }\n      });\n\n      emit('change', { expandedItem });\n    };\n\n    const getAccordionItems = () => {\n      return [...el.querySelectorAll<HTMLElement>(':scope > ore-accordion-item:not([disabled])')];\n    };\n\n    const getSummaryElements = () => {\n      return getAccordionItems()\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n    };\n\n    const listControl = createListControl({\n      getItems: () => getAccordionItems(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n\n    bind({\n      on: {\n        expand: (event: Event) => {\n          const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n          const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n          if (!expandedItem || expandedItem.localName !== 'ore-accordion-item') return;\n\n          // Guard: only respond to accordion-items that belong to THIS accordion instance\n          if (expandedItem.closest('ore-accordion') !== el) return;\n\n          handleSelectionMode(expandedItem);\n        },\n        keydown: (evt: KeyboardEvent) => {\n          const summaries = getSummaryElements();\n\n          if (!summaries.length) return;\n\n          const activeSummary = evt\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'summary');\n          const focused = activeSummary ? summaries.indexOf(activeSummary) : -1;\n\n          if (focused === -1) return; // focus is not on a summary — let native handling proceed\n\n          listControl.set(focused);\n          listControl.handleKeydown(evt);\n        },\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"mOAeA,IAAa,GAAA,EAAA,EAAA,cAAA,CAAgD,kBAAkB,EAsDlE,EAAgB,6BACiB,EAAe,CAC3D,MAAO,CACL,cAAe,EAAA,KAAK,OAA8B,EAClD,KAAM,EAAA,KAAK,OAAsB,EACjC,QAAS,EAAA,KAAK,OAAuB,CACvC,EAEA,MAAM,EAAO,CAAE,OAAM,KAAI,OAAM,WAAW,CACxC,IAAM,EAAuB,GAA8B,CACrD,EAAM,cAAc,QAAU,WAElC,EAAG,iBAAiB,uCAAuC,CAAC,CAAC,QAAS,GAAS,CACzE,IAAS,GAAgB,EAAK,aAAa,UAAU,GACvD,EAAK,gBAAgB,UAAU,CAEnC,CAAC,EAED,EAAK,SAAU,CAAE,cAAa,CAAC,EACjC,EAEM,MACG,CAAC,GAAG,EAAG,iBAA8B,6CAA6C,CAAC,EAGtF,MACG,EAAkB,CAAC,CACvB,IAAK,GAAS,EAAK,YAAY,cAA2B,SAAS,CAAC,CAAC,CACrE,OAAO,OAAO,EAGb,EAAc,EAAA,kBAAkB,CACpC,aAAgB,EAAkB,EAClC,KAAM,GACN,YAAa,EAAS,IAAU,CAG9B,EAAA,CAAA,CAAU,EAAM,EAAE,MAAM,CAC1B,CACF,CAAC,EAyCD,OAvCA,EAAQ,EAAe,CACrB,eAAA,EAAA,EAAA,SAAA,KAA8B,EAAM,cAAc,KAAK,EACvD,KAAM,EAAM,KACZ,QAAS,EAAM,OACjB,CAAC,EAID,EAAK,CACH,GAAI,CACF,OAAS,GAAiB,CACxB,IAAM,EAAc,EAAM,aAAa,CAAC,CAAC,KAAM,GAA8B,aAAgB,WAAW,EAClG,EAAgB,EAA8C,QAAQ,MAAQ,EAEhF,CAAC,GAAgB,EAAa,YAAc,sBAG5C,EAAa,QAAQ,eAAe,IAAM,GAE9C,EAAoB,CAAY,CAClC,EACA,QAAU,GAAuB,CAC/B,IAAM,EAAY,EAAmB,EAErC,GAAI,CAAC,EAAU,OAAQ,OAEvB,IAAM,EAAgB,EACnB,aAAa,CAAC,CACd,KAAM,GAA8B,aAAgB,aAAe,EAAK,YAAc,SAAS,EAC5F,EAAU,EAAgB,EAAU,QAAQ,CAAa,EAAI,GAE/D,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAG,EAC/B,CACF,CACF,CAAC,EAEM,EAAA,IAAI,eACb,EAEA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}
+{"version":3,"file":"accordion.cjs","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { createContext, define, html, prop, bind, getHost, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport styles from './accordion.css?inline';\n\n/** Context provided by ore-accordion to its ore-accordion-item children. */\nexport type AccordionContext = {\n  selectionMode: Readable<'single' | 'multiple' | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\n/** Accordion component properties */\n\nexport type OreAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type OreAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element ore-accordion\n * @element ore-accordion-item - Child element for each collapsible panel\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires change - Emitted when selection changes (single mode). detail: { expandedItem: HTMLElement }\n *\n * @slot - `ore-accordion-item` elements\n *\n * @cssprop --accordion-bg - Container background color (solid/flat/glass/frost variants)\n * @cssprop --accordion-border-color - Container border color (solid/flat variants)\n * @cssprop --accordion-divider-color - Divider color between items (text variant)\n * @cssprop --accordion-shadow - Container box shadow\n * @example\n * ```html\n * <ore-accordion selection-mode=\"single\">\n *   <ore-accordion-item>\n *     <span slot=\"title\">What is Refine?</span>\n *     <p>Refine is a headless web component library.</p>\n *   </ore-accordion-item>\n *   <ore-accordion-item>\n *     <span slot=\"title\">How do I install it?</span>\n *     <p>Run <code>npm install @vielzeug/refine</code>.</p>\n *   </ore-accordion-item>\n * </ore-accordion>\n * <ore-accordion variant=\"bordered\" selection-mode=\"multiple\">\n *   <ore-accordion-item expanded><span slot=\"title\">Open by default</span><p>Content</p></ore-accordion-item>\n * </ore-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = 'ore-accordion' as const;\ndefine<OreAccordionProps>(ACCORDION_TAG, {\n  props: {\n    selectionMode: prop.string<'single' | 'multiple'>(),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAccordionEvents>();\n\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value !== 'single') return;\n\n      el.querySelectorAll(':scope > ore-accordion-item[expanded]').forEach((item) => {\n        if (item !== expandedItem && item.hasAttribute('expanded')) {\n          item.removeAttribute('expanded');\n        }\n      });\n\n      emit('change', { expandedItem });\n    };\n\n    const getAccordionItems = () => {\n      return [...el.querySelectorAll<HTMLElement>(':scope > ore-accordion-item:not([disabled])')];\n    };\n\n    const getSummaryElements = () => {\n      return getAccordionItems()\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n    };\n\n    const listControl = createListControl({\n      getItems: () => getAccordionItems(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n\n    bind({\n      on: {\n        expand: (event: Event) => {\n          const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n          const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n          if (!expandedItem || expandedItem.localName !== 'ore-accordion-item') return;\n\n          // Guard: only respond to accordion-items that belong to THIS accordion instance\n          if (expandedItem.closest('ore-accordion') !== el) return;\n\n          handleSelectionMode(expandedItem);\n        },\n        keydown: (evt: KeyboardEvent) => {\n          const summaries = getSummaryElements();\n\n          if (!summaries.length) return;\n\n          const activeSummary = evt\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'summary');\n          const focused = activeSummary ? summaries.indexOf(activeSummary) : -1;\n\n          if (focused === -1) return; // focus is not on a summary — let native handling proceed\n\n          listControl.set(focused);\n          listControl.handleKeydown(evt);\n        },\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"4NAeA,IAAa,GAAA,EAAA,EAAA,cAAA,CAAgD,kBAAkB,EAsDlE,EAAgB,6BACH,EAAe,CACvC,MAAO,CACL,cAAe,EAAA,KAAK,OAA8B,EAClD,KAAM,EAAA,KAAK,OAAsB,EACjC,QAAS,EAAA,KAAK,OAAuB,CACvC,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAAmC,EAEnC,EAAuB,GAA8B,CACrD,EAAM,cAAc,QAAU,WAElC,EAAG,iBAAiB,uCAAuC,CAAC,CAAC,QAAS,GAAS,CACzE,IAAS,GAAgB,EAAK,aAAa,UAAU,GACvD,EAAK,gBAAgB,UAAU,CAEnC,CAAC,EAED,EAAK,SAAU,CAAE,cAAa,CAAC,EACjC,EAEM,MACG,CAAC,GAAG,EAAG,iBAA8B,6CAA6C,CAAC,EAGtF,MACG,EAAkB,CAAC,CACvB,IAAK,GAAS,EAAK,YAAY,cAA2B,SAAS,CAAC,CAAC,CACrE,OAAO,OAAO,EAGb,EAAc,EAAA,kBAAkB,CACpC,aAAgB,EAAkB,EAClC,KAAM,GACN,YAAa,EAAS,IAAU,CAG9B,EAAA,CAAA,CAAU,EAAM,EAAE,MAAM,CAC1B,CACF,CAAC,EAyCD,OAvCA,EAAA,EAAA,QAAA,CAAQ,EAAe,CACrB,eAAA,EAAA,EAAA,SAAA,KAA8B,EAAM,cAAc,KAAK,EACvD,KAAM,EAAM,KACZ,QAAS,EAAM,OACjB,CAAC,GAID,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,OAAS,GAAiB,CACxB,IAAM,EAAc,EAAM,aAAa,CAAC,CAAC,KAAM,GAA8B,aAAgB,WAAW,EAClG,EAAgB,EAA8C,QAAQ,MAAQ,EAEhF,CAAC,GAAgB,EAAa,YAAc,sBAG5C,EAAa,QAAQ,eAAe,IAAM,GAE9C,EAAoB,CAAY,CAClC,EACA,QAAU,GAAuB,CAC/B,IAAM,EAAY,EAAmB,EAErC,GAAI,CAAC,EAAU,OAAQ,OAEvB,IAAM,EAAgB,EACnB,aAAa,CAAC,CACd,KAAM,GAA8B,aAAgB,aAAe,EAAK,YAAc,SAAS,EAC5F,EAAU,EAAgB,EAAU,QAAQ,CAAa,EAAI,GAE/D,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAG,EAC/B,CACF,CACF,CAAC,EAEM,EAAA,IAAI,eACb,EAEA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}

package/dist/accordion.js

@@ -1,47 +1,47 @@
 import { createListControl as e } from "./headless/nav.js";
-import t from "./disclosure/accordion/accordion.css?inline.js";
-import { createContext as n, define as r, html as i, prop as a } from "@vielzeug/ore";
-import { computed as o } from "@vielzeug/ripple";
+import t from "./disclosure/accordion/accordion.css.js";
+import { bind as n, createContext as r, define as i, getHost as a, html as o, prop as s, provide as c, useEmit as l } from "@vielzeug/ore";
+import { computed as u } from "@vielzeug/ripple";
 //#region src/disclosure/accordion/accordion.ts
-var s = n("AccordionContext"), c = "ore-accordion";
-r(c, {
+var d = r("AccordionContext"), f = "ore-accordion";
+i(f, {
 	props: {
-		selectionMode: a.string(),
-		size: a.string(),
-		variant: a.string()
+		selectionMode: s.string(),
+		size: s.string(),
+		variant: s.string()
 	},
-	setup(t, { bind: n, el: r, emit: a, provide: c }) {
-		let l = (e) => {
+	setup(t) {
+		let r = a(), i = l(), s = (e) => {
 			t.selectionMode.value === "single" && (r.querySelectorAll(":scope > ore-accordion-item[expanded]").forEach((t) => {
 				t !== e && t.hasAttribute("expanded") && t.removeAttribute("expanded");
-			}), a("change", { expandedItem: e }));
-		}, u = () => [...r.querySelectorAll(":scope > ore-accordion-item:not([disabled])")], d = () => u().map((e) => e.shadowRoot?.querySelector("summary")).filter(Boolean), f = e({
-			getItems: () => u(),
+			}), i("change", { expandedItem: e }));
+		}, f = () => [...r.querySelectorAll(":scope > ore-accordion-item:not([disabled])")], p = () => f().map((e) => e.shadowRoot?.querySelector("summary")).filter(Boolean), m = e({
+			getItems: () => f(),
 			loop: !0,
 			onNavigate: (e, t) => {
-				d()[t]?.focus();
+				p()[t]?.focus();
 			}
 		});
-		return c(s, {
-			selectionMode: o(() => t.selectionMode.value),
+		return c(d, {
+			selectionMode: u(() => t.selectionMode.value),
 			size: t.size,
 			variant: t.variant
 		}), n({ on: {
 			expand: (e) => {
 				let t = e.composedPath().find((e) => e instanceof HTMLElement), n = e.detail?.item ?? t;
-				!n || n.localName !== "ore-accordion-item" || n.closest("ore-accordion") === r && l(n);
+				!n || n.localName !== "ore-accordion-item" || n.closest("ore-accordion") === r && s(n);
 			},
 			keydown: (e) => {
-				let t = d();
+				let t = p();
 				if (!t.length) return;
 				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "summary"), r = n ? t.indexOf(n) : -1;
-				r !== -1 && (f.set(r), f.handleKeydown(e));
+				r !== -1 && (m.set(r), m.handleKeydown(e));
 			}
-		} }), i`<slot></slot>`;
+		} }), o`<slot></slot>`;
 	},
 	styles: [t]
 });
 //#endregion
-export { s as ACCORDION_CTX, c as ACCORDION_TAG };
+export { d as ACCORDION_CTX, f as ACCORDION_TAG };
 
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { createContext, define, html, prop } from '@vielzeug/ore';\nimport { computed, type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport styles from './accordion.css?inline';\n\n/** Context provided by ore-accordion to its ore-accordion-item children. */\nexport type AccordionContext = {\n  selectionMode: Readable<'single' | 'multiple' | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\n/** Accordion component properties */\n\nexport type OreAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type OreAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element ore-accordion\n * @element ore-accordion-item - Child element for each collapsible panel\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires change - Emitted when selection changes (single mode). detail: { expandedItem: HTMLElement }\n *\n * @slot - `ore-accordion-item` elements\n *\n * @cssprop --accordion-bg - Container background color (solid/flat/glass/frost variants)\n * @cssprop --accordion-border-color - Container border color (solid/flat variants)\n * @cssprop --accordion-divider-color - Divider color between items (text variant)\n * @cssprop --accordion-shadow - Container box shadow\n * @example\n * ```html\n * <ore-accordion selection-mode=\"single\">\n *   <ore-accordion-item>\n *     <span slot=\"title\">What is Refine?</span>\n *     <p>Refine is a headless web component library.</p>\n *   </ore-accordion-item>\n *   <ore-accordion-item>\n *     <span slot=\"title\">How do I install it?</span>\n *     <p>Run <code>npm install @vielzeug/refine</code>.</p>\n *   </ore-accordion-item>\n * </ore-accordion>\n * <ore-accordion variant=\"bordered\" selection-mode=\"multiple\">\n *   <ore-accordion-item expanded><span slot=\"title\">Open by default</span><p>Content</p></ore-accordion-item>\n * </ore-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = 'ore-accordion' as const;\ndefine<OreAccordionProps, OreAccordionEvents>(ACCORDION_TAG, {\n  props: {\n    selectionMode: prop.string<'single' | 'multiple'>(),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props, { bind, el, emit, provide }) {\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value !== 'single') return;\n\n      el.querySelectorAll(':scope > ore-accordion-item[expanded]').forEach((item) => {\n        if (item !== expandedItem && item.hasAttribute('expanded')) {\n          item.removeAttribute('expanded');\n        }\n      });\n\n      emit('change', { expandedItem });\n    };\n\n    const getAccordionItems = () => {\n      return [...el.querySelectorAll<HTMLElement>(':scope > ore-accordion-item:not([disabled])')];\n    };\n\n    const getSummaryElements = () => {\n      return getAccordionItems()\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n    };\n\n    const listControl = createListControl({\n      getItems: () => getAccordionItems(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n\n    bind({\n      on: {\n        expand: (event: Event) => {\n          const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n          const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n          if (!expandedItem || expandedItem.localName !== 'ore-accordion-item') return;\n\n          // Guard: only respond to accordion-items that belong to THIS accordion instance\n          if (expandedItem.closest('ore-accordion') !== el) return;\n\n          handleSelectionMode(expandedItem);\n        },\n        keydown: (evt: KeyboardEvent) => {\n          const summaries = getSummaryElements();\n\n          if (!summaries.length) return;\n\n          const activeSummary = evt\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'summary');\n          const focused = activeSummary ? summaries.indexOf(activeSummary) : -1;\n\n          if (focused === -1) return; // focus is not on a summary — let native handling proceed\n\n          listControl.set(focused);\n          listControl.handleKeydown(evt);\n        },\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":";;;;;AAeA,IAAa,IAAgB,EAAgC,kBAAkB,GAsDlE,IAAgB;AAC7B,EAA8C,GAAe;CAC3D,OAAO;EACL,eAAe,EAAK,OAA8B;EAClD,MAAM,EAAK,OAAsB;EACjC,SAAS,EAAK,OAAuB;CACvC;CAEA,MAAM,GAAO,EAAE,SAAM,OAAI,SAAM,cAAW;EACxC,IAAM,KAAuB,MAA8B;GACrD,EAAM,cAAc,UAAU,aAElC,EAAG,iBAAiB,uCAAuC,CAAC,CAAC,SAAS,MAAS;IAC7E,AAAI,MAAS,KAAgB,EAAK,aAAa,UAAU,KACvD,EAAK,gBAAgB,UAAU;GAEnC,CAAC,GAED,EAAK,UAAU,EAAE,gBAAa,CAAC;EACjC,GAEM,UACG,CAAC,GAAG,EAAG,iBAA8B,6CAA6C,CAAC,GAGtF,UACG,EAAkB,CAAC,CACvB,KAAK,MAAS,EAAK,YAAY,cAA2B,SAAS,CAAC,CAAC,CACrE,OAAO,OAAO,GAGb,IAAc,EAAkB;GACpC,gBAAgB,EAAkB;GAClC,MAAM;GACN,aAAa,GAAS,MAAU;IAG9B,EAAA,CAAA,CAAU,EAAM,EAAE,MAAM;GAC1B;EACF,CAAC;EAyCD,OAvCA,EAAQ,GAAe;GACrB,eAAe,QAAe,EAAM,cAAc,KAAK;GACvD,MAAM,EAAM;GACZ,SAAS,EAAM;EACjB,CAAC,GAID,EAAK,EACH,IAAI;GACF,SAAS,MAAiB;IACxB,IAAM,IAAc,EAAM,aAAa,CAAC,CAAC,MAAM,MAA8B,aAAgB,WAAW,GAClG,IAAgB,EAA8C,QAAQ,QAAQ;IAEhF,CAAC,KAAgB,EAAa,cAAc,wBAG5C,EAAa,QAAQ,eAAe,MAAM,KAE9C,EAAoB,CAAY;GAClC;GACA,UAAU,MAAuB;IAC/B,IAAM,IAAY,EAAmB;IAErC,IAAI,CAAC,EAAU,QAAQ;IAEvB,IAAM,IAAgB,EACnB,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,cAAc,SAAS,GAC5F,IAAU,IAAgB,EAAU,QAAQ,CAAa,IAAI;IAE/D,MAAY,OAEhB,EAAY,IAAI,CAAO,GACvB,EAAY,cAAc,CAAG;GAC/B;EACF,EACF,CAAC,GAEM,CAAI;CACb;CAEA,QAAQ,CAAC,CAAM;AACjB,CAAC"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { createContext, define, html, prop, bind, getHost, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport { createListControl } from '../../headless';\nimport styles from './accordion.css?inline';\n\n/** Context provided by ore-accordion to its ore-accordion-item children. */\nexport type AccordionContext = {\n  selectionMode: Readable<'single' | 'multiple' | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\n/** Accordion component properties */\n\nexport type OreAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type OreAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element ore-accordion\n * @element ore-accordion-item - Child element for each collapsible panel\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands. detail: { expanded: boolean; item: HTMLElement }\n * @fires change - Emitted when selection changes (single mode). detail: { expandedItem: HTMLElement }\n *\n * @slot - `ore-accordion-item` elements\n *\n * @cssprop --accordion-bg - Container background color (solid/flat/glass/frost variants)\n * @cssprop --accordion-border-color - Container border color (solid/flat variants)\n * @cssprop --accordion-divider-color - Divider color between items (text variant)\n * @cssprop --accordion-shadow - Container box shadow\n * @example\n * ```html\n * <ore-accordion selection-mode=\"single\">\n *   <ore-accordion-item>\n *     <span slot=\"title\">What is Refine?</span>\n *     <p>Refine is a headless web component library.</p>\n *   </ore-accordion-item>\n *   <ore-accordion-item>\n *     <span slot=\"title\">How do I install it?</span>\n *     <p>Run <code>npm install @vielzeug/refine</code>.</p>\n *   </ore-accordion-item>\n * </ore-accordion>\n * <ore-accordion variant=\"bordered\" selection-mode=\"multiple\">\n *   <ore-accordion-item expanded><span slot=\"title\">Open by default</span><p>Content</p></ore-accordion-item>\n * </ore-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = 'ore-accordion' as const;\ndefine<OreAccordionProps>(ACCORDION_TAG, {\n  props: {\n    selectionMode: prop.string<'single' | 'multiple'>(),\n    size: prop.string<ComponentSize>(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAccordionEvents>();\n\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value !== 'single') return;\n\n      el.querySelectorAll(':scope > ore-accordion-item[expanded]').forEach((item) => {\n        if (item !== expandedItem && item.hasAttribute('expanded')) {\n          item.removeAttribute('expanded');\n        }\n      });\n\n      emit('change', { expandedItem });\n    };\n\n    const getAccordionItems = () => {\n      return [...el.querySelectorAll<HTMLElement>(':scope > ore-accordion-item:not([disabled])')];\n    };\n\n    const getSummaryElements = () => {\n      return getAccordionItems()\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n    };\n\n    const listControl = createListControl({\n      getItems: () => getAccordionItems(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n\n    bind({\n      on: {\n        expand: (event: Event) => {\n          const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n          const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n          if (!expandedItem || expandedItem.localName !== 'ore-accordion-item') return;\n\n          // Guard: only respond to accordion-items that belong to THIS accordion instance\n          if (expandedItem.closest('ore-accordion') !== el) return;\n\n          handleSelectionMode(expandedItem);\n        },\n        keydown: (evt: KeyboardEvent) => {\n          const summaries = getSummaryElements();\n\n          if (!summaries.length) return;\n\n          const activeSummary = evt\n            .composedPath()\n            .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'summary');\n          const focused = activeSummary ? summaries.indexOf(activeSummary) : -1;\n\n          if (focused === -1) return; // focus is not on a summary — let native handling proceed\n\n          listControl.set(focused);\n          listControl.handleKeydown(evt);\n        },\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":";;;;;AAeA,IAAa,IAAgB,EAAgC,kBAAkB,GAsDlE,IAAgB;AAC7B,EAA0B,GAAe;CACvC,OAAO;EACL,eAAe,EAAK,OAA8B;EAClD,MAAM,EAAK,OAAsB;EACjC,SAAS,EAAK,OAAuB;CACvC;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA4B,GAEnC,KAAuB,MAA8B;GACrD,EAAM,cAAc,UAAU,aAElC,EAAG,iBAAiB,uCAAuC,CAAC,CAAC,SAAS,MAAS;IAC7E,AAAI,MAAS,KAAgB,EAAK,aAAa,UAAU,KACvD,EAAK,gBAAgB,UAAU;GAEnC,CAAC,GAED,EAAK,UAAU,EAAE,gBAAa,CAAC;EACjC,GAEM,UACG,CAAC,GAAG,EAAG,iBAA8B,6CAA6C,CAAC,GAGtF,UACG,EAAkB,CAAC,CACvB,KAAK,MAAS,EAAK,YAAY,cAA2B,SAAS,CAAC,CAAC,CACrE,OAAO,OAAO,GAGb,IAAc,EAAkB;GACpC,gBAAgB,EAAkB;GAClC,MAAM;GACN,aAAa,GAAS,MAAU;IAG9B,EAAA,CAAA,CAAU,EAAM,EAAE,MAAM;GAC1B;EACF,CAAC;EAyCD,OAvCA,EAAQ,GAAe;GACrB,eAAe,QAAe,EAAM,cAAc,KAAK;GACvD,MAAM,EAAM;GACZ,SAAS,EAAM;EACjB,CAAC,GAID,EAAK,EACH,IAAI;GACF,SAAS,MAAiB;IACxB,IAAM,IAAc,EAAM,aAAa,CAAC,CAAC,MAAM,MAA8B,aAAgB,WAAW,GAClG,IAAgB,EAA8C,QAAQ,QAAQ;IAEhF,CAAC,KAAgB,EAAa,cAAc,wBAG5C,EAAa,QAAQ,eAAe,MAAM,KAE9C,EAAoB,CAAY;GAClC;GACA,UAAU,MAAuB;IAC/B,IAAM,IAAY,EAAmB;IAErC,IAAI,CAAC,EAAU,QAAQ;IAEvB,IAAM,IAAgB,EACnB,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,cAAc,SAAS,GAC5F,IAAU,IAAgB,EAAU,QAAQ,CAAa,IAAI;IAE/D,MAAY,OAEhB,EAAY,IAAI,CAAO,GACvB,EAAY,cAAc,CAAG;GAC/B;EACF,EACF,CAAC,GAEM,CAAI;CACb;CAEA,QAAQ,CAAC,CAAM;AACjB,CAAC"}

package/dist/alert.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./overlay/shared/await-exit.cjs"),a=require("./feedback/alert/alert.css?inline.cjs");let o=require("@vielzeug/ore");var s=`ore-alert`;(0,o.define)(s,{props:{...r.themableBundle,...r.sizableBundle,...r.roundableBundle,accented:o.prop.bool(!1),dismissible:o.prop.bool(!1),heading:o.prop.string(),horizontal:o.prop.bool(!1),variant:o.prop.string()},setup(e,{bind:t,el:n,emit:r,slots:a}){let s=null,c=e=>{s&&(s.textContent=``,requestAnimationFrame(()=>{s&&(s.textContent=e)}))};return o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./overlay/shared/await-exit.cjs"),a=require("./feedback/alert/alert.css.cjs");let o=require("@vielzeug/ore");var s=`ore-alert`;(0,o.define)(s,{props:{...r.themableBundle,...r.sizableBundle,...r.roundableBundle,accented:o.prop.bool(!1),dismissible:o.prop.bool(!1),heading:o.prop.string(),horizontal:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),a=null,s=e=>{a&&(a.textContent=``,requestAnimationFrame(()=>{a&&(a.textContent=e)}))};return o.html`
       <span
         class="sr-announce"
         aria-live="polite"
         aria-atomic="true"
-        ref="${e=>{s=e}}"></span>
+        ref="${e=>{a=e}}"></span>
       <div class="alert" :role="${()=>e.color.value===`error`?`alert`:`status`}" part="alert">
-        <span class="icon" part="icon" aria-hidden="true" ?hidden="${()=>!a.has(`icon`).value}">
+        <span class="icon" part="icon" aria-hidden="true" ?hidden="${()=>!r.has(`icon`).value}">
           <slot name="icon"></slot>
         </span>
         <div class="header" part="header" ?hidden="${()=>!e.heading.value}">
@@ -19,7 +19,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <slot></slot>
           </div>
         </div>
-        <div class="actions" part="actions" ?hidden="${()=>!a.has(`actions`).value}">
+        <div class="actions" part="actions" ?hidden="${()=>!r.has(`actions`).value}">
           <slot name="actions"></slot>
         </div>
         <button
@@ -28,7 +28,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           type="button"
           aria-label="Dismiss alert"
           ?hidden="${()=>!e.dismissible.value}"
-          @click="${t=>{e.dismissible.value&&(n.setAttribute(`dismissing`,``),i.awaitExit(n,()=>{n.removeAttribute(`dismissing`),n.setAttribute(`dismissed`,``),c(`Alert dismissed`),r(`dismiss`,{originalEvent:t})}))}}">
+          @click="${r=>{e.dismissible.value&&(t.setAttribute(`dismissing`,``),i.awaitExit(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),s(`Alert dismissed`),n(`dismiss`,{originalEvent:r})}))}}">
           <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </div>

package/dist/alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert.cjs","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './alert.css?inline';\n\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissible (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed. detail: { originalEvent: MouseEvent }\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-shadow - Box shadow\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps, OreAlertEvents>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.string<'solid' | 'flat' | 'bordered'>(),\n  },\n  setup(props, { bind: _bind, el, emit, slots }) {\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => (props.color.value === 'error' ? 'alert' : 'status');\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" :role=\"${alertRole}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=\"${() => !slots.has('icon').value}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=\"${() => !props.heading.value}\">\n          <span class=\"heading\" part=\"heading\">${props.heading}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=\"${() => !props.dismissible.value}\"\n          @click=\"${handleDismiss}\">\n          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"wXAuFA,IAAa,EAAY,yBACa,EAAW,CAC/C,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,QAAS,EAAA,KAAK,OAAO,EACrB,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,QAAS,EAAA,KAAK,OAAsC,CACtD,EACA,MAAM,EAAO,CAAE,KAAM,EAAO,KAAI,OAAM,SAAS,CAC7C,IAAI,EAAiC,KAE/B,EAAY,GAAoB,CAC/B,IAEL,EAAW,YAAc,GACzB,0BAA4B,CACtB,IAAY,EAAW,YAAc,EAC3C,CAAC,EACH,EAgBA,MAAO,GAAA,IAAI;;;;;eAKC,GAAqB,CAC3B,EAAa,CACf,EAAE;sCATmB,EAAM,MAAM,QAAU,QAAU,QAAU,SAU3B;yEAC+B,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;yDAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;2DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;yBAQ9D,CAAC,EAAM,YAAY,MAAM;oBA7CzB,GAAkB,CAClC,EAAM,YAAY,QAEvB,EAAG,aAAa,aAAc,EAAE,EAChC,EAAA,UAAU,MAAU,CAClB,EAAG,gBAAgB,YAAY,EAC/B,EAAG,aAAa,YAAa,EAAE,EAC/B,EAAS,iBAAiB,EAC1B,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,CACtC,CAAC,EACH,EAoC8B;;;;KAKhC,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,iBAAkB,EACxG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,eAAgB,CACtG,CAAC,EACD,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"alert.cjs","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, html, prop, getHost, useEmit, useSlots } from '@vielzeug/ore';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './alert.css?inline';\n\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissible (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed. detail: { originalEvent: MouseEvent }\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-shadow - Box shadow\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.string<'solid' | 'flat' | 'bordered'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAlertEvents>();\n    const slots = useSlots();\n\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => (props.color.value === 'error' ? 'alert' : 'status');\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" :role=\"${alertRole}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=\"${() => !slots.has('icon').value}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=\"${() => !props.heading.value}\">\n          <span class=\"heading\" part=\"heading\">${props.heading}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=\"${() => !props.dismissible.value}\"\n          @click=\"${handleDismiss}\">\n          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"iXAuFA,IAAa,EAAY,yBACH,EAAW,CAC/B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,QAAS,EAAA,KAAK,OAAO,EACrB,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,QAAS,EAAA,KAAK,OAAsC,CACtD,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAA+B,EAC/B,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEnB,EAAiC,KAE/B,EAAY,GAAoB,CAC/B,IAEL,EAAW,YAAc,GACzB,0BAA4B,CACtB,IAAY,EAAW,YAAc,EAC3C,CAAC,EACH,EAgBA,MAAO,GAAA,IAAI;;;;;eAKC,GAAqB,CAC3B,EAAa,CACf,EAAE;sCATmB,EAAM,MAAM,QAAU,QAAU,QAAU,SAU3B;yEAC+B,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;yDAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;2DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;yBAQ9D,CAAC,EAAM,YAAY,MAAM;oBA7CzB,GAAkB,CAClC,EAAM,YAAY,QAEvB,EAAG,aAAa,aAAc,EAAE,EAChC,EAAA,UAAU,MAAU,CAClB,EAAG,gBAAgB,YAAY,EAC/B,EAAG,aAAa,YAAa,EAAE,EAC/B,EAAS,iBAAiB,EAC1B,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,CACtC,CAAC,EACH,EAoC8B;;;;KAKhC,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,oBACA,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,iBAAkB,EACxG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,eAAgB,CACtG,CAAC,EACD,EAAA,OACF,CACF,CAAC"}