@vielzeug/buildit 2.0.0 → 2.1.0

package/README.md

@@ -67,7 +67,7 @@ import '@vielzeug/buildit';
 
 **Content**
 
-`avatar`, `breadcrumb`, `card`, `pagination`, `separator`, `table`, `text`
+`avatar`, `breadcrumb`, `card`, `icon`, `pagination`, `separator`, `table`, `text`
 
 **Disclosure**
 
@@ -96,6 +96,7 @@ import '@vielzeug/buildit';
 - The root package both **registers all published components** and re-exports tags, types, and shared symbols.
 - Prefer subpath imports for application code when you want tighter control over registration and bundle size.
 - Prefer declarative attributes and slots over manual DOM mutation.
+- Buildit default icon glyphs are Lucide-based and centralized in `packages/buildit/src/icons.ts`.
 
 ## API Summary
 

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};exports.__exportAll=t;

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/dist/accordion-item.cjs

@@ -1,5 +1,5 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./accordion.cjs`),n=require(`./disclosure/accordion-item/accordion-item.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{disabled:(0,r.typed)(!1),expanded:(0,r.typed)(!1),size:(0,r.typed)(void 0),variant:(0,r.typed)(void 0)},setup({emit:e,host:n,props:i}){(0,r.syncContextProps)((0,r.inject)(t.ACCORDION_CTX,void 0),i,[`size`,`variant`]);let a=`accordion-item-title`,o=(0,r.ref)(),s=(0,r.ref)(),c=()=>{let t=o.value?.open??!1;t&&!n.hasAttribute(`expanded`)?(n.setAttribute(`expanded`,``),e(`expand`,{expanded:!0,item:n})):!t&&n.hasAttribute(`expanded`)&&(n.removeAttribute(`expanded`),e(`collapse`,{expanded:!1,item:n}))};(0,r.onMount)(()=>{let e=o.value,t=s.value;!e||!t||((0,r.watch)(i.expanded,n=>{let r=!!n;e.open=r,t.setAttribute(`aria-expanded`,r?`true`:`false`)},{immediate:!0}),(0,r.handle)(e,`toggle`,c))});let l=(0,r.computed)(()=>i.expanded.value?`true`:`false`),u=(0,r.computed)(()=>i.disabled.value?`true`:`false`);return r.html` <details part="item" ?open=${i.expanded} ref=${o}>
-      <summary part="summary" :aria-expanded=${l} :aria-disabled=${u} ref=${s}>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./accordion.cjs`),n=require(`./disclosure/accordion-item/accordion-item.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.define)(`bit-accordion-item`,{props:{disabled:!1,expanded:!1,size:void 0,variant:void 0},setup({emit:e,host:n,props:i}){(0,r.syncContextProps)((0,r.inject)(t.ACCORDION_CTX,void 0),i,[`size`,`variant`]);let a=`accordion-item-title`,o=(0,r.ref)(),s=(0,r.ref)(),c=()=>{let t=o.value?.open??!1,r=!!i.expanded.value;t&&!r?(i.expanded.value=!0,e(`expand`,{expanded:!0,item:n.el})):!t&&r&&(i.expanded.value=!1,e(`collapse`,{expanded:!1,item:n.el}))};(0,r.onMount)(()=>{let e=o.value,t=s.value;if(!e||!t)return;let r=()=>{let t,r=n.el;for(;r;){let e=r.getAttribute(`dir`);if(e===`rtl`){t=!0;break}if(e===`ltr`){t=!1;break}r=r.parentElement}t===void 0&&(t=getComputedStyle(n.el).direction===`rtl`),e.classList.toggle(`rtl`,t)};r();let i=new MutationObserver(e=>{e.some(e=>e.attributeName===`dir`)&&r()});return i.observe(document.documentElement,{attributeFilter:[`dir`],attributes:!0,subtree:!0}),e.addEventListener(`toggle`,c),()=>{i.disconnect(),e.removeEventListener(`toggle`,c)}});let l=(0,r.computed)(()=>!!i.expanded.value);return r.html` <details part="item" ?open=${l} ref=${o}>
+      <summary part="summary" :aria-expanded=${(0,r.computed)(()=>String(l.value))} :aria-disabled=${(0,r.computed)(()=>i.disabled.value?`true`:`false`)} ref=${s}>
         <slot name="prefix"></slot>
         <div class="header-content" part="header">
           <span class="title" part="title" id="${a}">
@@ -10,23 +10,12 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </span>
         </div>
         <slot name="suffix"></slot>
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="chevron"
-          part="chevron"
-          xmlns="http://www.w3.org/2000/svg">
-          <path d="m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6" />
-        </svg>
+        <bit-icon class="chevron" name="chevron-down" size="20" stroke-width="2" aria-hidden="true"></bit-icon>
       </summary>
       <div class="content-wrapper" part="content" role="region" aria-labelledby="${a}">
         <div class="content-inner">
           <slot></slot>
         </div>
       </div>
-    </details>`},styles:[e.coarsePointerMixin,n.default],tag:`bit-accordion-item`});exports.ACCORDION_ITEM_TAG=i;
+    </details>`},styles:[e.coarsePointerMixin,n.default]});exports.ACCORDION_ITEM_TAG=i;
 //# 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 {\n  computed,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  inject,\n  onMount,\n  ref,\n  syncContextProps,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\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 bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\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-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = defineComponent<BitAccordionItemProps, BitAccordionItemEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    expanded: typed<boolean>(false),\n    size: typed<BitAccordionItemProps['size']>(undefined),\n    variant: typed<BitAccordionItemProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !host.hasAttribute('expanded')) {\n        host.setAttribute('expanded', '');\n        emit('expand', { expanded: true, item: host });\n      } else if (!isOpen && host.hasAttribute('expanded')) {\n        host.removeAttribute('expanded');\n        emit('collapse', { expanded: false, item: host });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Sync details.open when expanded prop changes (needs live DOM refs)\n      watch(\n        props.expanded,\n        (v) => {\n          const expanded = Boolean(v);\n\n          details.open = expanded;\n          summary.setAttribute('aria-expanded', expanded ? 'true' : 'false');\n        },\n        { immediate: true },\n      );\n      handle(details, 'toggle', handleToggle);\n    });\n\n    const ariaExpanded = computed(() => (props.expanded.value ? 'true' : 'false'));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${props.expanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} 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        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"chevron\"\n          part=\"chevron\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6\" />\n        </svg>\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  styles: [coarsePointerMixin, styles],\n  tag: 'bit-accordion-item',\n});\n"],"mappings":"uSA4EA,IAAa,GAAA,EAAA,EAAA,iBAAoF,CAC/F,MAAO,CACL,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,MAAA,EAAA,EAAA,OAA2C,IAAA,GAAU,CACrD,SAAA,EAAA,EAAA,OAAiD,IAAA,GAAU,CAC5D,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,EAI3B,EAAA,EAAA,mBAAA,EAAA,EAAA,QAF4B,EAAA,cAAe,IAAA,GAAU,CAEtB,EAAO,CAAC,OAAQ,UAAU,CAAC,CAE1D,IAAM,EAAU,uBACV,GAAA,EAAA,EAAA,MAAsC,CACtC,GAAA,EAAA,EAAA,MAA+B,CAC/B,MAAqB,CACzB,IAAM,EAAS,EAAW,OAAO,MAAQ,GAGrC,GAAU,CAAC,EAAK,aAAa,WAAW,EAC1C,EAAK,aAAa,WAAY,GAAG,CACjC,EAAK,SAAU,CAAE,SAAU,GAAM,KAAM,EAAM,CAAC,EACrC,CAAC,GAAU,EAAK,aAAa,WAAW,GACjD,EAAK,gBAAgB,WAAW,CAChC,EAAK,WAAY,CAAE,SAAU,GAAO,KAAM,EAAM,CAAC,IAIrD,EAAA,EAAA,aAAc,CACZ,IAAM,EAAU,EAAW,MACrB,EAAU,EAAW,MAEvB,CAAC,GAAW,CAAC,KAGjB,EAAA,EAAA,OACE,EAAM,SACL,GAAM,CACL,IAAM,EAAW,EAAQ,EAEzB,EAAQ,KAAO,EACf,EAAQ,aAAa,gBAAiB,EAAW,OAAS,QAAQ,EAEpE,CAAE,UAAW,GAAM,CACpB,EACD,EAAA,EAAA,QAAO,EAAS,SAAU,EAAa,GACvC,CAEF,IAAM,GAAA,EAAA,EAAA,cAA+B,EAAM,SAAS,MAAQ,OAAS,QAAS,CACxE,GAAA,EAAA,EAAA,cAA+B,EAAM,SAAS,MAAQ,OAAS,QAAS,CAE9E,MAAO,GAAA,IAAI,+BAA+B,EAAM,SAAS,OAAO,EAAW;+CAChC,EAAa,kBAAkB,EAAa,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;;;;;;;;;;;;mFAqB0B,EAAQ;;;;;iBAOzF,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACpC,IAAK,qBACN,CAAC"}
+{"version":3,"file":"accordion-item.cjs","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, computed, html, inject, onMount, ref, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\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 bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\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-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = define<BitAccordionItemProps, BitAccordionItemEvents>('bit-accordion-item', {\n  props: {\n    disabled: false,\n    expanded: false,\n    size: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !wasExpanded) {\n        props.expanded.value = true;\n        emit('expand', { expanded: true, item: host.el });\n      } else if (!isOpen && wasExpanded) {\n        props.expanded.value = false;\n        emit('collapse', { expanded: false, item: host.el });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL by preferring the closest explicit dir=\"...\" ancestor.\n      const checkRTL = () => {\n        let isRTL: boolean | undefined;\n\n        // 1) Closest ancestor dir always wins (supports local RTL sections).\n        let parent: HTMLElement | null = host.el;\n\n        while (parent) {\n          const dir = parent.getAttribute('dir');\n\n          if (dir === 'rtl') {\n            isRTL = true;\n            break;\n          }\n\n          if (dir === 'ltr') {\n            isRTL = false;\n            break;\n          }\n\n          parent = parent.parentElement;\n        }\n\n        // 2) Fallback to computed direction when no explicit dir is found.\n        if (isRTL === undefined) {\n          isRTL = getComputedStyle(host.el).direction === 'rtl';\n        }\n\n        // 3) Keep markup simple for CSS targeting.\n        details.classList.toggle('rtl', isRTL);\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when DOM attributes change\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      observer.observe(document.documentElement, {\n        attributeFilter: ['dir'],\n        attributes: true,\n        subtree: true,\n      });\n\n      details.addEventListener('toggle', handleToggle);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n      };\n    });\n\n    const isExpanded = computed(() => Boolean(props.expanded.value));\n    const ariaExpanded = computed(() => String(isExpanded.value));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${isExpanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} 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        <bit-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></bit-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  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":"6TAkEA,IAAa,GAAA,EAAA,EAAA,QAA2E,qBAAsB,CAC5G,MAAO,CACL,SAAU,GACV,SAAU,GACV,KAAM,IAAA,GACN,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,EAI3B,EAAA,EAAA,mBAAA,EAAA,EAAA,QAF4B,EAAA,cAAe,IAAA,GAAU,CAEtB,EAAO,CAAC,OAAQ,UAAU,CAAC,CAE1D,IAAM,EAAU,uBACV,GAAA,EAAA,EAAA,MAAsC,CACtC,GAAA,EAAA,EAAA,MAA+B,CAC/B,MAAqB,CACzB,IAAM,EAAS,EAAW,OAAO,MAAQ,GACnC,EAAc,EAAQ,EAAM,SAAS,MAGvC,GAAU,CAAC,GACb,EAAM,SAAS,MAAQ,GACvB,EAAK,SAAU,CAAE,SAAU,GAAM,KAAM,EAAK,GAAI,CAAC,EACxC,CAAC,GAAU,IACpB,EAAM,SAAS,MAAQ,GACvB,EAAK,WAAY,CAAE,SAAU,GAAO,KAAM,EAAK,GAAI,CAAC,IAIxD,EAAA,EAAA,aAAc,CACZ,IAAM,EAAU,EAAW,MACrB,EAAU,EAAW,MAE3B,GAAI,CAAC,GAAW,CAAC,EAAS,OAG1B,IAAM,MAAiB,CACrB,IAAI,EAGA,EAA6B,EAAK,GAEtC,KAAO,GAAQ,CACb,IAAM,EAAM,EAAO,aAAa,MAAM,CAEtC,GAAI,IAAQ,MAAO,CACjB,EAAQ,GACR,MAGF,GAAI,IAAQ,MAAO,CACjB,EAAQ,GACR,MAGF,EAAS,EAAO,cAId,IAAU,IAAA,KACZ,EAAQ,iBAAiB,EAAK,GAAG,CAAC,YAAc,OAIlD,EAAQ,UAAU,OAAO,MAAO,EAAM,EAIxC,GAAU,CAGV,IAAM,EAAW,IAAI,iBAAkB,GAAc,CAChC,EAAU,KAAM,GAAM,EAAE,gBAAkB,MAAM,EAGjE,GAAU,EAEZ,CAUF,OARA,EAAS,QAAQ,SAAS,gBAAiB,CACzC,gBAAiB,CAAC,MAAM,CACxB,WAAY,GACZ,QAAS,GACV,CAAC,CAEF,EAAQ,iBAAiB,SAAU,EAAa,KAEnC,CACX,EAAS,YAAY,CACrB,EAAQ,oBAAoB,SAAU,EAAa,GAErD,CAEF,IAAM,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAM,SAAS,MAAO,CAIhE,MAAO,GAAA,IAAI,+BAA+B,EAAW,OAAO,EAAW;kEAHnC,OAAO,EAAW,MAAM,CAAC,CAIL,mBAAA,EAAA,EAAA,cAHnB,EAAM,SAAS,MAAQ,OAAS,QAAS,CAGS,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;mFAU0B,EAAQ;;;;;iBAOzF,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACrC,CAAC"}

package/dist/accordion-item.js

@@ -1,41 +1,66 @@
+import "./icon.js";
 import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
 import "./styles/index.js";
 import { ACCORDION_CTX as t } from "./accordion.js";
 import n from "./disclosure/accordion-item/accordion-item.css?inline.js";
-import { computed as r, defineComponent as i, handle as a, html as o, inject as s, onMount as c, ref as l, syncContextProps as u, typed as d, watch as f } from "@vielzeug/craftit";
+import { computed as r, define as i, html as a, inject as o, onMount as s, ref as c, syncContextProps as l } from "@vielzeug/craftit";
 //#region src/disclosure/accordion-item/accordion-item.ts
-var p = i({
+var u = i("bit-accordion-item", {
 	props: {
-		disabled: d(!1),
-		expanded: d(!1),
-		size: d(void 0),
-		variant: d(void 0)
+		disabled: !1,
+		expanded: !1,
+		size: void 0,
+		variant: void 0
 	},
 	setup({ emit: e, host: n, props: i }) {
-		u(s(t, void 0), i, ["size", "variant"]);
-		let d = "accordion-item-title", p = l(), m = l(), h = () => {
-			let t = p.value?.open ?? !1;
-			t && !n.hasAttribute("expanded") ? (n.setAttribute("expanded", ""), e("expand", {
+		l(o(t, void 0), i, ["size", "variant"]);
+		let u = "accordion-item-title", d = c(), f = c(), p = () => {
+			let t = d.value?.open ?? !1, r = !!i.expanded.value;
+			t && !r ? (i.expanded.value = !0, e("expand", {
 				expanded: !0,
-				item: n
-			})) : !t && n.hasAttribute("expanded") && (n.removeAttribute("expanded"), e("collapse", {
+				item: n.el
+			})) : !t && r && (i.expanded.value = !1, e("collapse", {
 				expanded: !1,
-				item: n
+				item: n.el
 			}));
 		};
-		c(() => {
-			let e = p.value, t = m.value;
-			!e || !t || (f(i.expanded, (n) => {
-				let r = !!n;
-				e.open = r, t.setAttribute("aria-expanded", r ? "true" : "false");
-			}, { immediate: !0 }), a(e, "toggle", h));
+		s(() => {
+			let e = d.value, t = f.value;
+			if (!e || !t) return;
+			let r = () => {
+				let t, r = n.el;
+				for (; r;) {
+					let e = r.getAttribute("dir");
+					if (e === "rtl") {
+						t = !0;
+						break;
+					}
+					if (e === "ltr") {
+						t = !1;
+						break;
+					}
+					r = r.parentElement;
+				}
+				t === void 0 && (t = getComputedStyle(n.el).direction === "rtl"), e.classList.toggle("rtl", t);
+			};
+			r();
+			let i = new MutationObserver((e) => {
+				e.some((e) => e.attributeName === "dir") && r();
+			});
+			return i.observe(document.documentElement, {
+				attributeFilter: ["dir"],
+				attributes: !0,
+				subtree: !0
+			}), e.addEventListener("toggle", p), () => {
+				i.disconnect(), e.removeEventListener("toggle", p);
+			};
 		});
-		let g = r(() => i.expanded.value ? "true" : "false"), _ = r(() => i.disabled.value ? "true" : "false");
-		return o` <details part="item" ?open=${i.expanded} ref=${p}>
-      <summary part="summary" :aria-expanded=${g} :aria-disabled=${_} ref=${m}>
+		let m = r(() => !!i.expanded.value);
+		return a` <details part="item" ?open=${m} ref=${d}>
+      <summary part="summary" :aria-expanded=${r(() => String(m.value))} :aria-disabled=${r(() => i.disabled.value ? "true" : "false")} ref=${f}>
         <slot name="prefix"></slot>
         <div class="header-content" part="header">
-          <span class="title" part="title" id="${d}">
+          <span class="title" part="title" id="${u}">
             <slot name="title"></slot>
           </span>
           <span class="subtitle" part="subtitle">
@@ -43,30 +68,18 @@ var p = i({
           </span>
         </div>
         <slot name="suffix"></slot>
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="chevron"
-          part="chevron"
-          xmlns="http://www.w3.org/2000/svg">
-          <path d="m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6" />
-        </svg>
+        <bit-icon class="chevron" name="chevron-down" size="20" stroke-width="2" aria-hidden="true"></bit-icon>
       </summary>
-      <div class="content-wrapper" part="content" role="region" aria-labelledby="${d}">
+      <div class="content-wrapper" part="content" role="region" aria-labelledby="${u}">
         <div class="content-inner">
           <slot></slot>
         </div>
       </div>
     </details>`;
 	},
-	styles: [e, n],
-	tag: "bit-accordion-item"
+	styles: [e, n]
 });
 //#endregion
-export { p as ACCORDION_ITEM_TAG };
+export { u as ACCORDION_ITEM_TAG };
 
 //# sourceMappingURL=accordion-item.js.map

package/dist/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  inject,\n  onMount,\n  ref,\n  syncContextProps,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\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 bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\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-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = defineComponent<BitAccordionItemProps, BitAccordionItemEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    expanded: typed<boolean>(false),\n    size: typed<BitAccordionItemProps['size']>(undefined),\n    variant: typed<BitAccordionItemProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !host.hasAttribute('expanded')) {\n        host.setAttribute('expanded', '');\n        emit('expand', { expanded: true, item: host });\n      } else if (!isOpen && host.hasAttribute('expanded')) {\n        host.removeAttribute('expanded');\n        emit('collapse', { expanded: false, item: host });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Sync details.open when expanded prop changes (needs live DOM refs)\n      watch(\n        props.expanded,\n        (v) => {\n          const expanded = Boolean(v);\n\n          details.open = expanded;\n          summary.setAttribute('aria-expanded', expanded ? 'true' : 'false');\n        },\n        { immediate: true },\n      );\n      handle(details, 'toggle', handleToggle);\n    });\n\n    const ariaExpanded = computed(() => (props.expanded.value ? 'true' : 'false'));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${props.expanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} 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        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"chevron\"\n          part=\"chevron\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6\" />\n        </svg>\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  styles: [coarsePointerMixin, styles],\n  tag: 'bit-accordion-item',\n});\n"],"mappings":";;;;;;AA4EA,IAAa,IAAqB,EAA+D;CAC/F,OAAO;EACL,UAAU,EAAe,GAAM;EAC/B,UAAU,EAAe,GAAM;EAC/B,MAAM,EAAqC,KAAA,EAAU;EACrD,SAAS,EAAwC,KAAA,EAAU;EAC5D;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;AAI3B,IAFqB,EAAO,GAAe,KAAA,EAAU,EAEtB,GAAO,CAAC,QAAQ,UAAU,CAAC;EAE1D,IAAM,IAAU,wBACV,IAAa,GAAyB,EACtC,IAAa,GAAkB,EAC/B,UAAqB;GACzB,IAAM,IAAS,EAAW,OAAO,QAAQ;AAGzC,GAAI,KAAU,CAAC,EAAK,aAAa,WAAW,IAC1C,EAAK,aAAa,YAAY,GAAG,EACjC,EAAK,UAAU;IAAE,UAAU;IAAM,MAAM;IAAM,CAAC,IACrC,CAAC,KAAU,EAAK,aAAa,WAAW,KACjD,EAAK,gBAAgB,WAAW,EAChC,EAAK,YAAY;IAAE,UAAU;IAAO,MAAM;IAAM,CAAC;;AAIrD,UAAc;GACZ,IAAM,IAAU,EAAW,OACrB,IAAU,EAAW;AAEvB,IAAC,KAAW,CAAC,MAGjB,EACE,EAAM,WACL,MAAM;IACL,IAAM,IAAW,EAAQ;AAGzB,IADA,EAAQ,OAAO,GACf,EAAQ,aAAa,iBAAiB,IAAW,SAAS,QAAQ;MAEpE,EAAE,WAAW,IAAM,CACpB,EACD,EAAO,GAAS,UAAU,EAAa;IACvC;EAEF,IAAM,IAAe,QAAgB,EAAM,SAAS,QAAQ,SAAS,QAAS,EACxE,IAAe,QAAgB,EAAM,SAAS,QAAQ,SAAS,QAAS;AAE9E,SAAO,CAAI,+BAA+B,EAAM,SAAS,OAAO,EAAW;+CAChC,EAAa,kBAAkB,EAAa,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;;;;;;;;;;;;mFAqB0B,EAAQ;;;;;;;CAOzF,QAAQ,CAAC,GAAoB,EAAO;CACpC,KAAK;CACN,CAAC"}
+{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import { define, computed, html, inject, onMount, ref, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\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 bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\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-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = define<BitAccordionItemProps, BitAccordionItemEvents>('bit-accordion-item', {\n  props: {\n    disabled: false,\n    expanded: false,\n    size: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n      const wasExpanded = Boolean(props.expanded.value);\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !wasExpanded) {\n        props.expanded.value = true;\n        emit('expand', { expanded: true, item: host.el });\n      } else if (!isOpen && wasExpanded) {\n        props.expanded.value = false;\n        emit('collapse', { expanded: false, item: host.el });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Detect RTL by preferring the closest explicit dir=\"...\" ancestor.\n      const checkRTL = () => {\n        let isRTL: boolean | undefined;\n\n        // 1) Closest ancestor dir always wins (supports local RTL sections).\n        let parent: HTMLElement | null = host.el;\n\n        while (parent) {\n          const dir = parent.getAttribute('dir');\n\n          if (dir === 'rtl') {\n            isRTL = true;\n            break;\n          }\n\n          if (dir === 'ltr') {\n            isRTL = false;\n            break;\n          }\n\n          parent = parent.parentElement;\n        }\n\n        // 2) Fallback to computed direction when no explicit dir is found.\n        if (isRTL === undefined) {\n          isRTL = getComputedStyle(host.el).direction === 'rtl';\n        }\n\n        // 3) Keep markup simple for CSS targeting.\n        details.classList.toggle('rtl', isRTL);\n      };\n\n      // Check initially\n      checkRTL();\n\n      // Re-check when DOM attributes change\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      observer.observe(document.documentElement, {\n        attributeFilter: ['dir'],\n        attributes: true,\n        subtree: true,\n      });\n\n      details.addEventListener('toggle', handleToggle);\n\n      return () => {\n        observer.disconnect();\n        details.removeEventListener('toggle', handleToggle);\n      };\n    });\n\n    const isExpanded = computed(() => Boolean(props.expanded.value));\n    const ariaExpanded = computed(() => String(isExpanded.value));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${isExpanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} 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        <bit-icon class=\"chevron\" name=\"chevron-down\" size=\"20\" stroke-width=\"2\" aria-hidden=\"true\"></bit-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  styles: [coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;AAkEA,IAAa,IAAqB,EAAsD,sBAAsB;CAC5G,OAAO;EACL,UAAU;EACV,UAAU;EACV,MAAM,KAAA;EACN,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;AAI3B,IAFqB,EAAO,GAAe,KAAA,EAAU,EAEtB,GAAO,CAAC,QAAQ,UAAU,CAAC;EAE1D,IAAM,IAAU,wBACV,IAAa,GAAyB,EACtC,IAAa,GAAkB,EAC/B,UAAqB;GACzB,IAAM,IAAS,EAAW,OAAO,QAAQ,IACnC,IAAc,EAAQ,EAAM,SAAS;AAG3C,GAAI,KAAU,CAAC,KACb,EAAM,SAAS,QAAQ,IACvB,EAAK,UAAU;IAAE,UAAU;IAAM,MAAM,EAAK;IAAI,CAAC,IACxC,CAAC,KAAU,MACpB,EAAM,SAAS,QAAQ,IACvB,EAAK,YAAY;IAAE,UAAU;IAAO,MAAM,EAAK;IAAI,CAAC;;AAIxD,UAAc;GACZ,IAAM,IAAU,EAAW,OACrB,IAAU,EAAW;AAE3B,OAAI,CAAC,KAAW,CAAC,EAAS;GAG1B,IAAM,UAAiB;IACrB,IAAI,GAGA,IAA6B,EAAK;AAEtC,WAAO,IAAQ;KACb,IAAM,IAAM,EAAO,aAAa,MAAM;AAEtC,SAAI,MAAQ,OAAO;AACjB,UAAQ;AACR;;AAGF,SAAI,MAAQ,OAAO;AACjB,UAAQ;AACR;;AAGF,SAAS,EAAO;;AASlB,IALI,MAAU,KAAA,MACZ,IAAQ,iBAAiB,EAAK,GAAG,CAAC,cAAc,QAIlD,EAAQ,UAAU,OAAO,OAAO,EAAM;;AAIxC,MAAU;GAGV,IAAM,IAAW,IAAI,kBAAkB,MAAc;AAGnD,IAFmB,EAAU,MAAM,MAAM,EAAE,kBAAkB,MAAM,IAGjE,GAAU;KAEZ;AAUF,UARA,EAAS,QAAQ,SAAS,iBAAiB;IACzC,iBAAiB,CAAC,MAAM;IACxB,YAAY;IACZ,SAAS;IACV,CAAC,EAEF,EAAQ,iBAAiB,UAAU,EAAa,QAEnC;AAEX,IADA,EAAS,YAAY,EACrB,EAAQ,oBAAoB,UAAU,EAAa;;IAErD;EAEF,IAAM,IAAa,QAAe,EAAQ,EAAM,SAAS,MAAO;AAIhE,SAAO,CAAI,+BAA+B,EAAW,OAAO,EAAW;+CAHlD,QAAe,OAAO,EAAW,MAAM,CAAC,CAIL,kBAHnC,QAAgB,EAAM,SAAS,QAAQ,SAAS,QAAS,CAGS,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;mFAU0B,EAAQ;;;;;;;CAOzF,QAAQ,CAAC,GAAoB,EAAO;CACrC,CAAC"}

package/dist/accordion.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./disclosure/accordion/accordion.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.createContext)(`AccordionContext`),r=(0,t.defineComponent)({props:{selectionMode:(0,t.typed)(void 0),size:(0,t.typed)(void 0),variant:(0,t.typed)(void 0)},setup({emit:e,host:r,props:i}){let a=t=>{i.selectionMode.value===`single`&&(r.querySelectorAll(`bit-accordion-item`).forEach(e=>{e!==t&&e.hasAttribute(`expanded`)&&e.removeAttribute(`expanded`)}),e(`change`,{expandedItem:t}))};return(0,t.provide)(n,{notifyExpand:a,selectionMode:(0,t.computed)(()=>i.selectionMode.value),size:i.size,variant:i.variant}),(0,t.handle)(r,`expand`,e=>a(e.target)),(0,t.handle)(r,`keydown`,e=>{if(e.key!==`ArrowDown`&&e.key!==`ArrowUp`&&e.key!==`Home`&&e.key!==`End`)return;let t=[...r.querySelectorAll(`bit-accordion-item:not([disabled])`)].map(e=>e.shadowRoot?.querySelector(`summary`)).filter(Boolean);if(!t.length)return;let n=t.indexOf(document.activeElement);if(n===-1)return;let i=n;e.key===`ArrowDown`?i=(n+1)%t.length:e.key===`ArrowUp`?i=(n-1+t.length)%t.length:e.key===`Home`?i=0:e.key===`End`&&(i=t.length-1),e.preventDefault(),t[i]?.focus()}),t.html`<slot></slot>`},styles:[e.default],tag:`bit-accordion`});exports.ACCORDION_CTX=n,exports.ACCORDION_TAG=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./packages/craftit/dist/controls/list-control.cjs`),t=require(`./packages/craftit/dist/controls/list-key-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const n=require(`./disclosure/accordion/accordion.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.createContext)(`AccordionContext`),a=(0,r.define)(`bit-accordion`,{props:{selectionMode:void 0,size:void 0,variant:void 0},setup({emit:n,host:a,props:o}){let s=(0,r.signal)(0),c=(0,r.computed)(()=>o.selectionMode.value),l=e=>{c.value===`single`&&(a.el.querySelectorAll(`bit-accordion-item[expanded]`).forEach(t=>{t!==e&&t.hasAttribute(`expanded`)&&t.removeAttribute(`expanded`)}),n(`change`,{expandedItem:e}))},u=()=>[...a.el.querySelectorAll(`bit-accordion-item:not([disabled])`)],d=()=>u().map(e=>e.shadowRoot?.querySelector(`summary`)).filter(Boolean),f=e.n({getIndex:()=>s.value,getItems:()=>u(),isItemDisabled:e=>e.hasAttribute(`disabled`),loop:!0,setIndex:e=>{s.value=e,d()[e]?.focus()}});(0,r.provide)(i,{notifyExpand:l,selectionMode:c,size:o.size,variant:o.variant});let p=t.n({control:f});return a.bind(`on`,{expand:e=>{let t=e.composedPath().find(e=>e instanceof HTMLElement),n=e.detail?.item??t;!n||n.localName!==`bit-accordion-item`||l(n)},keydown:e=>{let t=d();if(!t.length)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`summary`),r=n?t.indexOf(n):-1;r!==-1&&(s.value=r,p.handleKeydown(e))}}),r.html`<slot></slot>`},styles:[n.default]});exports.ACCORDION_CTX=i,exports.ACCORDION_TAG=a;
 //# sourceMappingURL=accordion.cjs.map

package/dist/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  provide,\n  type ReadonlySignal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\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 bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = defineComponent<BitAccordionProps, BitAccordionEvents>({\n  props: {\n    selectionMode: typed<BitAccordionProps['selectionMode']>(undefined),\n    size: typed<BitAccordionProps['size']>(undefined),\n    variant: typed<BitAccordionProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const notifyExpand = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value === 'single') {\n        host.querySelectorAll('bit-accordion-item').forEach((item) => {\n          if (item !== expandedItem && item.hasAttribute('expanded')) {\n            item.removeAttribute('expanded');\n          }\n        });\n        emit('change', { expandedItem });\n      }\n    };\n\n    provide(ACCORDION_CTX, {\n      notifyExpand,\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Listen for expanded events bubbling up from child accordion-items.\n    // This allows single-selection management without tight coupling via context calls.\n    const handleExpand = (e: Event) => notifyExpand(e.target as HTMLElement);\n\n    handle(host, 'expand', handleExpand);\n    // Group-level arrow-key navigation between accordion item summaries (WAI-ARIA Accordion pattern).\n    handle(host, 'keydown', (e: KeyboardEvent) => {\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\n      const items = [...host.querySelectorAll<HTMLElement>('bit-accordion-item:not([disabled])')];\n      const summaries = items\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n\n      if (!summaries.length) return;\n\n      const focused = summaries.indexOf(document.activeElement as HTMLElement);\n\n      if (focused === -1) return; // the focus is not on a summary — let native handling proceed\n\n      let next = focused;\n\n      if (e.key === 'ArrowDown') next = (focused + 1) % summaries.length;\n      else if (e.key === 'ArrowUp') next = (focused - 1 + summaries.length) % summaries.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = summaries.length - 1;\n\n      e.preventDefault();\n      summaries[next]?.focus();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-accordion',\n});\n"],"mappings":"yKAqBA,IAAa,GAAA,EAAA,EAAA,eAAgD,mBAAmB,CAwCnE,GAAA,EAAA,EAAA,iBAAuE,CAClF,MAAO,CACL,eAAA,EAAA,EAAA,OAAyD,IAAA,GAAU,CACnE,MAAA,EAAA,EAAA,OAAuC,IAAA,GAAU,CACjD,SAAA,EAAA,EAAA,OAA6C,IAAA,GAAU,CACxD,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,EAAgB,GAA8B,CAC9C,EAAM,cAAc,QAAU,WAChC,EAAK,iBAAiB,qBAAqB,CAAC,QAAS,GAAS,CACxD,IAAS,GAAgB,EAAK,aAAa,WAAW,EACxD,EAAK,gBAAgB,WAAW,EAElC,CACF,EAAK,SAAU,CAAE,eAAc,CAAC,GA0CpC,OAtCA,EAAA,EAAA,SAAQ,EAAe,CACrB,eACA,eAAA,EAAA,EAAA,cAA8B,EAAM,cAAc,MAAM,CACxD,KAAM,EAAM,KACZ,QAAS,EAAM,QAChB,CAAC,EAMF,EAAA,EAAA,QAAO,EAAM,SAFS,GAAa,EAAa,EAAE,OAAsB,CAEpC,EAEpC,EAAA,EAAA,QAAO,EAAM,UAAY,GAAqB,CAC5C,GAAI,EAAE,MAAQ,aAAe,EAAE,MAAQ,WAAa,EAAE,MAAQ,QAAU,EAAE,MAAQ,MAAO,OAGzF,IAAM,EADQ,CAAC,GAAG,EAAK,iBAA8B,qCAAqC,CAAC,CAExF,IAAK,GAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ,CAElB,GAAI,CAAC,EAAU,OAAQ,OAEvB,IAAM,EAAU,EAAU,QAAQ,SAAS,cAA6B,CAExE,GAAI,IAAY,GAAI,OAEpB,IAAI,EAAO,EAEP,EAAE,MAAQ,YAAa,GAAQ,EAAU,GAAK,EAAU,OACnD,EAAE,MAAQ,UAAW,GAAQ,EAAU,EAAI,EAAU,QAAU,EAAU,OACzE,EAAE,MAAQ,OAAQ,EAAO,EACzB,EAAE,MAAQ,QAAO,EAAO,EAAU,OAAS,GAEpD,EAAE,gBAAgB,CAClB,EAAU,IAAO,OAAO,EACxB,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,gBACN,CAAC"}
+{"version":3,"file":"accordion.cjs","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { define, computed, createContext, html, provide, signal, type ReadonlySignal } from '@vielzeug/craftit';\nimport { createListControl, createListKeyControl } from '@vielzeug/craftit/controls';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\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 bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = define<BitAccordionProps, BitAccordionEvents>('bit-accordion', {\n  props: {\n    selectionMode: undefined,\n    size: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props }) {\n    const focusedIndex = signal(0);\n    const selectionMode = computed(() => props.selectionMode.value);\n\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (selectionMode.value !== 'single') return;\n\n      host.el.querySelectorAll('bit-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 [...host.el.querySelectorAll<HTMLElement>('bit-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      getIndex: () => focusedIndex.value,\n      getItems: () => getAccordionItems(),\n      isItemDisabled: (item: HTMLElement) => item.hasAttribute('disabled'),\n      loop: true,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      notifyExpand: handleSelectionMode,\n      selectionMode,\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n    const accordionListKeys = createListKeyControl({ control: listControl });\n\n    host.bind('on', {\n      expand: (event: Event) => {\n        const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n        const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n        if (!expandedItem || expandedItem.localName !== 'bit-accordion-item') return;\n\n        handleSelectionMode(expandedItem);\n      },\n      keydown: (evt) => {\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        focusedIndex.value = focused;\n        accordionListKeys.handleKeydown(evt);\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":"iWAaA,IAAa,GAAA,EAAA,EAAA,eAAgD,mBAAmB,CAwCnE,GAAA,EAAA,EAAA,QAA8D,gBAAiB,CAC1F,MAAO,CACL,cAAe,IAAA,GACf,KAAM,IAAA,GACN,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAsB,EAAE,CACxB,GAAA,EAAA,EAAA,cAA+B,EAAM,cAAc,MAAM,CAEzD,EAAuB,GAA8B,CACrD,EAAc,QAAU,WAE5B,EAAK,GAAG,iBAAiB,+BAA+B,CAAC,QAAS,GAAS,CACrE,IAAS,GAAgB,EAAK,aAAa,WAAW,EACxD,EAAK,gBAAgB,WAAW,EAElC,CAEF,EAAK,SAAU,CAAE,eAAc,CAAC,GAG5B,MACG,CAAC,GAAG,EAAK,GAAG,iBAA8B,qCAAqC,CAAC,CAGnF,MACG,GAAmB,CACvB,IAAK,GAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ,CAGd,EAAc,EAAA,EAAkB,CACpC,aAAgB,EAAa,MAC7B,aAAgB,GAAmB,CACnC,eAAiB,GAAsB,EAAK,aAAa,WAAW,CACpE,KAAM,GACN,SAAW,GAAU,CACnB,EAAa,MAAQ,EAEH,GAAoB,CAE5B,IAAQ,OAAO,EAE5B,CAAC,EAEF,EAAA,EAAA,SAAQ,EAAe,CACrB,aAAc,EACd,gBACA,KAAM,EAAM,KACZ,QAAS,EAAM,QAChB,CAAC,CAGF,IAAM,EAAoB,EAAA,EAAqB,CAAE,QAAS,EAAa,CAAC,CA4BxE,OA1BA,EAAK,KAAK,KAAM,CACd,OAAS,GAAiB,CACxB,IAAM,EAAc,EAAM,cAAc,CAAC,KAAM,GAA8B,aAAgB,YAAY,CACnG,EAAgB,EAA8C,QAAQ,MAAQ,EAEhF,CAAC,GAAgB,EAAa,YAAc,sBAEhD,EAAoB,EAAa,EAEnC,QAAU,GAAQ,CAChB,IAAM,EAAY,GAAoB,CAEtC,GAAI,CAAC,EAAU,OAAQ,OAEvB,IAAM,EAAgB,EACnB,cAAc,CACd,KAAM,GAA8B,aAAgB,aAAe,EAAK,YAAc,UAAU,CAC7F,EAAU,EAAgB,EAAU,QAAQ,EAAc,CAAG,GAE/D,IAAY,KAEhB,EAAa,MAAQ,EACrB,EAAkB,cAAc,EAAI,GAEvC,CAAC,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CACjB,CAAC"}

package/dist/accordion.js

@@ -1,37 +1,52 @@
-import e from "./disclosure/accordion/accordion.css?inline.js";
-import { computed as t, createContext as n, defineComponent as r, handle as i, html as a, provide as o, typed as s } from "@vielzeug/craftit";
+import { n as e } from "./packages/craftit/dist/controls/list-control.js";
+import { n as t } from "./packages/craftit/dist/controls/list-key-control.js";
+import "./packages/craftit/dist/controls.js";
+import n from "./disclosure/accordion/accordion.css?inline.js";
+import { computed as r, createContext as i, define as a, html as o, provide as s, signal as c } from "@vielzeug/craftit";
 //#region src/disclosure/accordion/accordion.ts
-var c = n("AccordionContext"), l = r({
+var l = i("AccordionContext"), u = a("bit-accordion", {
 	props: {
-		selectionMode: s(void 0),
-		size: s(void 0),
-		variant: s(void 0)
+		selectionMode: void 0,
+		size: void 0,
+		variant: void 0
 	},
-	setup({ emit: e, host: n, props: r }) {
-		let s = (t) => {
-			r.selectionMode.value === "single" && (n.querySelectorAll("bit-accordion-item").forEach((e) => {
-				e !== t && e.hasAttribute("expanded") && e.removeAttribute("expanded");
-			}), e("change", { expandedItem: t }));
-		};
-		return o(c, {
-			notifyExpand: s,
-			selectionMode: t(() => r.selectionMode.value),
-			size: r.size,
-			variant: r.variant
-		}), i(n, "expand", (e) => s(e.target)), i(n, "keydown", (e) => {
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
-			let t = [...n.querySelectorAll("bit-accordion-item:not([disabled])")].map((e) => e.shadowRoot?.querySelector("summary")).filter(Boolean);
-			if (!t.length) return;
-			let r = t.indexOf(document.activeElement);
-			if (r === -1) return;
-			let i = r;
-			e.key === "ArrowDown" ? i = (r + 1) % t.length : e.key === "ArrowUp" ? i = (r - 1 + t.length) % t.length : e.key === "Home" ? i = 0 : e.key === "End" && (i = t.length - 1), e.preventDefault(), t[i]?.focus();
-		}), a`<slot></slot>`;
+	setup({ emit: n, host: i, props: a }) {
+		let u = c(0), d = r(() => a.selectionMode.value), f = (e) => {
+			d.value === "single" && (i.el.querySelectorAll("bit-accordion-item[expanded]").forEach((t) => {
+				t !== e && t.hasAttribute("expanded") && t.removeAttribute("expanded");
+			}), n("change", { expandedItem: e }));
+		}, p = () => [...i.el.querySelectorAll("bit-accordion-item:not([disabled])")], m = () => p().map((e) => e.shadowRoot?.querySelector("summary")).filter(Boolean), h = e({
+			getIndex: () => u.value,
+			getItems: () => p(),
+			isItemDisabled: (e) => e.hasAttribute("disabled"),
+			loop: !0,
+			setIndex: (e) => {
+				u.value = e, m()[e]?.focus();
+			}
+		});
+		s(l, {
+			notifyExpand: f,
+			selectionMode: d,
+			size: a.size,
+			variant: a.variant
+		});
+		let g = t({ control: h });
+		return i.bind("on", {
+			expand: (e) => {
+				let t = e.composedPath().find((e) => e instanceof HTMLElement), n = e.detail?.item ?? t;
+				!n || n.localName !== "bit-accordion-item" || f(n);
+			},
+			keydown: (e) => {
+				let t = m();
+				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.value = r, g.handleKeydown(e));
+			}
+		}), o`<slot></slot>`;
 	},
-	styles: [e],
-	tag: "bit-accordion"
+	styles: [n]
 });
 //#endregion
-export { c as ACCORDION_CTX, l as ACCORDION_TAG };
+export { l as ACCORDION_CTX, u 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 {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  provide,\n  type ReadonlySignal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\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 bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = defineComponent<BitAccordionProps, BitAccordionEvents>({\n  props: {\n    selectionMode: typed<BitAccordionProps['selectionMode']>(undefined),\n    size: typed<BitAccordionProps['size']>(undefined),\n    variant: typed<BitAccordionProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const notifyExpand = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value === 'single') {\n        host.querySelectorAll('bit-accordion-item').forEach((item) => {\n          if (item !== expandedItem && item.hasAttribute('expanded')) {\n            item.removeAttribute('expanded');\n          }\n        });\n        emit('change', { expandedItem });\n      }\n    };\n\n    provide(ACCORDION_CTX, {\n      notifyExpand,\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Listen for expanded events bubbling up from child accordion-items.\n    // This allows single-selection management without tight coupling via context calls.\n    const handleExpand = (e: Event) => notifyExpand(e.target as HTMLElement);\n\n    handle(host, 'expand', handleExpand);\n    // Group-level arrow-key navigation between accordion item summaries (WAI-ARIA Accordion pattern).\n    handle(host, 'keydown', (e: KeyboardEvent) => {\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\n      const items = [...host.querySelectorAll<HTMLElement>('bit-accordion-item:not([disabled])')];\n      const summaries = items\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n\n      if (!summaries.length) return;\n\n      const focused = summaries.indexOf(document.activeElement as HTMLElement);\n\n      if (focused === -1) return; // the focus is not on a summary — let native handling proceed\n\n      let next = focused;\n\n      if (e.key === 'ArrowDown') next = (focused + 1) % summaries.length;\n      else if (e.key === 'ArrowUp') next = (focused - 1 + summaries.length) % summaries.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = summaries.length - 1;\n\n      e.preventDefault();\n      summaries[next]?.focus();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-accordion',\n});\n"],"mappings":";;;AAqBA,IAAa,IAAgB,EAAgC,mBAAmB,EAwCnE,IAAgB,EAAuD;CAClF,OAAO;EACL,eAAe,EAA0C,KAAA,EAAU;EACnE,MAAM,EAAiC,KAAA,EAAU;EACjD,SAAS,EAAoC,KAAA,EAAU;EACxD;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,KAAgB,MAA8B;AAClD,GAAI,EAAM,cAAc,UAAU,aAChC,EAAK,iBAAiB,qBAAqB,CAAC,SAAS,MAAS;AAC5D,IAAI,MAAS,KAAgB,EAAK,aAAa,WAAW,IACxD,EAAK,gBAAgB,WAAW;KAElC,EACF,EAAK,UAAU,EAAE,iBAAc,CAAC;;AA0CpC,SAtCA,EAAQ,GAAe;GACrB;GACA,eAAe,QAAe,EAAM,cAAc,MAAM;GACxD,MAAM,EAAM;GACZ,SAAS,EAAM;GAChB,CAAC,EAMF,EAAO,GAAM,WAFS,MAAa,EAAa,EAAE,OAAsB,CAEpC,EAEpC,EAAO,GAAM,YAAY,MAAqB;AAC5C,OAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,MAAO;GAGzF,IAAM,IADQ,CAAC,GAAG,EAAK,iBAA8B,qCAAqC,CAAC,CAExF,KAAK,MAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ;AAElB,OAAI,CAAC,EAAU,OAAQ;GAEvB,IAAM,IAAU,EAAU,QAAQ,SAAS,cAA6B;AAExE,OAAI,MAAY,GAAI;GAEpB,IAAI,IAAO;AAQX,GANI,EAAE,QAAQ,cAAa,KAAQ,IAAU,KAAK,EAAU,SACnD,EAAE,QAAQ,YAAW,KAAQ,IAAU,IAAI,EAAU,UAAU,EAAU,SACzE,EAAE,QAAQ,SAAQ,IAAO,IACzB,EAAE,QAAQ,UAAO,IAAO,EAAU,SAAS,IAEpD,EAAE,gBAAgB,EAClB,EAAU,IAAO,OAAO;IACxB,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import { define, computed, createContext, html, provide, signal, type ReadonlySignal } from '@vielzeug/craftit';\nimport { createListControl, createListKeyControl } from '@vielzeug/craftit/controls';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\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 bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = define<BitAccordionProps, BitAccordionEvents>('bit-accordion', {\n  props: {\n    selectionMode: undefined,\n    size: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props }) {\n    const focusedIndex = signal(0);\n    const selectionMode = computed(() => props.selectionMode.value);\n\n    const handleSelectionMode = (expandedItem: HTMLElement) => {\n      if (selectionMode.value !== 'single') return;\n\n      host.el.querySelectorAll('bit-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 [...host.el.querySelectorAll<HTMLElement>('bit-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      getIndex: () => focusedIndex.value,\n      getItems: () => getAccordionItems(),\n      isItemDisabled: (item: HTMLElement) => item.hasAttribute('disabled'),\n      loop: true,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n\n        const summaries = getSummaryElements();\n\n        summaries[index]?.focus();\n      },\n    });\n\n    provide(ACCORDION_CTX, {\n      notifyExpand: handleSelectionMode,\n      selectionMode,\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Group-level event and keyboard handling for WAI-ARIA Accordion pattern\n    const accordionListKeys = createListKeyControl({ control: listControl });\n\n    host.bind('on', {\n      expand: (event: Event) => {\n        const eventTarget = event.composedPath().find((node): node is HTMLElement => node instanceof HTMLElement);\n        const expandedItem = (event as CustomEvent<{ item?: HTMLElement }>).detail?.item ?? eventTarget;\n\n        if (!expandedItem || expandedItem.localName !== 'bit-accordion-item') return;\n\n        handleSelectionMode(expandedItem);\n      },\n      keydown: (evt) => {\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        focusedIndex.value = focused;\n        accordionListKeys.handleKeydown(evt);\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;;;;AAaA,IAAa,IAAgB,EAAgC,mBAAmB,EAwCnE,IAAgB,EAA8C,iBAAiB;CAC1F,OAAO;EACL,eAAe,KAAA;EACf,MAAM,KAAA;EACN,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAe,EAAO,EAAE,EACxB,IAAgB,QAAe,EAAM,cAAc,MAAM,EAEzD,KAAuB,MAA8B;AACrD,KAAc,UAAU,aAE5B,EAAK,GAAG,iBAAiB,+BAA+B,CAAC,SAAS,MAAS;AACzE,IAAI,MAAS,KAAgB,EAAK,aAAa,WAAW,IACxD,EAAK,gBAAgB,WAAW;KAElC,EAEF,EAAK,UAAU,EAAE,iBAAc,CAAC;KAG5B,UACG,CAAC,GAAG,EAAK,GAAG,iBAA8B,qCAAqC,CAAC,EAGnF,UACG,GAAmB,CACvB,KAAK,MAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ,EAGd,IAAc,EAAkB;GACpC,gBAAgB,EAAa;GAC7B,gBAAgB,GAAmB;GACnC,iBAAiB,MAAsB,EAAK,aAAa,WAAW;GACpE,MAAM;GACN,WAAW,MAAU;AAGD,IAFlB,EAAa,QAAQ,GAEH,GAAoB,CAE5B,IAAQ,OAAO;;GAE5B,CAAC;AAEF,IAAQ,GAAe;GACrB,cAAc;GACd;GACA,MAAM,EAAM;GACZ,SAAS,EAAM;GAChB,CAAC;EAGF,IAAM,IAAoB,EAAqB,EAAE,SAAS,GAAa,CAAC;AA4BxE,SA1BA,EAAK,KAAK,MAAM;GACd,SAAS,MAAiB;IACxB,IAAM,IAAc,EAAM,cAAc,CAAC,MAAM,MAA8B,aAAgB,YAAY,EACnG,IAAgB,EAA8C,QAAQ,QAAQ;AAEhF,KAAC,KAAgB,EAAa,cAAc,wBAEhD,EAAoB,EAAa;;GAEnC,UAAU,MAAQ;IAChB,IAAM,IAAY,GAAoB;AAEtC,QAAI,CAAC,EAAU,OAAQ;IAEvB,IAAM,IAAgB,EACnB,cAAc,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,cAAc,UAAU,EAC7F,IAAU,IAAgB,EAAU,QAAQ,EAAc,GAAG;AAE/D,UAAY,OAEhB,EAAa,QAAQ,GACrB,EAAkB,cAAc,EAAI;;GAEvC,CAAC,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CACjB,CAAC"}

package/dist/alert.cjs

@@ -1,6 +1,6 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`),n=require(`./styles/index.cjs`),r=require(`./icons.cjs`),i=require(`./utils/animation.cjs`),a=require(`./feedback/alert/alert.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=(0,o.defineComponent)({props:{accented:{default:!1},color:{default:void 0},dismissible:{default:!1},heading:{default:``},horizontal:{default:!1},rounded:{default:void 0},size:{default:void 0},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let a=(0,o.guard)(()=>n.dismissible.value,n=>{t.setAttribute(`dismissing`,``),i.awaitExit(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),e(`dismiss`,{originalEvent:n})})}),s=(0,o.signal)(!1),c=(0,o.signal)(!1);return(0,o.onMount)(()=>{(0,o.onSlotChange)(`icon`,e=>{s.value=e.length>0}),(0,o.onSlotChange)(`actions`,e=>{c.value=e.length>0})}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./utils/animation.cjs`),a=require(`./feedback/alert/alert.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=(0,o.define)(`bit-alert`,{props:{...e.themableBundle,...e.sizableBundle,...e.roundableBundle,accented:!1,dismissible:!1,heading:``,horizontal:!1,variant:void 0},setup({emit:e,host:t,props:n,slots:r}){return o.html`
       <div class="alert" :role="${()=>n.color.value===`error`?`alert`:`status`}" part="alert">
-        <span class="icon" part="icon" aria-hidden="true" ?hidden=${()=>!s.value}>
+        <span class="icon" part="icon" aria-hidden="true" ?hidden=${()=>!r.has(`icon`).value}>
           <slot name="icon"></slot>
         </span>
         <div class="header" part="header" ?hidden=${()=>!n.heading.value}>
@@ -14,7 +14,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <slot></slot>
           </div>
         </div>
-        <div class="actions" part="actions" ?hidden=${()=>!c.value}>
+        <div class="actions" part="actions" ?hidden=${()=>!r.has(`actions`).value}>
           <slot name="actions"></slot>
         </div>
         <button
@@ -23,9 +23,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           type="button"
           aria-label="Dismiss alert"
           ?hidden=${()=>!n.dismissible.value}
-          @click=${a}>
-          ${r.closeIcon}
+          @click=${r=>{n.dismissible.value&&(t.el.setAttribute(`dismissing`,``),i.awaitExit(t.el,()=>{t.el.removeAttribute(`dismissing`),t.el.setAttribute(`dismissed`,``),e(`dismiss`,{originalEvent:r})}))}}>
+          <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
         </button>
       </div>
-    `},styles:[...n.formFieldMixins,t.forcedColorsMixin,e.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)`}}),a.default],tag:`bit-alert`});exports.ALERT_TAG=s;
+    `},styles:[...r.formFieldMixins,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)`}}),a.default]});exports.ALERT_TAG=s;
 //# 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 { defineComponent, guard, html, onMount, onSlotChange, signal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { closeIcon } from '../../icons';\nimport { forcedColorsMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './alert.css?inline';\n\nexport type BitAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type BitAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissable (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element bit-alert\n *\n * @attr {string} color - Theme color (primary/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 size\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed\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-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 * @example\n * ```html\n * <bit-alert color=\"success\">Your changes have been saved.</bit-alert>\n * <bit-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </bit-alert>\n * ```\n */\nexport const ALERT_TAG = defineComponent<BitAlertProps, BitAlertEvents>({\n  props: {\n    accented: { default: false },\n    color: { default: undefined },\n    dismissible: { default: false },\n    heading: { default: '' },\n    horizontal: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const handleDismiss = guard(\n      () => props.dismissible.value,\n      (e: MouseEvent) => {\n        host.setAttribute('dismissing', '');\n        awaitExit(host, () => {\n          host.removeAttribute('dismissing');\n          host.setAttribute('dismissed', '');\n          emit('dismiss', { originalEvent: e });\n        });\n      },\n    );\n    const hasIcon = signal(false);\n    const hasActions = signal(false);\n\n    onMount(() => {\n      onSlotChange('icon', (els) => {\n        hasIcon.value = els.length > 0;\n      });\n      onSlotChange('actions', (els) => {\n        hasActions.value = els.length > 0;\n      });\n    });\n\n    return html`\n      <div class=\"alert\" :role=\"${() => (props.color.value === 'error' ? 'alert' : 'status')}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=${() => !hasIcon.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.value}</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=${() => !hasActions.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          ${closeIcon}\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    ...formFieldMixins,\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  tag: 'bit-alert',\n});\n"],"mappings":"iVAqEA,IAAa,GAAA,EAAA,EAAA,iBAA2D,CACtE,MAAO,CACL,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,YAAa,CAAE,QAAS,GAAO,CAC/B,QAAS,CAAE,QAAS,GAAI,CACxB,WAAY,CAAE,QAAS,GAAO,CAC9B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,WACE,EAAM,YAAY,MACvB,GAAkB,CACjB,EAAK,aAAa,aAAc,GAAG,CACnC,EAAA,UAAU,MAAY,CACpB,EAAK,gBAAgB,aAAa,CAClC,EAAK,aAAa,YAAa,GAAG,CAClC,EAAK,UAAW,CAAE,cAAe,EAAG,CAAC,EACrC,EAEL,CACK,GAAA,EAAA,EAAA,QAAiB,GAAM,CACvB,GAAA,EAAA,EAAA,QAAoB,GAAM,CAWhC,OATA,EAAA,EAAA,aAAc,EACZ,EAAA,EAAA,cAAa,OAAS,GAAQ,CAC5B,EAAQ,MAAQ,EAAI,OAAS,GAC7B,EACF,EAAA,EAAA,cAAa,UAAY,GAAQ,CAC/B,EAAW,MAAQ,EAAI,OAAS,GAChC,EACF,CAEK,EAAA,IAAI;sCAC0B,EAAM,MAAM,QAAU,QAAU,QAAU,SAAU;wEACnB,CAAC,EAAQ,MAAM;;;wDAG/B,CAAC,EAAM,QAAQ,MAAM;qDACxB,EAAM,QAAQ,MAAM;;;;;;;;;;0DAUf,CAAC,EAAW,MAAM;;;;;;;;wBAQpD,CAAC,EAAM,YAAY,MAAM;mBAChC,EAAc;YACrB,EAAA,UAAU;;;OAKpB,OAAQ,CACN,GAAG,EAAA,gBACH,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,kBAAmB,CACzG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,gBAAiB,CACtG,CAAC,CACF,EAAA,QACD,CACD,IAAK,YACN,CAAC"}
+{"version":3,"file":"alert.cjs","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { forcedColorsMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './alert.css?inline';\n\nexport type BitAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type BitAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissible (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element bit-alert\n *\n * @attr {string} color - Theme color (primary/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 size\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed\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-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 * @example\n * ```html\n * <bit-alert color=\"success\">Your changes have been saved.</bit-alert>\n * <bit-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </bit-alert>\n * ```\n */\nexport const ALERT_TAG = define<BitAlertProps, BitAlertEvents>('bit-alert', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: false,\n    dismissible: false,\n    heading: '',\n    horizontal: false,\n    variant: undefined,\n  } satisfies PropBundle<BitAlertProps>,\n  setup({ emit, host, props, slots }) {\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      host.el.setAttribute('dismissing', '');\n      awaitExit(host.el, () => {\n        host.el.removeAttribute('dismissing');\n        host.el.setAttribute('dismissed', '');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    return html`\n      <div class=\"alert\" :role=\"${() => (props.color.value === 'error' ? 'alert' : 'status')}\" 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.value}</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          <bit-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    ...formFieldMixins,\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":"uXAsEA,IAAa,GAAA,EAAA,EAAA,QAAkD,YAAa,CAC1E,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,SAAU,GACV,YAAa,GACb,QAAS,GACT,WAAY,GACZ,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAYlC,MAAO,GAAA,IAAI;sCAC0B,EAAM,MAAM,QAAU,QAAU,QAAU,SAAU;wEACnB,CAAC,EAAM,IAAI,OAAO,CAAC,MAAM;;;wDAGzC,CAAC,EAAM,QAAQ,MAAM;qDACxB,EAAM,QAAQ,MAAM;;;;;;;;;;0DAUf,CAAC,EAAM,IAAI,UAAU,CAAC,MAAM;;;;;;;;wBAQ9D,CAAC,EAAM,YAAY,MAAM;mBAnCxB,GAAkB,CAClC,EAAM,YAAY,QAEvB,EAAK,GAAG,aAAa,aAAc,GAAG,CACtC,EAAA,UAAU,EAAK,OAAU,CACvB,EAAK,GAAG,gBAAgB,aAAa,CACrC,EAAK,GAAG,aAAa,YAAa,GAAG,CACrC,EAAK,UAAW,CAAE,cAAe,EAAG,CAAC,EACrC,GA4ByB;;;;OAM/B,OAAQ,CACN,GAAG,EAAA,gBACH,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,kBAAmB,CACzG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,gBAAiB,CACtG,CAAC,CACF,EAAA,QACD,CACF,CAAC"}