@vielzeug/buildit 2.0.0

package/dist/dialog.cjs

@@ -0,0 +1,33 @@
+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`
+      <dialog
+        ref=${l}
+        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="header" part="header" ?hidden=${()=>!u.value}>
+            <slot name="header">
+              <span class="title" part="title">${()=>n.label.value}</span>
+            </slot>
+            <button
+              class="close"
+              part="close"
+              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}
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${()=>!d.value}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `},styles:[n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,s.default],tag:`bit-dialog`});exports.DIALOG_TAG=l;
+//# sourceMappingURL=dialog.cjs.map

package/dist/dialog.cjs.map

@@ -0,0 +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"}

package/dist/dialog.js

@@ -0,0 +1,94 @@
+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 "./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({
+	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: 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(() => {
+			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());
+			}), () => {
+				r.open && r.close(), s();
+			}) : void 0;
+		}), m`
+      <dialog
+        ref=${l}
+        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="header" part="header" ?hidden=${() => !d.value}>
+            <slot name="header">
+              <span class="title" part="title">${() => n.label.value}</span>
+            </slot>
+            <button
+              class="close"
+              part="close"
+              type="button"
+              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();
+		}}>
+              ${i}
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${() => !v.value}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+	},
+	styles: [
+		r,
+		n,
+		e,
+		t,
+		l
+	],
+	tag: "bit-dialog"
+});
+//#endregion
+export { v as DIALOG_TAG };
+
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{gap:var(--size-2);flex-direction:column;width:100%;display:flex}::slotted(bit-accordion-item){width:100%}}@layer buildit.variants{:host([variant=bordered]){gap:var(--size-2)}:host([variant=text]){gap:0}:host([variant=text]) ::slotted(bit-accordion-item:not(:last-child)){border-bottom:1px solid var(--color-contrast-200)}:host([variant=solid]),:host([variant=flat]),:host([variant=glass]),:host([variant=frost]){padding:var(--size-2);border-radius:var(--rounded-lg);gap:0}:host([variant=solid]){background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);box-shadow:var(--shadow-xs)}:host([variant=flat]){background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);box-shadow:var(--inset-shadow-xs)}:host([variant=glass]),:host([variant=frost]){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]){background:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%)}:host([variant=frost]){background:color-mix(in srgb, var(--color-canvas) 55%, transparent)}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item){border-radius:0}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:first-child){border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:last-child){border-radius:0 0 var(--rounded-lg) var(--rounded-lg)}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:only-child){border-radius:var(--rounded-lg)}}`;exports.default=e;
+//# sourceMappingURL=accordion.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.css?inline.cjs","names":[],"sources":["../../../src/disclosure/accordion/accordion.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    width: 100%;\n  }\n\n  ::slotted(bit-accordion-item) {\n    width: 100%;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Bordered variant */\n  :host([variant='bordered']) {\n    gap: var(--size-2);\n  }\n\n  /* Text variant - borderless with dividers */\n  :host([variant='text']) {\n    gap: 0;\n  }\n\n  :host([variant='text']) ::slotted(bit-accordion-item:not(:last-child)) {\n    border-bottom: 1px solid var(--color-contrast-200);\n  }\n\n  /* Contained variants - grouped appearance */\n  :host([variant='solid']),\n  :host([variant='flat']),\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    gap: 0;\n    padding: var(--size-2);\n    border-radius: var(--rounded-lg);\n  }\n\n  /* Solid variant (default) */\n  :host([variant='solid']) {\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    box-shadow: var(--shadow-xs);\n  }\n\n  /* Flat variant */\n  :host([variant='flat']) {\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  /* Glass & Frost - Shared styles */\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Glass variant - translucent with blur */\n  :host([variant='glass']) {\n    background: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n  }\n\n  /* Frost variant - canvas-based transparency */\n  :host([variant='frost']) {\n    background: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n  }\n\n  /* Nested item border radius for glass and frost variants */\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item) {\n    border-radius: 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:first-child) {\n    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:last-child) {\n    border-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:only-child) {\n    border-radius: var(--rounded-lg);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/disclosure/accordion/accordion.css?inline
+var e = "@layer buildit.base{:host{gap:var(--size-2);flex-direction:column;width:100%;display:flex}::slotted(bit-accordion-item){width:100%}}@layer buildit.variants{:host([variant=bordered]){gap:var(--size-2)}:host([variant=text]){gap:0}:host([variant=text]) ::slotted(bit-accordion-item:not(:last-child)){border-bottom:1px solid var(--color-contrast-200)}:host([variant=solid]),:host([variant=flat]),:host([variant=glass]),:host([variant=frost]){padding:var(--size-2);border-radius:var(--rounded-lg);gap:0}:host([variant=solid]){background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);box-shadow:var(--shadow-xs)}:host([variant=flat]){background:var(--color-contrast-100);border:var(--border) solid var(--color-contrast-200);box-shadow:var(--inset-shadow-xs)}:host([variant=glass]),:host([variant=frost]){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]){background:color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%)}:host([variant=frost]){background:color-mix(in srgb, var(--color-canvas) 55%, transparent)}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item){border-radius:0}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:first-child){border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:last-child){border-radius:0 0 var(--rounded-lg) var(--rounded-lg)}:host(:is([variant=glass],[variant=frost])) ::slotted(bit-accordion-item:only-child){border-radius:var(--rounded-lg)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=accordion.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.css?inline.js","names":[],"sources":["../../../src/disclosure/accordion/accordion.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    width: 100%;\n  }\n\n  ::slotted(bit-accordion-item) {\n    width: 100%;\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Bordered variant */\n  :host([variant='bordered']) {\n    gap: var(--size-2);\n  }\n\n  /* Text variant - borderless with dividers */\n  :host([variant='text']) {\n    gap: 0;\n  }\n\n  :host([variant='text']) ::slotted(bit-accordion-item:not(:last-child)) {\n    border-bottom: 1px solid var(--color-contrast-200);\n  }\n\n  /* Contained variants - grouped appearance */\n  :host([variant='solid']),\n  :host([variant='flat']),\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    gap: 0;\n    padding: var(--size-2);\n    border-radius: var(--rounded-lg);\n  }\n\n  /* Solid variant (default) */\n  :host([variant='solid']) {\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    box-shadow: var(--shadow-xs);\n  }\n\n  /* Flat variant */\n  :host([variant='flat']) {\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  /* Glass & Frost - Shared styles */\n  :host([variant='glass']),\n  :host([variant='frost']) {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Glass variant - translucent with blur */\n  :host([variant='glass']) {\n    background: color-mix(in srgb, var(--color-secondary) 30%, var(--color-contrast) 10%);\n  }\n\n  /* Frost variant - canvas-based transparency */\n  :host([variant='frost']) {\n    background: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n  }\n\n  /* Nested item border radius for glass and frost variants */\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item) {\n    border-radius: 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:first-child) {\n    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:last-child) {\n    border-radius: 0 0 var(--rounded-lg) var(--rounded-lg);\n  }\n\n  :host(:is([variant='glass'], [variant='frost'])) ::slotted(bit-accordion-item:only-child) {\n    border-radius: var(--rounded-lg);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,47 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+import type { ComponentSize, VisualVariant } from '../../types';
+/** Context provided by bit-accordion to its bit-accordion-item children. */
+export type AccordionContext = {
+    notifyExpand: (expandedItem: HTMLElement) => void;
+    selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;
+    size: ReadonlySignal<ComponentSize | undefined>;
+    variant: ReadonlySignal<VisualVariant | undefined>;
+};
+/** Injection key for the accordion context. */
+export declare const ACCORDION_CTX: import("@vielzeug/craftit").InjectionKey<AccordionContext>;
+/** Accordion component properties */
+export type BitAccordionEvents = {
+    change: {
+        expandedItem: HTMLElement;
+    };
+};
+export type BitAccordionProps = {
+    /** Selection mode (single = only one opens, multiple = multiple can be open) */
+    selectionMode?: 'single' | 'multiple';
+    /** Size for all items (propagated via context) */
+    size?: ComponentSize;
+    /** Visual variant for all items (propagated via context) */
+    variant?: VisualVariant;
+};
+/**
+ * A container for accordion items with single or multiple selection modes.
+ *
+ * @element bit-accordion
+ *
+ * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'
+ * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)
+ *
+ * @fires expand - Emitted when an item expands
+ * @fires change - Emitted when selection changes (single mode)
+ *
+ * @slot - Accordion item elements (bit-accordion-item)
+ *
+ * @example
+ * ```html
+ * <bit-accordion selection-mode="single"><bit-accordion-item>...</bit-accordion-item></bit-accordion>
+ * <bit-accordion variant="frost" size="lg"><bit-accordion-item>...</bit-accordion-item></bit-accordion>
+ * ```
+ */
+export declare const ACCORDION_TAG: string;
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=accordion-item.css?inline.cjs.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,6 @@
+//#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}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=accordion-item.css?inline.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,62 @@
+import type { ComponentSize, VisualVariant } from '../../types';
+/** Accordion item component properties */
+export type BitAccordionItemEvents = {
+    collapse: {
+        expanded: boolean;
+        item: HTMLElement;
+    };
+    expand: {
+        expanded: boolean;
+        item: HTMLElement;
+    };
+};
+export type BitAccordionItemProps = {
+    /** Disable accordion item interaction */
+    disabled?: boolean;
+    /** Whether the item is expanded/open */
+    expanded?: boolean;
+    /** Item size */
+    size?: ComponentSize;
+    /** Visual style variant */
+    variant?: VisualVariant;
+};
+/**
+ * An individual accordion item with expand/collapse functionality using native details/summary.
+ *
+ * @element bit-accordion-item
+ *
+ * @attr {boolean} expanded - Whether the item is expanded/open
+ * @attr {boolean} disabled - Disable accordion item interaction
+ * @attr {string} size - Item size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'
+ *
+ * @fires expand - Emitted when item expands
+ * @fires collapse - Emitted when item collapses
+ *
+ * @slot prefix - Content before the title (e.g., icons)
+ * @slot title - Main accordion item title
+ * @slot subtitle - Optional subtitle text
+ * @slot suffix - Content after the title (e.g., badges)
+ * @slot - Accordion item content (shown when expanded)
+ *
+ * @cssprop --accordion-item-bg - Background color
+ * @cssprop --accordion-item-border-color - Border color
+ * @cssprop --accordion-item-title-color - Title text color
+ * @cssprop --accordion-item-subtitle-color - Subtitle text color
+ * @cssprop --accordion-item-body-color - Body text color
+ * @cssprop --accordion-item-radius - Border radius
+ * @cssprop --accordion-item-transition - Transition duration
+ * @cssprop --accordion-item-title - Title font size
+ * @cssprop --accordion-item-subtitle-size - Subtitle font size
+ * @cssprop --accordion-item-body - Body font size
+ * @cssprop --accordion-item-details-padding - Summary/header padding
+ * @cssprop --accordion-item-summary-padding - Content padding
+ *
+ * @example
+ * ```html
+ * <bit-accordion-item><span slot="title">Click to expand</span><p>Content</p></bit-accordion-item>
+ * <bit-accordion-item expanded variant="bordered"><span slot="title">Title</span><p>Content</p></bit-accordion-item>
+ * ```
+ */
+export declare const ACCORDION_ITEM_TAG: string;
+//# sourceMappingURL=accordion-item.d.ts.map

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

@@ -0,0 +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"}

package/dist/disclosure/index.cjs

@@ -0,0 +1 @@
+require(`../accordion.cjs`),require(`../tabs.cjs`),require(`../accordion-item.cjs`),require(`../tab-item.cjs`),require(`../tab-panel.cjs`);

package/dist/disclosure/index.d.ts

@@ -0,0 +1,11 @@
+export { ACCORDION_CTX, ACCORDION_TAG } from './accordion/accordion';
+export type { AccordionContext, BitAccordionEvents, BitAccordionProps } from './accordion/accordion';
+export { TABS_CTX, TABS_TAG } from './tabs/tabs';
+export type { BitTabsEvents, BitTabsProps, TabsContext } from './tabs/tabs';
+export { ACCORDION_ITEM_TAG } from './accordion-item/accordion-item';
+export type { BitAccordionItemEvents, BitAccordionItemProps } from './accordion-item/accordion-item';
+export { TAB_ITEM_TAG } from './tab-item/tab-item';
+export type { BitTabItemProps } from './tab-item/tab-item';
+export { TAB_PANEL_TAG } from './tab-panel/tab-panel';
+export type { BitTabPanelProps } from './tab-panel/tab-panel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/disclosure/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/disclosure/index.js

@@ -0,0 +1,5 @@
+import "../accordion.js";
+import "../tabs.js";
+import "../accordion-item.js";
+import "../tab-item.js";
+import "../tab-panel.js";

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--tab-item-transition:var(--transition-normal);--tab-item-radius:var(--rounded-lg);outline:none;display:inline-flex}button{gap:var(--size-2);width:100%;min-height:var(--_touch-target);padding:var(--tab-item-padding,var(--size-1-5) var(--size-4));font-family:inherit;font-size:var(--tab-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--tab-item-color,var(--text-color-secondary));white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--tab-item-radius);transition:background var(--tab-item-transition), color var(--tab-item-transition), box-shadow var(--tab-item-transition);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}button:focus{outline:none}:host(:focus-visible) button,button:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:2px;box-shadow:0 0 0 3px var(--_theme-shadow)}}@layer buildit.variants{:host button:hover,:host([variant=solid]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([active]) button,:host([variant=solid][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=flat]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([variant=flat][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=bordered]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([variant=bordered][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs)}:host([variant=ghost]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-100)}:host([variant=ghost][active]) button{color:var(--_theme-contrast);background:var(--_theme-base)}:host([variant=glass]) button{color:color-mix(in srgb, var(--color-secondary-contrast) 70%, transparent);text-shadow:var(--text-shadow-2xs)}:host([variant=glass]) button:hover{color:var(--color-secondary-contrast);background:color-mix(in srgb, var(--color-secondary-contrast) 10%, transparent)}:host([variant=glass][active]) button{color:var(--color-secondary-contrast);background:color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=frost]) button{color:var(--text-color-secondary)}:host([variant=frost]) button:hover{color:var(--text-color-heading);background:color-mix(in srgb, var(--color-contrast) 10%, transparent)}:host([variant=frost][active]) button{color:var(--text-color-heading);background:color-mix(in srgb, var(--color-canvas) 60%, transparent);box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([size=sm]){--tab-item-font-size:var(--text-xs);--tab-item-padding:var(--size-1) var(--size-3)}:host(:not([size])),:host([size=md]){--tab-item-font-size:var(--text-sm);--tab-item-padding:var(--size-1-5) var(--size-4)}:host([size=lg]){--tab-item-font-size:var(--text-base);--tab-item-padding:var(--size-2) var(--size-5)}:host([disabled]){pointer-events:none;opacity:.5}@media (forced-colors:active){button:focus-visible{box-shadow:none;outline:2px solid highlight}:host([active]) button{outline-offset:-2px;outline:2px solid highlight}}}`;exports.default=e;
+//# sourceMappingURL=tab-item.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.css?inline.cjs","names":[],"sources":["../../../src/disclosure/tab-item/tab-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: inline-flex;\n    outline: none;\n\n    --tab-item-transition: var(--transition-normal);\n    --tab-item-radius: var(--rounded-lg);\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-height: var(--_touch-target);\n    padding: var(--tab-item-padding, var(--size-1-5) var(--size-4));\n    font-family: inherit;\n    font-size: var(--tab-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--tab-item-color, var(--text-color-secondary));\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--tab-item-radius);\n    transition:\n      background var(--tab-item-transition),\n      color var(--tab-item-transition),\n      box-shadow var(--tab-item-transition);\n  }\n\n  button:focus {\n    outline: none;\n  }\n\n  :host(:focus-visible) button,\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 3px var(--_theme-shadow);\n  }\n}\n\n@layer buildit.variants {\n  /* ─── solid / default ─── */\n  :host button:hover,\n  :host([variant='solid']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([active]) button,\n  :host([variant='solid'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='flat'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs);\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost'][active]) button {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) button {\n    color: color-mix(in srgb, var(--color-secondary-contrast) 70%, transparent);\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='glass']) button:hover {\n    color: var(--color-secondary-contrast);\n    background: color-mix(in srgb, var(--color-secondary-contrast) 10%, transparent);\n  }\n\n  :host([variant='glass'][active]) button {\n    color: var(--color-secondary-contrast);\n    background: color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) button {\n    color: var(--text-color-secondary);\n  }\n\n  :host([variant='frost']) button:hover {\n    color: var(--text-color-heading);\n    background: color-mix(in srgb, var(--color-contrast) 10%, transparent);\n  }\n\n  :host([variant='frost'][active]) button {\n    color: var(--text-color-heading);\n    background: color-mix(in srgb, var(--color-canvas) 60%, transparent);\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── sizes ─── */\n  :host([size='sm']) {\n    --tab-item-font-size: var(--text-xs);\n    --tab-item-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tab-item-font-size: var(--text-sm);\n    --tab-item-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tab-item-font-size: var(--text-base);\n    --tab-item-padding: var(--size-2) var(--size-5);\n  }\n\n  /* ─── disabled ─── */\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  @media (forced-colors: active) {\n    /* Ensure focus ring is visible regardless of variant theme color */\n    button:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    /* Active tab: box-shadow raised indicator is stripped; use outline inste\n         ad so the selected tab remains distinguishable */\n    :host([active]) button {\n      outline: 2px solid Highlight;\n      outline-offset: -2px;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/disclosure/tab-item/tab-item.css?inline
+var e = "@layer buildit.base{:host{--tab-item-transition:var(--transition-normal);--tab-item-radius:var(--rounded-lg);outline:none;display:inline-flex}button{gap:var(--size-2);width:100%;min-height:var(--_touch-target);padding:var(--tab-item-padding,var(--size-1-5) var(--size-4));font-family:inherit;font-size:var(--tab-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--tab-item-color,var(--text-color-secondary));white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--tab-item-radius);transition:background var(--tab-item-transition), color var(--tab-item-transition), box-shadow var(--tab-item-transition);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative}button:focus{outline:none}:host(:focus-visible) button,button:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:2px;box-shadow:0 0 0 3px var(--_theme-shadow)}}@layer buildit.variants{:host button:hover,:host([variant=solid]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([active]) button,:host([variant=solid][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=flat]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([variant=flat][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=bordered]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-200)}:host([variant=bordered][active]) button{color:var(--text-color-heading);background:var(--color-contrast-0,var(--color-canvas));box-shadow:var(--shadow-xs)}:host([variant=ghost]) button:hover{color:var(--text-color-heading);background:var(--color-contrast-100)}:host([variant=ghost][active]) button{color:var(--_theme-contrast);background:var(--_theme-base)}:host([variant=glass]) button{color:color-mix(in srgb, var(--color-secondary-contrast) 70%, transparent);text-shadow:var(--text-shadow-2xs)}:host([variant=glass]) button:hover{color:var(--color-secondary-contrast);background:color-mix(in srgb, var(--color-secondary-contrast) 10%, transparent)}:host([variant=glass][active]) button{color:var(--color-secondary-contrast);background:color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([variant=frost]) button{color:var(--text-color-secondary)}:host([variant=frost]) button:hover{color:var(--text-color-heading);background:color-mix(in srgb, var(--color-contrast) 10%, transparent)}:host([variant=frost][active]) button{color:var(--text-color-heading);background:color-mix(in srgb, var(--color-canvas) 60%, transparent);box-shadow:var(--shadow-xs), var(--inset-shadow-xs)}:host([size=sm]){--tab-item-font-size:var(--text-xs);--tab-item-padding:var(--size-1) var(--size-3)}:host(:not([size])),:host([size=md]){--tab-item-font-size:var(--text-sm);--tab-item-padding:var(--size-1-5) var(--size-4)}:host([size=lg]){--tab-item-font-size:var(--text-base);--tab-item-padding:var(--size-2) var(--size-5)}:host([disabled]){pointer-events:none;opacity:.5}@media (forced-colors:active){button:focus-visible{box-shadow:none;outline:2px solid highlight}:host([active]) button{outline-offset:-2px;outline:2px solid highlight}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tab-item.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item.css?inline.js","names":[],"sources":["../../../src/disclosure/tab-item/tab-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: inline-flex;\n    outline: none;\n\n    --tab-item-transition: var(--transition-normal);\n    --tab-item-radius: var(--rounded-lg);\n  }\n\n  button {\n    position: relative;\n    display: inline-flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-height: var(--_touch-target);\n    padding: var(--tab-item-padding, var(--size-1-5) var(--size-4));\n    font-family: inherit;\n    font-size: var(--tab-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--tab-item-color, var(--text-color-secondary));\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--tab-item-radius);\n    transition:\n      background var(--tab-item-transition),\n      color var(--tab-item-transition),\n      box-shadow var(--tab-item-transition);\n  }\n\n  button:focus {\n    outline: none;\n  }\n\n  :host(:focus-visible) button,\n  button:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 3px var(--_theme-shadow);\n  }\n}\n\n@layer buildit.variants {\n  /* ─── solid / default ─── */\n  :host button:hover,\n  :host([variant='solid']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([active]) button,\n  :host([variant='solid'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='flat'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  :host([variant='bordered'][active]) button {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-0, var(--color-canvas));\n    box-shadow: var(--shadow-xs);\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) button:hover {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost'][active]) button {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) button {\n    color: color-mix(in srgb, var(--color-secondary-contrast) 70%, transparent);\n    text-shadow: var(--text-shadow-2xs);\n  }\n\n  :host([variant='glass']) button:hover {\n    color: var(--color-secondary-contrast);\n    background: color-mix(in srgb, var(--color-secondary-contrast) 10%, transparent);\n  }\n\n  :host([variant='glass'][active]) button {\n    color: var(--color-secondary-contrast);\n    background: color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) button {\n    color: var(--text-color-secondary);\n  }\n\n  :host([variant='frost']) button:hover {\n    color: var(--text-color-heading);\n    background: color-mix(in srgb, var(--color-contrast) 10%, transparent);\n  }\n\n  :host([variant='frost'][active]) button {\n    color: var(--text-color-heading);\n    background: color-mix(in srgb, var(--color-canvas) 60%, transparent);\n    box-shadow: var(--shadow-xs), var(--inset-shadow-xs);\n  }\n\n  /* ─── sizes ─── */\n  :host([size='sm']) {\n    --tab-item-font-size: var(--text-xs);\n    --tab-item-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tab-item-font-size: var(--text-sm);\n    --tab-item-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tab-item-font-size: var(--text-base);\n    --tab-item-padding: var(--size-2) var(--size-5);\n  }\n\n  /* ─── disabled ─── */\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  @media (forced-colors: active) {\n    /* Ensure focus ring is visible regardless of variant theme color */\n    button:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n\n    /* Active tab: box-shadow raised indicator is stripped; use outline inste\n         ad so the selected tab remains distinguishable */\n    :host([active]) button {\n      outline: 2px solid Highlight;\n      outline-offset: -2px;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,39 @@
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+export type BitTabItemProps = {
+    /** Whether this tab is currently selected (set by bit-tabs) */
+    active?: boolean;
+    /** Theme color (inherited from bit-tabs) */
+    color?: ThemeColor;
+    /** Disable this tab */
+    disabled?: boolean;
+    /** Size (inherited from bit-tabs) */
+    size?: ComponentSize;
+    /** Unique value identifier — must match a bit-tab-panel value */
+    value: string;
+    /** Visual variant (inherited from bit-tabs) */
+    variant?: VisualVariant;
+};
+/**
+ * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.
+ *
+ * @element bit-tab-item
+ *
+ * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value
+ * @attr {boolean} active - Set by the parent bit-tabs when this tab is selected
+ * @attr {boolean} disabled - Prevents selection
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Inherited from bit-tabs
+ * @attr {string} color - Inherited from bit-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ *
+ * @slot prefix - Icon or content before the label
+ * @slot - Tab label
+ * @slot suffix - Badge or count after the label
+ *
+ * @example
+ * ```html
+ * <bit-tab-item slot="tabs" value="overview">Overview</bit-tab-item>
+ * <bit-tab-item slot="tabs" value="settings" disabled>Settings</bit-tab-item>
+ * ```
+ */
+export declare const TAB_ITEM_TAG: string;
+//# sourceMappingURL=tab-item.d.ts.map

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

@@ -0,0 +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"}

package/dist/disclosure/tab-panel/tab-panel.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{width:100%;display:none}:host([active]){flex-direction:column;flex:1;min-height:0;display:flex}.panel{box-sizing:border-box;height:100%;min-height:0;padding:var(--tab-panel-padding,var(--size-4));font-size:var(--tab-panel-font-size,var(--text-sm));color:var(--text-color-body);animation:var(--_motion-animation,tab-panel-in var(--transition-normal) var(--ease-out) both);flex:1;overflow:auto}}@layer buildit.variants{@keyframes tab-panel-in{0%{opacity:0;translate:0 4px}to{opacity:1;translate:0}}}`;exports.default=e;
+//# sourceMappingURL=tab-panel.css?inline.cjs.map

package/dist/disclosure/tab-panel/tab-panel.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.css?inline.cjs","names":[],"sources":["../../../src/disclosure/tab-panel/tab-panel.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: none;\n    width: 100%;\n  }\n\n  :host([active]) {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .panel {\n    box-sizing: border-box;\n    flex: 1;\n    height: 100%;\n    min-height: 0;\n    padding: var(--tab-panel-padding, var(--size-4));\n    overflow: auto;\n    font-size: var(--tab-panel-font-size, var(--text-sm));\n    color: var(--text-color-body);\n    animation: var(--_motion-animation, tab-panel-in var(--transition-normal) var(--ease-out) both);\n  }\n}\n\n@layer buildit.variants {\n  @keyframes tab-panel-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/disclosure/tab-panel/tab-panel.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/disclosure/tab-panel/tab-panel.css?inline
+var e = "@layer buildit.base{:host{width:100%;display:none}:host([active]){flex-direction:column;flex:1;min-height:0;display:flex}.panel{box-sizing:border-box;height:100%;min-height:0;padding:var(--tab-panel-padding,var(--size-4));font-size:var(--tab-panel-font-size,var(--text-sm));color:var(--text-color-body);animation:var(--_motion-animation,tab-panel-in var(--transition-normal) var(--ease-out) both);flex:1;overflow:auto}}@layer buildit.variants{@keyframes tab-panel-in{0%{opacity:0;translate:0 4px}to{opacity:1;translate:0}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tab-panel.css?inline.js.map

package/dist/disclosure/tab-panel/tab-panel.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.css?inline.js","names":[],"sources":["../../../src/disclosure/tab-panel/tab-panel.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: none;\n    width: 100%;\n  }\n\n  :host([active]) {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  .panel {\n    box-sizing: border-box;\n    flex: 1;\n    height: 100%;\n    min-height: 0;\n    padding: var(--tab-panel-padding, var(--size-4));\n    overflow: auto;\n    font-size: var(--tab-panel-font-size, var(--text-sm));\n    color: var(--text-color-body);\n    animation: var(--_motion-animation, tab-panel-in var(--transition-normal) var(--ease-out) both);\n  }\n}\n\n@layer buildit.variants {\n  @keyframes tab-panel-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n}\n"],"mappings":""}