@vielzeug/refine 2.2.5 → 2.4.0

package/dist/accordion-item.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/direction.cjs"),n=require("./accordion.cjs"),r=require("./shared/prop-bundles.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:{...r.disablableBundle,expanded:a.prop.bool(!1),size:a.prop.string(),variant:a.prop.string()},setup(e){let r=(0,a.getHost)(),i=(0,a.useEmit)(),o=a.watchEffect,s=(0,a.inject)(n.ACCORDION_CTX);s&&o(()=>{let e=s.size.value,t=s.variant.value;e!==void 0&&r.setAttribute(`size`,e),t!==void 0&&r.setAttribute(`variant`,t)});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,r.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:r}),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?.open||d)return;d=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),n=()=>{e.classList.remove(`closing`),e.open=!1,r.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:r}),d=!1};if(t){let e=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(n):n()}else n()},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 t=l.value?.open??!1,n=!!e.expanded.value;t&&!n?(r.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:r})):!t&&n&&(r.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:r}))};return(0,a.onMounted)(()=>{let e=l.value,n=u.value;if(!e||!n)return;let i=()=>{e.classList.toggle(`rtl`,t.elementDirection(r)===`rtl`)};i();let a=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&i()});for(let e=r;e;e=e.parentElement)a.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,b),n.addEventListener(`touchstart`,_,{passive:!0}),n.addEventListener(`touchend`,v,{passive:!1}),n.addEventListener(`click`,y),()=>{a.disconnect(),e.removeEventListener(`toggle`,b),n.removeEventListener(`touchstart`,_),n.removeEventListener(`touchend`,v),n.removeEventListener(`click`,y)}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/direction.cjs"),n=require("./accordion.cjs"),r=require("./shared/prop-bundles.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:{...r.disablableBundle,expanded:a.prop.bool(!1),size:a.prop.string(),variant:a.prop.string()},setup(e){let r=(0,a.getHost)(),i=(0,a.useEmit)(),o=a.watchEffect,s=(0,a.inject)(n.ACCORDION_CTX);s&&o(()=>{let e=s.size.value,t=s.variant.value;e!==void 0&&r.setAttribute(`size`,e),t!==void 0&&r.setAttribute(`variant`,t)});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,r.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:r}),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?.open||d)return;d=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),n=()=>{e.classList.remove(`closing`),e.open=!1,r.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:r}),d=!1};if(t){let e=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(n):n()}else n()},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 t=l.value?.open??!1,n=!!e.expanded.value;t&&!n?(r.toggleAttribute(`expanded`,!0),i(`expand`,{expanded:!0,item:r})):!t&&n&&(r.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:r}))};return(0,a.onMounted)(()=>{let e=l.value,n=u.value;if(!e||!n)return;let i=()=>{e.classList.toggle(`rtl`,t.elementDirection(r)===`rtl`)};i();let a=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&i()});for(let e=r;e;e=e.parentElement)a.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,b),n.addEventListener(`touchstart`,_,{passive:!0}),n.addEventListener(`touchend`,v,{passive:!1}),n.addEventListener(`click`,y),()=>{a.disconnect(),e.removeEventListener(`toggle`,b),n.removeEventListener(`touchstart`,_),n.removeEventListener(`touchend`,v),n.removeEventListener(`click`,y)}}),a.html`
       <details part="item" ?open="${e.expanded}" ref="${l}">
         <summary
           part="summary"

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, getHost, html, inject, onMounted, prop, ref, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../core/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?.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`\n      <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\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, getHost, html, inject, onMounted, prop, ref, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../core/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?.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`\n      <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\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}

package/dist/accordion-item.js

@@ -21,7 +21,7 @@ a(m, {
 		});
 		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, r.toggleAttribute("expanded", !0), i("expand", {
+			e && !e.open && (e.classList.add("opening"), e.open = !0, r.toggleAttribute("expanded", !0), i("expand", {
 				expanded: !0,
 				item: r
 			}), requestAnimationFrame(() => {

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, getHost, html, inject, onMounted, prop, ref, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../core/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?.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`\n      <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\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, getHost, html, inject, onMounted, prop, ref, useEmit, watchEffect } from '@vielzeug/ore';\n\nimport type { ComponentSize, SurfaceVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { elementDirection } from '../../core/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?.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`\n      <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\n  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"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"}

package/dist/card.cjs

@@ -1,4 +1,4 @@
-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("./styles/mixins/variants.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./content/card/card.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function u(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(l)||n.closest(l))return!0}return!1}var d=`ore-card`;(0,s.define)(d,{props:{...a.themableBundle,...a.disablableBundle,...a.loadableBundle,elevation:s.prop.number(),interactive:s.prop.bool(!1),orientation:s.prop.string(),padding:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),a=s.watchEffect;(0,s.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),a(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let o=i.createInteraction({disabled:(0,c.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),l=n=>{!e.interactive.value||e.disabled.value||u(t,n)||o.handleClick(n)},d=e=>{o.handleKeydown(e)};return(0,s.bind)({on:{click:e=>l(e),keydown:e=>d(e)}}),s.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("./styles/mixins/variants.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./content/card/card.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function u(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(l)||n.closest(l))return!0}return!1}var d=`ore-card`;(0,s.define)(d,{props:{...a.themableBundle,...a.disablableBundle,...a.loadableBundle,elevation:s.prop.number(),interactive:s.prop.bool(!1),orientation:s.prop.string(),padding:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),a=s.watchEffect;(0,s.bind)({attr:{ariaBusy:()=>e.loading.value?`true`:`false`,ariaDisabled:()=>e.interactive.value?String(e.disabled.value):null,role:()=>e.interactive.value?`button`:null}}),a(()=>{e.interactive.value?t.setAttribute(`tabindex`,e.disabled.value?`-1`:`0`):t.removeAttribute(`tabindex`)});let o=i.createInteraction({disabled:(0,c.computed)(()=>!e.interactive.value||!!e.disabled.value),onPress:(e,t)=>{n(`activate`,{originalEvent:e,trigger:t})}}),l=n=>{e.interactive.value&&!e.disabled.value&&(u(t,n)||o.handleClick(n))},d=e=>{o.handleKeydown(e)};return(0,s.bind)({on:{click:e=>l(e),keydown:e=>d(e)}}),s.html`
       <div class="card" part="card">
         <div class="loading-bar" part="loading-bar"></div>
         <div class="card-media" part="media" ?hidden="${()=>!r.has(`media`).value}">

package/dist/card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"8aAeA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAC9B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,CAA+B,GAAK,EAAK,QAAQ,CAA+B,EAC/F,MAAO,EAHiB,CAO5B,MAAO,EACT,CAyEA,IAAa,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAC9B,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,aAEd,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAU,EAAA,SAAA,KAAe,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CACjC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,OAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,CAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CACN,EAAA,gBACA,EAAA,eACA,EAAA,aACA,EAAA,oBACA,EAAA,kBAAkB,OAAO,EACzB,EAAA,mBACA,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"8aAeA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,aAAa,EAC9B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,CAA+B,GAAK,EAAK,QAAQ,CAA+B,EAC/F,MAAO,EAHiB,CAO5B,MAAO,EACT,CAyEA,IAAa,EAAW,YACxB,EAAA,EAAA,OAAA,CAAqB,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,EAAA,KAAK,OAAuB,EACvC,YAAa,EAAA,KAAK,KAAK,EAAK,EAC5B,YAAa,EAAA,KAAK,OAAqB,EACvC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAAuB,EAC9B,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,aAEd,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,KAAK,EAAI,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,IACpD,CACF,CAAC,EAED,MAAY,CACN,EAAM,YAAY,MACpB,EAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,GAAG,EAE7D,EAAG,gBAAgB,UAAU,CAEjC,CAAC,EAMD,IAAM,EAAe,EAAA,kBAAkB,CACrC,UAAA,EAAU,EAAA,SAAA,KAAe,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,KAAM,EAClF,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,SAAQ,CAAC,CAC7C,CACF,CAAC,EAEK,EAAe,GAAkB,CAChC,EAAM,YAAY,OAAS,GAAM,SAAS,QAE3C,EAA0B,EAAI,CAAC,GAEnC,EAAa,YAAY,CAAC,EAC5B,EAEM,EAAiB,GAAqB,CAC1C,EAAa,cAAc,CAAC,CAC9B,EAaA,OAXA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,EAAY,CAAC,EACvC,QAAU,GAAqB,EAAc,CAAC,CAChD,CACF,CAAC,EAMM,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAM9F,EAEA,OAAQ,CACN,EAAA,gBACA,EAAA,eACA,EAAA,aACA,EAAA,oBACA,EAAA,kBAAkB,OAAO,EACzB,EAAA,mBACA,EAAA,OACF,CACF,CAAC"}

package/dist/card.js

@@ -46,7 +46,7 @@ f(S, {
 				});
 			}
 		}), s = (n) => {
-			!e.interactive.value || e.disabled.value || x(t, n) || a.handleClick(n);
+			e.interactive.value && !e.disabled.value && (x(t, n) || a.handleClick(n));
 		}, c = (e) => {
 			a.handleKeydown(e);
 		};

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAK,EAAK,QAAQ,CAA+B,GAC/F,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,CAAC,EAAM,YAAY,SAAS,EAAM,SAAS,SAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}
+{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { bind, define, getHost, html, prop, useEmit, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createInteraction } from '../../core';\nimport { disablableBundle, loadableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  paddingMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\n/** Card component properties */\n\nexport type OreCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type OreCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element ore-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated. detail: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' }\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @part card - Card root container.\n * @part loading-bar - Loading progress bar.\n * @part media - Media slot container.\n * @part body - Body content container.\n * @part header - Header container.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part actions - Actions slot container.\n * @example\n * ```html\n * <ore-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></ore-card>\n * <ore-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></ore-card>\n * <ore-card variant=\"frost\" color=\"secondary\">Frosted card</ore-card>\n * ```\n */\nexport const CARD_TAG = 'ore-card' as const;\ndefine<OreCardProps>(CARD_TAG, {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: prop.number<ElevationLevel>(),\n    interactive: prop.bool(false),\n    orientation: prop.string<'horizontal'>(),\n    padding: prop.string<PaddingSize>(),\n    variant: prop.string<'solid' | 'flat' | 'glass' | 'frost'>(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCardEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    bind({\n      attr: {\n        ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n        ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n        role: () => (props.interactive.value ? 'button' : null),\n      },\n    });\n\n    watch(() => {\n      if (props.interactive.value) {\n        el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createInteraction({\n      disabled: computed(() => !props.interactive.value || Boolean(props.disabled.value)),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: (e: MouseEvent) => handleClick(e),\n        keydown: (e: KeyboardEvent) => handleKeydown(e),\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    paddingMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.card'),\n    reducedMotionMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IACJ;AAEF,SAAS,EAA0B,GAAmB,GAAuB;CAC3E,KAAK,IAAM,KAAQ,EAAM,aAAa,GAC9B,iBAAgB,aAEtB;MAAI,MAAS,GAAM,OAAO;EAE1B,IAAI,EAAK,QAAQ,CAA+B,KAAK,EAAK,QAAQ,CAA+B,GAC/F,OAAO;CAHiB;CAO5B,OAAO;AACT;AAyEA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW,EAAK,OAAuB;EACvC,aAAa,EAAK,KAAK,EAAK;EAC5B,aAAa,EAAK,OAAqB;EACvC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAC9B,IAAQ,EAAS,GACjB,IAAQ;EAUd,AARA,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,QAAQ,QAAQ,SAAS;GAChD,oBAAqB,EAAM,YAAY,QAAQ,OAAO,EAAM,SAAS,KAAK,IAAI;GAC9E,YAAa,EAAM,YAAY,QAAQ,WAAW;EACpD,EACF,CAAC,GAED,QAAY;GACV,AAAI,EAAM,YAAY,QACpB,EAAG,aAAa,YAAY,EAAM,SAAS,QAAQ,OAAO,GAAG,IAE7D,EAAG,gBAAgB,UAAU;EAEjC,CAAC;EAMD,IAAM,IAAe,EAAkB;GACrC,UAAU,QAAe,CAAC,EAAM,YAAY,SAAS,EAAQ,EAAM,SAAS,KAAM;GAClF,UAAU,GAAe,MAAY;IACnC,EAAK,YAAY;KAAE;KAAe;IAAQ,CAAC;GAC7C;EACF,CAAC,GAEK,KAAe,MAAkB;GACjC,AAAC,EAAM,YAAY,SAAS,GAAM,SAAS,UAE3C,EAA0B,GAAI,CAAC,KAEnC,EAAa,YAAY,CAAC;EAC5B,GAEM,KAAiB,MAAqB;GAC1C,EAAa,cAAc,CAAC;EAC9B;EAaA,OAXA,EAAK,EACH,IAAI;GACF,QAAQ,MAAkB,EAAY,CAAC;GACvC,UAAU,MAAqB,EAAc,CAAC;EAChD,EACF,CAAC,GAMM,CAAI;;;8DAG+C,CAAC,EAAM,IAAI,OAAO,CAAC,CAAC,MAAM;;;;kEAItB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,CAAC,CAAC,MAAM;;;kEAGrB,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;oEAGzB,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;CAM9F;CAEA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAkB,OAAO;EACzB;EACA;CACF;AACF,CAAC"}

package/dist/carousel.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/announcer.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./content/carousel/carousel.css.cjs"),i=require("./content/carousel/carousel-slide.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/gesture");var c=`ore-carousel`,l=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.toggleAttribute(`data-before`,r<t),e.toggleAttribute(`data-after`,r>t)})},u=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`)})},d=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t,a=t>0&&r===t-1,o=t<n-1&&r===t+1;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`),e.toggleAttribute(`data-gallery-visible`,i||a||o)})};(0,a.define)(c,{props:{autoplay:a.prop.bool(!1),"autoplay-interval":a.prop.number(5e3),color:a.prop.string(),label:a.prop.string(`Carousel`),loop:a.prop.bool(!0),orientation:a.prop.string(`horizontal`),"show-controls":a.prop.bool(!0),"show-indicators":a.prop.bool(!0),"slide-index":a.prop.number(0),variant:a.prop.string(`default`)},setup(r){let i=(0,a.getHost)(),c=(0,a.useEmit)(),f=(0,o.signal)(r[`slide-index`].value??0),p=null,m=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),h=(0,o.signal)(m.length),g=()=>{m=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),h.value=m.length},_=(0,o.computed)(()=>r.orientation.value!==`vertical`),v=(0,o.computed)(()=>r.loop.value!==!1),y=(0,o.computed)(()=>r[`show-controls`].value!==!1),b=(0,o.computed)(()=>r[`show-indicators`].value!==!1),x=(0,o.computed)(()=>v.value||f.value>0),S=(0,o.computed)(()=>v.value||f.value<h.value-1),C=(t,n=!0)=>{let r=h.value;if(r===0)return;let a=v.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));a!==f.value&&(f.value=a,i.setAttribute(`slide-index`,String(a)),c(`change`,{index:a}),n&&e.announce(m[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${r}`))},w=()=>C(f.value-1),T=()=>C(f.value+1);(0,o.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==f.value&&C(e,!1)});let E=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;m.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,o.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),E,{immediate:!0});let D={default:l,fade:l,filmstrip:u,gallery:d},O=()=>{let e=r.variant.value??`default`;D[e](m,f.value)};(0,o.watch)(f,O,{immediate:!0});let k=()=>{p===null&&(p=setInterval(T,r[`autoplay-interval`].value??5e3))},A=()=>{p!==null&&(clearInterval(p),p=null)};(0,o.watch)((0,o.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{A(),e&&k()});let j=e=>{let t=_.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),w()):e.key===r?(e.preventDefault(),T()):e.key===`Home`?(e.preventDefault(),C(0)):e.key===`End`&&(e.preventDefault(),C(h.value-1))},M=n.createListControl({getItems:()=>Array.from({length:h.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{C(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>_.value?`horizontal`:`vertical`,signal:t.lifecycleSignal(a.onCleanup)});(0,a.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${_.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{A()},focusout:()=>{r.autoplay.value&&k()},keydown:j,pointerenter:()=>{A()},pointerleave:()=>{r.autoplay.value&&k()}}}),(0,a.onMounted)(()=>{let e=(0,s.createPanGesture)(i,{axis:()=>_.value?`x`:`y`,onEnd:({distance:e,reason:t})=>{t!==`release`||Math.abs(e)<48||(e<0?T():w())},shouldStart:e=>!e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))}),t=i.shadowRoot.querySelector(`slot`),n=()=>{g(),E(),O()};return t.addEventListener(`slotchange`,n),r.autoplay.value&&k(),()=>{e.dispose(),A(),t.removeEventListener(`slotchange`,n)}});let N=()=>y.value?a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/announcer.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./content/carousel/carousel.css.cjs"),i=require("./content/carousel/carousel-slide.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/gesture");var c=`ore-carousel`,l=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.toggleAttribute(`data-before`,r<t),e.toggleAttribute(`data-after`,r>t)})},u=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-gallery-visible`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`)})},d=(e,t)=>{let n=e.length;e.forEach((e,r)=>{let i=r===t,a=t>0&&r===t-1,o=t<n-1&&r===t+1;e.toggleAttribute(`data-active`,i),e.setAttribute(`aria-hidden`,String(!i)),e.setAttribute(`aria-label`,e.getAttribute(`aria-label`)??`Slide ${r+1} of ${n}`),e.removeAttribute(`data-before`),e.removeAttribute(`data-after`),e.toggleAttribute(`data-gallery-visible`,i||a||o)})};(0,a.define)(c,{props:{autoplay:a.prop.bool(!1),"autoplay-interval":a.prop.number(5e3),color:a.prop.string(),label:a.prop.string(`Carousel`),loop:a.prop.bool(!0),orientation:a.prop.string(`horizontal`),"show-controls":a.prop.bool(!0),"show-indicators":a.prop.bool(!0),"slide-index":a.prop.number(0),variant:a.prop.string(`default`)},setup(r){let i=(0,a.getHost)(),c=(0,a.useEmit)(),f=(0,o.signal)(r[`slide-index`].value??0),p=null,m=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),h=(0,o.signal)(m.length),g=()=>{m=Array.from(i.querySelectorAll(`:scope > ore-carousel-slide`)),h.value=m.length},_=(0,o.computed)(()=>r.orientation.value!==`vertical`),v=(0,o.computed)(()=>r.loop.value!==!1),y=(0,o.computed)(()=>r[`show-controls`].value!==!1),b=(0,o.computed)(()=>r[`show-indicators`].value!==!1),x=(0,o.computed)(()=>v.value||f.value>0),S=(0,o.computed)(()=>v.value||f.value<h.value-1),C=(t,n=!0)=>{let r=h.value;if(r===0)return;let a=v.value?(t%r+r)%r:Math.max(0,Math.min(t,r-1));a!==f.value&&(f.value=a,i.setAttribute(`slide-index`,String(a)),c(`change`,{index:a}),n&&e.announce(m[a]?.getAttribute(`aria-label`)??`Slide ${a+1} of ${r}`,{document:i.ownerDocument}))},w=()=>C(f.value-1),T=()=>C(f.value+1);(0,o.watch)(r[`slide-index`],e=>{typeof e==`number`&&e!==f.value&&C(e,!1)});let E=()=>{let e=r.variant.value??`default`,t=r.orientation.value??`horizontal`;m.forEach(n=>{n.setAttribute(`data-variant`,e),n.setAttribute(`data-orientation`,t)})};(0,o.watch)((0,o.computed)(()=>({orientation:r.orientation.value,variant:r.variant.value})),E,{immediate:!0});let D={default:l,fade:l,filmstrip:u,gallery:d},O=()=>{let e=r.variant.value??`default`;D[e](m,f.value)};(0,o.watch)(f,O,{immediate:!0});let k=()=>{p===null&&(p=setInterval(T,r[`autoplay-interval`].value??5e3))},A=()=>{p!==null&&(clearInterval(p),p=null)};(0,o.watch)((0,o.computed)(()=>({enabled:r.autoplay.value,interval:r[`autoplay-interval`].value})),({enabled:e})=>{A(),e&&k()});let j=e=>{let t=_.value,n=t?`ArrowLeft`:`ArrowUp`,r=t?`ArrowRight`:`ArrowDown`;e.key===n?(e.preventDefault(),w()):e.key===r?(e.preventDefault(),T()):e.key===`Home`?(e.preventDefault(),C(0)):e.key===`End`&&(e.preventDefault(),C(h.value-1))},M=n.createListControl({getItems:()=>Array.from({length:h.value},(e,t)=>t),loop:!0,onNavigate:({index:e})=>{C(e),(i.shadowRoot?.querySelector(`.indicator[data-index="${e}"]`))?.focus()},orientation:()=>_.value?`horizontal`:`vertical`,signal:t.lifecycleSignal(a.onCleanup)});(0,a.bind)({attr:{"aria-label":()=>r.label.value??`Carousel`,"aria-roledescription":()=>`carousel`,orientation:()=>r.orientation.value??`horizontal`,role:()=>`region`,style:()=>`touch-action:${_.value?`pan-y`:`pan-x`}`,variant:()=>r.variant.value??`default`},on:{focusin:()=>{A()},focusout:()=>{r.autoplay.value&&k()},keydown:j,pointerenter:()=>{A()},pointerleave:()=>{r.autoplay.value&&k()}}}),(0,a.onMounted)(()=>{let e=(0,s.createPanGesture)(i,{axis:()=>_.value?`x`:`y`,onEnd:({distance:e,reason:t})=>{t!==`release`||Math.abs(e)<48||(e<0?T():w())},shouldStart:e=>!e.composedPath().some(e=>e instanceof HTMLElement&&(e.tagName===`BUTTON`||e.tagName===`ORE-BUTTON`||e.tagName===`ORE-PROGRESS`))}),t=i.shadowRoot.querySelector(`slot`),n=()=>{g(),E(),O()};return t.addEventListener(`slotchange`,n),r.autoplay.value&&k(),()=>{e.dispose(),A(),t.removeEventListener(`slotchange`,n)}});let N=()=>y.value?a.html`
             <div class="controls" part="controls">
               <ore-button
                 class="nav-btn prev-btn"

package/dist/carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`);\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    const indicatorNav = createListControl<number>({\n      getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n      loop: true,\n      onNavigate: ({ index }) => {\n        goTo(index);\n        const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n        dot?.focus();\n      },\n      orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const pan = createPanGesture(el, {\n        axis: () => (isHorizontal.value ? 'x' : 'y'),\n        onEnd: ({ distance, reason }) => {\n          if (reason !== 'release' || Math.abs(distance) < 48) return;\n\n          if (distance < 0) next();\n          else prev();\n        },\n        shouldStart: (event) => {\n          const path = event.composedPath();\n\n          return !path.some(\n            (node) =>\n              node instanceof HTMLElement &&\n              (node.tagName === 'BUTTON' || node.tagName === 'ORE-BUTTON' || node.tagName === 'ORE-PROGRESS'),\n          );\n        },\n      });\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        pan.dispose();\n        stopAutoplay();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const renderControls = () =>\n      showControls.value\n        ? html`\n            <div class=\"controls\" part=\"controls\">\n              <ore-button\n                class=\"nav-btn prev-btn\"\n                part=\"prev-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n              <ore-button\n                class=\"nav-btn next-btn\"\n                part=\"next-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @focus=${() => indicatorNav.set(i)}\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          const target = e.currentTarget;\n\n                          if (target instanceof HTMLElement) {\n                            const index = Number(target.dataset.index);\n\n                            if (Number.isInteger(index)) indicatorNav.set(index);\n                          }\n\n                          indicatorNav.handleKeydown(e);\n                        }}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"carousel.cjs","names":[],"sources":["../src/content/carousel/carousel.ts"],"sourcesContent":["import { createPanGesture } from '@vielzeug/gesture';\nimport { bind, define, getHost, html, onCleanup, onMounted, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport '../../feedback/progress/progress';\nimport { announce, createListControl, lifecycleSignal } from '../../core';\nimport componentStyles from './carousel.css?inline';\nimport './carousel-slide';\n\nexport { CAROUSEL_SLIDE_TAG } from './carousel-slide';\n\n// ── Types ──────────────────────────────────────────────────────────────────────\n\nexport type CarouselOrientation = 'horizontal' | 'vertical';\nexport type CarouselVariant = 'default' | 'fade' | 'filmstrip' | 'gallery';\n\nexport type OreCarouselEvents = {\n  /** Fired when the active slide changes. */\n  change: { index: number };\n};\n\nexport type OreCarouselProps = {\n  /**\n   * Whether to advance slides automatically. Defaults to `false`.\n   * Opt in explicitly — autoplay on by default is a WCAG 2.1 SC 2.2.2 violation for many use cases.\n   */\n  autoplay?: boolean;\n  /** Interval in milliseconds between automatic slide advances. Defaults to `5000`. */\n  'autoplay-interval'?: number;\n  /** Theme color passed to the prev/next navigation buttons. */\n  color?: ThemeColor;\n  /** Accessible label for the carousel region. */\n  label?: string;\n  /** Whether the carousel loops from the last slide back to the first. Defaults to `true`. */\n  loop?: boolean;\n  /** Carousel orientation. Defaults to `'horizontal'`. */\n  orientation?: CarouselOrientation;\n  /** Show next/prev navigation buttons. Defaults to `true`. */\n  'show-controls'?: boolean;\n  /** Show dot/indicator navigation. Defaults to `true`. */\n  'show-indicators'?: boolean;\n  /** Index of the currently active slide (zero-based). Defaults to `0`. */\n  'slide-index'?: number;\n  /**\n   * Layout variant.\n   * - `'default'`   — slides translate in/out (default)\n   * - `'fade'`      — slides crossfade; no movement\n   * - `'filmstrip'` — all slides visible side-by-side; active expands\n   * - `'gallery'`   — active slide fills the majority; adjacent slides show as thumbnails\n   */\n  variant?: CarouselVariant;\n};\n\n/**\n * An accessible, keyboard-navigable carousel / slideshow with optional\n * autoplay, swipe support, and indicator dots.\n *\n * Place `<ore-carousel-slide>` elements as direct children.\n *\n * @element ore-carousel\n * @element ore-carousel-slide - Child element for individual slides\n *\n * @attr {string}  color             - Theme color for navigation buttons: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} autoplay          - Advance slides automatically (default false)\n * @attr {number}  autoplay-interval - Milliseconds between automatic advances (default 5000)\n * @attr {string}  label             - Accessible label for the carousel region\n * @attr {boolean} loop              - Loop from last slide to first (default true)\n * @attr {string}  orientation       - 'horizontal' (default) | 'vertical'\n * @attr {string}  variant           - 'default' | 'fade' | 'filmstrip' | 'gallery'\n * @attr {boolean} show-controls     - Show prev/next buttons (default true)\n * @attr {boolean} show-indicators   - Show indicator dots (default true)\n * @attr {number}  slide-index       - Active slide index (zero-based, default 0)\n *\n * @fires change - Fires when the active slide changes. detail: { index: number }\n *\n * @slot - Place `<ore-carousel-slide>` elements here\n *\n * @cssprop --carousel-bg                  - Slide area background\n * @cssprop --carousel-radius              - Border radius of the carousel\n * @cssprop --carousel-dot-bg              - Inactive indicator color (default: var(--color-contrast-300))\n * @cssprop --carousel-dot-active-bg       - Active indicator / fill color (default: var(--color-contrast-700))\n * @cssprop --carousel-transition-duration - Slide transition duration (default 0.35s; 0s under prefers-reduced-motion).\n * @cssprop --carousel-min-height          - Minimum height when no explicit height is set (default 240px)\n * @cssprop --carousel-filmstrip-inactive  - Width (horizontal) or height (vertical) of inactive slides in filmstrip mode\n * @cssprop --carousel-filmstrip-gap       - Gap between slides in filmstrip mode\n * @cssprop --carousel-gallery-thumbnail   - Width (horizontal) or height (vertical) of thumbnail slides in gallery mode (default var(--size-24))\n * @cssprop --carousel-gallery-gap         - Gap between slides in gallery mode (default var(--size-2))\n *\n * @part track      - The scrolling slide track element\n * @part controls   - The prev/next button container\n * @part indicators - The indicator dots container\n * @part prev-btn   - The previous-slide button\n * @part next-btn   - The next-slide button\n *\n * @example\n * ```html\n * <ore-carousel label=\"Product highlights\" loop>\n *   <ore-carousel-slide>Slide 1</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 2</ore-carousel-slide>\n *   <ore-carousel-slide>Slide 3</ore-carousel-slide>\n * </ore-carousel>\n * ```\n */\nexport const CAROUSEL_TAG = 'ore-carousel' as const;\n\n// ── Slide-state sync helpers ──────────────────────────────────────────────────\n// Each function handles exactly one variant's attribute bookkeeping.\n// Called from a dispatch table in syncActiveState.\n\nconst syncDefaultSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.toggleAttribute('data-before', i < current);\n    slide.toggleAttribute('data-after', i > current);\n  });\n};\n\nconst syncFilmstripSlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-gallery-visible');\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n  });\n};\n\nconst syncGallerySlides = (slides: HTMLElement[], current: number): void => {\n  const count = slides.length;\n\n  slides.forEach((slide, i) => {\n    const active = i === current;\n    const isPrev = current > 0 && i === current - 1;\n    const isNext = current < count - 1 && i === current + 1;\n\n    slide.toggleAttribute('data-active', active);\n    slide.setAttribute('aria-hidden', String(!active));\n    slide.setAttribute('aria-label', slide.getAttribute('aria-label') ?? `Slide ${i + 1} of ${count}`);\n    slide.removeAttribute('data-before');\n    slide.removeAttribute('data-after');\n    slide.toggleAttribute('data-gallery-visible', active || isPrev || isNext);\n  });\n};\n\n// ── ore-carousel ──────────────────────────────────────────────────────────────\n\ndefine<OreCarouselProps>(CAROUSEL_TAG, {\n  props: {\n    autoplay: prop.bool(false),\n    'autoplay-interval': prop.number(5000),\n    color: prop.string<ThemeColor>(),\n    label: prop.string('Carousel'),\n    loop: prop.bool(true),\n    orientation: prop.string<CarouselOrientation>('horizontal'),\n    'show-controls': prop.bool(true),\n    'show-indicators': prop.bool(true),\n    'slide-index': prop.number(0),\n    variant: prop.string<CarouselVariant>('default'),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCarouselEvents>();\n\n    // ── State ────────────────────────────────────────────────────────────────\n\n    const activeIndex = signal<number>(props['slide-index'].value ?? 0);\n    let autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\n    // Slide cache — populated immediately, refreshed on slotchange.\n    let slides: HTMLElement[] = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n    const slideCount = signal(slides.length);\n\n    const refreshSlides = (): void => {\n      slides = Array.from(el.querySelectorAll<HTMLElement>(':scope > ore-carousel-slide'));\n      slideCount.value = slides.length;\n    };\n\n    const isHorizontal = computed(() => props.orientation.value !== 'vertical');\n    const looping = computed(() => props.loop.value !== false);\n    const showControls = computed(() => props['show-controls'].value !== false);\n    const showIndicators = computed(() => props['show-indicators'].value !== false);\n\n    const canGoPrev = computed(() => looping.value || activeIndex.value > 0);\n    const canGoNext = computed(() => looping.value || activeIndex.value < slideCount.value - 1);\n\n    // ── Navigation ───────────────────────────────────────────────────────────\n\n    const goTo = (index: number, announce_: boolean = true): void => {\n      const count = slideCount.value;\n\n      if (count === 0) return;\n\n      const next = looping.value ? ((index % count) + count) % count : Math.max(0, Math.min(index, count - 1));\n\n      if (next === activeIndex.value) return;\n\n      activeIndex.value = next;\n      el.setAttribute('slide-index', String(next));\n      emit('change', { index: next });\n\n      if (announce_) {\n        announce(slides[next]?.getAttribute('aria-label') ?? `Slide ${next + 1} of ${count}`, {\n          document: el.ownerDocument,\n        });\n      }\n    };\n\n    const prev = (): void => goTo(activeIndex.value - 1);\n    const next = (): void => goTo(activeIndex.value + 1);\n\n    // ── Sync prop → state ────────────────────────────────────────────────────\n\n    watch(props['slide-index'], (v) => {\n      if (typeof v === 'number' && v !== activeIndex.value) goTo(v, false);\n    });\n\n    // ── Sync variant + orientation → slides ──────────────────────────────────\n\n    const syncSlideVariants = (): void => {\n      const variant = props.variant.value ?? 'default';\n      const orientation = props.orientation.value ?? 'horizontal';\n\n      slides.forEach((slide) => {\n        slide.setAttribute('data-variant', variant);\n        slide.setAttribute('data-orientation', orientation);\n      });\n    };\n\n    watch(\n      computed(() => ({ orientation: props.orientation.value, variant: props.variant.value })),\n      syncSlideVariants,\n      { immediate: true },\n    );\n\n    // ── Sync active index → slides — dispatch table ───────────────────────────\n\n    const syncTable: Record<CarouselVariant, (slides: HTMLElement[], current: number) => void> = {\n      default: syncDefaultSlides,\n      fade: syncDefaultSlides,\n      filmstrip: syncFilmstripSlides,\n      gallery: syncGallerySlides,\n    };\n\n    const syncActiveState = (): void => {\n      const variant = (props.variant.value ?? 'default') as CarouselVariant;\n\n      syncTable[variant](slides, activeIndex.value);\n    };\n\n    watch(activeIndex, syncActiveState, { immediate: true });\n\n    // ── Autoplay ─────────────────────────────────────────────────────────────\n\n    const startAutoplay = (): void => {\n      if (autoplayTimer !== null) return;\n\n      autoplayTimer = setInterval(next, props['autoplay-interval'].value ?? 5000);\n    };\n\n    const stopAutoplay = (): void => {\n      if (autoplayTimer !== null) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n      }\n    };\n\n    watch(\n      computed(() => ({ enabled: props.autoplay.value, interval: props['autoplay-interval'].value })),\n      ({ enabled }) => {\n        stopAutoplay();\n\n        if (enabled) startAutoplay();\n      },\n    );\n\n    // ── Keyboard navigation ──────────────────────────────────────────────────\n\n    const handleKeydown = (e: KeyboardEvent): void => {\n      const isH = isHorizontal.value;\n      const prevKey = isH ? 'ArrowLeft' : 'ArrowUp';\n      const nextKey = isH ? 'ArrowRight' : 'ArrowDown';\n\n      if (e.key === prevKey) {\n        e.preventDefault();\n        prev();\n      } else if (e.key === nextKey) {\n        e.preventDefault();\n        next();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        goTo(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        goTo(slideCount.value - 1);\n      }\n    };\n\n    const indicatorNav = createListControl<number>({\n      getItems: () => Array.from({ length: slideCount.value }, (_, index) => index),\n      loop: true,\n      onNavigate: ({ index }) => {\n        goTo(index);\n        const dot = el.shadowRoot?.querySelector<HTMLElement>(`.indicator[data-index=\"${index}\"]`);\n\n        dot?.focus();\n      },\n      orientation: () => (isHorizontal.value ? 'horizontal' : 'vertical'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // ── Host bindings ────────────────────────────────────────────────────────\n\n    bind({\n      attr: {\n        'aria-label': () => props.label.value ?? 'Carousel',\n        'aria-roledescription': () => 'carousel',\n        orientation: () => props.orientation.value ?? 'horizontal',\n        role: () => 'region',\n        style: () => `touch-action:${isHorizontal.value ? 'pan-y' : 'pan-x'}`,\n        variant: () => props.variant.value ?? 'default',\n      },\n      on: {\n        focusin: () => {\n          stopAutoplay();\n        },\n        focusout: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n        keydown: handleKeydown,\n        pointerenter: () => {\n          stopAutoplay();\n        },\n        pointerleave: () => {\n          if (props.autoplay.value) startAutoplay();\n        },\n      },\n    });\n\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const pan = createPanGesture(el, {\n        axis: () => (isHorizontal.value ? 'x' : 'y'),\n        onEnd: ({ distance, reason }) => {\n          if (reason !== 'release' || Math.abs(distance) < 48) return;\n\n          if (distance < 0) next();\n          else prev();\n        },\n        shouldStart: (event) => {\n          const path = event.composedPath();\n\n          return !path.some(\n            (node) =>\n              node instanceof HTMLElement &&\n              (node.tagName === 'BUTTON' || node.tagName === 'ORE-BUTTON' || node.tagName === 'ORE-PROGRESS'),\n          );\n        },\n      });\n      const shadowRoot = el.shadowRoot!;\n      const slot = shadowRoot.querySelector<HTMLSlotElement>('slot')!;\n\n      // slotchange replaces MutationObserver — fires exactly when assigned\n      // nodes change, scoped to this component's slot, no polling overhead.\n      const onSlotChange = (): void => {\n        refreshSlides();\n        syncSlideVariants();\n        syncActiveState();\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      if (props.autoplay.value) {\n        startAutoplay();\n      }\n\n      return () => {\n        pan.dispose();\n        stopAutoplay();\n        slot.removeEventListener('slotchange', onSlotChange);\n      };\n    });\n\n    // ── Template ─────────────────────────────────────────────────────────────\n\n    const renderControls = () =>\n      showControls.value\n        ? html`\n            <div class=\"controls\" part=\"controls\">\n              <ore-button\n                class=\"nav-btn prev-btn\"\n                part=\"prev-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Previous slide\"\n                disabled=${() => (!canGoPrev.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  prev();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-left' : 'chevron-up')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n              <ore-button\n                class=\"nav-btn next-btn\"\n                part=\"next-btn\"\n                variant=\"ghost\"\n                color=${() => props.color.value}\n                rounded\n                icon-only\n                aria-label=\"Next slide\"\n                disabled=${() => (!canGoNext.value ? true : undefined)}\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  next();\n                }}>\n                <ore-icon\n                  name=${() => (isHorizontal.value ? 'chevron-right' : 'chevron-down')}\n                  size=\"16\"\n                  stroke-width=\"2\"\n                  aria-hidden=\"true\"></ore-icon>\n              </ore-button>\n            </div>\n          `\n        : html``;\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=${() => (props.autoplay.value ? 'off' : 'polite')}>\n        <slot></slot>\n      </div>\n\n      ${() =>\n        showIndicators.value && slideCount.value > 1\n          ? html`\n              <div class=\"indicators\" part=\"indicators\" role=\"tablist\" aria-label=\"Slide indicators\">\n                ${() =>\n                  Array.from(\n                    { length: slideCount.value },\n                    (_, i) => html`\n                      <button\n                        type=\"button\"\n                        role=\"tab\"\n                        data-index=\"${i}\"\n                        class=${() => `indicator${i === activeIndex.value ? ' indicator-active' : ''}`}\n                        aria-selected=${() => String(i === activeIndex.value)}\n                        tabindex=${() => (i === activeIndex.value ? '0' : '-1')}\n                        aria-label=\"${`Go to slide ${i + 1}`}\"\n                        @focus=${() => indicatorNav.set(i)}\n                        @click=${() => goTo(i)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          const target = e.currentTarget;\n\n                          if (target instanceof HTMLElement) {\n                            const index = Number(target.dataset.index);\n\n                            if (Number.isInteger(index)) indicatorNav.set(index);\n                          }\n\n                          indicatorNav.handleKeydown(e);\n                        }}>\n                        <ore-progress\n                          aria-hidden=\"true\"\n                          tabindex=\"-1\"\n                          color=${() => props.color.value}\n                          type=${() => (isHorizontal.value ? 'linear' : 'vertical')}\n                          value=${() => (i === activeIndex.value ? 100 : 0)}\n                          style=${() => {\n                            const fillAnim = isHorizontal.value ? 'carousel-fill' : 'carousel-fill-v';\n\n                            return `--carousel-timeout:${props['autoplay-interval'].value ?? 5000};--carousel-animation-name:${i === activeIndex.value && props.autoplay.value ? fillAnim : 'none'}`;\n                          }}></ore-progress>\n                      </button>\n                    `,\n                  )}\n                ${renderControls}\n              </div>\n            `\n          : html`\n              ${renderControls}\n            `}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/carousel.js

@@ -46,7 +46,7 @@ o(_, {
 			let r = S.value;
 			if (r === 0) return;
 			let a = T.value ? (t % r + r) % r : Math.max(0, Math.min(t, r - 1));
-			a !== d.value && (d.value = a, i.setAttribute("slide-index", String(a)), o("change", { index: a }), n && e(x[a]?.getAttribute("aria-label") ?? `Slide ${a + 1} of ${r}`));
+			a !== d.value && (d.value = a, i.setAttribute("slide-index", String(a)), o("change", { index: a }), n && e(x[a]?.getAttribute("aria-label") ?? `Slide ${a + 1} of ${r}`, { document: i.ownerDocument }));
 		}, j = () => A(d.value - 1), M = () => A(d.value + 1);
 		h(r["slide-index"], (e) => {
 			typeof e == "number" && e !== d.value && A(e, !1);