@vielzeug/refine 26.10.7 → 26.10.9

package/README.md

@@ -57,6 +57,12 @@ import '@vielzeug/refine/time-picker';
 </ore-carousel>
 ```
 
+## Features
+
+- Form-associated controls integrate with native `FormData`, supported required validation, and form reset.
+- Enumerated component properties validate values against their documented options.
+- Import components and global styles through explicit package subpaths.
+
 ## Documentation
 
 - [Overview](https://vielzeug.dev/refine/)

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"),a=require("./icon.cjs");let o=require("@vielzeug/ore");var s=`ore-accordion-item`;(0,o.define)(s,{props:{...r.disablableBundle,expanded:o.prop.bool(!1),size:o.prop.string(),variant:o.prop.string()},setup(e){let r=(0,o.getHost)(),i=(0,o.useEmit)(),a=o.watchEffect,s=(0,o.inject)(n.ACCORDION_CTX);s&&a(()=>{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,o.ref)(),u=(0,o.ref)(),d=!1,openItem=()=>{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 onDone=()=>{e.classList.remove(`opening`),d=!1},n=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];n.length>0?Promise.allSettled(n.map(e=>e.finished)).then(onDone):onDone()}))},closeItem=()=>{let e=l.value;if(!e?.open||d)return;d=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),onDone=()=>{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(onDone):onDone()}else onDone()},f=!1,p=0,toggleDetails=()=>{if(e.disabled.value)return;let t=l.value;t&&(t.open?closeItem():openItem())},handleSummaryTouchStart=e=>{p=e.touches[0]?.clientY??0},handleSummaryTouchEnd=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-p)>10||(e.preventDefault(),f=!0,toggleDetails())},handleSummaryClick=e=>{if(f){f=!1,e.preventDefault();return}e.preventDefault(),toggleDetails()},handleToggle=()=>{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,o.onMounted)(()=>{let e=l.value,n=u.value;if(!e||!n)return;let checkRTL=()=>{e.classList.toggle(`rtl`,t.elementDirection(r)===`rtl`)};checkRTL();let i=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&checkRTL()});for(let e=r;e;e=e.parentElement)i.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,handleToggle),n.addEventListener(`touchstart`,handleSummaryTouchStart,{passive:!0}),n.addEventListener(`touchend`,handleSummaryTouchEnd,{passive:!1}),n.addEventListener(`click`,handleSummaryClick),()=>{i.disconnect(),e.removeEventListener(`toggle`,handleToggle),n.removeEventListener(`touchstart`,handleSummaryTouchStart),n.removeEventListener(`touchend`,handleSummaryTouchEnd),n.removeEventListener(`click`,handleSummaryClick)}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./core/direction.cjs"),n=require("./shared/types.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./accordion.cjs"),a=require("./disclosure/accordion-item/accordion-item.css.cjs"),o=require("./icon.cjs");let s=require("@vielzeug/ore");var c=`ore-accordion-item`;(0,s.define)(c,{props:{...r.disablableBundle,expanded:s.prop.bool(!1),size:s.prop.oneOf(n.COMPONENT_SIZES),variant:s.prop.oneOf(n.VISUAL_VARIANTS)},setup(e){let n=(0,s.getHost)(),r=(0,s.useEmit)(),a=s.watchEffect,o=(0,s.inject)(i.ACCORDION_CTX);o&&a(()=>{let e=o.size.value,t=o.variant.value;e!==void 0&&n.setAttribute(`size`,e),t!==void 0&&n.setAttribute(`variant`,t)});let c=`accordion-item-title`,l=(0,s.ref)(),u=(0,s.ref)(),d=!1,openItem=()=>{let e=l.value;e&&!e.open&&(e.classList.add(`opening`),e.open=!0,n.toggleAttribute(`expanded`,!0),r(`expand`,{expanded:!0,item:n}),requestAnimationFrame(()=>{let t=e.querySelector(`.content-inner`);if(!t){e.classList.remove(`opening`),d=!1;return}let onDone=()=>{e.classList.remove(`opening`),d=!1},n=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];n.length>0?Promise.allSettled(n.map(e=>e.finished)).then(onDone):onDone()}))},closeItem=()=>{let e=l.value;if(!e?.open||d)return;d=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),onDone=()=>{e.classList.remove(`closing`),e.open=!1,n.toggleAttribute(`expanded`,!1),r(`collapse`,{expanded:!1,item:n}),d=!1};if(t){let e=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(onDone):onDone()}else onDone()},f=!1,p=0,toggleDetails=()=>{if(e.disabled.value)return;let t=l.value;t&&(t.open?closeItem():openItem())},handleSummaryTouchStart=e=>{p=e.touches[0]?.clientY??0},handleSummaryTouchEnd=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-p)>10||(e.preventDefault(),f=!0,toggleDetails())},handleSummaryClick=e=>{if(f){f=!1,e.preventDefault();return}e.preventDefault(),toggleDetails()},handleToggle=()=>{let t=l.value?.open??!1,i=!!e.expanded.value;t&&!i?(n.toggleAttribute(`expanded`,!0),r(`expand`,{expanded:!0,item:n})):!t&&i&&(n.toggleAttribute(`expanded`,!1),r(`collapse`,{expanded:!1,item:n}))};return(0,s.onMounted)(()=>{let e=l.value,r=u.value;if(!e||!r)return;let checkRTL=()=>{e.classList.toggle(`rtl`,t.elementDirection(n)===`rtl`)};checkRTL();let i=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&checkRTL()});for(let e=n;e;e=e.parentElement)i.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,handleToggle),r.addEventListener(`touchstart`,handleSummaryTouchStart,{passive:!0}),r.addEventListener(`touchend`,handleSummaryTouchEnd,{passive:!1}),r.addEventListener(`click`,handleSummaryClick),()=>{i.disconnect(),e.removeEventListener(`toggle`,handleToggle),r.removeEventListener(`touchstart`,handleSummaryTouchStart),r.removeEventListener(`touchend`,handleSummaryTouchEnd),r.removeEventListener(`click`,handleSummaryClick)}}),s.html`
       <details part="item" ?open="${e.expanded}" ref="${l}">
         <summary
           part="summary"
@@ -24,5 +24,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </details>
-    `},styles:[e.coarsePointerMixin,i.default]}),exports.ACCORDION_ITEM_TAG=s,exports.ICON_TAG=a.ICON_TAG;
+    `},styles:[e.coarsePointerMixin,a.default]}),exports.ACCORDION_ITEM_TAG=c,exports.ICON_TAG=o.ICON_TAG;
 //# sourceMappingURL=accordion-item.cjs.map

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';\nimport { elementDirection } from '../../core/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport type { ComponentSize, VisualVariant } from '../../types';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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?: VisualVariant;\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' | '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 * @cssprop --accordion-item-row-duration - Expand/collapse row transition duration (default 200ms)\n * @cssprop --accordion-item-fade-duration - Content fade duration (default 200ms)\n * @cssprop --accordion-item-fade-delay - Content fade delay after the row starts (default 60ms)\n * @cssprop --accordion-item-collapse-delay - Delay before the row collapses after the close fade (default 120ms)\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<VisualVariant>(),\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';\nimport { elementDirection } from '../../core/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { COMPONENT_SIZES, type ComponentSize, VISUAL_VARIANTS, type VisualVariant } from '../../types';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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?: VisualVariant;\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' | '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 * @cssprop --accordion-item-row-duration - Expand/collapse row transition duration (default 200ms)\n * @cssprop --accordion-item-fade-duration - Content fade duration (default 200ms)\n * @cssprop --accordion-item-fade-delay - Content fade delay after the row starts (default 60ms)\n * @cssprop --accordion-item-collapse-delay - Delay before the row collapses after the close fade (default 120ms)\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.oneOf(COMPONENT_SIZES),\n    variant: prop.oneOf(VISUAL_VARIANTS),\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

@@ -1,14 +1,14 @@
-import{coarsePointerMixin as e}from"./styles/mixins/accessibility.css.js";import{elementDirection as t}from"./core/direction.js";import{ACCORDION_CTX as n}from"./accordion.js";import{disablableBundle as r}from"./shared/prop-bundles.js";import i from"./disclosure/accordion-item/accordion-item.css.js";import{ICON_TAG as a}from"./icon.js";import{define as o,getHost as s,html as c,inject as l,onMounted as u,prop as d,ref as f,useEmit as p,watchEffect as m}from"@vielzeug/ore";var h=`ore-accordion-item`;o(h,{props:{...r,expanded:d.bool(!1),size:d.string(),variant:d.string()},setup(e){let r=s(),i=p(),a=m,o=l(n);o&&a(()=>{let e=o.size.value,t=o.variant.value;e!==void 0&&r.setAttribute(`size`,e),t!==void 0&&r.setAttribute(`variant`,t)});let d=`accordion-item-title`,h=f(),g=f(),_=!1,openItem=()=>{let e=h.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`),_=!1;return}let onDone=()=>{e.classList.remove(`opening`),_=!1},n=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];n.length>0?Promise.allSettled(n.map(e=>e.finished)).then(onDone):onDone()}))},closeItem=()=>{let e=h.value;if(!e?.open||_)return;_=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),onDone=()=>{e.classList.remove(`closing`),e.open=!1,r.toggleAttribute(`expanded`,!1),i(`collapse`,{expanded:!1,item:r}),_=!1};if(t){let e=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(onDone):onDone()}else onDone()},v=!1,y=0,toggleDetails=()=>{if(e.disabled.value)return;let t=h.value;t&&(t.open?closeItem():openItem())},handleSummaryTouchStart=e=>{y=e.touches[0]?.clientY??0},handleSummaryTouchEnd=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-y)>10||(e.preventDefault(),v=!0,toggleDetails())},handleSummaryClick=e=>{if(v){v=!1,e.preventDefault();return}e.preventDefault(),toggleDetails()},handleToggle=()=>{let t=h.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 u(()=>{let e=h.value,n=g.value;if(!e||!n)return;let checkRTL=()=>{e.classList.toggle(`rtl`,t(r)===`rtl`)};checkRTL();let i=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&checkRTL()});for(let e=r;e;e=e.parentElement)i.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,handleToggle),n.addEventListener(`touchstart`,handleSummaryTouchStart,{passive:!0}),n.addEventListener(`touchend`,handleSummaryTouchEnd,{passive:!1}),n.addEventListener(`click`,handleSummaryClick),()=>{i.disconnect(),e.removeEventListener(`toggle`,handleToggle),n.removeEventListener(`touchstart`,handleSummaryTouchStart),n.removeEventListener(`touchend`,handleSummaryTouchEnd),n.removeEventListener(`click`,handleSummaryClick)}}),c`
-      <details part="item" ?open="${e.expanded}" ref="${h}">
+import{coarsePointerMixin as e}from"./styles/mixins/accessibility.css.js";import{elementDirection as t}from"./core/direction.js";import{COMPONENT_SIZES as n,VISUAL_VARIANTS as r}from"./shared/types.js";import{disablableBundle as i}from"./shared/prop-bundles.js";import{ACCORDION_CTX as a}from"./accordion.js";import o from"./disclosure/accordion-item/accordion-item.css.js";import{ICON_TAG as s}from"./icon.js";import{define as c,getHost as l,html as u,inject as d,onMounted as f,prop as p,ref as m,useEmit as h,watchEffect as g}from"@vielzeug/ore";var _=`ore-accordion-item`;c(_,{props:{...i,expanded:p.bool(!1),size:p.oneOf(n),variant:p.oneOf(r)},setup(e){let n=l(),r=h(),i=g,o=d(a);o&&i(()=>{let e=o.size.value,t=o.variant.value;e!==void 0&&n.setAttribute(`size`,e),t!==void 0&&n.setAttribute(`variant`,t)});let s=`accordion-item-title`,c=m(),p=m(),_=!1,openItem=()=>{let e=c.value;e&&!e.open&&(e.classList.add(`opening`),e.open=!0,n.toggleAttribute(`expanded`,!0),r(`expand`,{expanded:!0,item:n}),requestAnimationFrame(()=>{let t=e.querySelector(`.content-inner`);if(!t){e.classList.remove(`opening`),_=!1;return}let onDone=()=>{e.classList.remove(`opening`),_=!1},n=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];n.length>0?Promise.allSettled(n.map(e=>e.finished)).then(onDone):onDone()}))},closeItem=()=>{let e=c.value;if(!e?.open||_)return;_=!0,e.classList.add(`closing`);let t=e.querySelector(`.content-inner`),onDone=()=>{e.classList.remove(`closing`),e.open=!1,n.toggleAttribute(`expanded`,!1),r(`collapse`,{expanded:!1,item:n}),_=!1};if(t){let e=t.getAnimations?.().filter(e=>e instanceof CSSTransition)??[];e.length>0?Promise.allSettled(e.map(e=>e.finished)).then(onDone):onDone()}else onDone()},v=!1,y=0,toggleDetails=()=>{if(e.disabled.value)return;let t=c.value;t&&(t.open?closeItem():openItem())},handleSummaryTouchStart=e=>{y=e.touches[0]?.clientY??0},handleSummaryTouchEnd=e=>{Math.abs((e.changedTouches[0]?.clientY??0)-y)>10||(e.preventDefault(),v=!0,toggleDetails())},handleSummaryClick=e=>{if(v){v=!1,e.preventDefault();return}e.preventDefault(),toggleDetails()},handleToggle=()=>{let t=c.value?.open??!1,i=!!e.expanded.value;t&&!i?(n.toggleAttribute(`expanded`,!0),r(`expand`,{expanded:!0,item:n})):!t&&i&&(n.toggleAttribute(`expanded`,!1),r(`collapse`,{expanded:!1,item:n}))};return f(()=>{let e=c.value,r=p.value;if(!e||!r)return;let checkRTL=()=>{e.classList.toggle(`rtl`,t(n)===`rtl`)};checkRTL();let i=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&checkRTL()});for(let e=n;e;e=e.parentElement)i.observe(e,{attributeFilter:[`dir`],attributes:!0});return e.addEventListener(`toggle`,handleToggle),r.addEventListener(`touchstart`,handleSummaryTouchStart,{passive:!0}),r.addEventListener(`touchend`,handleSummaryTouchEnd,{passive:!1}),r.addEventListener(`click`,handleSummaryClick),()=>{i.disconnect(),e.removeEventListener(`toggle`,handleToggle),r.removeEventListener(`touchstart`,handleSummaryTouchStart),r.removeEventListener(`touchend`,handleSummaryTouchEnd),r.removeEventListener(`click`,handleSummaryClick)}}),u`
+      <details part="item" ?open="${e.expanded}" ref="${c}">
         <summary
           part="summary"
           aria-expanded="${()=>String(e.expanded.value)}"
           aria-disabled="${()=>e.disabled.value?`true`:`false`}"
           tabindex="${()=>e.disabled.value?`-1`:null}"
-          ref="${g}">
+          ref="${p}">
           <slot name="prefix"></slot>
           <div class="header-content" part="header">
-            <span class="title" part="title" id="${d}">
+            <span class="title" part="title" id="${s}">
               <slot name="title"></slot>
             </span>
             <span class="subtitle" part="subtitle">
@@ -18,11 +18,11 @@ import{coarsePointerMixin as e}from"./styles/mixins/accessibility.css.js";import
           <slot name="suffix"></slot>
           <ore-icon class="chevron" name="chevron-down" size="20" stroke-width="2" aria-hidden="true"></ore-icon>
         </summary>
-        <div class="content-wrapper" part="content" role="region" aria-labelledby="${d}">
+        <div class="content-wrapper" part="content" role="region" aria-labelledby="${s}">
           <div class="content-inner">
             <slot></slot>
           </div>
         </div>
       </details>
-    `},styles:[e,i]});export{h as ACCORDION_ITEM_TAG,a as ICON_TAG};
+    `},styles:[e,o]});export{_ as ACCORDION_ITEM_TAG,s as ICON_TAG};
 //# sourceMappingURL=accordion-item.js.map

package/dist/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, getHost, html, inject, onMounted, prop, ref, useEmit, watchEffect } from '@vielzeug/ore';\nimport { elementDirection } from '../../core/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport type { ComponentSize, VisualVariant } from '../../types';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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?: VisualVariant;\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' | '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 * @cssprop --accordion-item-row-duration - Expand/collapse row transition duration (default 200ms)\n * @cssprop --accordion-item-fade-duration - Content fade duration (default 200ms)\n * @cssprop --accordion-item-fade-delay - Content fade delay after the row starts (default 60ms)\n * @cssprop --accordion-item-collapse-delay - Delay before the row collapses after the close fade (default 120ms)\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<VisualVariant>(),\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":"4dA6EA,IAAa,EAAqB,qBAClC,EAA8B,EAAoB,CAChD,MAAO,CACL,GAAG,EACH,SAAU,EAAK,KAAK,EAAK,EACzB,KAAM,EAAK,OAAsB,EACjC,QAAS,EAAK,OAAsB,CACtC,EAEA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAAgC,EACvC,EAAQ,EAGR,EAAe,EAAO,CAAa,EAErC,GACF,MAAY,CACV,IAAM,EAAO,EAAa,KAAK,MACzB,EAAU,EAAa,QAAQ,MAEjC,IAAS,IAAA,IAAW,EAAG,aAAa,OAAQ,CAAI,EAEhD,IAAY,IAAA,IAAW,EAAG,aAAa,UAAW,CAAO,CAC/D,CAAC,EAGH,IAAM,EAAU,uBACV,EAAa,EAAwB,EACrC,EAAa,EAAiB,EAChC,EAAc,GAEZ,aAAiB,CACrB,IAAM,EAAU,EAAW,MAEtB,GAAW,GAAQ,OAExB,EAAQ,UAAU,IAAI,SAAS,EAC/B,EAAQ,KAAO,GAEf,EAAG,gBAAgB,WAAY,EAAI,EACnC,EAAK,SAAU,CAAE,SAAU,GAAM,KAAM,CAAG,CAAC,EAE3C,0BAA4B,CAC1B,IAAM,EAAQ,EAAQ,cAA2B,gBAAgB,EAEjE,GAAI,CAAC,EAAO,CACV,EAAQ,UAAU,OAAO,SAAS,EAClC,EAAc,GAEd,MACF,CAEA,IAAM,WAAe,CACnB,EAAQ,UAAU,OAAO,SAAS,EAClC,EAAc,EAChB,EACM,EAAc,EAAM,gBAAgB,CAAC,CAAC,OAAQ,GAAM,aAAa,aAAa,GAAK,CAAC,EAEtF,EAAY,OAAS,EACvB,QAAQ,WAAW,EAAY,IAAK,GAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,EAElE,OAAO,CAEX,CAAC,EACH,EAEM,cAAkB,CACtB,IAAM,EAAU,EAAW,MAE3B,GAAI,CAAC,GAAS,MAAQ,EAAa,OAEnC,EAAc,GAEd,EAAQ,UAAU,IAAI,SAAS,EAE/B,IAAM,EAAQ,EAAQ,cAA2B,gBAAgB,EAC3D,WAAe,CACnB,EAAQ,UAAU,OAAO,SAAS,EAClC,EAAQ,KAAO,GACf,EAAG,gBAAgB,WAAY,EAAK,EACpC,EAAK,WAAY,CAAE,SAAU,GAAO,KAAM,CAAG,CAAC,EAC9C,EAAc,EAChB,EAEA,GAAI,EAAO,CACT,IAAM,EAAc,EAAM,gBAAgB,CAAC,CAAC,OAAQ,GAAM,aAAa,aAAa,GAAK,CAAC,EAEtF,EAAY,OAAS,EACvB,QAAQ,WAAW,EAAY,IAAK,GAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,EAElE,OAAO,CAEX,MACE,OAAO,CAEX,EAEI,EAAe,GACf,EAAc,EAEZ,kBAAsB,CAC1B,GAAI,EAAM,SAAS,MAAO,OAE1B,IAAM,EAAU,EAAW,MAEtB,IAED,EAAQ,KACV,UAAU,EAEV,SAAS,EAEb,EAEM,wBAA2B,GAAkB,CACjD,EAAc,EAAE,QAAQ,EAAE,EAAE,SAAW,CACzC,EAEM,sBAAyB,GAAkB,CACpC,KAAK,KAAK,EAAE,eAAe,EAAE,EAAE,SAAW,GAAK,CAEtD,EAAK,KAET,EAAE,eAAe,EACjB,EAAe,GACf,cAAc,EAChB,EAEM,mBAAsB,GAAa,CACvC,GAAI,EAAc,CAChB,EAAe,GACf,EAAE,eAAe,EAEjB,MACF,CAEA,EAAE,eAAe,EACjB,cAAc,CAChB,EAEM,iBAAqB,CAEzB,IAAM,EAAS,EAAW,OAAO,MAAQ,GACnC,EAAc,EAAQ,EAAM,SAAS,MAEvC,GAAU,CAAC,GACb,EAAG,gBAAgB,WAAY,EAAI,EACnC,EAAK,SAAU,CAAE,SAAU,GAAM,KAAM,CAAG,CAAC,GAClC,CAAC,GAAU,IACpB,EAAG,gBAAgB,WAAY,EAAK,EACpC,EAAK,WAAY,CAAE,SAAU,GAAO,KAAM,CAAG,CAAC,EAElD,EA8CA,OA5CA,MAAgB,CACd,IAAM,EAAU,EAAW,MACrB,EAAU,EAAW,MAE3B,GAAI,CAAC,GAAW,CAAC,EAAS,OAI1B,IAAM,aAAiB,CACrB,EAAQ,UAAU,OAAO,MAAO,EAAiB,CAAE,IAAM,KAAK,CAChE,EAGA,SAAS,EAKT,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAChC,EAAU,KAAM,GAAM,EAAE,gBAAkB,KAEzD,GACF,SAAS,CAEb,CAAC,EAED,IAAK,IAAI,EAA2B,EAAI,EAAU,EAAW,EAAS,cACpE,EAAS,QAAQ,EAAU,CAAE,gBAAiB,CAAC,KAAK,EAAG,WAAY,EAAK,CAAC,EAQ3E,OALA,EAAQ,iBAAiB,SAAU,YAAY,EAC/C,EAAQ,iBAAiB,aAAc,wBAAyB,CAAE,QAAS,EAAK,CAAC,EACjF,EAAQ,iBAAiB,WAAY,sBAAuB,CAAE,QAAS,EAAM,CAAC,EAC9E,EAAQ,iBAAiB,QAAS,kBAAkB,MAEvC,CACX,EAAS,WAAW,EACpB,EAAQ,oBAAoB,SAAU,YAAY,EAClD,EAAQ,oBAAoB,aAAc,uBAAuB,EACjE,EAAQ,oBAAoB,WAAY,qBAAqB,EAC7D,EAAQ,oBAAoB,QAAS,kBAAkB,CACzD,CACF,CAAC,EAEM,CAAI;oCACqB,EAAM,SAAS,SAAS,EAAW;;;+BAGtC,OAAO,EAAM,SAAS,KAAK,EAAE;+BAC5B,EAAM,SAAS,MAAQ,OAAS,QAAS;0BAC9C,EAAM,SAAS,MAAQ,KAAO,KAAM;iBAChD,EAAW;;;mDAGuB,EAAQ;;;;;;;;;;qFAU0B,EAAQ;;;;;;KAO3F,EAEA,OAAQ,CAAC,EAAoB,CAAM,CACrC,CAAC"}
+{"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';\nimport { elementDirection } from '../../core/direction';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin } from '../../styles';\nimport { COMPONENT_SIZES, type ComponentSize, VISUAL_VARIANTS, type VisualVariant } from '../../types';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\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?: VisualVariant;\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' | '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 * @cssprop --accordion-item-row-duration - Expand/collapse row transition duration (default 200ms)\n * @cssprop --accordion-item-fade-duration - Content fade duration (default 200ms)\n * @cssprop --accordion-item-fade-delay - Content fade delay after the row starts (default 60ms)\n * @cssprop --accordion-item-collapse-delay - Delay before the row collapses after the close fade (default 120ms)\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.oneOf(COMPONENT_SIZES),\n    variant: prop.oneOf(VISUAL_VARIANTS),\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.cjs

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

package/dist/accordion.cjs.map

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

package/dist/accordion.js

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

package/dist/accordion.js.map

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

package/dist/alert.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("./shared/prop-bundles.cjs"),i=require("./icon.cjs"),a=require("./overlay/shared/await-exit.cjs"),o=require("./feedback/alert/alert.css.cjs");let s=require("@vielzeug/ore");var c=`ore-alert`;(0,s.define)(c,{props:{...r.themableBundle,...r.sizableBundle,...r.roundableBundle,accented:s.prop.bool(!1),dismissible:s.prop.bool(!1),embedded:s.prop.bool(!1),heading:s.prop.string(),horizontal:s.prop.bool(!1),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),i=null,announce=e=>{i&&(i.textContent=``,requestAnimationFrame(()=>{i&&(i.textContent=e)}))},handleDismiss=r=>{if(e.dismissible.value){if(e.embedded.value){n(`dismiss`,{originalEvent:r});return}t.setAttribute(`dismissing`,``),a.awaitExit(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),announce(`Alert dismissed`),n(`dismiss`,{originalEvent:r})})}},alertRole=()=>e.embedded.value?`presentation`:e.color.value===`error`?`alert`:`status`;return 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("./shared/prop-bundles.cjs"),i=require("./icon.cjs"),a=require("./overlay/shared/await-exit.cjs"),o=require("./feedback/alert/alert.css.cjs");let s=require("@vielzeug/ore");var c=[`solid`,`flat`,`bordered`],l=`ore-alert`;(0,s.define)(l,{props:{...r.themableBundle,...r.sizableBundle,...r.roundableBundle,accented:s.prop.bool(!1),dismissible:s.prop.bool(!1),embedded:s.prop.bool(!1),heading:s.prop.string(),horizontal:s.prop.bool(!1),variant:s.prop.oneOf(c)},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),i=null,announce=e=>{i&&(i.textContent=``,requestAnimationFrame(()=>{i&&(i.textContent=e)}))},handleDismiss=r=>{if(e.dismissible.value){if(e.embedded.value){n(`dismiss`,{originalEvent:r});return}t.setAttribute(`dismissing`,``),a.awaitExit(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),announce(`Alert dismissed`),n(`dismiss`,{originalEvent:r})})}},alertRole=()=>e.embedded.value?`presentation`:e.color.value===`error`?`alert`:`status`;return s.html`
       <span
         class="sr-announce"
         aria-live="polite"
@@ -32,5 +32,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </div>
-    `},styles:[n.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,n.forcedColorsMixin,t.sizeVariantMixin({lg:{"--_padding":`var(--size-4) var(--size-5)`,fontSize:`var(--text-base)`,gap:`var(--size-3-5)`},sm:{"--_padding":`var(--size-2) var(--size-3)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`}}),o.default]}),exports.ALERT_TAG=c,exports.ICON_TAG=i.ICON_TAG;
+    `},styles:[n.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,n.forcedColorsMixin,t.sizeVariantMixin({lg:{"--_padding":`var(--size-4) var(--size-5)`,fontSize:`var(--text-base)`,gap:`var(--size-3-5)`},sm:{"--_padding":`var(--size-2) var(--size-3)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`}}),o.default]}),exports.ALERT_TAG=l,exports.ICON_TAG=i.ICON_TAG;
 //# sourceMappingURL=alert.cjs.map

package/dist/alert.cjs.map

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

package/dist/alert.js

@@ -1,4 +1,4 @@
-import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n,sizeVariantMixin as r}from"./styles/mixins/shape.css.js";import{colorThemeMixin as i,forcedColorsMixin as a}from"./styles/mixins/theme.css.js";import{roundableBundle as o,sizableBundle as s,themableBundle as c}from"./shared/prop-bundles.js";import{ICON_TAG as l}from"./icon.js";import{awaitExit as u}from"./overlay/shared/await-exit.js";import d from"./feedback/alert/alert.css.js";import{define as f,getHost as p,html as m,prop as h,useEmit as g,useSlots as _}from"@vielzeug/ore";var v=`ore-alert`;f(v,{props:{...c,...s,...o,accented:h.bool(!1),dismissible:h.bool(!1),embedded:h.bool(!1),heading:h.string(),horizontal:h.bool(!1),variant:h.string()},setup(e){let t=p(),n=g(),r=_(),i=null,announce=e=>{i&&(i.textContent=``,requestAnimationFrame(()=>{i&&(i.textContent=e)}))},handleDismiss=r=>{if(e.dismissible.value){if(e.embedded.value){n(`dismiss`,{originalEvent:r});return}t.setAttribute(`dismissing`,``),u(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),announce(`Alert dismissed`),n(`dismiss`,{originalEvent:r})})}},alertRole=()=>e.embedded.value?`presentation`:e.color.value===`error`?`alert`:`status`;return m`
+import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n,sizeVariantMixin as r}from"./styles/mixins/shape.css.js";import{colorThemeMixin as i,forcedColorsMixin as a}from"./styles/mixins/theme.css.js";import{roundableBundle as o,sizableBundle as s,themableBundle as c}from"./shared/prop-bundles.js";import{ICON_TAG as l}from"./icon.js";import{awaitExit as u}from"./overlay/shared/await-exit.js";import d from"./feedback/alert/alert.css.js";import{define as f,getHost as p,html as m,prop as h,useEmit as g,useSlots as _}from"@vielzeug/ore";var v=[`solid`,`flat`,`bordered`],y=`ore-alert`;f(y,{props:{...c,...s,...o,accented:h.bool(!1),dismissible:h.bool(!1),embedded:h.bool(!1),heading:h.string(),horizontal:h.bool(!1),variant:h.oneOf(v)},setup(e){let t=p(),n=g(),r=_(),i=null,announce=e=>{i&&(i.textContent=``,requestAnimationFrame(()=>{i&&(i.textContent=e)}))},handleDismiss=r=>{if(e.dismissible.value){if(e.embedded.value){n(`dismiss`,{originalEvent:r});return}t.setAttribute(`dismissing`,``),u(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),announce(`Alert dismissed`),n(`dismiss`,{originalEvent:r})})}},alertRole=()=>e.embedded.value?`presentation`:e.color.value===`error`?`alert`:`status`;return m`
       <span
         class="sr-announce"
         aria-live="polite"
@@ -32,5 +32,5 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
           <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </div>
-    `},styles:[i,e,t,n,a,r({lg:{"--_padding":`var(--size-4) var(--size-5)`,fontSize:`var(--text-base)`,gap:`var(--size-3-5)`},sm:{"--_padding":`var(--size-2) var(--size-3)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`}}),d]});export{v as ALERT_TAG,l as ICON_TAG};
+    `},styles:[i,e,t,n,a,r({lg:{"--_padding":`var(--size-4) var(--size-5)`,fontSize:`var(--text-base)`,gap:`var(--size-3-5)`},sm:{"--_padding":`var(--size-2) var(--size-3)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`}}),d]});export{y as ALERT_TAG,l as ICON_TAG};
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, getHost, html, prop, useEmit, useSlots } from '@vielzeug/ore';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport componentStyles from './alert.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissible (×) button */\n  dismissible?: boolean;\n  /**\n   * Render as a passive surface inside a host that owns lifecycle and\n   * announcements (for example `ore-toast`): no live-region role, and the\n   * close button only emits `dismiss` instead of hiding the alert.\n   */\n  embedded?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} embedded - Passive surface for a host that owns lifecycle and announcements; the close button only emits `dismiss`\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed (after the exit animation, or immediately when `embedded`). detail: { originalEvent: MouseEvent }\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-shadow - Box shadow\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    embedded: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.string<'solid' | 'flat' | 'bordered'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAlertEvents>();\n    const slots = useSlots();\n\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      if (props.embedded.value) {\n        emit('dismiss', { originalEvent: e });\n\n        return;\n      }\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => {\n      if (props.embedded.value) return 'presentation';\n\n      return props.color.value === 'error' ? 'alert' : 'status';\n    };\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" role=\"${alertRole}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=\"${() => !slots.has('icon').value}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=\"${() => !props.heading.value}\">\n          <span class=\"heading\" part=\"heading\">${props.heading}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=\"${() => !props.dismissible.value}\"\n          @click=\"${handleDismiss}\">\n          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"mmBA4FA,IAAa,EAAY,YACzB,EAAsB,EAAW,CAC/B,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,SAAU,EAAK,KAAK,EAAK,EACzB,YAAa,EAAK,KAAK,EAAK,EAC5B,SAAU,EAAK,KAAK,EAAK,EACzB,QAAS,EAAK,OAAO,EACrB,WAAY,EAAK,KAAK,EAAK,EAC3B,QAAS,EAAK,OAAsC,CACtD,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAAwB,EAC/B,EAAQ,EAAS,EAEnB,EAAiC,KAE/B,SAAY,GAAoB,CAC/B,IAEL,EAAW,YAAc,GACzB,0BAA4B,CACtB,IAAY,EAAW,YAAc,EAC3C,CAAC,EACH,EAEM,cAAiB,GAAkB,CAClC,KAAM,YAAY,MAEvB,IAAI,EAAM,SAAS,MAAO,CACxB,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,EAEpC,MACF,CAEA,EAAG,aAAa,aAAc,EAAE,EAChC,EAAU,MAAU,CAClB,EAAG,gBAAgB,YAAY,EAC/B,EAAG,aAAa,YAAa,EAAE,EAC/B,SAAS,iBAAiB,EAC1B,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,CACtC,CAAC,CARD,CASF,EAEM,cACA,EAAM,SAAS,MAAc,eAE1B,EAAM,MAAM,QAAU,QAAU,QAAU,SAGnD,MAAO,EAAI;;;;;eAKC,GAAqB,CAC3B,EAAa,CACf,EAAE;iCACuB,UAAU;yEACgC,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;yDAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;2DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;yBAQ9D,CAAC,EAAM,YAAY,MAAM;oBAChC,cAAc;;;;KAKhC,EACA,OAAQ,CACN,EACA,EACA,EACA,EACA,EACA,EAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,iBAAkB,EACxG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,eAAgB,CACtG,CAAC,EACD,CACF,CACF,CAAC"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, getHost, html, prop, useEmit, useSlots } from '@vielzeug/ore';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nconst ALERT_VARIANTS = ['solid', 'flat', 'bordered'] as const;\n\nimport componentStyles from './alert.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissible (×) button */\n  dismissible?: boolean;\n  /**\n   * Render as a passive surface inside a host that owns lifecycle and\n   * announcements (for example `ore-toast`): no live-region role, and the\n   * close button only emits `dismiss` instead of hiding the alert.\n   */\n  embedded?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: (typeof ALERT_VARIANTS)[number];\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} embedded - Passive surface for a host that owns lifecycle and announcements; the close button only emits `dismiss`\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed (after the exit animation, or immediately when `embedded`). detail: { originalEvent: MouseEvent }\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-shadow - Box shadow\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    embedded: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.oneOf(ALERT_VARIANTS),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAlertEvents>();\n    const slots = useSlots();\n\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      if (props.embedded.value) {\n        emit('dismiss', { originalEvent: e });\n\n        return;\n      }\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => {\n      if (props.embedded.value) return 'presentation';\n\n      return props.color.value === 'error' ? 'alert' : 'status';\n    };\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" role=\"${alertRole}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=\"${() => !slots.has('icon').value}\">\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=\"${() => !props.heading.value}\">\n          <span class=\"heading\" part=\"heading\">${props.heading}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=\"${() => !props.dismissible.value}\"\n          @click=\"${handleDismiss}\">\n          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"mmBAaA,IAAM,EAAiB,CAAC,QAAS,OAAQ,UAAU,EAkFtC,EAAY,YACzB,EAAsB,EAAW,CAC/B,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,SAAU,EAAK,KAAK,EAAK,EACzB,YAAa,EAAK,KAAK,EAAK,EAC5B,SAAU,EAAK,KAAK,EAAK,EACzB,QAAS,EAAK,OAAO,EACrB,WAAY,EAAK,KAAK,EAAK,EAC3B,QAAS,EAAK,MAAM,CAAc,CACpC,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAAwB,EAC/B,EAAQ,EAAS,EAEnB,EAAiC,KAE/B,SAAY,GAAoB,CAC/B,IAEL,EAAW,YAAc,GACzB,0BAA4B,CACtB,IAAY,EAAW,YAAc,EAC3C,CAAC,EACH,EAEM,cAAiB,GAAkB,CAClC,KAAM,YAAY,MAEvB,IAAI,EAAM,SAAS,MAAO,CACxB,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,EAEpC,MACF,CAEA,EAAG,aAAa,aAAc,EAAE,EAChC,EAAU,MAAU,CAClB,EAAG,gBAAgB,YAAY,EAC/B,EAAG,aAAa,YAAa,EAAE,EAC/B,SAAS,iBAAiB,EAC1B,EAAK,UAAW,CAAE,cAAe,CAAE,CAAC,CACtC,CAAC,CARD,CASF,EAEM,cACA,EAAM,SAAS,MAAc,eAE1B,EAAM,MAAM,QAAU,QAAU,QAAU,SAGnD,MAAO,EAAI;;;;;eAKC,GAAqB,CAC3B,EAAa,CACf,EAAE;iCACuB,UAAU;yEACgC,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;yDAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;2DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;yBAQ9D,CAAC,EAAM,YAAY,MAAM;oBAChC,cAAc;;;;KAKhC,EACA,OAAQ,CACN,EACA,EACA,EACA,EACA,EACA,EAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,iBAAkB,EACxG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,eAAgB,CACtG,CAAC,EACD,CACF,CACF,CAAC"}

package/dist/avatar.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./icon.cjs"),i=require("./content/avatar/avatar.css.cjs");let a=require("@vielzeug/ripple"),o=require("@vielzeug/ore");var s={away:`Away`,busy:`Busy`,offline:`Offline`,online:`Online`},c=`ore-avatar`;(0,o.define)(c,{props:{...n.themableBundle,...n.sizableBundle,...n.roundableBundle,alt:o.prop.string(),initials:o.prop.string(),src:o.prop.string(),status:o.prop.string()},setup(e){let t=(0,a.signal)(!1);(0,a.watch)(e.src,()=>{t.value=!1});let attachImgListeners=e=>{e&&(e.addEventListener(`error`,()=>{t.value=!0}),e.addEventListener(`load`,()=>{t.value=!1}))},n=(0,a.computed)(()=>{if(e.initials.value)return e.initials.value.slice(0,2);let t=e.alt.value;if(!t)return``;let n=t.trim().split(/\s+/);return n.length>=2?(n[0][0]+n[n.length-1][0]).toUpperCase():n[0].slice(0,2).toUpperCase()}),r=(0,a.computed)(()=>!!e.src.value&&!t.value),i=(0,a.computed)(()=>!r.value&&!!n.value),c=(0,a.computed)(()=>!r.value&&!i.value),avatarLabel=()=>{let t=e.alt.value||null,n=e.status.value,r=n?s[n]:null;return!t&&!r?null:t?r?`${t}, ${r}`:t:`Status: ${r}`},avatarRole=()=>avatarLabel()?`img`:null;return o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./icon.cjs"),i=require("./content/avatar/avatar.css.cjs");let a=require("@vielzeug/ripple"),o=require("@vielzeug/ore");var s=[`online`,`offline`,`busy`,`away`],c={away:`Away`,busy:`Busy`,offline:`Offline`,online:`Online`},l=`ore-avatar`;(0,o.define)(l,{props:{...n.themableBundle,...n.sizableBundle,...n.roundableBundle,alt:o.prop.string(),initials:o.prop.string(),src:o.prop.string(),status:o.prop.oneOf(s)},setup(e){let t=(0,a.signal)(!1);(0,a.watch)(e.src,()=>{t.value=!1});let attachImgListeners=e=>{e&&(e.addEventListener(`error`,()=>{t.value=!0}),e.addEventListener(`load`,()=>{t.value=!1}))},n=(0,a.computed)(()=>{if(e.initials.value)return e.initials.value.slice(0,2);let t=e.alt.value;if(!t)return``;let n=t.trim().split(/\s+/);return n.length>=2?(n[0][0]+n[n.length-1][0]).toUpperCase():n[0].slice(0,2).toUpperCase()}),r=(0,a.computed)(()=>!!e.src.value&&!t.value),i=(0,a.computed)(()=>!r.value&&!!n.value),s=(0,a.computed)(()=>!r.value&&!i.value),avatarLabel=()=>{let t=e.alt.value||null,n=e.status.value,r=n?c[n]:null;return!t&&!r?null:t?r?`${t}, ${r}`:t:`Status: ${r}`},avatarRole=()=>avatarLabel()?`img`:null;return o.html`
       <span class="avatar" part="avatar" aria-label="${avatarLabel}" role="${avatarRole}">
         ${()=>e.src.value?o.html`
                 <img
@@ -12,12 +12,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         ${()=>i.value?o.html`
                 <span class="initials" part="initials" aria-hidden="true">${n}</span>
               `:``}
-        ${()=>c.value?o.html`
+        ${()=>s.value?o.html`
                 <ore-icon class="icon-fallback" part="fallback" name="user" size="50%"></ore-icon>
               `:``}
       </span>
       ${()=>e.status.value?o.html`
               <span class="status" part="status" data-status="${e.status}" aria-hidden="true"></span>
             `:``}
-    `},styles:[t.colorThemeMixin,e.roundedVariantMixin,e.sizeVariantMixin({lg:{fontSize:`var(--avatar-font-size, var(--text-base))`,size:`var(--avatar-size, var(--size-14))`},md:{fontSize:`var(--avatar-font-size, var(--text-sm))`,size:`var(--avatar-size, var(--size-10))`},sm:{fontSize:`var(--avatar-font-size, var(--text-xs))`,size:`var(--avatar-size, var(--size-7))`}}),i.default]}),exports.AVATAR_TAG=c,exports.ICON_TAG=r.ICON_TAG;
+    `},styles:[t.colorThemeMixin,e.roundedVariantMixin,e.sizeVariantMixin({lg:{fontSize:`var(--avatar-font-size, var(--text-base))`,size:`var(--avatar-size, var(--size-14))`},md:{fontSize:`var(--avatar-font-size, var(--text-sm))`,size:`var(--avatar-size, var(--size-10))`},sm:{fontSize:`var(--avatar-font-size, var(--text-xs))`,size:`var(--avatar-size, var(--size-7))`}}),i.default]}),exports.AVATAR_STATUSES=s,exports.AVATAR_TAG=l,exports.ICON_TAG=r.ICON_TAG;
 //# sourceMappingURL=avatar.cjs.map

package/dist/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport componentStyles from './avatar.css?inline';\n\nexport { ICON_TAG } from '../icon/icon';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type OreAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element ore-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.string<AvatarStatus>(),\n  },\n  setup(props) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    const avatarLabel = () => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    };\n    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" aria-label=\"${avatarLabel}\" role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`\n                <img\n                  ref=\"${attachImgListeners}\"\n                  part=\"img\"\n                  src=\"${props.src}\"\n                  alt=\"${props.alt}\"\n                  ?hidden=\"${() => !showImage.value}\"\n                  aria-hidden=\"true\" />\n              `\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`\n                <span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>\n              `\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`\n                <ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>\n              `\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`\n              <span class=\"status\" part=\"status\" data-status=\"${props.status}\" aria-hidden=\"true\"></span>\n            `\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"wUAUA,IAAM,EAA8C,CAClD,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,QACV,EAsDa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,IAAK,EAAA,KAAK,OAAO,EACjB,SAAU,EAAA,KAAK,OAAO,EACtB,IAAK,EAAA,KAAK,OAAO,EACjB,OAAQ,EAAA,KAAK,OAAqB,CACpC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAY,EAAA,OAAA,CAAO,EAAK,GAG9B,EAAA,EAAA,MAAA,CAAM,EAAM,QAAW,CACrB,EAAU,MAAQ,EACpB,CAAC,EAGD,IAAM,mBAAsB,GAAgC,CACrD,IAEL,EAAG,iBAAiB,YAAe,CACjC,EAAU,MAAQ,EACpB,CAAC,EACD,EAAG,iBAAiB,WAAc,CAChC,EAAU,MAAQ,EACpB,CAAC,EACH,EACM,GAAA,EAAkB,EAAA,SAAA,KAAe,CACrC,GAAI,EAAM,SAAS,MAAO,OAAO,EAAM,SAAS,MAAM,MAAM,EAAG,CAAC,EAEhE,IAAM,EAAM,EAAM,IAAI,MAEtB,GAAI,CAAC,EAAK,MAAO,GAEjB,IAAM,EAAQ,EAAI,KAAK,CAAC,CAAC,MAAM,KAAK,EAIpC,OAFI,EAAM,QAAU,GAAW,EAAM,EAAE,CAAC,GAAK,EAAM,EAAM,OAAS,EAAE,CAAC,GAAA,CAAI,YAAY,EAE9E,EAAM,EAAE,CAAC,MAAM,EAAG,CAAC,CAAC,CAAC,YAAY,CAC1C,CAAC,EACK,GAAA,EAAY,EAAA,SAAA,KAAe,CAAC,CAAC,EAAM,IAAI,OAAS,CAAC,EAAU,KAAK,EAChE,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAU,OAAS,CAAC,CAAC,EAAgB,KAAK,EACzE,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAU,OAAS,CAAC,EAAa,KAAK,EACrE,gBAAoB,CACxB,IAAM,EAAQ,EAAM,IAAI,OAAgC,KAClD,EAAY,EAAM,OAAO,MACzB,EAAS,EAAY,EAAc,GAAa,KAQtD,MANI,CAAC,GAAQ,CAAC,EAAe,KAExB,EAEA,EAEE,GAAG,EAAK,IAAI,IAFC,EAFF,WAAW,GAK/B,EACM,eAAoB,YAAY,EAAI,MAAQ,KAElD,MAAO,GAAA,IAAI;uDACwC,YAAY,UAAU,WAAW;cAE9E,EAAM,IAAI,MACN,EAAA,IAAI;;yBAEO,mBAAmB;;yBAEnB,EAAM,IAAI;yBACV,EAAM,IAAI;iCACA,CAAC,EAAU,MAAM;;gBAGtC,GAAG;cAEP,EAAa,MACT,EAAA,IAAI;4EAC0D,EAAgB;gBAE9E,GAAG;cAEP,EAAa,MACT,EAAA,IAAI;;gBAGJ,GAAG;;YAGT,EAAM,OAAO,MACT,EAAA,IAAI;gEACgD,EAAM,OAAO;cAEjE,GAAG;KAEb,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,oBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,SAAU,4CAA6C,KAAM,oCAAqC,EACxG,GAAI,CAAE,SAAU,0CAA2C,KAAM,oCAAqC,EACtG,GAAI,CAAE,SAAU,0CAA2C,KAAM,mCAAoC,CACvG,CAAC,EACD,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport componentStyles from './avatar.css?inline';\n\nexport { ICON_TAG } from '../icon/icon';\nexport const AVATAR_STATUSES = ['online', 'offline', 'busy', 'away'] as const;\nexport type AvatarStatus = (typeof AVATAR_STATUSES)[number];\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type OreAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element ore-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.oneOf(AVATAR_STATUSES),\n  },\n  setup(props) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    const avatarLabel = () => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    };\n    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" aria-label=\"${avatarLabel}\" role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`\n                <img\n                  ref=\"${attachImgListeners}\"\n                  part=\"img\"\n                  src=\"${props.src}\"\n                  alt=\"${props.alt}\"\n                  ?hidden=\"${() => !showImage.value}\"\n                  aria-hidden=\"true\" />\n              `\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`\n                <span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>\n              `\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`\n                <ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>\n              `\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`\n              <span class=\"status\" part=\"status\" data-status=\"${props.status}\" aria-hidden=\"true\"></span>\n            `\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"wUAQA,IAAa,EAAkB,CAAC,SAAU,UAAW,OAAQ,MAAM,EAG7D,EAA8C,CAClD,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,QACV,EAsDa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,EAAY,CACjC,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,IAAK,EAAA,KAAK,OAAO,EACjB,SAAU,EAAA,KAAK,OAAO,EACtB,IAAK,EAAA,KAAK,OAAO,EACjB,OAAQ,EAAA,KAAK,MAAM,CAAe,CACpC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAY,EAAA,OAAA,CAAO,EAAK,GAG9B,EAAA,EAAA,MAAA,CAAM,EAAM,QAAW,CACrB,EAAU,MAAQ,EACpB,CAAC,EAGD,IAAM,mBAAsB,GAAgC,CACrD,IAEL,EAAG,iBAAiB,YAAe,CACjC,EAAU,MAAQ,EACpB,CAAC,EACD,EAAG,iBAAiB,WAAc,CAChC,EAAU,MAAQ,EACpB,CAAC,EACH,EACM,GAAA,EAAkB,EAAA,SAAA,KAAe,CACrC,GAAI,EAAM,SAAS,MAAO,OAAO,EAAM,SAAS,MAAM,MAAM,EAAG,CAAC,EAEhE,IAAM,EAAM,EAAM,IAAI,MAEtB,GAAI,CAAC,EAAK,MAAO,GAEjB,IAAM,EAAQ,EAAI,KAAK,CAAC,CAAC,MAAM,KAAK,EAIpC,OAFI,EAAM,QAAU,GAAW,EAAM,EAAE,CAAC,GAAK,EAAM,EAAM,OAAS,EAAE,CAAC,GAAA,CAAI,YAAY,EAE9E,EAAM,EAAE,CAAC,MAAM,EAAG,CAAC,CAAC,CAAC,YAAY,CAC1C,CAAC,EACK,GAAA,EAAY,EAAA,SAAA,KAAe,CAAC,CAAC,EAAM,IAAI,OAAS,CAAC,EAAU,KAAK,EAChE,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAU,OAAS,CAAC,CAAC,EAAgB,KAAK,EACzE,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAU,OAAS,CAAC,EAAa,KAAK,EACrE,gBAAoB,CACxB,IAAM,EAAQ,EAAM,IAAI,OAAgC,KAClD,EAAY,EAAM,OAAO,MACzB,EAAS,EAAY,EAAc,GAAa,KAQtD,MANI,CAAC,GAAQ,CAAC,EAAe,KAExB,EAEA,EAEE,GAAG,EAAK,IAAI,IAFC,EAFF,WAAW,GAK/B,EACM,eAAoB,YAAY,EAAI,MAAQ,KAElD,MAAO,GAAA,IAAI;uDACwC,YAAY,UAAU,WAAW;cAE9E,EAAM,IAAI,MACN,EAAA,IAAI;;yBAEO,mBAAmB;;yBAEnB,EAAM,IAAI;yBACV,EAAM,IAAI;iCACA,CAAC,EAAU,MAAM;;gBAGtC,GAAG;cAEP,EAAa,MACT,EAAA,IAAI;4EAC0D,EAAgB;gBAE9E,GAAG;cAEP,EAAa,MACT,EAAA,IAAI;;gBAGJ,GAAG;;YAGT,EAAM,OAAO,MACT,EAAA,IAAI;gEACgD,EAAM,OAAO;cAEjE,GAAG;KAEb,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,oBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,SAAU,4CAA6C,KAAM,oCAAqC,EACxG,GAAI,CAAE,SAAU,0CAA2C,KAAM,oCAAqC,EACtG,GAAI,CAAE,SAAU,0CAA2C,KAAM,mCAAoC,CACvG,CAAC,EACD,EAAA,OACF,CACF,CAAC"}