@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/dialog.cjs

@@ -1,12 +1,12 @@
-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`);require(`./styles/index.cjs`);const r=require(`./icons.cjs`),i=require(`./utils/animation.cjs`),a=require(`./utils/background-lock.cjs`),o=require(`./utils/use-overlay.cjs`),s=require(`./overlay/dialog/dialog.css?inline.cjs`);let c=require(`@vielzeug/craftit`);var l=(0,c.defineComponent)({props:{backdrop:{default:void 0},dismissible:{default:!1},elevation:{default:void 0},"initial-focus":{default:void 0},label:{default:``},open:{default:!1},padding:{default:void 0},persistent:{default:!1},"return-focus":{default:!0},rounded:{default:void 0},size:{default:`md`}},setup({emit:e,host:t,props:n,slots:s}){let l=(0,c.ref)(),u=(0,c.computed)(()=>s.has(`header`).value||!!n.label.value||n.dismissible.value),d=(0,c.computed)(()=>s.has(`footer`).value),{applyInitialFocus:f,captureReturnFocus:p,closeWithAnimation:m,restoreFocus:h}=o.useOverlay(t,l,()=>l.value?.querySelector(`.panel`),n);return(0,c.onMount)(()=>{let r=l.value;return r?((0,c.watch)(n.open,n=>{n?r.open||(p(),r.showModal(),f(),a.lockBackground(t),e(`open`)):m()},{immediate:!0}),(0,c.handle)(r,`close`,()=>{a.unlockBackground(),t.removeAttribute(`open`),h(),e(`close`)}),(0,c.handle)(r,`click`,e=>{n.persistent.value||e.target===r&&m()}),(0,c.handle)(r,`keydown`,e=>{e.key===`Escape`&&(e.preventDefault(),n.persistent.value||m())}),()=>{r.open&&r.close(),a.unlockBackground()}):void 0}),c.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./packages/craftit/dist/controls/overlay-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const i=require(`./utils/background-lock.cjs`),a=require(`./utils/use-overlay.cjs`),o=require(`./overlay/dialog/dialog.css?inline.cjs`);let s=require(`@vielzeug/craftit`);var c=(0,s.define)(`bit-dialog`,{props:{backdrop:void 0,dismissible:!1,elevation:void 0,"initial-focus":void 0,label:``,open:!1,padding:void 0,persistent:!1,"return-focus":!0,rounded:void 0,size:`md`},setup({emit:e,host:t,props:n,slots:o}){let c=(0,s.ref)(),l=(0,s.signal)(!1),u=(0,s.computed)(()=>o.has(`header`).value||!!n.label.value||n.dismissible.value),d=(0,s.computed)(()=>o.has(`footer`).value),f=`programmatic`,{applyInitialFocus:p,captureReturnFocus:m,closeWithAnimation:h,restoreFocus:g}=a.useOverlay(t.el,c,()=>c.value?.querySelector(`.panel`),n),_=r.i({elements:{boundary:t.el,panel:c.value?.querySelector(`.panel`)??null},isOpen:l,onOpen:t=>e(`open`,{reason:t}),setOpen:(e,n)=>{let r=c.value;if(r){if(e){if(r.open)return;m(),r.showModal(),p(),i.lockBackground(t.el),l.value=!0;return}if(r.open){f=n,h();return}l.value=!1}}});return(0,s.onMount)(()=>{let r=c.value;if(!r)return;(0,s.watch)(n.open,e=>{if(e){_.open(`programmatic`);return}_.close(`programmatic`,!1)},{immediate:!0});let a=()=>{i.unlockBackground(),t.el.removeAttribute(`open`),l.value=!1,g(),e(`close`,{reason:f}),f=`programmatic`},o=e=>{s.fire.custom(t.el,`close-request`,{cancelable:!0,detail:{reason:e}})&&(f=e,_.close(e,!1))};return(0,s.handle)(r,`close`,a),(0,s.handle)(r,`click`,e=>{n.persistent.value||e.target===r&&o(`outside-click`)}),(0,s.handle)(r,`keydown`,e=>{e.key===`Escape`&&!n.persistent.value&&(e.preventDefault(),o(`escape`))}),()=>{r.open&&r.close(),i.unlockBackground()}}),s.html`
       <dialog
-        ref=${l}
+        ref=${c}
         class="dialog"
         part="dialog"
         :aria-label="${()=>n.label.value||null}"
         aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
-        <div class="panel" part="panel" :data-size="${n.size}">
+        <div class="panel" part="panel" :data-size="${n.size.value}">
           <div class="header" part="header" ?hidden=${()=>!u.value}>
             <slot name="header">
               <span class="title" part="title">${()=>n.label.value}</span>
@@ -17,8 +17,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               type="button"
               aria-label="Close dialog"
               ?hidden=${()=>!n.dismissible.value}
-              @click=${()=>{let e=l.value;if(!e)return;c.fire.custom(e,`close-request`),e.classList.add(`closing`);let t=e.querySelector(`.panel`),n=()=>{e.classList.remove(`closing`),e.close()};t?i.awaitExit(t,n,`transition`):n()}}>
-              ${r.closeIcon}
+              @click=${()=>{c.value&&s.fire.custom(t.el,`close-request`,{cancelable:!0,detail:{reason:`trigger`}})&&(f=`trigger`,_.close(`trigger`,!1))}}>
+              <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
             </button>
           </div>
           <div class="body" part="body">
@@ -29,5 +29,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           </div>
         </div>
       </dialog>
-    `},styles:[n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,s.default],tag:`bit-dialog`});exports.DIALOG_TAG=l;
+    `},styles:[n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,o.default]});exports.DIALOG_TAG=c;
 //# sourceMappingURL=dialog.cjs.map

package/dist/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { computed, defineComponent, handle, html, onMount, ref, watch, fire } from '@vielzeug/craftit';\n\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { closeIcon } from '../../icons';\nimport { coarsePointerMixin, elevationMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport { lockBackground, unlockBackground } from '../../utils/background-lock';\nimport { useOverlay } from '../../utils/use-overlay';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type BitDialogEvents = {\n  close: undefined;\n  open: undefined;\n};\n\nexport type BitDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element bit-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius size\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens\n * @fires close - Fired when the dialog closes (any trigger)\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @example\n * ```html\n * <bit-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <bit-button variant=\"ghost\" id=\"cancel\">Cancel</bit-button>\n *     <bit-button color=\"error\" id=\"confirm\">Delete</bit-button>\n *   </div>\n * </bit-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/buildit/dialog';\n *   const dialog = document.querySelector('bit-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\nexport const DIALOG_TAG = defineComponent<BitDialogProps, BitDialogEvents>({\n  props: {\n    backdrop: { default: undefined },\n    dismissible: { default: false },\n    elevation: { default: undefined },\n    'initial-focus': { default: undefined },\n    label: { default: '' },\n    open: { default: false },\n    padding: { default: undefined },\n    persistent: { default: false },\n    'return-focus': { default: true },\n    rounded: { default: undefined },\n    size: { default: 'md' },\n  },\n  setup({ emit, host, props, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = computed(() => slots.has('header').value || !!props.label.value || props.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n    const { applyInitialFocus, captureReturnFocus, closeWithAnimation, restoreFocus } = useOverlay(\n      host,\n      dialogRef,\n      () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      props,\n    );\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Sync prop changes → native dialog\n      watch(\n        props.open,\n        (open) => {\n          if (open) {\n            if (!dialog.open) {\n              captureReturnFocus();\n              dialog.showModal();\n              applyInitialFocus();\n              lockBackground(host);\n              emit('open');\n            }\n          } else {\n            closeWithAnimation();\n          }\n        },\n        { immediate: true },\n      );\n\n      // Native dialog 'close' fires after animation finishes or on programmatic .close()\n      const handleNativeClose = () => {\n        unlockBackground();\n        // Sync the open prop back to the host attribute if closed externally\n        host.removeAttribute('open');\n        // Return focus to the triggering element unless opted out\n        restoreFocus();\n        emit('close');\n      };\n      // Intercept Escape to play exit animation first; also enforce persistent mode\n      const handleKeydown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          e.preventDefault();\n\n          if (!props.persistent.value) {\n            closeWithAnimation();\n          }\n        }\n      };\n      // Backdrop click: the click target is the <dialog> element itself (not the panel)\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        // When clicking the backdrop, the event target is the <dialog> element itself.\n        // Clicks inside the panel bubble up with a more specific target.\n        if (e.target === dialog) {\n          closeWithAnimation();\n        }\n      };\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'click', handleBackdropClick);\n      handle(dialog, 'keydown', handleKeydown);\n\n      return () => {\n        // Ensure the native dialog is closed on unmount to release top-layer\n        if (dialog.open) dialog.close();\n\n        unlockBackground();\n      };\n    });\n\n    const handleDismiss = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      fire.custom(dialog, 'close-request');\n      dialog.classList.add('closing');\n\n      const panel = dialog.querySelector<HTMLElement>('.panel');\n      const finish = () => {\n        dialog.classList.remove('closing');\n        dialog.close();\n      };\n\n      if (panel) {\n        awaitExit(panel, finish, 'transition');\n      } else {\n        finish();\n      }\n    };\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        class=\"dialog\"\n        part=\"dialog\"\n        :aria-label=\"${() => props.label.value || null}\"\n        aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${() => props.label.value}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              ${closeIcon}\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, roundedVariantMixin, coarsePointerMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-dialog',\n});\n"],"mappings":"udA6GA,IAAa,GAAA,EAAA,EAAA,iBAA8D,CACzE,MAAO,CACL,SAAU,CAAE,QAAS,IAAA,GAAW,CAChC,YAAa,CAAE,QAAS,GAAO,CAC/B,UAAW,CAAE,QAAS,IAAA,GAAW,CACjC,gBAAiB,CAAE,QAAS,IAAA,GAAW,CACvC,MAAO,CAAE,QAAS,GAAI,CACtB,KAAM,CAAE,QAAS,GAAO,CACxB,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,WAAY,CAAE,QAAS,GAAO,CAC9B,eAAgB,CAAE,QAAS,GAAM,CACjC,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,KAAM,CACxB,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAClC,IAAM,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,cAA2B,EAAM,IAAI,SAAS,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MAAM,CACvG,GAAA,EAAA,EAAA,cAA2B,EAAM,IAAI,SAAS,CAAC,MAAM,CACrD,CAAE,oBAAmB,qBAAoB,qBAAoB,gBAAiB,EAAA,WAClF,EACA,MACM,EAAU,OAAO,cAA2B,SAAS,CAC3D,EACD,CAyFD,OAvFA,EAAA,EAAA,aAAc,CACZ,IAAM,EAAS,EAAU,MAyDzB,OAvDK,IAGL,EAAA,EAAA,OACE,EAAM,KACL,GAAS,CACJ,EACG,EAAO,OACV,GAAoB,CACpB,EAAO,WAAW,CAClB,GAAmB,CACnB,EAAA,eAAe,EAAK,CACpB,EAAK,OAAO,EAGd,GAAoB,EAGxB,CAAE,UAAW,GAAM,CACpB,EAgCD,EAAA,EAAA,QAAO,EAAQ,YA7BiB,CAC9B,EAAA,kBAAkB,CAElB,EAAK,gBAAgB,OAAO,CAE5B,GAAc,CACd,EAAK,QAAQ,EAuB2B,EAC1C,EAAA,EAAA,QAAO,EAAQ,QAXc,GAAkB,CACzC,EAAM,WAAW,OAIjB,EAAE,SAAW,GACf,GAAoB,EAKoB,EAC5C,EAAA,EAAA,QAAO,EAAQ,UAtBQ,GAAqB,CACtC,EAAE,MAAQ,WACZ,EAAE,gBAAgB,CAEb,EAAM,WAAW,OACpB,GAAoB,GAiBc,KAE3B,CAEP,EAAO,MAAM,EAAO,OAAO,CAE/B,EAAA,kBAAkB,GA3DP,QA6Db,CAuBK,EAAA,IAAI;;cAED,EAAU;;;2BAGK,EAAM,MAAM,OAAS,KAAK;;;sDAGD,EAAM,KAAK;0DACL,CAAC,EAAU,MAAM;;qDAEtB,EAAM,MAAM,MAAM;;;;;;;4BAO3C,CAAC,EAAM,YAAY,MAAM;2BAvCvB,CAC1B,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,OAEb,EAAA,KAAK,OAAO,EAAQ,gBAAgB,CACpC,EAAO,UAAU,IAAI,UAAU,CAE/B,IAAM,EAAQ,EAAO,cAA2B,SAAS,CACnD,MAAe,CACnB,EAAO,UAAU,OAAO,UAAU,CAClC,EAAO,OAAO,EAGZ,EACF,EAAA,UAAU,EAAO,EAAQ,aAAa,CAEtC,GAAQ,EAuBqB;gBACrB,EAAA,UAAU;;;;;;0DAMkC,CAAC,EAAU,MAAM;;;;;OAO3E,OAAQ,CAAC,EAAA,eAAgB,EAAA,oBAAqB,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,QAAgB,CACtG,IAAK,aACN,CAAC"}
+{"version":3,"file":"dialog.cjs","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayCloseReason, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, handle, html, onMount, ref, signal, watch, fire } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\n\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport '../../content/icon/icon';\nimport { type PropBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, elevationMixin, roundedVariantMixin } from '../../styles';\nimport { lockBackground, unlockBackground } from '../../utils/background-lock';\nimport { useOverlay } from '../../utils/use-overlay';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type BitDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type BitDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element bit-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius size\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @example\n * ```html\n * <bit-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <bit-button variant=\"ghost\" id=\"cancel\">Cancel</bit-button>\n *     <bit-button color=\"error\" id=\"confirm\">Delete</bit-button>\n *   </div>\n * </bit-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/buildit/dialog';\n *   const dialog = document.querySelector('bit-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\n/** Event schema for bit-dialog. */\nconst dialogProps = {\n  backdrop: undefined,\n  dismissible: false,\n  elevation: undefined,\n  'initial-focus': undefined,\n  label: '',\n  open: false,\n  padding: undefined,\n  persistent: false,\n  'return-focus': true,\n  rounded: undefined,\n  size: 'md',\n} satisfies PropBundle<BitDialogProps>;\n\nexport const DIALOG_TAG = define<BitDialogProps, BitDialogEvents>('bit-dialog', {\n  props: dialogProps,\n  setup({ emit, host, props, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const isOpen = signal(false);\n    const hasHeader = computed(() => slots.has('header').value || !!props.label.value || props.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n    let closeReason: OverlayCloseReason = 'programmatic';\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { applyInitialFocus, captureReturnFocus, closeWithAnimation, restoreFocus } = useOverlay(\n      host.el,\n      dialogRef,\n      () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      props,\n    );\n\n    const overlay = createOverlayControl({\n      elements: {\n        boundary: host.el,\n        panel: dialogRef.value?.querySelector<HTMLElement>('.panel') ?? null,\n      },\n      isOpen,\n      onOpen: (reason) => emit('open', { reason }),\n      setOpen: (next, reason) => {\n        const dialog = dialogRef.value;\n\n        if (!dialog) return;\n\n        if (next) {\n          if (dialog.open) return;\n\n          captureReturnFocus();\n          dialog.showModal();\n          applyInitialFocus();\n          lockBackground(host.el);\n          isOpen.value = true;\n\n          return;\n        }\n\n        if (dialog.open) {\n          closeReason = reason as OverlayCloseReason;\n          closeWithAnimation();\n\n          return;\n        }\n\n        isOpen.value = false;\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Native Dialog Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Sync prop changes → native dialog\n      watch(\n        props.open,\n        (open) => {\n          if (open) {\n            overlay.open('programmatic');\n\n            return;\n          }\n\n          overlay.close('programmatic', false);\n        },\n        { immediate: true },\n      );\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Close, Escape, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.el.removeAttribute('open');\n        isOpen.value = false;\n        restoreFocus();\n        emit('close', { reason: closeReason });\n        closeReason = 'programmatic';\n      };\n\n      const requestClose = (reason: Exclude<OverlayCloseReason, 'programmatic'>) => {\n        const closeAllowed = fire.custom(host.el, 'close-request', {\n          cancelable: true,\n          detail: { reason },\n        });\n\n        if (!closeAllowed) return;\n\n        closeReason = reason;\n        overlay.close(reason, false);\n      };\n\n      const handleKeydown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' && !props.persistent.value) {\n          e.preventDefault();\n          requestClose('escape');\n        }\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        // Click target is the <dialog> element itself (not the panel)\n        if (e.target === dialog) {\n          requestClose('outside-click');\n        }\n      };\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'click', handleBackdropClick);\n      handle(dialog, 'keydown', handleKeydown);\n\n      return () => {\n        // Ensure the native dialog is closed on unmount to release top-layer\n        if (dialog.open) dialog.close();\n\n        unlockBackground();\n      };\n    });\n\n    const handleDismiss = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      const closeAllowed = fire.custom(host.el, 'close-request', {\n        cancelable: true,\n        detail: { reason: 'trigger' },\n      });\n\n      if (!closeAllowed) return;\n\n      closeReason = 'trigger';\n      overlay.close('trigger', false);\n    };\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        class=\"dialog\"\n        part=\"dialog\"\n        :aria-label=\"${() => props.label.value || null}\"\n        aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size.value}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${() => props.label.value}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\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          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":"yiBAgIA,IAAa,GAAA,EAAA,EAAA,QAAqD,aAAc,CAC9E,MAfkB,CAClB,SAAU,IAAA,GACV,YAAa,GACb,UAAW,IAAA,GACX,gBAAiB,IAAA,GACjB,MAAO,GACP,KAAM,GACN,QAAS,IAAA,GACT,WAAY,GACZ,eAAgB,GAChB,QAAS,IAAA,GACT,KAAM,KACP,CAIC,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAClC,IAAM,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,QAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,cAA2B,EAAM,IAAI,SAAS,CAAC,OAAS,CAAC,CAAC,EAAM,MAAM,OAAS,EAAM,YAAY,MAAM,CACvG,GAAA,EAAA,EAAA,cAA2B,EAAM,IAAI,SAAS,CAAC,MAAM,CACvD,EAAkC,eAMhC,CAAE,oBAAmB,qBAAoB,qBAAoB,gBAAiB,EAAA,WAClF,EAAK,GACL,MACM,EAAU,OAAO,cAA2B,SAAS,CAC3D,EACD,CAEK,EAAU,EAAA,EAAqB,CACnC,SAAU,CACR,SAAU,EAAK,GACf,MAAO,EAAU,OAAO,cAA2B,SAAS,EAAI,KACjE,CACD,SACA,OAAS,GAAW,EAAK,OAAQ,CAAE,SAAQ,CAAC,CAC5C,SAAU,EAAM,IAAW,CACzB,IAAM,EAAS,EAAU,MAEpB,KAEL,IAAI,EAAM,CACR,GAAI,EAAO,KAAM,OAEjB,GAAoB,CACpB,EAAO,WAAW,CAClB,GAAmB,CACnB,EAAA,eAAe,EAAK,GAAG,CACvB,EAAO,MAAQ,GAEf,OAGF,GAAI,EAAO,KAAM,CACf,EAAc,EACd,GAAoB,CAEpB,OAGF,EAAO,MAAQ,KAElB,CAAC,CA+FF,OAzFA,EAAA,EAAA,aAAc,CACZ,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,QAGb,EAAA,EAAA,OACE,EAAM,KACL,GAAS,CACR,GAAI,EAAM,CACR,EAAQ,KAAK,eAAe,CAE5B,OAGF,EAAQ,MAAM,eAAgB,GAAM,EAEtC,CAAE,UAAW,GAAM,CACpB,CAMD,IAAM,MAA0B,CAC9B,EAAA,kBAAkB,CAClB,EAAK,GAAG,gBAAgB,OAAO,CAC/B,EAAO,MAAQ,GACf,GAAc,CACd,EAAK,QAAS,CAAE,OAAQ,EAAa,CAAC,CACtC,EAAc,gBAGV,EAAgB,GAAwD,CACvD,EAAA,KAAK,OAAO,EAAK,GAAI,gBAAiB,CACzD,WAAY,GACZ,OAAQ,CAAE,SAAQ,CACnB,CAAC,GAIF,EAAc,EACd,EAAQ,MAAM,EAAQ,GAAM,GAuB9B,OAJA,EAAA,EAAA,QAAO,EAAQ,QAAS,EAAkB,EAC1C,EAAA,EAAA,QAAO,EAAQ,QAVc,GAAkB,CACzC,EAAM,WAAW,OAGjB,EAAE,SAAW,GACf,EAAa,gBAAgB,EAKW,EAC5C,EAAA,EAAA,QAAO,EAAQ,UAlBQ,GAAqB,CACtC,EAAE,MAAQ,UAAY,CAAC,EAAM,WAAW,QAC1C,EAAE,gBAAgB,CAClB,EAAa,SAAS,GAec,KAE3B,CAEP,EAAO,MAAM,EAAO,OAAO,CAE/B,EAAA,kBAAkB,GAEpB,CAkBK,EAAA,IAAI;;cAED,EAAU;;;2BAGK,EAAM,MAAM,OAAS,KAAK;;;sDAGD,EAAM,KAAK,MAAM;0DACX,CAAC,EAAU,MAAM;;qDAEtB,EAAM,MAAM,MAAM;;;;;;;4BAO3C,CAAC,EAAM,YAAY,MAAM;2BAlCvB,CACX,EAAU,OAIJ,EAAA,KAAK,OAAO,EAAK,GAAI,gBAAiB,CACzD,WAAY,GACZ,OAAQ,CAAE,OAAQ,UAAW,CAC9B,CAAC,GAIF,EAAc,UACd,EAAQ,MAAM,UAAW,GAAM,GAsBA;;;;;;;0DAOuB,CAAC,EAAU,MAAM;;;;;OAO3E,OAAQ,CAAC,EAAA,eAAgB,EAAA,oBAAqB,EAAA,mBAAoB,EAAA,QAAgB,CACnF,CAAC"}

package/dist/dialog.js

@@ -1,44 +1,78 @@
-import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
-import { roundedVariantMixin as n } from "./styles/mixins/shape.css.js";
-import { elevationMixin as r } from "./styles/mixins/theme.css.js";
+import "./icon.js";
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { roundedVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { elevationMixin as n } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import { closeIcon as i } from "./icons.js";
-import { awaitExit as a } from "./utils/animation.js";
-import { lockBackground as o, unlockBackground as s } from "./utils/background-lock.js";
-import { useOverlay as c } from "./utils/use-overlay.js";
-import l from "./overlay/dialog/dialog.css?inline.js";
-import { computed as u, defineComponent as d, fire as f, handle as p, html as m, onMount as h, ref as g, watch as _ } from "@vielzeug/craftit";
-//#region src/overlay/dialog/dialog.ts
-var v = d({
+import { i as r } from "./packages/craftit/dist/controls/overlay-control.js";
+import "./packages/craftit/dist/controls.js";
+import { lockBackground as i, unlockBackground as a } from "./utils/background-lock.js";
+import { useOverlay as o } from "./utils/use-overlay.js";
+import s from "./overlay/dialog/dialog.css?inline.js";
+import { computed as c, define as l, fire as u, handle as d, html as f, onMount as p, ref as m, signal as h, watch as g } from "@vielzeug/craftit";
+var _ = l("bit-dialog", {
 	props: {
-		backdrop: { default: void 0 },
-		dismissible: { default: !1 },
-		elevation: { default: void 0 },
-		"initial-focus": { default: void 0 },
-		label: { default: "" },
-		open: { default: !1 },
-		padding: { default: void 0 },
-		persistent: { default: !1 },
-		"return-focus": { default: !0 },
-		rounded: { default: void 0 },
-		size: { default: "md" }
+		backdrop: void 0,
+		dismissible: !1,
+		elevation: void 0,
+		"initial-focus": void 0,
+		label: "",
+		open: !1,
+		padding: void 0,
+		persistent: !1,
+		"return-focus": !0,
+		rounded: void 0,
+		size: "md"
 	},
-	setup({ emit: e, host: t, props: n, slots: r }) {
-		let l = g(), d = u(() => r.has("header").value || !!n.label.value || n.dismissible.value), v = u(() => r.has("footer").value), { applyInitialFocus: y, captureReturnFocus: b, closeWithAnimation: x, restoreFocus: S } = c(t, l, () => l.value?.querySelector(".panel"), n);
-		return h(() => {
+	setup({ emit: e, host: t, props: n, slots: s }) {
+		let l = m(), _ = h(!1), v = c(() => s.has("header").value || !!n.label.value || n.dismissible.value), y = c(() => s.has("footer").value), b = "programmatic", { applyInitialFocus: x, captureReturnFocus: S, closeWithAnimation: C, restoreFocus: w } = o(t.el, l, () => l.value?.querySelector(".panel"), n), T = r({
+			elements: {
+				boundary: t.el,
+				panel: l.value?.querySelector(".panel") ?? null
+			},
+			isOpen: _,
+			onOpen: (t) => e("open", { reason: t }),
+			setOpen: (e, n) => {
+				let r = l.value;
+				if (r) {
+					if (e) {
+						if (r.open) return;
+						S(), r.showModal(), x(), i(t.el), _.value = !0;
+						return;
+					}
+					if (r.open) {
+						b = n, C();
+						return;
+					}
+					_.value = !1;
+				}
+			}
+		});
+		return p(() => {
 			let r = l.value;
-			return r ? (_(n.open, (n) => {
-				n ? r.open || (b(), r.showModal(), y(), o(t), e("open")) : x();
-			}, { immediate: !0 }), p(r, "close", () => {
-				s(), t.removeAttribute("open"), S(), e("close");
-			}), p(r, "click", (e) => {
-				n.persistent.value || e.target === r && x();
-			}), p(r, "keydown", (e) => {
-				e.key === "Escape" && (e.preventDefault(), n.persistent.value || x());
+			if (!r) return;
+			g(n.open, (e) => {
+				if (e) {
+					T.open("programmatic");
+					return;
+				}
+				T.close("programmatic", !1);
+			}, { immediate: !0 });
+			let i = () => {
+				a(), t.el.removeAttribute("open"), _.value = !1, w(), e("close", { reason: b }), b = "programmatic";
+			}, o = (e) => {
+				u.custom(t.el, "close-request", {
+					cancelable: !0,
+					detail: { reason: e }
+				}) && (b = e, T.close(e, !1));
+			};
+			return d(r, "close", i), d(r, "click", (e) => {
+				n.persistent.value || e.target === r && o("outside-click");
+			}), d(r, "keydown", (e) => {
+				e.key === "Escape" && !n.persistent.value && (e.preventDefault(), o("escape"));
 			}), () => {
-				r.open && r.close(), s();
-			}) : void 0;
-		}), m`
+				r.open && r.close(), a();
+			};
+		}), f`
       <dialog
         ref=${l}
         class="dialog"
@@ -46,8 +80,8 @@ var v = d({
         :aria-label="${() => n.label.value || null}"
         aria-modal="true">
         <div class="overlay" part="overlay" aria-hidden="true"></div>
-        <div class="panel" part="panel" :data-size="${n.size}">
-          <div class="header" part="header" ?hidden=${() => !d.value}>
+        <div class="panel" part="panel" :data-size="${n.size.value}">
+          <div class="header" part="header" ?hidden=${() => !v.value}>
             <slot name="header">
               <span class="title" part="title">${() => n.label.value}</span>
             </slot>
@@ -58,21 +92,18 @@ var v = d({
               aria-label="Close dialog"
               ?hidden=${() => !n.dismissible.value}
               @click=${() => {
-			let e = l.value;
-			if (!e) return;
-			f.custom(e, "close-request"), e.classList.add("closing");
-			let t = e.querySelector(".panel"), n = () => {
-				e.classList.remove("closing"), e.close();
-			};
-			t ? a(t, n, "transition") : n();
+			l.value && u.custom(t.el, "close-request", {
+				cancelable: !0,
+				detail: { reason: "trigger" }
+			}) && (b = "trigger", T.close("trigger", !1));
 		}}>
-              ${i}
+              <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
             </button>
           </div>
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${() => !v.value}>
+          <div class="footer" part="footer" ?hidden=${() => !y.value}>
             <slot name="footer"></slot>
           </div>
         </div>
@@ -80,15 +111,13 @@ var v = d({
     `;
 	},
 	styles: [
-		r,
 		n,
-		e,
 		t,
-		l
-	],
-	tag: "bit-dialog"
+		e,
+		s
+	]
 });
 //#endregion
-export { v as DIALOG_TAG };
+export { _ as DIALOG_TAG };
 
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import { computed, defineComponent, handle, html, onMount, ref, watch, fire } from '@vielzeug/craftit';\n\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport { closeIcon } from '../../icons';\nimport { coarsePointerMixin, elevationMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport { lockBackground, unlockBackground } from '../../utils/background-lock';\nimport { useOverlay } from '../../utils/use-overlay';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type BitDialogEvents = {\n  close: undefined;\n  open: undefined;\n};\n\nexport type BitDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element bit-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius size\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens\n * @fires close - Fired when the dialog closes (any trigger)\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @example\n * ```html\n * <bit-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <bit-button variant=\"ghost\" id=\"cancel\">Cancel</bit-button>\n *     <bit-button color=\"error\" id=\"confirm\">Delete</bit-button>\n *   </div>\n * </bit-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/buildit/dialog';\n *   const dialog = document.querySelector('bit-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\nexport const DIALOG_TAG = defineComponent<BitDialogProps, BitDialogEvents>({\n  props: {\n    backdrop: { default: undefined },\n    dismissible: { default: false },\n    elevation: { default: undefined },\n    'initial-focus': { default: undefined },\n    label: { default: '' },\n    open: { default: false },\n    padding: { default: undefined },\n    persistent: { default: false },\n    'return-focus': { default: true },\n    rounded: { default: undefined },\n    size: { default: 'md' },\n  },\n  setup({ emit, host, props, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const hasHeader = computed(() => slots.has('header').value || !!props.label.value || props.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n    const { applyInitialFocus, captureReturnFocus, closeWithAnimation, restoreFocus } = useOverlay(\n      host,\n      dialogRef,\n      () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      props,\n    );\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Sync prop changes → native dialog\n      watch(\n        props.open,\n        (open) => {\n          if (open) {\n            if (!dialog.open) {\n              captureReturnFocus();\n              dialog.showModal();\n              applyInitialFocus();\n              lockBackground(host);\n              emit('open');\n            }\n          } else {\n            closeWithAnimation();\n          }\n        },\n        { immediate: true },\n      );\n\n      // Native dialog 'close' fires after animation finishes or on programmatic .close()\n      const handleNativeClose = () => {\n        unlockBackground();\n        // Sync the open prop back to the host attribute if closed externally\n        host.removeAttribute('open');\n        // Return focus to the triggering element unless opted out\n        restoreFocus();\n        emit('close');\n      };\n      // Intercept Escape to play exit animation first; also enforce persistent mode\n      const handleKeydown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          e.preventDefault();\n\n          if (!props.persistent.value) {\n            closeWithAnimation();\n          }\n        }\n      };\n      // Backdrop click: the click target is the <dialog> element itself (not the panel)\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        // When clicking the backdrop, the event target is the <dialog> element itself.\n        // Clicks inside the panel bubble up with a more specific target.\n        if (e.target === dialog) {\n          closeWithAnimation();\n        }\n      };\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'click', handleBackdropClick);\n      handle(dialog, 'keydown', handleKeydown);\n\n      return () => {\n        // Ensure the native dialog is closed on unmount to release top-layer\n        if (dialog.open) dialog.close();\n\n        unlockBackground();\n      };\n    });\n\n    const handleDismiss = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      fire.custom(dialog, 'close-request');\n      dialog.classList.add('closing');\n\n      const panel = dialog.querySelector<HTMLElement>('.panel');\n      const finish = () => {\n        dialog.classList.remove('closing');\n        dialog.close();\n      };\n\n      if (panel) {\n        awaitExit(panel, finish, 'transition');\n      } else {\n        finish();\n      }\n    };\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        class=\"dialog\"\n        part=\"dialog\"\n        :aria-label=\"${() => props.label.value || null}\"\n        aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${() => props.label.value}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleDismiss}>\n              ${closeIcon}\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, roundedVariantMixin, coarsePointerMixin, reducedMotionMixin, componentStyles],\n  tag: 'bit-dialog',\n});\n"],"mappings":";;;;;;;;;;;AA6GA,IAAa,IAAa,EAAiD;CACzE,OAAO;EACL,UAAU,EAAE,SAAS,KAAA,GAAW;EAChC,aAAa,EAAE,SAAS,IAAO;EAC/B,WAAW,EAAE,SAAS,KAAA,GAAW;EACjC,iBAAiB,EAAE,SAAS,KAAA,GAAW;EACvC,OAAO,EAAE,SAAS,IAAI;EACtB,MAAM,EAAE,SAAS,IAAO;EACxB,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,YAAY,EAAE,SAAS,IAAO;EAC9B,gBAAgB,EAAE,SAAS,IAAM;EACjC,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,MAAM,EAAE,SAAS,MAAM;EACxB;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,YAAS;EAClC,IAAM,IAAY,GAAwB,EACpC,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,MAAM,EACvG,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,MAAM,EACrD,EAAE,sBAAmB,uBAAoB,uBAAoB,oBAAiB,EAClF,GACA,SACM,EAAU,OAAO,cAA2B,SAAS,EAC3D,EACD;AAyFD,SAvFA,QAAc;GACZ,IAAM,IAAS,EAAU;AAyDzB,UAvDK,KAGL,EACE,EAAM,OACL,MAAS;AACR,IAAI,IACG,EAAO,SACV,GAAoB,EACpB,EAAO,WAAW,EAClB,GAAmB,EACnB,EAAe,EAAK,EACpB,EAAK,OAAO,IAGd,GAAoB;MAGxB,EAAE,WAAW,IAAM,CACpB,EAgCD,EAAO,GAAQ,eA7BiB;AAM9B,IALA,GAAkB,EAElB,EAAK,gBAAgB,OAAO,EAE5B,GAAc,EACd,EAAK,QAAQ;KAuB2B,EAC1C,EAAO,GAAQ,UAXc,MAAkB;AACzC,MAAM,WAAW,SAIjB,EAAE,WAAW,KACf,GAAoB;KAKoB,EAC5C,EAAO,GAAQ,YAtBQ,MAAqB;AAC1C,IAAI,EAAE,QAAQ,aACZ,EAAE,gBAAgB,EAEb,EAAM,WAAW,SACpB,GAAoB;KAiBc,QAE3B;AAIX,IAFI,EAAO,QAAM,EAAO,OAAO,EAE/B,GAAkB;QA3DP;IA6Db,EAuBK,CAAI;;cAED,EAAU;;;6BAGK,EAAM,MAAM,SAAS,KAAK;;;sDAGD,EAAM,KAAK;4DACL,CAAC,EAAU,MAAM;;uDAEtB,EAAM,MAAM,MAAM;;;;;;;8BAO3C,CAAC,EAAM,YAAY,MAAM;6BAvCvB;GAC1B,IAAM,IAAS,EAAU;AAEzB,OAAI,CAAC,EAAQ;AAGb,GADA,EAAK,OAAO,GAAQ,gBAAgB,EACpC,EAAO,UAAU,IAAI,UAAU;GAE/B,IAAM,IAAQ,EAAO,cAA2B,SAAS,EACnD,UAAe;AAEnB,IADA,EAAO,UAAU,OAAO,UAAU,EAClC,EAAO,OAAO;;AAGhB,GAAI,IACF,EAAU,GAAO,GAAQ,aAAa,GAEtC,GAAQ;IAuBqB;gBACrB,EAAU;;;;;;4DAMkC,CAAC,EAAU,MAAM;;;;;;;CAO3E,QAAQ;EAAC;EAAgB;EAAqB;EAAoB;EAAoB;EAAgB;CACtG,KAAK;CACN,CAAC"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../src/overlay/dialog/dialog.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayCloseReason, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, handle, html, onMount, ref, signal, watch, fire } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\n\nimport type { PaddingSize, RoundedSize } from '../../types';\n\nimport '../../content/icon/icon';\nimport { type PropBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, elevationMixin, roundedVariantMixin } from '../../styles';\nimport { lockBackground, unlockBackground } from '../../utils/background-lock';\nimport { useOverlay } from '../../utils/use-overlay';\nimport componentStyles from './dialog.css?inline';\n\ntype DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\ntype DialogBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DialogElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Dialog component properties */\n\nexport type BitDialogEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n};\n\nexport type BitDialogProps = {\n  /** Backdrop style — 'blur' (default): dark overlay + blur; 'opaque': dark overlay only; 'transparent': no overlay */\n  backdrop?: DialogBackdrop;\n  /** Show a close (×) button in the header */\n  dismissible?: boolean;\n  /** Panel shadow elevation — defaults to 'xl' */\n  elevation?: DialogElevation;\n  /**\n   * CSS selector for the element inside the dialog that should receive focus when the dialog opens.\n   * Defaults to the first focusable element (browser default).\n   * @example 'input[name=\"email\"]' | '#confirm-btn'\n   */\n  'initial-focus'?: string;\n  /** Dialog title shown in the header (used as aria-label when no header slot) */\n  label?: string;\n  /** Controls the open state of the dialog */\n  open?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** When true, clicking the backdrop does not close the dialog */\n  persistent?: boolean;\n  /**\n   * When true (default), the focus returns to the element that triggered the dialog after it closes.\n   * Set to false if you want to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Dialog size */\n  size?: DialogSize;\n};\n\n/**\n * A modal dialog that traps focus, blocks page interaction, and dismisses on\n * `Escape`. Built on the native `<dialog>` element for correct top-layer stacking\n * and browser-managed accessibility.\n *\n * @element bit-dialog\n *\n * @attr {boolean} open - Open/close the dialog\n * @attr {string} label - Dialog title (also used as aria-label)\n * @attr {string} size - Size: 'sm' | 'md' | 'lg' | 'xl' | 'full'\n * @attr {boolean} dismissible - Show a close (×) button in the header\n * @attr {boolean} persistent - Prevent backdrop-click from closing\n * @attr {string} rounded - Border radius size\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {string} elevation - Panel shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} padding - Padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n *\n * @fires open - Fired when the dialog opens with detail: { reason }\n * @fires close - Fired when the dialog closes with detail: { reason }\n *\n * @slot - Dialog body content\n * @slot header - Custom header content (replaces the default title + close layout)\n * @slot footer - Action buttons or additional content at the bottom\n *\n * @cssprop --dialog-bg - Panel background color\n * @cssprop --dialog-border-color - Panel border color\n * @cssprop --dialog-radius - Panel border radius\n * @cssprop --dialog-shadow - Panel drop shadow\n * @cssprop --dialog-padding - Padding for header, body, and footer sections\n * @cssprop --dialog-gap - Gap between footer action buttons\n * @cssprop --dialog-backdrop - Backdrop overlay color\n * @cssprop --dialog-max-width - Maximum panel width (overridden by size prop)\n *\n * @example\n * ```html\n * <bit-dialog label=\"Confirm action\" dismissible>\n *   <p>Are you sure you want to delete this item?</p>\n *   <div slot=\"footer\">\n *     <bit-button variant=\"ghost\" id=\"cancel\">Cancel</bit-button>\n *     <bit-button color=\"error\" id=\"confirm\">Delete</bit-button>\n *   </div>\n * </bit-dialog>\n *\n * <script type=\"module\">\n *   import '@vielzeug/buildit/dialog';\n *   const dialog = document.querySelector('bit-dialog');\n *   document.querySelector('#open-btn').addEventListener('click', () => {\n *     dialog.setAttribute('open', '');\n *   });\n *   document.querySelector('#cancel').addEventListener('click', () => {\n *     dialog.removeAttribute('open');\n *   });\n * </script>\n * ```\n */\n\n/** Event schema for bit-dialog. */\nconst dialogProps = {\n  backdrop: undefined,\n  dismissible: false,\n  elevation: undefined,\n  'initial-focus': undefined,\n  label: '',\n  open: false,\n  padding: undefined,\n  persistent: false,\n  'return-focus': true,\n  rounded: undefined,\n  size: 'md',\n} satisfies PropBundle<BitDialogProps>;\n\nexport const DIALOG_TAG = define<BitDialogProps, BitDialogEvents>('bit-dialog', {\n  props: dialogProps,\n  setup({ emit, host, props, slots }) {\n    const dialogRef = ref<HTMLDialogElement>();\n    const isOpen = signal(false);\n    const hasHeader = computed(() => slots.has('header').value || !!props.label.value || props.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n    let closeReason: OverlayCloseReason = 'programmatic';\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { applyInitialFocus, captureReturnFocus, closeWithAnimation, restoreFocus } = useOverlay(\n      host.el,\n      dialogRef,\n      () => dialogRef.value?.querySelector<HTMLElement>('.panel'),\n      props,\n    );\n\n    const overlay = createOverlayControl({\n      elements: {\n        boundary: host.el,\n        panel: dialogRef.value?.querySelector<HTMLElement>('.panel') ?? null,\n      },\n      isOpen,\n      onOpen: (reason) => emit('open', { reason }),\n      setOpen: (next, reason) => {\n        const dialog = dialogRef.value;\n\n        if (!dialog) return;\n\n        if (next) {\n          if (dialog.open) return;\n\n          captureReturnFocus();\n          dialog.showModal();\n          applyInitialFocus();\n          lockBackground(host.el);\n          isOpen.value = true;\n\n          return;\n        }\n\n        if (dialog.open) {\n          closeReason = reason as OverlayCloseReason;\n          closeWithAnimation();\n\n          return;\n        }\n\n        isOpen.value = false;\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Native Dialog Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Sync prop changes → native dialog\n      watch(\n        props.open,\n        (open) => {\n          if (open) {\n            overlay.open('programmatic');\n\n            return;\n          }\n\n          overlay.close('programmatic', false);\n        },\n        { immediate: true },\n      );\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Close, Escape, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.el.removeAttribute('open');\n        isOpen.value = false;\n        restoreFocus();\n        emit('close', { reason: closeReason });\n        closeReason = 'programmatic';\n      };\n\n      const requestClose = (reason: Exclude<OverlayCloseReason, 'programmatic'>) => {\n        const closeAllowed = fire.custom(host.el, 'close-request', {\n          cancelable: true,\n          detail: { reason },\n        });\n\n        if (!closeAllowed) return;\n\n        closeReason = reason;\n        overlay.close(reason, false);\n      };\n\n      const handleKeydown = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' && !props.persistent.value) {\n          e.preventDefault();\n          requestClose('escape');\n        }\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        // Click target is the <dialog> element itself (not the panel)\n        if (e.target === dialog) {\n          requestClose('outside-click');\n        }\n      };\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'click', handleBackdropClick);\n      handle(dialog, 'keydown', handleKeydown);\n\n      return () => {\n        // Ensure the native dialog is closed on unmount to release top-layer\n        if (dialog.open) dialog.close();\n\n        unlockBackground();\n      };\n    });\n\n    const handleDismiss = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      const closeAllowed = fire.custom(host.el, 'close-request', {\n        cancelable: true,\n        detail: { reason: 'trigger' },\n      });\n\n      if (!closeAllowed) return;\n\n      closeReason = 'trigger';\n      overlay.close('trigger', false);\n    };\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        class=\"dialog\"\n        part=\"dialog\"\n        :aria-label=\"${() => props.label.value || null}\"\n        aria-modal=\"true\">\n        <div class=\"overlay\" part=\"overlay\" aria-hidden=\"true\"></div>\n        <div class=\"panel\" part=\"panel\" :data-size=\"${props.size.value}\">\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <slot name=\"header\">\n              <span class=\"title\" part=\"title\">${() => props.label.value}</span>\n            </slot>\n            <button\n              class=\"close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Close dialog\"\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          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, roundedVariantMixin, coarsePointerMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;;;AAgIA,IAAa,IAAa,EAAwC,cAAc;CAC9E,OAfkB;EAClB,UAAU,KAAA;EACV,aAAa;EACb,WAAW,KAAA;EACX,iBAAiB,KAAA;EACjB,OAAO;EACP,MAAM;EACN,SAAS,KAAA;EACT,YAAY;EACZ,gBAAgB;EAChB,SAAS,KAAA;EACT,MAAM;EACP;CAIC,MAAM,EAAE,SAAM,SAAM,UAAO,YAAS;EAClC,IAAM,IAAY,GAAwB,EACpC,IAAS,EAAO,GAAM,EACtB,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,MAAM,EACvG,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,MAAM,EACvD,IAAkC,gBAMhC,EAAE,sBAAmB,uBAAoB,uBAAoB,oBAAiB,EAClF,EAAK,IACL,SACM,EAAU,OAAO,cAA2B,SAAS,EAC3D,EACD,EAEK,IAAU,EAAqB;GACnC,UAAU;IACR,UAAU,EAAK;IACf,OAAO,EAAU,OAAO,cAA2B,SAAS,IAAI;IACjE;GACD;GACA,SAAS,MAAW,EAAK,QAAQ,EAAE,WAAQ,CAAC;GAC5C,UAAU,GAAM,MAAW;IACzB,IAAM,IAAS,EAAU;AAEpB,WAEL;SAAI,GAAM;AACR,UAAI,EAAO,KAAM;AAMjB,MAJA,GAAoB,EACpB,EAAO,WAAW,EAClB,GAAmB,EACnB,EAAe,EAAK,GAAG,EACvB,EAAO,QAAQ;AAEf;;AAGF,SAAI,EAAO,MAAM;AAEf,MADA,IAAc,GACd,GAAoB;AAEpB;;AAGF,OAAO,QAAQ;;;GAElB,CAAC;AA+FF,SAzFA,QAAc;GACZ,IAAM,IAAS,EAAU;AAEzB,OAAI,CAAC,EAAQ;AAGb,KACE,EAAM,OACL,MAAS;AACR,QAAI,GAAM;AACR,OAAQ,KAAK,eAAe;AAE5B;;AAGF,MAAQ,MAAM,gBAAgB,GAAM;MAEtC,EAAE,WAAW,IAAM,CACpB;GAMD,IAAM,UAA0B;AAM9B,IALA,GAAkB,EAClB,EAAK,GAAG,gBAAgB,OAAO,EAC/B,EAAO,QAAQ,IACf,GAAc,EACd,EAAK,SAAS,EAAE,QAAQ,GAAa,CAAC,EACtC,IAAc;MAGV,KAAgB,MAAwD;AACvD,MAAK,OAAO,EAAK,IAAI,iBAAiB;KACzD,YAAY;KACZ,QAAQ,EAAE,WAAQ;KACnB,CAAC,KAIF,IAAc,GACd,EAAQ,MAAM,GAAQ,GAAM;;AAuB9B,UAJA,EAAO,GAAQ,SAAS,EAAkB,EAC1C,EAAO,GAAQ,UAVc,MAAkB;AACzC,MAAM,WAAW,SAGjB,EAAE,WAAW,KACf,EAAa,gBAAgB;KAKW,EAC5C,EAAO,GAAQ,YAlBQ,MAAqB;AAC1C,IAAI,EAAE,QAAQ,YAAY,CAAC,EAAM,WAAW,UAC1C,EAAE,gBAAgB,EAClB,EAAa,SAAS;KAec,QAE3B;AAIX,IAFI,EAAO,QAAM,EAAO,OAAO,EAE/B,GAAkB;;IAEpB,EAkBK,CAAI;;cAED,EAAU;;;6BAGK,EAAM,MAAM,SAAS,KAAK;;;sDAGD,EAAM,KAAK,MAAM;4DACX,CAAC,EAAU,MAAM;;uDAEtB,EAAM,MAAM,MAAM;;;;;;;8BAO3C,CAAC,EAAM,YAAY,MAAM;6BAlCvB;AACX,KAAU,SAIJ,EAAK,OAAO,EAAK,IAAI,iBAAiB;IACzD,YAAY;IACZ,QAAQ,EAAE,QAAQ,WAAW;IAC9B,CAAC,KAIF,IAAc,WACd,EAAQ,MAAM,WAAW,GAAM;IAsBA;;;;;;;4DAOuB,CAAC,EAAU,MAAM;;;;;;;CAO3E,QAAQ;EAAC;EAAgB;EAAqB;EAAoB;EAAgB;CACnF,CAAC"}

package/dist/disclosure/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/disclosure/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEhE,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,cAAc,CAAC,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IACjE,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,OAAO,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CACpD,CAAC;AACF,+CAA+C;AAC/C,eAAO,MAAM,aAAa,4DAAsD,CAAC;AAIjF,qCAAqC;AAErC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gFAAgF;IAChF,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,kDAAkD;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,eAAO,MAAM,aAAa,QA4DxB,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/disclosure/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGhH,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEhE,4EAA4E;AAC5E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,cAAc,CAAC,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;IACjE,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,OAAO,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CACpD,CAAC;AACF,+CAA+C;AAC/C,eAAO,MAAM,aAAa,4DAAsD,CAAC;AAIjF,qCAAqC;AAErC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gFAAgF;IAChF,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,kDAAkD;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,eAAO,MAAM,aAAa,QAqFxB,CAAC"}

package/dist/disclosure/accordion-item/accordion-item.css?inline.cjs

@@ -1,2 +1,2 @@
-var e=`@layer buildit.base{:host{color:var(--accordion-item-body-color,var(--text-color-body));--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);display:block}details{border-radius:var(--accordion-item-radius);width:100%;transition:all var(--accordion-item-transition);overflow:hidden}summary{gap:var(--size-4);min-height:var(--_touch-target);padding:var(--accordion-item-details-padding,var(--size-3) var(--size-4));font-size:var(--accordion-item-title);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--accordion-item-bg);border:var(--border) solid var(--accordion-item-border-color);border-radius:var(--accordion-details-radius);transition:all var(--accordion-item-transition);outline:none;align-items:center;list-style:none;display:flex;position:relative}summary::-webkit-details-marker{display:none}summary:focus{outline:none}summary:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);box-shadow:0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent)}.header-content{flex-direction:column;flex:1;min-width:0;display:flex}.subtitle{font-size:var(--accordion-item-subtitle-size);line-height:var(--leading-normal);color:var(--accordion-item-subtitle-color,var(--text-color-secondary))}.title{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--accordion-item-title-color,var(--text-color-heading));white-space:nowrap;overflow:hidden}.content-wrapper{font-size:var(--accordion-item-body);background:var(--accordion-item-bg);border-inline:1px solid var(--accordion-item-border-color);border-bottom:1px solid var(--accordion-item-border-color);border-radius:var(--accordion-summary-radius);transition:grid-template-rows var(--accordion-item-transition);grid-template-rows:0fr;display:grid}details[open] .content-wrapper{grid-template-rows:1fr}.content-inner{padding:var(--accordion-item-summary-padding,var(--size-2) var(--size-4));overflow:hidden}}@layer buildit.variants{:host,:host([variant=solid]){--accordion-item-bg:var(--color-contrast-50);--accordion-item-border-color:transparent}:host summary:hover,:host([variant=solid]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=flat]){--accordion-item-bg:var(--color-contrast-100)}:host([variant=flat]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=bordered]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-border-color:var(--color-contrast-300);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs)}:host([variant=bordered]) summary:hover{background:var(--color-contrast-200)}:host([variant=outline]){--accordion-item-bg:transparent;--accordion-item-border-color:var(--color-contrast-300)}:host([variant=outline]) summary:hover{background:var(--color-contrast-300)}:host([variant=ghost]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=ghost]) summary:hover{background:var(--color-contrast-200)}:host([variant=text]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=text]) summary:hover{background:0 0}:host([variant=glass]) details,:host([variant=frost]) details{border-radius:inherit}:host([variant=glass]) summary,:host([variant=frost]) summary{border-radius:inherit;-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=glass]) .content-wrapper,:host([variant=frost]) .content-wrapper{-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%);border-radius:0}:host([variant=glass]){--accordion-item-bg:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);--accordion-item-border-color:transparent;--accordion-item-title-color:color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);--accordion-item-subtitle-color:color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);--accordion-item-body-color:color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent)}:host([variant=glass]) summary{text-shadow:var(--text-shadow-xs)}:host([variant=glass]) summary:hover{background:color-mix(in srgb, var(--color-secondary) 20%, transparent)}:host([variant=glass]) .content-wrapper{filter:brightness(1.05)}:host([variant=frost]){--accordion-item-bg:color-mix(in srgb, var(--color-canvas) 55%, transparent);--accordion-item-border-color:transparent}:host([variant=frost]) summary{text-shadow:var(--text-shadow-2xs)}:host([variant=frost]) summary:hover{background:color-mix(in srgb, var(--color-canvas) 20%, transparent)}:host([size=sm]){--accordion-item-details-padding:var(--size-2) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-sm);--accordion-item-subtitle-size:var(--text-xs);--accordion-item-body:var(--text-xs)}:host(:not([size])),:host([size=md]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}:host([size=lg]){--accordion-item-details-padding:var(--size-4) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}:host([disabled]){pointer-events:none;opacity:.6}.chevron{width:var(--size-5);height:var(--size-5);transition:transform var(--accordion-item-transition)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.chevron:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}details[open] .chevron{transform:rotate(-90deg)}:host([expanded]){--accordion-details-radius:var(--rounded-lg) var(--rounded-lg) 0 0;--accordion-summary-radius:0 0 var(--rounded-lg) var(--rounded-lg)}@media (forced-colors:active){summary{border-color:buttontext}}}`;exports.default=e;
+var e=`@layer buildit.base{:host{color:var(--accordion-item-body-color,var(--text-color-body));--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);display:block}details{border-radius:var(--accordion-item-radius);width:100%;transition:all var(--accordion-item-transition);overflow:hidden}summary{gap:var(--size-4);min-height:var(--_touch-target);padding:var(--accordion-item-details-padding,var(--size-3) var(--size-4));font-size:var(--accordion-item-title);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--accordion-item-bg);border:var(--border) solid var(--accordion-item-border-color);border-radius:var(--accordion-details-radius);transition:all var(--accordion-item-transition);outline:none;align-items:center;list-style:none;display:flex;position:relative}summary::-webkit-details-marker{display:none}summary:focus{outline:none}summary:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);box-shadow:0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent)}.header-content{flex-direction:column;flex:1;min-width:0;display:flex}.subtitle{font-size:var(--accordion-item-subtitle-size);line-height:var(--leading-normal);color:var(--accordion-item-subtitle-color,var(--text-color-secondary))}.title{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--accordion-item-title-color,var(--text-color-heading));white-space:nowrap;overflow:hidden}.content-wrapper{font-size:var(--accordion-item-body);background:var(--accordion-item-bg);border-inline:1px solid var(--accordion-item-border-color);border-bottom:1px solid var(--accordion-item-border-color);border-radius:var(--accordion-summary-radius);transition:grid-template-rows var(--accordion-item-transition);grid-template-rows:0fr;display:grid}details[open] .content-wrapper{grid-template-rows:1fr}.content-inner{padding:var(--accordion-item-summary-padding,var(--size-2) var(--size-4));overflow:hidden}}@layer buildit.variants{:host,:host([variant=solid]){--accordion-item-bg:var(--color-contrast-50);--accordion-item-border-color:transparent}:host summary:hover,:host([variant=solid]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=flat]){--accordion-item-bg:var(--color-contrast-100)}:host([variant=flat]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=bordered]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-border-color:var(--color-contrast-300);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs)}:host([variant=bordered]) summary:hover{background:var(--color-contrast-200)}:host([variant=outline]){--accordion-item-bg:transparent;--accordion-item-border-color:var(--color-contrast-300)}:host([variant=outline]) summary:hover{background:var(--color-contrast-300)}:host([variant=ghost]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=ghost]) summary:hover{background:var(--color-contrast-200)}:host([variant=text]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=text]) summary:hover{background:0 0}:host([variant=glass]) details,:host([variant=frost]) details{border-radius:inherit}:host([variant=glass]) summary,:host([variant=frost]) summary{border-radius:inherit;-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=glass]) .content-wrapper,:host([variant=frost]) .content-wrapper{-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%);border-radius:0}:host([variant=glass]){--accordion-item-bg:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);--accordion-item-border-color:transparent;--accordion-item-title-color:color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);--accordion-item-subtitle-color:color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);--accordion-item-body-color:color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent)}:host([variant=glass]) summary{text-shadow:var(--text-shadow-xs)}:host([variant=glass]) summary:hover{background:color-mix(in srgb, var(--color-secondary) 20%, transparent)}:host([variant=glass]) .content-wrapper{filter:brightness(1.05)}:host([variant=frost]){--accordion-item-bg:color-mix(in srgb, var(--color-canvas) 55%, transparent);--accordion-item-border-color:transparent}:host([variant=frost]) summary{text-shadow:var(--text-shadow-2xs)}:host([variant=frost]) summary:hover{background:color-mix(in srgb, var(--color-canvas) 20%, transparent)}:host([size=sm]){--accordion-item-details-padding:var(--size-2) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-sm);--accordion-item-subtitle-size:var(--text-xs);--accordion-item-body:var(--text-xs)}:host(:not([size])),:host([size=md]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}:host([size=lg]){--accordion-item-details-padding:var(--size-4) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}:host([disabled]){pointer-events:none;opacity:.6}.chevron{width:var(--size-5);height:var(--size-5);transition:transform var(--accordion-item-transition);transform:rotate(-90deg)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.chevron:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}details[open] .chevron{transform:rotate(0)}details.rtl .chevron{transform:rotate(90deg)}details.rtl[open] .chevron{transform:rotate(0)}html[dir=rtl] .chevron,[dir=rtl] .chevron,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .chevron{transform:rotate(90deg)}html[dir=rtl] details[open] .chevron,[dir=rtl] details[open] .chevron,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) details[open] .chevron{transform:rotate(0)}:host([expanded]){--accordion-details-radius:var(--rounded-lg) var(--rounded-lg) 0 0;--accordion-summary-radius:0 0 var(--rounded-lg) var(--rounded-lg)}@media (forced-colors:active){summary{border-color:buttontext}}}`;exports.default=e;
 //# sourceMappingURL=accordion-item.css?inline.cjs.map

package/dist/disclosure/accordion-item/accordion-item.css?inline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.css?inline.cjs","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows var(--accordion-item-transition);\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host summary:hover,\n  :host([variant='solid']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n  }\n\n  :host([variant='flat']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-contrast-300);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='bordered']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-contrast-300);\n  }\n\n  :host([variant='outline']) summary:hover {\n    background: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='ghost']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='text']) summary:hover {\n    background: transparent;\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-title-color: color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) summary:hover {\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='frost']) summary:hover {\n    background: color-mix(in srgb, var(--color-canvas) 20%, transparent);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--size-5);\n    height: var(--size-5);\n    margin-inline-start: auto;\n    transition: transform var(--accordion-item-transition);\n  }\n\n  details[open] .chevron {\n    transform: rotate(-90deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion-item.css?inline.cjs","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows var(--accordion-item-transition);\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host summary:hover,\n  :host([variant='solid']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n  }\n\n  :host([variant='flat']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-contrast-300);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='bordered']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-contrast-300);\n  }\n\n  :host([variant='outline']) summary:hover {\n    background: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='ghost']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='text']) summary:hover {\n    background: transparent;\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-title-color: color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) summary:hover {\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='frost']) summary:hover {\n    background: color-mix(in srgb, var(--color-canvas) 20%, transparent);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--size-5);\n    height: var(--size-5);\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform var(--accordion-item-transition);\n  }\n\n  details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* RTL Support - use .rtl class added by JavaScript */\n  details.rtl .chevron {\n    transform: rotate(90deg);\n  }\n\n  details.rtl[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Fallback CSS selectors for other RTL detection methods */\n  html[dir='rtl'] .chevron,\n  [dir='rtl'] .chevron,\n  :dir(rtl) .chevron {\n    transform: rotate(90deg);\n  }\n\n  html[dir='rtl'] details[open] .chevron,\n  [dir='rtl'] details[open] .chevron,\n  :dir(rtl) details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/accordion-item/accordion-item.css?inline.js

@@ -1,5 +1,5 @@
 //#region src/disclosure/accordion-item/accordion-item.css?inline
-var e = "@layer buildit.base{:host{color:var(--accordion-item-body-color,var(--text-color-body));--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);display:block}details{border-radius:var(--accordion-item-radius);width:100%;transition:all var(--accordion-item-transition);overflow:hidden}summary{gap:var(--size-4);min-height:var(--_touch-target);padding:var(--accordion-item-details-padding,var(--size-3) var(--size-4));font-size:var(--accordion-item-title);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--accordion-item-bg);border:var(--border) solid var(--accordion-item-border-color);border-radius:var(--accordion-details-radius);transition:all var(--accordion-item-transition);outline:none;align-items:center;list-style:none;display:flex;position:relative}summary::-webkit-details-marker{display:none}summary:focus{outline:none}summary:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);box-shadow:0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent)}.header-content{flex-direction:column;flex:1;min-width:0;display:flex}.subtitle{font-size:var(--accordion-item-subtitle-size);line-height:var(--leading-normal);color:var(--accordion-item-subtitle-color,var(--text-color-secondary))}.title{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--accordion-item-title-color,var(--text-color-heading));white-space:nowrap;overflow:hidden}.content-wrapper{font-size:var(--accordion-item-body);background:var(--accordion-item-bg);border-inline:1px solid var(--accordion-item-border-color);border-bottom:1px solid var(--accordion-item-border-color);border-radius:var(--accordion-summary-radius);transition:grid-template-rows var(--accordion-item-transition);grid-template-rows:0fr;display:grid}details[open] .content-wrapper{grid-template-rows:1fr}.content-inner{padding:var(--accordion-item-summary-padding,var(--size-2) var(--size-4));overflow:hidden}}@layer buildit.variants{:host,:host([variant=solid]){--accordion-item-bg:var(--color-contrast-50);--accordion-item-border-color:transparent}:host summary:hover,:host([variant=solid]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=flat]){--accordion-item-bg:var(--color-contrast-100)}:host([variant=flat]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=bordered]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-border-color:var(--color-contrast-300);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs)}:host([variant=bordered]) summary:hover{background:var(--color-contrast-200)}:host([variant=outline]){--accordion-item-bg:transparent;--accordion-item-border-color:var(--color-contrast-300)}:host([variant=outline]) summary:hover{background:var(--color-contrast-300)}:host([variant=ghost]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=ghost]) summary:hover{background:var(--color-contrast-200)}:host([variant=text]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=text]) summary:hover{background:0 0}:host([variant=glass]) details,:host([variant=frost]) details{border-radius:inherit}:host([variant=glass]) summary,:host([variant=frost]) summary{border-radius:inherit;-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=glass]) .content-wrapper,:host([variant=frost]) .content-wrapper{-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%);border-radius:0}:host([variant=glass]){--accordion-item-bg:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);--accordion-item-border-color:transparent;--accordion-item-title-color:color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);--accordion-item-subtitle-color:color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);--accordion-item-body-color:color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent)}:host([variant=glass]) summary{text-shadow:var(--text-shadow-xs)}:host([variant=glass]) summary:hover{background:color-mix(in srgb, var(--color-secondary) 20%, transparent)}:host([variant=glass]) .content-wrapper{filter:brightness(1.05)}:host([variant=frost]){--accordion-item-bg:color-mix(in srgb, var(--color-canvas) 55%, transparent);--accordion-item-border-color:transparent}:host([variant=frost]) summary{text-shadow:var(--text-shadow-2xs)}:host([variant=frost]) summary:hover{background:color-mix(in srgb, var(--color-canvas) 20%, transparent)}:host([size=sm]){--accordion-item-details-padding:var(--size-2) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-sm);--accordion-item-subtitle-size:var(--text-xs);--accordion-item-body:var(--text-xs)}:host(:not([size])),:host([size=md]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}:host([size=lg]){--accordion-item-details-padding:var(--size-4) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}:host([disabled]){pointer-events:none;opacity:.6}.chevron{width:var(--size-5);height:var(--size-5);transition:transform var(--accordion-item-transition)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.chevron:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}details[open] .chevron{transform:rotate(-90deg)}:host([expanded]){--accordion-details-radius:var(--rounded-lg) var(--rounded-lg) 0 0;--accordion-summary-radius:0 0 var(--rounded-lg) var(--rounded-lg)}@media (forced-colors:active){summary{border-color:buttontext}}}";
+var e = "@layer buildit.base{:host{color:var(--accordion-item-body-color,var(--text-color-body));--accordion-details-radius:var(--rounded-lg);--accordion-item-transition:var(--transition-normal);display:block}details{border-radius:var(--accordion-item-radius);width:100%;transition:all var(--accordion-item-transition);overflow:hidden}summary{gap:var(--size-4);min-height:var(--_touch-target);padding:var(--accordion-item-details-padding,var(--size-3) var(--size-4));font-size:var(--accordion-item-title);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--accordion-item-bg);border:var(--border) solid var(--accordion-item-border-color);border-radius:var(--accordion-details-radius);transition:all var(--accordion-item-transition);outline:none;align-items:center;list-style:none;display:flex;position:relative}summary::-webkit-details-marker{display:none}summary:focus{outline:none}summary:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);box-shadow:0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent)}.header-content{flex-direction:column;flex:1;min-width:0;display:flex}.subtitle{font-size:var(--accordion-item-subtitle-size);line-height:var(--leading-normal);color:var(--accordion-item-subtitle-color,var(--text-color-secondary))}.title{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--accordion-item-title-color,var(--text-color-heading));white-space:nowrap;overflow:hidden}.content-wrapper{font-size:var(--accordion-item-body);background:var(--accordion-item-bg);border-inline:1px solid var(--accordion-item-border-color);border-bottom:1px solid var(--accordion-item-border-color);border-radius:var(--accordion-summary-radius);transition:grid-template-rows var(--accordion-item-transition);grid-template-rows:0fr;display:grid}details[open] .content-wrapper{grid-template-rows:1fr}.content-inner{padding:var(--accordion-item-summary-padding,var(--size-2) var(--size-4));overflow:hidden}}@layer buildit.variants{:host,:host([variant=solid]){--accordion-item-bg:var(--color-contrast-50);--accordion-item-border-color:transparent}:host summary:hover,:host([variant=solid]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=flat]){--accordion-item-bg:var(--color-contrast-100)}:host([variant=flat]) summary:hover{--accordion-item-bg:var(--color-contrast-200)}:host([variant=bordered]){--accordion-item-bg:var(--color-contrast-100);--accordion-item-border-color:var(--color-contrast-300);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs)}:host([variant=bordered]) summary:hover{background:var(--color-contrast-200)}:host([variant=outline]){--accordion-item-bg:transparent;--accordion-item-border-color:var(--color-contrast-300)}:host([variant=outline]) summary:hover{background:var(--color-contrast-300)}:host([variant=ghost]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=ghost]) summary:hover{background:var(--color-contrast-200)}:host([variant=text]){--accordion-item-bg:transparent;--accordion-item-border-color:transparent}:host([variant=text]) summary:hover{background:0 0}:host([variant=glass]) details,:host([variant=frost]) details{border-radius:inherit}:host([variant=glass]) summary,:host([variant=frost]) summary{border-radius:inherit;-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=glass]) .content-wrapper,:host([variant=frost]) .content-wrapper{-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%);border-radius:0}:host([variant=glass]){--accordion-item-bg:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);--accordion-item-border-color:transparent;--accordion-item-title-color:color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);--accordion-item-subtitle-color:color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);--accordion-item-body-color:color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent)}:host([variant=glass]) summary{text-shadow:var(--text-shadow-xs)}:host([variant=glass]) summary:hover{background:color-mix(in srgb, var(--color-secondary) 20%, transparent)}:host([variant=glass]) .content-wrapper{filter:brightness(1.05)}:host([variant=frost]){--accordion-item-bg:color-mix(in srgb, var(--color-canvas) 55%, transparent);--accordion-item-border-color:transparent}:host([variant=frost]) summary{text-shadow:var(--text-shadow-2xs)}:host([variant=frost]) summary:hover{background:color-mix(in srgb, var(--color-canvas) 20%, transparent)}:host([size=sm]){--accordion-item-details-padding:var(--size-2) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-sm);--accordion-item-subtitle-size:var(--text-xs);--accordion-item-body:var(--text-xs)}:host(:not([size])),:host([size=md]){--accordion-item-details-padding:var(--size-3) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-base);--accordion-item-subtitle-size:var(--text-sm);--accordion-item-body:var(--text-sm)}:host([size=lg]){--accordion-item-details-padding:var(--size-4) var(--size-4);--accordion-item-summary-padding:var(--size-1) var(--size-5);--accordion-item-title:var(--text-lg);--accordion-item-subtitle-size:var(--text-base);--accordion-item-body:var(--text-base)}:host([disabled]){pointer-events:none;opacity:.6}.chevron{width:var(--size-5);height:var(--size-5);transition:transform var(--accordion-item-transition);transform:rotate(-90deg)}.chevron:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}.chevron:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}details[open] .chevron{transform:rotate(0)}details.rtl .chevron{transform:rotate(90deg)}details.rtl[open] .chevron{transform:rotate(0)}html[dir=rtl] .chevron,[dir=rtl] .chevron,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .chevron{transform:rotate(90deg)}html[dir=rtl] details[open] .chevron,[dir=rtl] details[open] .chevron,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) details[open] .chevron{transform:rotate(0)}:host([expanded]){--accordion-details-radius:var(--rounded-lg) var(--rounded-lg) 0 0;--accordion-summary-radius:0 0 var(--rounded-lg) var(--rounded-lg)}@media (forced-colors:active){summary{border-color:buttontext}}}";
 //#endregion
 export { e as default };
 

package/dist/disclosure/accordion-item/accordion-item.css?inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.css?inline.js","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows var(--accordion-item-transition);\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host summary:hover,\n  :host([variant='solid']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n  }\n\n  :host([variant='flat']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-contrast-300);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='bordered']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-contrast-300);\n  }\n\n  :host([variant='outline']) summary:hover {\n    background: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='ghost']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='text']) summary:hover {\n    background: transparent;\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-title-color: color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) summary:hover {\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='frost']) summary:hover {\n    background: color-mix(in srgb, var(--color-canvas) 20%, transparent);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--size-5);\n    height: var(--size-5);\n    margin-inline-start: auto;\n    transition: transform var(--accordion-item-transition);\n  }\n\n  details[open] .chevron {\n    transform: rotate(-90deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"accordion-item.css?inline.js","names":[],"sources":["../../../src/disclosure/accordion-item/accordion-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    display: block;\n    color: var(--accordion-item-body-color, var(--text-color-body));\n\n    --accordion-details-radius: var(--rounded-lg);\n    --accordion-item-transition: var(--transition-normal);\n  }\n\n  details {\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--accordion-item-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary {\n    position: relative;\n    display: flex;\n    gap: var(--size-4);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--accordion-item-details-padding, var(--size-3) var(--size-4));\n    font-size: var(--accordion-item-title);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    list-style: none;\n    background: var(--accordion-item-bg);\n    border: var(--border) solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-details-radius);\n    transition: all var(--accordion-item-transition);\n  }\n\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  summary:focus {\n    outline: none;\n  }\n\n  summary:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    box-shadow: 0 0 0 3px color-mix(in srgb, currentcolor 20%, transparent);\n  }\n\n  .header-content {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .subtitle {\n    font-size: var(--accordion-item-subtitle-size);\n    line-height: var(--leading-normal);\n    color: var(--accordion-item-subtitle-color, var(--text-color-secondary));\n  }\n\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--accordion-item-title-color, var(--text-color-heading));\n    white-space: nowrap;\n  }\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    font-size: var(--accordion-item-body);\n    background: var(--accordion-item-bg);\n    border-inline: 1px solid var(--accordion-item-border-color);\n    border-bottom: 1px solid var(--accordion-item-border-color);\n    border-radius: var(--accordion-summary-radius);\n    transition: grid-template-rows var(--accordion-item-transition);\n  }\n\n  details[open] .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    padding: var(--accordion-item-summary-padding, var(--size-2) var(--size-4));\n    overflow: hidden;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  :host,\n  :host([variant='solid']) {\n    --accordion-item-bg: var(--color-contrast-50);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host summary:hover,\n  :host([variant='solid']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='flat']) {\n    --accordion-item-bg: var(--color-contrast-100);\n  }\n\n  :host([variant='flat']) summary:hover {\n    --accordion-item-bg: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered']) {\n    --accordion-item-bg: var(--color-contrast-100);\n    --accordion-item-border-color: var(--color-contrast-300);\n\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='bordered']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='outline']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: var(--color-contrast-300);\n  }\n\n  :host([variant='outline']) summary:hover {\n    background: var(--color-contrast-300);\n  }\n\n  :host([variant='ghost']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='ghost']) summary:hover {\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='text']) {\n    --accordion-item-bg: transparent;\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='text']) summary:hover {\n    background: transparent;\n  }\n\n  /* Glass & Frost - Shared Styles */\n  :host([variant='glass']) details,\n  :host([variant='frost']) details {\n    border-radius: inherit;\n  }\n\n  :host([variant='glass']) summary,\n  :host([variant='frost']) summary {\n    border-radius: inherit;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='glass']) .content-wrapper,\n  :host([variant='frost']) .content-wrapper {\n    border-radius: 0;\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  /* Glass */\n  :host([variant='glass']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n    --accordion-item-border-color: transparent;\n    --accordion-item-title-color: color-mix(in srgb, var(--color-secondary-contrast) 100%, transparent);\n    --accordion-item-subtitle-color: color-mix(in srgb, var(--color-secondary-contrast) 60%, transparent);\n    --accordion-item-body-color: color-mix(in srgb, var(--color-secondary-contrast) 80%, transparent);\n  }\n\n  :host([variant='glass']) summary {\n    text-shadow: var(--text-shadow-xs);\n  }\n\n  :host([variant='glass']) summary:hover {\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n  }\n\n  :host([variant='glass']) .content-wrapper {\n    filter: brightness(1.05);\n  }\n\n  /* Frost */\n  :host([variant='frost']) {\n    --accordion-item-bg: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    --accordion-item-border-color: transparent;\n  }\n\n  :host([variant='frost']) summary {\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='frost']) summary:hover {\n    background: color-mix(in srgb, var(--color-canvas) 20%, transparent);\n  }\n\n  /* ========================================\n     Size Variants\n     ======================================== */\n\n  :host([size='sm']) {\n    --accordion-item-details-padding: var(--size-2) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-sm);\n    --accordion-item-subtitle-size: var(--text-xs);\n    --accordion-item-body: var(--text-xs);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --accordion-item-details-padding: var(--size-3) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-base);\n    --accordion-item-subtitle-size: var(--text-sm);\n    --accordion-item-body: var(--text-sm);\n  }\n\n  :host([size='lg']) {\n    --accordion-item-details-padding: var(--size-4) var(--size-4);\n    --accordion-item-summary-padding: var(--size-1) var(--size-5);\n    --accordion-item-title: var(--text-lg);\n    --accordion-item-subtitle-size: var(--text-base);\n    --accordion-item-body: var(--text-base);\n  }\n\n  /* ========================================\n     States\n     ======================================== */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ========================================\n     Chevron Animation\n     ======================================== */\n\n  .chevron {\n    width: var(--size-5);\n    height: var(--size-5);\n    margin-inline-start: auto;\n    transform: rotate(-90deg);\n    transition: transform var(--accordion-item-transition);\n  }\n\n  details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* RTL Support - use .rtl class added by JavaScript */\n  details.rtl .chevron {\n    transform: rotate(90deg);\n  }\n\n  details.rtl[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Fallback CSS selectors for other RTL detection methods */\n  html[dir='rtl'] .chevron,\n  [dir='rtl'] .chevron,\n  :dir(rtl) .chevron {\n    transform: rotate(90deg);\n  }\n\n  html[dir='rtl'] details[open] .chevron,\n  [dir='rtl'] details[open] .chevron,\n  :dir(rtl) details[open] .chevron {\n    transform: rotate(0deg);\n  }\n\n  /* Expanded state - adjust border radius */\n  :host([expanded]) {\n    --accordion-details-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n    --accordion-summary-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  @media (forced-colors: active) {\n    /* Default variant uses a transparent border — ensure a visible border\n         renders in HCM so the summary is distinguishable from the body */\n    summary {\n      border-color: ButtonText;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/accordion-item/accordion-item.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentSize, VisualVariant } from '../../types';
+import '../../content/icon/icon';
 /** Accordion item component properties */
 export type BitAccordionItemEvents = {
     collapse: {

package/dist/disclosure/accordion-item/accordion-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/disclosure/accordion-item/accordion-item.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMhE,0CAA0C;AAE1C,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IACnD,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,eAAO,MAAM,kBAAkB,QAsF7B,CAAC"}
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/disclosure/accordion-item/accordion-item.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,yBAAyB,CAAC;AAKjC,0CAA0C;AAE1C,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;IACnD,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,eAAO,MAAM,kBAAkB,QAwH7B,CAAC"}

package/dist/disclosure/tab-item/tab-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tab-item/tab-item.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAM5E,MAAM,MAAM,eAAe,GAAG;IAC5B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,QAmDvB,CAAC"}
+{"version":3,"file":"tab-item.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tab-item/tab-item.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAM5E,MAAM,MAAM,eAAe,GAAG;IAC5B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,QA0DvB,CAAC"}

package/dist/disclosure/tab-panel/tab-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tab-panel/tab-panel.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4GAA4G;IAC5G,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC5D,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,QAuDxB,CAAC"}
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tab-panel/tab-panel.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4GAA4G;IAC5G,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC5D,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,QAkDxB,CAAC"}

package/dist/disclosure/tabs/tabs.css?inline.cjs

@@ -1,2 +1,2 @@
-var e=`@layer buildit.base{:host{--tabs-transition:var(--transition-normal);--tabs-radius:var(--rounded-lg);flex-direction:column;width:100%;height:100%;display:flex}.tablist-wrapper{flex-shrink:0;position:relative}[role=tablist]{gap:var(--tabs-tab-gap,var(--size-1));scrollbar-width:none;align-items:stretch;display:flex;position:relative;overflow-x:auto}[role=tablist]::-webkit-scrollbar{display:none}.indicator{pointer-events:none;background:var(--tabs-indicator-color,var(--_theme-base));border-radius:var(--rounded-full);height:2px;transition:left var(--tabs-transition), width var(--tabs-transition);position:absolute;bottom:0}.panels{flex-direction:column;flex:1;min-height:0;display:flex}}@layer buildit.orientation{:host([orientation=vertical]){flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .tablist-wrapper{flex-shrink:0;display:flex}:host([orientation=vertical]) [role=tablist]{width:max-content;overflow-x:unset;flex-direction:column;overflow-y:auto}:host([orientation=vertical]) .indicator{bottom:unset;width:2px;height:unset;transition:top var(--tabs-transition), height var(--tabs-transition)}:host([orientation=vertical]) .indicator:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([orientation=vertical]) .indicator:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}}@layer buildit.variants{:host,:host([variant=solid]){--tabs-tab-gap:var(--size-1)}:host [role=tablist],:host([variant=solid]) [role=tablist]{padding:var(--size-1);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius)}:host .indicator,:host([variant=solid]) .indicator{display:none}:host([variant=flat]){background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs);overflow:hidden}:host([variant=flat]) [role=tablist]{gap:var(--size-1);padding:var(--size-1);border:none;border-bottom:var(--border) solid var(--color-contrast-200);background:0 0;border-radius:0}:host([variant=flat]) .indicator{display:none}:host([variant=bordered]) [role=tablist]{gap:var(--size-1);padding:var(--size-1);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius) var(--tabs-radius) 0 0;background:0 0;border-bottom:none}:host([variant=bordered]) .indicator{display:none}:host([variant=bordered]) .panels{border:var(--border) solid var(--color-contrast-200);border-radius:0 0 var(--tabs-radius) var(--tabs-radius)}:host([variant=ghost]) [role=tablist]{gap:var(--size-1);background:0 0;border:none;border-radius:0;padding:0}:host([variant=ghost]) .indicator{display:none}:host([variant=glass]) [role=tablist]{padding:var(--size-1);background:color-mix(in srgb, var(--color-secondary) 20%, transparent);border:var(--border) solid color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);border-radius:var(--tabs-radius);box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]) .indicator{display:none}:host([variant=frost]) [role=tablist]{padding:var(--size-1);background:color-mix(in srgb, var(--color-canvas) 55%, transparent);border:var(--border) solid color-mix(in srgb, var(--color-contrast-300) 50%, transparent);border-radius:var(--tabs-radius);box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=frost]) .indicator{display:none}:host([size=sm]){--tabs-tab-size:var(--text-xs);--tabs-tab-padding:var(--size-1) var(--size-3)}:host(:not([size])),:host([size=md]){--tabs-tab-size:var(--text-sm);--tabs-tab-padding:var(--size-1-5) var(--size-4)}:host([size=lg]){--tabs-tab-size:var(--text-base);--tabs-tab-padding:var(--size-2) var(--size-5)}}`;exports.default=e;
+var e=`@layer buildit.base{:host{--tabs-transition:var(--transition-normal);--tabs-radius:var(--rounded-lg);flex-direction:column;width:100%;height:100%;display:flex}.tablist-wrapper{flex-shrink:0;position:relative}[role=tablist]{gap:var(--tabs-tab-gap,var(--size-1));scrollbar-width:none;align-items:stretch;display:flex;position:relative;overflow-x:auto}[role=tablist]::-webkit-scrollbar{display:none}.indicator{pointer-events:none;background:var(--tabs-indicator-color,var(--_theme-base));border-radius:var(--rounded-full);height:2px;transition:left var(--tabs-transition), width var(--tabs-transition);position:absolute;bottom:0}.panels{flex-direction:column;flex:1;min-height:0;display:flex}}@layer buildit.orientation{:host([orientation=vertical]){flex-direction:row;align-items:flex-start}:host([orientation=vertical]) .tablist-wrapper{flex-shrink:0;display:flex}:host([orientation=vertical]) [role=tablist]{width:max-content;overflow-x:unset;flex-direction:column;overflow-y:auto}:host([orientation=vertical]) .indicator{bottom:unset;width:2px;height:unset;transition:top var(--tabs-transition), height var(--tabs-transition)}:host([orientation=vertical]) .indicator:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([orientation=vertical]) .indicator:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}}@layer buildit.variants{:host,:host([variant=solid]){--tabs-tab-gap:var(--size-1)}:host [role=tablist],:host([variant=solid]) [role=tablist]{padding:var(--size-1);background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius)}:host .indicator,:host([variant=solid]) .indicator{display:none}:host([variant=flat]){background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius);box-shadow:var(--inset-shadow-xs), var(--shadow-2xs);overflow:hidden}:host([variant=flat]) [role=tablist]{gap:var(--size-1);padding:var(--size-1);border:none;border-bottom:var(--border) solid var(--color-contrast-200);background:0 0;border-radius:0}:host([variant=flat]) .indicator{display:none}:host([variant=bordered]) [role=tablist]{gap:var(--size-1);padding:var(--size-1);border:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius) var(--tabs-radius) 0 0;background:0 0;border-bottom:none}:host([variant=bordered]) .indicator{display:none}:host([variant=bordered]) .panels{border:var(--border) solid var(--color-contrast-200);border-radius:0 0 var(--tabs-radius) var(--tabs-radius)}:host([variant=bordered][orientation=vertical]) [role=tablist]{border-right:none;border-bottom:var(--border) solid var(--color-contrast-200);border-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}:host([variant=bordered][orientation=vertical]) .panels{border-radius:0 var(--tabs-radius) var(--tabs-radius) 0}:host([variant=ghost]) [role=tablist]{gap:var(--size-1);background:0 0;border:none;border-radius:0;padding:0}:host([variant=ghost]) .indicator{display:none}:host([variant=glass]) [role=tablist]{padding:var(--size-1);background:color-mix(in srgb, var(--color-secondary) 20%, transparent);border:var(--border) solid color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);border-radius:var(--tabs-radius);box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([variant=glass]) .indicator{display:none}:host([variant=frost]) [role=tablist]{padding:var(--size-1);background:color-mix(in srgb, var(--color-canvas) 55%, transparent);border:var(--border) solid color-mix(in srgb, var(--color-contrast-300) 50%, transparent);border-radius:var(--tabs-radius);box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%);backdrop-filter:blur(var(--blur-lg)) saturate(180%)}:host([variant=frost]) .indicator{display:none}:host([size=sm]){--tabs-tab-size:var(--text-xs);--tabs-tab-padding:var(--size-1) var(--size-3)}:host(:not([size])),:host([size=md]){--tabs-tab-size:var(--text-sm);--tabs-tab-padding:var(--size-1-5) var(--size-4)}:host([size=lg]){--tabs-tab-size:var(--text-base);--tabs-tab-padding:var(--size-2) var(--size-5)}}`;exports.default=e;
 //# sourceMappingURL=tabs.css?inline.cjs.map