@vielzeug/buildit 2.0.0

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

@@ -0,0 +1,30 @@
+export type BitTabPanelProps = {
+    /** Active state (managed by bit-tabs) */
+    active?: boolean;
+    /** When true, the panel content is not rendered until first activation (preserves resources) */
+    lazy?: boolean;
+    /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Must match the `value` of its corresponding bit-tab-item */
+    value: string;
+};
+/**
+ * Content panel for a tab. Shown when its `value` matches the selected tab.
+ *
+ * @element bit-tab-panel
+ *
+ * @attr {string} value - Must match the corresponding bit-tab-item value
+ * @attr {boolean} active - Toggled by the parent bit-tabs
+ * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'
+ *
+ * @slot - Panel content
+ *
+ * @example
+ * ```html
+ * <bit-tab-panel value="overview"><p>Overview content here</p></bit-tab-panel>
+ * <bit-tab-panel value="settings" padding="lg"><p>Large padding</p></bit-tab-panel>
+ * <bit-tab-panel value="code" padding="none"><pre>No padding for code</pre></bit-tab-panel>
+ * ```
+ */
+export declare const TAB_PANEL_TAG: string;
+//# sourceMappingURL=tab-panel.d.ts.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css?inline.cjs","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n  }\n\n  .tablist-wrapper {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  [role='tablist'] {\n    position: relative;\n    display: flex;\n    gap: var(--tabs-tab-gap, var(--size-1));\n    align-items: stretch;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  [role='tablist']::-webkit-scrollbar {\n    display: none;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0;\n    height: 2px;\n    pointer-events: none;\n    background: var(--tabs-indicator-color, var(--_theme-base));\n    border-radius: var(--rounded-full);\n    transition:\n      left var(--tabs-transition),\n      width var(--tabs-transition);\n  }\n\n  .panels {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n}\n\n@layer buildit.orientation {\n  /* ─── vertical orientation ─── */\n  :host([orientation='vertical']) {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .tablist-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  :host([orientation='vertical']) [role='tablist'] {\n    flex-direction: column;\n    width: max-content;\n    overflow-x: unset;\n    overflow-y: auto;\n  }\n\n  :host([orientation='vertical']) .indicator {\n    inset-inline-start: 0;\n\n    /* Reposition indicator to inline-start side for vertical */\n    bottom: unset;\n    width: 2px;\n    height: unset;\n    transition:\n      top var(--tabs-transition),\n      height var(--tabs-transition);\n  }\n}\n\n@layer buildit.variants {\n  /* ─── solid (default) ─── */\n  :host,\n  :host([variant='solid']) {\n    --tabs-tab-gap: var(--size-1);\n  }\n\n  :host [role='tablist'],\n  :host([variant='solid']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius);\n  }\n\n  :host .indicator,\n  :host([variant='solid']) .indicator {\n    display: none;\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) {\n    overflow: hidden;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius);\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='flat']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n    background: transparent;\n    border: none;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n    border-radius: 0;\n  }\n\n  :host([variant='flat']) .indicator {\n    display: none;\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n    background: transparent;\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom: none;\n    border-radius: var(--tabs-radius) var(--tabs-radius) 0 0;\n  }\n\n  :host([variant='bordered']) .indicator {\n    display: none;\n  }\n\n  :host([variant='bordered']) .panels {\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: 0 0 var(--tabs-radius) var(--tabs-radius);\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([variant='ghost']) .indicator {\n    display: none;\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) [role='tablist'] {\n    padding: var(--size-1);\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n    border: var(--border) solid color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n    border-radius: var(--tabs-radius);\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  :host([variant='glass']) .indicator {\n    display: none;\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) [role='tablist'] {\n    padding: var(--size-1);\n    background: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    border: var(--border) solid color-mix(in srgb, var(--color-contrast-300) 50%, transparent);\n    border-radius: var(--tabs-radius);\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='frost']) .indicator {\n    display: none;\n  }\n\n  /* ─── size variants ─── */\n  :host([size='sm']) {\n    --tabs-tab-size: var(--text-xs);\n    --tabs-tab-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tabs-tab-size: var(--text-sm);\n    --tabs-tab-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tabs-tab-size: var(--text-base);\n    --tabs-tab-padding: var(--size-2) var(--size-5);\n  }\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css?inline.js","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n  }\n\n  .tablist-wrapper {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  [role='tablist'] {\n    position: relative;\n    display: flex;\n    gap: var(--tabs-tab-gap, var(--size-1));\n    align-items: stretch;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  [role='tablist']::-webkit-scrollbar {\n    display: none;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0;\n    height: 2px;\n    pointer-events: none;\n    background: var(--tabs-indicator-color, var(--_theme-base));\n    border-radius: var(--rounded-full);\n    transition:\n      left var(--tabs-transition),\n      width var(--tabs-transition);\n  }\n\n  .panels {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n}\n\n@layer buildit.orientation {\n  /* ─── vertical orientation ─── */\n  :host([orientation='vertical']) {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .tablist-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  :host([orientation='vertical']) [role='tablist'] {\n    flex-direction: column;\n    width: max-content;\n    overflow-x: unset;\n    overflow-y: auto;\n  }\n\n  :host([orientation='vertical']) .indicator {\n    inset-inline-start: 0;\n\n    /* Reposition indicator to inline-start side for vertical */\n    bottom: unset;\n    width: 2px;\n    height: unset;\n    transition:\n      top var(--tabs-transition),\n      height var(--tabs-transition);\n  }\n}\n\n@layer buildit.variants {\n  /* ─── solid (default) ─── */\n  :host,\n  :host([variant='solid']) {\n    --tabs-tab-gap: var(--size-1);\n  }\n\n  :host [role='tablist'],\n  :host([variant='solid']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius);\n  }\n\n  :host .indicator,\n  :host([variant='solid']) .indicator {\n    display: none;\n  }\n\n  /* ─── flat ─── */\n  :host([variant='flat']) {\n    overflow: hidden;\n    background: var(--color-contrast-100);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius);\n    box-shadow: var(--inset-shadow-xs), var(--shadow-2xs);\n  }\n\n  :host([variant='flat']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n    background: transparent;\n    border: none;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n    border-radius: 0;\n  }\n\n  :host([variant='flat']) .indicator {\n    display: none;\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n    background: transparent;\n    border: var(--border) solid var(--color-contrast-200);\n    border-bottom: none;\n    border-radius: var(--tabs-radius) var(--tabs-radius) 0 0;\n  }\n\n  :host([variant='bordered']) .indicator {\n    display: none;\n  }\n\n  :host([variant='bordered']) .panels {\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: 0 0 var(--tabs-radius) var(--tabs-radius);\n  }\n\n  /* ─── ghost ─── */\n  :host([variant='ghost']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([variant='ghost']) .indicator {\n    display: none;\n  }\n\n  /* ─── glass ─── */\n  :host([variant='glass']) [role='tablist'] {\n    padding: var(--size-1);\n    background: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n    border: var(--border) solid color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n    border-radius: var(--tabs-radius);\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  :host([variant='glass']) .indicator {\n    display: none;\n  }\n\n  /* ─── frost ─── */\n  :host([variant='frost']) [role='tablist'] {\n    padding: var(--size-1);\n    background: color-mix(in srgb, var(--color-canvas) 55%, transparent);\n    border: var(--border) solid color-mix(in srgb, var(--color-contrast-300) 50%, transparent);\n    border-radius: var(--tabs-radius);\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([variant='frost']) .indicator {\n    display: none;\n  }\n\n  /* ─── size variants ─── */\n  :host([size='sm']) {\n    --tabs-tab-size: var(--text-xs);\n    --tabs-tab-padding: var(--size-1) var(--size-3);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --tabs-tab-size: var(--text-sm);\n    --tabs-tab-padding: var(--size-1-5) var(--size-4);\n  }\n\n  :host([size='lg']) {\n    --tabs-tab-size: var(--text-base);\n    --tabs-tab-padding: var(--size-2) var(--size-5);\n  }\n}\n"],"mappings":""}

package/dist/disclosure/tabs/tabs.d.ts

@@ -0,0 +1,64 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+/** Context provided by bit-tabs to its bit-tab-item and bit-tab-panel children. */
+export type TabsContext = {
+    color: ReadonlySignal<ThemeColor | undefined>;
+    orientation: ReadonlySignal<'horizontal' | 'vertical'>;
+    size: ReadonlySignal<ComponentSize | undefined>;
+    value: ReadonlySignal<string | undefined>;
+    variant: ReadonlySignal<VisualVariant | undefined>;
+};
+/** Injection key for the tabs context. */
+export declare const TABS_CTX: import("@vielzeug/craftit").InjectionKey<TabsContext>;
+export type BitTabsEvents = {
+    change: {
+        value: string;
+    };
+};
+export type BitTabsProps = {
+    /**
+     * Keyboard activation mode.
+     * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).
+     * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.
+     */
+    activation?: 'auto' | 'manual';
+    /** Theme color */
+    color?: ThemeColor;
+    /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */
+    label?: string;
+    /** Tab list orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Component size */
+    size?: ComponentSize;
+    /** Currently selected tab value */
+    value?: string;
+    /** Visual style variant */
+    variant?: VisualVariant;
+};
+/**
+ * Tabs container. Manages tab selection and syncs state to child tab items and panels.
+ *
+ * @element bit-tabs
+ *
+ * @attr {string} value - The value of the currently selected tab
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ *
+ * @fires change - Emitted when the active tab changes, detail: { value: string }
+ *
+ * @slot tabs - Place `bit-tab-item` elements here
+ * @slot - Place `bit-tab-panel` elements here
+ *
+ * @example
+ * ```html
+ * <bit-tabs value="tab1" variant="underline">
+ *   <bit-tab-item slot="tabs" value="tab1">Overview</bit-tab-item>
+ *   <bit-tab-item slot="tabs" value="tab2">Settings</bit-tab-item>
+ *   <bit-tab-panel value="tab1"><p>Overview content</p></bit-tab-panel>
+ *   <bit-tab-panel value="tab2"><p>Settings content</p></bit-tab-panel>
+ * </bit-tabs>
+ * ```
+ */
+export declare const TABS_TAG: string;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAIpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5E,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,WAAW,EAAE,cAAc,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACvD,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,KAAK,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC1C,OAAO,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;CACpD,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,uDAA4C,CAAC;AAIlE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,QAAQ,QA8LnB,CAAC"}

package/dist/drawer.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./icons.cjs`),r=require(`./utils/background-lock.cjs`),i=require(`./utils/use-overlay.cjs`);require(`./utils/index.cjs`);const a=require(`./overlay/drawer/drawer.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=(0,o.defineComponent)({props:{backdrop:{default:void 0},dismissable:{default:!0},"initial-focus":{default:void 0},label:{default:void 0},open:{default:!1},persistent:{default:!1},placement:{default:`right`},"return-focus":{default:!0},size:{default:void 0},title:{default:void 0}},setup({emit:e,host:t,props:a,slots:s}){let c=(0,o.createId)(`drawer-label`),l=(0,o.ref)(),u=(0,o.ref)(),d=(0,o.computed)(()=>s.has(`header`).value||!!a.title.value||a.dismissable.value),f=(0,o.computed)(()=>s.has(`footer`).value),{applyInitialFocus:p,captureReturnFocus:m,restoreFocus:h}=i.useOverlay(t,l,()=>u.value,a),g=()=>{let e=l.value;e?.open&&e.close()},_=e=>{o.fire.custom(t,`close-request`,{cancelable:!0,detail:{placement:a.placement.value??`right`,trigger:e}})&&g()},v=()=>{let n=l.value;!n||n.open||(m(),n.showModal(),r.lockBackground(t),p(),e(`open`,{placement:a.placement.value??`right`}))};return(0,o.onMount)(()=>{let n=l.value;if(!n)return;let i=t;return i.show=v,i.hide=g,(0,o.watch)(a.open,e=>{e?v():g()},{immediate:!0}),(0,o.handle)(n,`close`,()=>{r.unlockBackground(),t.removeAttribute(`open`),h(),e(`close`,{placement:a.placement.value??`right`})}),(0,o.handle)(n,`cancel`,e=>{e.preventDefault(),a.persistent.value||_(`escape`)}),(0,o.handle)(n,`click`,e=>{!a.persistent.value&&e.target===n&&_(`backdrop`)}),()=>{n.open&&(r.unlockBackground(),n.close())}}),o.html`
+      <dialog
+        ref=${l}
+        aria-modal="true"
+        :aria-label="${()=>a.label.value??null}"
+        :aria-labelledby="${()=>a.label.value?null:c}">
+        <div class="panel" part="panel" ref=${u}>
+          <div class="header" part="header" ?hidden=${()=>!d.value}>
+            <span class="header-title" id="${c}">
+              <slot name="header">${()=>a.title.value??``}</slot>
+            </span>
+            <button
+              class="close-btn"
+              part="close-btn"
+              type="button"
+              aria-label="Close"
+              ?hidden=${()=>!a.dismissable.value}
+              @click="${()=>_(`button`)}">
+              ${n.closeIcon}
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${()=>!f.value}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `},styles:[t.elevationMixin,t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,a.default],tag:`bit-drawer`});exports.DRAWER_TAG=s;
+//# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { computed, createId, defineComponent, fire, handle, html, onMount, ref, watch } from '@vielzeug/craftit';\n\nimport { closeIcon } from '../../icons';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { lockBackground, unlockBackground, useOverlay } from '../../utils';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\n\n/** Element interface exposing the imperative API for `bit-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<BitDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type BitDrawerEvents = {\n  close: { placement: DrawerPlacement };\n  open: { placement: DrawerPlacement };\n};\n\nexport type BitDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Show the close (×) button in the header (default: true) */\n  dismissable?: boolean;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element bit-drawer\n *\n * @attr {boolean} open - Controlled open/close state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissable - Show the close (×) button (default: true)\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @fires open - When the drawer opens\n * @fires close - When the drawer closes\n *\n * @cssprop --drawer-backdrop - Backdrop background\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n *\n * @example\n * ```html\n * <!-- With visible title -->\n * <bit-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </bit-drawer>\n *\n * <!-- With custom header slot -->\n * <bit-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </bit-drawer>\n * ```\n */\nexport const DRAWER_TAG = defineComponent<BitDrawerProps, BitDrawerEvents>({\n  props: {\n    backdrop: { default: undefined },\n    dismissable: { default: true },\n    'initial-focus': { default: undefined },\n    label: { default: undefined },\n    open: { default: false },\n    persistent: { default: false },\n    placement: { default: 'right' },\n    'return-focus': { default: true },\n    size: { default: undefined },\n    title: { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    const drawerLabelId = createId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Header is visible when there is slot content, a title prop, or a close button.\n    const hasHeader = computed(() => slots.has('header').value || !!props.title.value || props.dismissable.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    const { applyInitialFocus, captureReturnFocus, restoreFocus } = useOverlay(\n      host,\n      dialogRef,\n      () => panelRef.value,\n      props,\n    );\n\n    const close = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog?.open) return;\n\n      dialog.close();\n    };\n\n    const requestClose = (trigger: 'backdrop' | 'button' | 'escape') => {\n      const allowed = fire.custom(host, 'close-request', {\n        cancelable: true,\n        detail: { placement: props.placement.value ?? 'right', trigger },\n      });\n\n      if (allowed) close();\n    };\n\n    const openDrawer = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog || dialog.open) return;\n\n      captureReturnFocus();\n      dialog.showModal();\n      lockBackground(host);\n\n      applyInitialFocus();\n      emit('open', { placement: props.placement.value ?? 'right' });\n    };\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const el = host as DrawerElement;\n\n      el.show = openDrawer;\n      el.hide = close;\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.removeAttribute('open');\n        restoreFocus();\n        emit('close', { placement: props.placement.value ?? 'right' });\n      };\n\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n\n        if (!props.persistent.value) requestClose('escape');\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (!props.persistent.value && e.target === dialog) requestClose('backdrop');\n      };\n\n      watch(\n        props.open,\n        (isOpen) => {\n          if (isOpen) openDrawer();\n          else close();\n        },\n        { immediate: true },\n      );\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'cancel', handleCancel);\n      handle(dialog, 'click', handleBackdropClick);\n\n      return () => {\n        if (dialog.open) {\n          unlockBackground();\n          dialog.close();\n        }\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\">\n              <slot name=\"header\">${() => props.title.value ?? ''}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissable.value}\n              @click=\"${() => requestClose('button')}\">\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, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n  tag: 'bit-drawer',\n});\n"],"mappings":"4aAuGA,IAAa,GAAA,EAAA,EAAA,iBAA8D,CACzE,MAAO,CACL,SAAU,CAAE,QAAS,IAAA,GAAW,CAChC,YAAa,CAAE,QAAS,GAAM,CAC9B,gBAAiB,CAAE,QAAS,IAAA,GAAW,CACvC,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,KAAM,CAAE,QAAS,GAAO,CACxB,WAAY,CAAE,QAAS,GAAO,CAC9B,UAAW,CAAE,QAAS,QAAS,CAC/B,eAAgB,CAAE,QAAS,GAAM,CACjC,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC9B,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAClC,IAAM,GAAA,EAAA,EAAA,UAAyB,eAAe,CACxC,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,MAAgC,CAGhC,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,CAErD,CAAE,oBAAmB,qBAAoB,gBAAiB,EAAA,WAC9D,EACA,MACM,EAAS,MACf,EACD,CAEK,MAAc,CAClB,IAAM,EAAS,EAAU,MAEpB,GAAQ,MAEb,EAAO,OAAO,EAGV,EAAgB,GAA8C,CAClD,EAAA,KAAK,OAAO,EAAM,gBAAiB,CACjD,WAAY,GACZ,OAAQ,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,UAAS,CACjE,CAAC,EAEW,GAAO,EAGhB,MAAmB,CACvB,IAAM,EAAS,EAAU,MAErB,CAAC,GAAU,EAAO,OAEtB,GAAoB,CACpB,EAAO,WAAW,CAClB,EAAA,eAAe,EAAK,CAEpB,GAAmB,CACnB,EAAK,OAAQ,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,CAAC,GAoD/D,OAjDA,EAAA,EAAA,aAAc,CACZ,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,OAGb,IAAM,EAAK,EAmCX,MAjCA,GAAG,KAAO,EACV,EAAG,KAAO,GAmBV,EAAA,EAAA,OACE,EAAM,KACL,GAAW,CACN,EAAQ,GAAY,CACnB,GAAO,EAEd,CAAE,UAAW,GAAM,CACpB,EAED,EAAA,EAAA,QAAO,EAAQ,YA1BiB,CAC9B,EAAA,kBAAkB,CAClB,EAAK,gBAAgB,OAAO,CAC5B,GAAc,CACd,EAAK,QAAS,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,CAAC,EAsBtB,EAC1C,EAAA,EAAA,QAAO,EAAQ,SApBO,GAAa,CACjC,EAAE,gBAAgB,CAEb,EAAM,WAAW,OAAO,EAAa,SAAS,EAiBf,EACtC,EAAA,EAAA,QAAO,EAAQ,QAfc,GAAkB,CACzC,CAAC,EAAM,WAAW,OAAS,EAAE,SAAW,GAAQ,EAAa,WAAW,EAclC,KAE/B,CACP,EAAO,OACT,EAAA,kBAAkB,CAClB,EAAO,OAAO,IAGlB,CAEK,EAAA,IAAI;;cAED,EAAU;;2BAEK,EAAM,MAAM,OAAS,KAAK;gCACnB,EAAM,MAAM,MAAwB,KAAhB,EAAsB;8CAChC,EAAS;0DACK,CAAC,EAAU,MAAM;6CAChC,EAAc;wCACjB,EAAM,MAAM,OAAS,GAAG;;;;;;;4BAOpC,CAAC,EAAM,YAAY,MAAM;4BACzB,EAAa,SAAS,CAAC;gBACrC,EAAA,UAAU;;;;;;0DAMkC,CAAC,EAAU,MAAM;;;;;OAO3E,OAAQ,CAAC,EAAA,eAAgB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,QAAO,CAC3F,IAAK,aACN,CAAC"}

package/dist/drawer.js

@@ -0,0 +1,98 @@
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { elevationMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import { closeIcon as i } from "./icons.js";
+import { lockBackground as a, unlockBackground as o } from "./utils/background-lock.js";
+import { useOverlay as s } from "./utils/use-overlay.js";
+import "./utils/index.js";
+import c from "./overlay/drawer/drawer.css?inline.js";
+import { computed as l, createId 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/drawer/drawer.ts
+var v = d({
+	props: {
+		backdrop: { default: void 0 },
+		dismissable: { default: !0 },
+		"initial-focus": { default: void 0 },
+		label: { default: void 0 },
+		open: { default: !1 },
+		persistent: { default: !1 },
+		placement: { default: "right" },
+		"return-focus": { default: !0 },
+		size: { default: void 0 },
+		title: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n, slots: r }) {
+		let c = u("drawer-label"), d = g(), v = g(), y = l(() => r.has("header").value || !!n.title.value || n.dismissable.value), b = l(() => r.has("footer").value), { applyInitialFocus: x, captureReturnFocus: S, restoreFocus: C } = s(t, d, () => v.value, n), w = () => {
+			let e = d.value;
+			e?.open && e.close();
+		}, T = (e) => {
+			f.custom(t, "close-request", {
+				cancelable: !0,
+				detail: {
+					placement: n.placement.value ?? "right",
+					trigger: e
+				}
+			}) && w();
+		}, E = () => {
+			let r = d.value;
+			!r || r.open || (S(), r.showModal(), a(t), x(), e("open", { placement: n.placement.value ?? "right" }));
+		};
+		return h(() => {
+			let r = d.value;
+			if (!r) return;
+			let i = t;
+			return i.show = E, i.hide = w, _(n.open, (e) => {
+				e ? E() : w();
+			}, { immediate: !0 }), p(r, "close", () => {
+				o(), t.removeAttribute("open"), C(), e("close", { placement: n.placement.value ?? "right" });
+			}), p(r, "cancel", (e) => {
+				e.preventDefault(), n.persistent.value || T("escape");
+			}), p(r, "click", (e) => {
+				!n.persistent.value && e.target === r && T("backdrop");
+			}), () => {
+				r.open && (o(), r.close());
+			};
+		}), m`
+      <dialog
+        ref=${d}
+        aria-modal="true"
+        :aria-label="${() => n.label.value ?? null}"
+        :aria-labelledby="${() => n.label.value ? null : c}">
+        <div class="panel" part="panel" ref=${v}>
+          <div class="header" part="header" ?hidden=${() => !y.value}>
+            <span class="header-title" id="${c}">
+              <slot name="header">${() => n.title.value ?? ""}</slot>
+            </span>
+            <button
+              class="close-btn"
+              part="close-btn"
+              type="button"
+              aria-label="Close"
+              ?hidden=${() => !n.dismissable.value}
+              @click="${() => T("button")}">
+              ${i}
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${() => !b.value}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+	},
+	styles: [
+		n,
+		r,
+		e,
+		t,
+		c
+	],
+	tag: "bit-drawer"
+});
+//#endregion
+export { v as DRAWER_TAG };
+
+//# sourceMappingURL=drawer.js.map

package/dist/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { computed, createId, defineComponent, fire, handle, html, onMount, ref, watch } from '@vielzeug/craftit';\n\nimport { closeIcon } from '../../icons';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { lockBackground, unlockBackground, useOverlay } from '../../utils';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\n\n/** Element interface exposing the imperative API for `bit-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<BitDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type BitDrawerEvents = {\n  close: { placement: DrawerPlacement };\n  open: { placement: DrawerPlacement };\n};\n\nexport type BitDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Show the close (×) button in the header (default: true) */\n  dismissable?: boolean;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element bit-drawer\n *\n * @attr {boolean} open - Controlled open/close state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissable - Show the close (×) button (default: true)\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @fires open - When the drawer opens\n * @fires close - When the drawer closes\n *\n * @cssprop --drawer-backdrop - Backdrop background\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n *\n * @example\n * ```html\n * <!-- With visible title -->\n * <bit-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </bit-drawer>\n *\n * <!-- With custom header slot -->\n * <bit-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </bit-drawer>\n * ```\n */\nexport const DRAWER_TAG = defineComponent<BitDrawerProps, BitDrawerEvents>({\n  props: {\n    backdrop: { default: undefined },\n    dismissable: { default: true },\n    'initial-focus': { default: undefined },\n    label: { default: undefined },\n    open: { default: false },\n    persistent: { default: false },\n    placement: { default: 'right' },\n    'return-focus': { default: true },\n    size: { default: undefined },\n    title: { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    const drawerLabelId = createId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Header is visible when there is slot content, a title prop, or a close button.\n    const hasHeader = computed(() => slots.has('header').value || !!props.title.value || props.dismissable.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    const { applyInitialFocus, captureReturnFocus, restoreFocus } = useOverlay(\n      host,\n      dialogRef,\n      () => panelRef.value,\n      props,\n    );\n\n    const close = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog?.open) return;\n\n      dialog.close();\n    };\n\n    const requestClose = (trigger: 'backdrop' | 'button' | 'escape') => {\n      const allowed = fire.custom(host, 'close-request', {\n        cancelable: true,\n        detail: { placement: props.placement.value ?? 'right', trigger },\n      });\n\n      if (allowed) close();\n    };\n\n    const openDrawer = () => {\n      const dialog = dialogRef.value;\n\n      if (!dialog || dialog.open) return;\n\n      captureReturnFocus();\n      dialog.showModal();\n      lockBackground(host);\n\n      applyInitialFocus();\n      emit('open', { placement: props.placement.value ?? 'right' });\n    };\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const el = host as DrawerElement;\n\n      el.show = openDrawer;\n      el.hide = close;\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.removeAttribute('open');\n        restoreFocus();\n        emit('close', { placement: props.placement.value ?? 'right' });\n      };\n\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n\n        if (!props.persistent.value) requestClose('escape');\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (!props.persistent.value && e.target === dialog) requestClose('backdrop');\n      };\n\n      watch(\n        props.open,\n        (isOpen) => {\n          if (isOpen) openDrawer();\n          else close();\n        },\n        { immediate: true },\n      );\n\n      handle(dialog, 'close', handleNativeClose);\n      handle(dialog, 'cancel', handleCancel);\n      handle(dialog, 'click', handleBackdropClick);\n\n      return () => {\n        if (dialog.open) {\n          unlockBackground();\n          dialog.close();\n        }\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader.value}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\">\n              <slot name=\"header\">${() => props.title.value ?? ''}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissable.value}\n              @click=\"${() => requestClose('button')}\">\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, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n  tag: 'bit-drawer',\n});\n"],"mappings":";;;;;;;;;;AAuGA,IAAa,IAAa,EAAiD;CACzE,OAAO;EACL,UAAU,EAAE,SAAS,KAAA,GAAW;EAChC,aAAa,EAAE,SAAS,IAAM;EAC9B,iBAAiB,EAAE,SAAS,KAAA,GAAW;EACvC,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,MAAM,EAAE,SAAS,IAAO;EACxB,YAAY,EAAE,SAAS,IAAO;EAC9B,WAAW,EAAE,SAAS,SAAS;EAC/B,gBAAgB,EAAE,SAAS,IAAM;EACjC,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC9B;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,YAAS;EAClC,IAAM,IAAgB,EAAS,eAAe,EACxC,IAAY,GAAwB,EACpC,IAAW,GAAqB,EAGhC,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,MAAM,EACvG,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,MAAM,EAErD,EAAE,sBAAmB,uBAAoB,oBAAiB,EAC9D,GACA,SACM,EAAS,OACf,EACD,EAEK,UAAc;GAClB,IAAM,IAAS,EAAU;AAEpB,MAAQ,QAEb,EAAO,OAAO;KAGV,KAAgB,MAA8C;AAMlE,GALgB,EAAK,OAAO,GAAM,iBAAiB;IACjD,YAAY;IACZ,QAAQ;KAAE,WAAW,EAAM,UAAU,SAAS;KAAS;KAAS;IACjE,CAAC,IAEW,GAAO;KAGhB,UAAmB;GACvB,IAAM,IAAS,EAAU;AAErB,IAAC,KAAU,EAAO,SAEtB,GAAoB,EACpB,EAAO,WAAW,EAClB,EAAe,EAAK,EAEpB,GAAmB,EACnB,EAAK,QAAQ,EAAE,WAAW,EAAM,UAAU,SAAS,SAAS,CAAC;;AAoD/D,SAjDA,QAAc;GACZ,IAAM,IAAS,EAAU;AAEzB,OAAI,CAAC,EAAQ;GAGb,IAAM,IAAK;AAmCX,UAjCA,EAAG,OAAO,GACV,EAAG,OAAO,GAmBV,EACE,EAAM,OACL,MAAW;AACV,IAAI,IAAQ,GAAY,GACnB,GAAO;MAEd,EAAE,WAAW,IAAM,CACpB,EAED,EAAO,GAAQ,eA1BiB;AAI9B,IAHA,GAAkB,EAClB,EAAK,gBAAgB,OAAO,EAC5B,GAAc,EACd,EAAK,SAAS,EAAE,WAAW,EAAM,UAAU,SAAS,SAAS,CAAC;KAsBtB,EAC1C,EAAO,GAAQ,WApBO,MAAa;AAGjC,IAFA,EAAE,gBAAgB,EAEb,EAAM,WAAW,SAAO,EAAa,SAAS;KAiBf,EACtC,EAAO,GAAQ,UAfc,MAAkB;AAC7C,IAAI,CAAC,EAAM,WAAW,SAAS,EAAE,WAAW,KAAQ,EAAa,WAAW;KAclC,QAE/B;AACX,IAAI,EAAO,SACT,GAAkB,EAClB,EAAO,OAAO;;IAGlB,EAEK,CAAI;;cAED,EAAU;;6BAEK,EAAM,MAAM,SAAS,KAAK;kCACnB,EAAM,MAAM,QAAwB,OAAhB,EAAsB;8CAChC,EAAS;4DACK,CAAC,EAAU,MAAM;6CAChC,EAAc;0CACjB,EAAM,MAAM,SAAS,GAAG;;;;;;;8BAOpC,CAAC,EAAM,YAAY,MAAM;8BACzB,EAAa,SAAS,CAAC;gBACrC,EAAU;;;;;;4DAMkC,CAAC,EAAU,MAAM;;;;;;;CAO3E,QAAQ;EAAC;EAAgB;EAAmB;EAAoB;EAAoB;EAAO;CAC3F,KAAK;CACN,CAAC"}

package/dist/feedback/alert/alert.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--alert-bg,var(--_theme-backdrop));--_color:var(--alert-color,var(--_theme-base));--_border-color:var(--alert-border-color,var(--_theme-border));--_radius:var(--alert-radius,var(--rounded-lg));--_padding:var(--alert-padding,var(--size-4));--_gap:var(--alert-gap,var(--size-3));--_font-size:var(--alert-font-size,var(--text-sm));--_shadow:var(--alert-shadow,var(--shadow-none));display:block}:host([dismissed]){display:none}:host([dismissing]){pointer-events:none;animation:var(--_motion-animation,bit-alert-exit var(--transition-slow,.3s) ease forwards);overflow:hidden}@keyframes bit-alert-exit{0%{max-height:600px;margin-bottom:var(--size-3);opacity:1;transform:scaleY(1)}60%{opacity:0;transform:scaleY(.8)}to{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:scaleY(0)}}.alert{row-gap:var(--size-1);padding:var(--_padding);font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--_color);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);grid-template-columns:auto 1fr auto;display:grid;overflow:hidden}.icon{grid-area:1/1;justify-content:center;align-self:start;align-items:center;display:inline-flex}.icon: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-right:var(--_gap)}.icon: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:var(--_gap)}.alert:has(.header[hidden]) .icon{align-self:center}.icon[hidden]{display:none}.header{gap:var(--size-2);grid-area:1/2;align-items:baseline;display:flex}.header[hidden]{display:none}.heading{text-overflow:ellipsis;font-weight:var(--font-semibold);line-height:var(--leading-normal);white-space:nowrap;overflow:hidden}.meta{font-size:var(--text-xs);white-space:nowrap;opacity:.7}.meta: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}.meta: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}:host(:not(:has([slot=meta]))) .meta{display:none}.body{min-width:0;margin-top:var(--size-1);grid-area:2/1/auto/-1}.alert:has(.header[hidden]) .body{grid-area:1/2;margin-top:0}.content{line-height:var(--leading-relaxed)}.actions{gap:var(--size-2);margin-top:var(--size-2);flex-wrap:wrap;grid-area:3/1/auto/-1;display:flex}.alert:has(.header[hidden]) .actions{grid-row:2}.actions[hidden]{display:none}:host([horizontal]) .alert{grid-template-columns:auto 1fr auto auto}:host([horizontal]) .body{grid-area:1/2;align-self:center;margin-top:0}:host([horizontal]) .actions:not([hidden]){flex-wrap:nowrap;grid-area:1/3;margin-top:0}:host([horizontal]) .actions:not([hidden]):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:var(--_gap)}:host([horizontal]) .actions:not([hidden]):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:var(--_gap)}:host([horizontal]) .close{grid-column:4;align-self:center}.close{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:inherit;cursor:pointer;border-radius:var(--rounded-sm);opacity:.7;transition:var(--_motion-transition,opacity var(--transition-fast), background var(--transition-fast));background:0 0;border:none;grid-area:1/3;justify-content:center;align-self:start;align-items:center;padding:0;display:inline-flex}.close: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:var(--_gap)}.close: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:var(--_gap)}.close[hidden]{display:none}.close:hover{background:color-mix(in srgb, currentcolor 12%, transparent);opacity:1}.close:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);opacity:1}:host([variant=flat][accented]) .alert: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))){border-left-width:var(--border-4,4px)}:host([variant=flat][accented]) .alert: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)){border-right-width:var(--border-4,4px)}:host([variant=bordered][accented]) .alert: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))){border-left-width:var(--border-4,4px)}:host([variant=bordered][accented]) .alert: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)){border-right-width:var(--border-4,4px)}}@layer buildit.variants{:host(:not([variant])) .alert,:host([variant=flat]) .alert{color:var(--_theme-base);background:var(--color-canvas);border-color:var(--_theme-base);box-shadow:var(--shadow-none)}:host([variant=solid]) .alert{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base);box-shadow:var(--shadow-xs)}:host([variant=solid]) .close{color:var(--_theme-contrast)}:host([variant=bordered]) .alert{color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-backdrop), var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 30%, transparent);box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
+//# sourceMappingURL=alert.css?inline.cjs.map

package/dist/feedback/alert/alert.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css?inline.cjs","names":[],"sources":["../../../src/feedback/alert/alert.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--alert-bg, var(--_theme-backdrop));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-border));\n    --_radius: var(--alert-radius, var(--rounded-lg));\n    --_padding: var(--alert-padding, var(--size-4));\n    --_gap: var(--alert-gap, var(--size-3));\n    --_font-size: var(--alert-font-size, var(--text-sm));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n\n    display: block;\n  }\n\n  :host([dismissed]) {\n    display: none;\n  }\n\n  :host([dismissing]) {\n    overflow: hidden;\n    pointer-events: none;\n    animation: var(--_motion-animation, bit-alert-exit var(--transition-slow, 0.3s) ease forwards);\n  }\n\n  @keyframes bit-alert-exit {\n    0% {\n      /* Use a large enough value to cover any realistic alert height. */\n      max-height: 600px;\n      margin-bottom: var(--size-3);\n      opacity: 1;\n      transform: scaleY(1);\n    }\n\n    60% {\n      opacity: 0;\n      transform: scaleY(0.8);\n    }\n\n    100% {\n      max-height: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-bottom: 0;\n      opacity: 0;\n      transform: scaleY(0);\n    }\n  }\n\n  .alert {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    row-gap: var(--size-1);\n    padding: var(--_padding);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal);\n  }\n\n  /* ── Icon ──────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 1;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    margin-inline-end: var(--_gap);\n  }\n\n  /* Without heading: icon aligns with the body content */\n  .alert:has(.header[hidden]) .icon {\n    align-self: center;\n  }\n\n  .icon[hidden] {\n    display: none;\n  }\n\n  /* ── Header row (heading + meta) ───────────────── */\n\n  .header {\n    display: flex;\n    grid-row: 1;\n    grid-column: 2;\n    gap: var(--size-2);\n    align-items: baseline;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .heading {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n  }\n\n  .meta {\n    margin-inline-start: auto;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n    opacity: 0.7;\n  }\n\n  :host(:not(:has([slot='meta']))) .meta {\n    display: none;\n  }\n\n  /* ── Body ──────────────────────────────────────── */\n\n  .body {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    min-width: 0;\n    margin-top: var(--size-1);\n  }\n\n  /* Without heading: body moves up to share row with icon and close */\n  .alert:has(.header[hidden]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    margin-top: 0;\n  }\n\n  /* ── Content ───────────────────────────────────── */\n\n  .content {\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ── Actions ───────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    grid-row: 3;\n    grid-column: 1 / -1;\n    gap: var(--size-2);\n    margin-top: var(--size-2);\n  }\n\n  /* Without heading: actions move to row 2 */\n  .alert:has(.header[hidden]) .actions {\n    grid-row: 2;\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n\n  /* Horizontal mode: 4-column grid — icon | body | actions | close */\n  :host([horizontal]) .alert {\n    grid-template-columns: auto 1fr auto auto;\n  }\n\n  :host([horizontal]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .actions:not([hidden]) {\n    flex-wrap: nowrap;\n    grid-row: 1;\n    grid-column: 3;\n    margin-inline-start: var(--_gap);\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .close {\n    grid-column: 4;\n    align-self: center;\n  }\n\n  /* ── Close button ──────────────────────────────── */\n\n  .close {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 3;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: var(--_gap);\n    color: inherit;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    opacity: 0.7;\n    transition: var(--_motion-transition, opacity var(--transition-fast), background var(--transition-fast));\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  .close:hover {\n    background: color-mix(in srgb, currentcolor 12%, transparent);\n    opacity: 1;\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    opacity: 1;\n  }\n\n  /* Accented left border for flat and bordered variants */\n  :host([variant='flat'][accented]) .alert,\n  :host([variant='bordered'][accented]) .alert {\n    border-inline-start-width: var(--border-4, 4px);\n  }\n}\n\n@layer buildit.variants {\n  :host(:not([variant])) .alert,\n  :host([variant='flat']) .alert {\n    color: var(--_theme-base);\n    background: var(--color-canvas);\n    border-color: var(--_theme-base);\n    box-shadow: var(--shadow-none);\n  }\n\n  :host([variant='solid']) .alert {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n    box-shadow: var(--shadow-xs);\n  }\n\n  :host([variant='solid']) .close {\n    color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) .alert {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-backdrop), var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 30%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/alert/alert.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/feedback/alert/alert.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--alert-bg,var(--_theme-backdrop));--_color:var(--alert-color,var(--_theme-base));--_border-color:var(--alert-border-color,var(--_theme-border));--_radius:var(--alert-radius,var(--rounded-lg));--_padding:var(--alert-padding,var(--size-4));--_gap:var(--alert-gap,var(--size-3));--_font-size:var(--alert-font-size,var(--text-sm));--_shadow:var(--alert-shadow,var(--shadow-none));display:block}:host([dismissed]){display:none}:host([dismissing]){pointer-events:none;animation:var(--_motion-animation,bit-alert-exit var(--transition-slow,.3s) ease forwards);overflow:hidden}@keyframes bit-alert-exit{0%{max-height:600px;margin-bottom:var(--size-3);opacity:1;transform:scaleY(1)}60%{opacity:0;transform:scaleY(.8)}to{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:scaleY(0)}}.alert{row-gap:var(--size-1);padding:var(--_padding);font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--_color);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);grid-template-columns:auto 1fr auto;display:grid;overflow:hidden}.icon{grid-area:1/1;justify-content:center;align-self:start;align-items:center;display:inline-flex}.icon: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-right:var(--_gap)}.icon: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:var(--_gap)}.alert:has(.header[hidden]) .icon{align-self:center}.icon[hidden]{display:none}.header{gap:var(--size-2);grid-area:1/2;align-items:baseline;display:flex}.header[hidden]{display:none}.heading{text-overflow:ellipsis;font-weight:var(--font-semibold);line-height:var(--leading-normal);white-space:nowrap;overflow:hidden}.meta{font-size:var(--text-xs);white-space:nowrap;opacity:.7}.meta: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}.meta: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}:host(:not(:has([slot=meta]))) .meta{display:none}.body{min-width:0;margin-top:var(--size-1);grid-area:2/1/auto/-1}.alert:has(.header[hidden]) .body{grid-area:1/2;margin-top:0}.content{line-height:var(--leading-relaxed)}.actions{gap:var(--size-2);margin-top:var(--size-2);flex-wrap:wrap;grid-area:3/1/auto/-1;display:flex}.alert:has(.header[hidden]) .actions{grid-row:2}.actions[hidden]{display:none}:host([horizontal]) .alert{grid-template-columns:auto 1fr auto auto}:host([horizontal]) .body{grid-area:1/2;align-self:center;margin-top:0}:host([horizontal]) .actions:not([hidden]){flex-wrap:nowrap;grid-area:1/3;margin-top:0}:host([horizontal]) .actions:not([hidden]):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:var(--_gap)}:host([horizontal]) .actions:not([hidden]):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:var(--_gap)}:host([horizontal]) .close{grid-column:4;align-self:center}.close{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:inherit;cursor:pointer;border-radius:var(--rounded-sm);opacity:.7;transition:var(--_motion-transition,opacity var(--transition-fast), background var(--transition-fast));background:0 0;border:none;grid-area:1/3;justify-content:center;align-self:start;align-items:center;padding:0;display:inline-flex}.close: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:var(--_gap)}.close: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:var(--_gap)}.close[hidden]{display:none}.close:hover{background:color-mix(in srgb, currentcolor 12%, transparent);opacity:1}.close:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);opacity:1}:host([variant=flat][accented]) .alert: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))){border-left-width:var(--border-4,4px)}:host([variant=flat][accented]) .alert: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)){border-right-width:var(--border-4,4px)}:host([variant=bordered][accented]) .alert: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))){border-left-width:var(--border-4,4px)}:host([variant=bordered][accented]) .alert: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)){border-right-width:var(--border-4,4px)}}@layer buildit.variants{:host(:not([variant])) .alert,:host([variant=flat]) .alert{color:var(--_theme-base);background:var(--color-canvas);border-color:var(--_theme-base);box-shadow:var(--shadow-none)}:host([variant=solid]) .alert{color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base);box-shadow:var(--shadow-xs)}:host([variant=solid]) .close{color:var(--_theme-contrast)}:host([variant=bordered]) .alert{color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-backdrop), var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 30%, transparent);box-shadow:var(--inset-shadow-2xs)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=alert.css?inline.js.map

package/dist/feedback/alert/alert.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css?inline.js","names":[],"sources":["../../../src/feedback/alert/alert.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--alert-bg, var(--_theme-backdrop));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-border));\n    --_radius: var(--alert-radius, var(--rounded-lg));\n    --_padding: var(--alert-padding, var(--size-4));\n    --_gap: var(--alert-gap, var(--size-3));\n    --_font-size: var(--alert-font-size, var(--text-sm));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n\n    display: block;\n  }\n\n  :host([dismissed]) {\n    display: none;\n  }\n\n  :host([dismissing]) {\n    overflow: hidden;\n    pointer-events: none;\n    animation: var(--_motion-animation, bit-alert-exit var(--transition-slow, 0.3s) ease forwards);\n  }\n\n  @keyframes bit-alert-exit {\n    0% {\n      /* Use a large enough value to cover any realistic alert height. */\n      max-height: 600px;\n      margin-bottom: var(--size-3);\n      opacity: 1;\n      transform: scaleY(1);\n    }\n\n    60% {\n      opacity: 0;\n      transform: scaleY(0.8);\n    }\n\n    100% {\n      max-height: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-bottom: 0;\n      opacity: 0;\n      transform: scaleY(0);\n    }\n  }\n\n  .alert {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    row-gap: var(--size-1);\n    padding: var(--_padding);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal);\n  }\n\n  /* ── Icon ──────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 1;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    margin-inline-end: var(--_gap);\n  }\n\n  /* Without heading: icon aligns with the body content */\n  .alert:has(.header[hidden]) .icon {\n    align-self: center;\n  }\n\n  .icon[hidden] {\n    display: none;\n  }\n\n  /* ── Header row (heading + meta) ───────────────── */\n\n  .header {\n    display: flex;\n    grid-row: 1;\n    grid-column: 2;\n    gap: var(--size-2);\n    align-items: baseline;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .heading {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n  }\n\n  .meta {\n    margin-inline-start: auto;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n    opacity: 0.7;\n  }\n\n  :host(:not(:has([slot='meta']))) .meta {\n    display: none;\n  }\n\n  /* ── Body ──────────────────────────────────────── */\n\n  .body {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    min-width: 0;\n    margin-top: var(--size-1);\n  }\n\n  /* Without heading: body moves up to share row with icon and close */\n  .alert:has(.header[hidden]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    margin-top: 0;\n  }\n\n  /* ── Content ───────────────────────────────────── */\n\n  .content {\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ── Actions ───────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    grid-row: 3;\n    grid-column: 1 / -1;\n    gap: var(--size-2);\n    margin-top: var(--size-2);\n  }\n\n  /* Without heading: actions move to row 2 */\n  .alert:has(.header[hidden]) .actions {\n    grid-row: 2;\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n\n  /* Horizontal mode: 4-column grid — icon | body | actions | close */\n  :host([horizontal]) .alert {\n    grid-template-columns: auto 1fr auto auto;\n  }\n\n  :host([horizontal]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .actions:not([hidden]) {\n    flex-wrap: nowrap;\n    grid-row: 1;\n    grid-column: 3;\n    margin-inline-start: var(--_gap);\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .close {\n    grid-column: 4;\n    align-self: center;\n  }\n\n  /* ── Close button ──────────────────────────────── */\n\n  .close {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 3;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: var(--_gap);\n    color: inherit;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    opacity: 0.7;\n    transition: var(--_motion-transition, opacity var(--transition-fast), background var(--transition-fast));\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  .close:hover {\n    background: color-mix(in srgb, currentcolor 12%, transparent);\n    opacity: 1;\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    opacity: 1;\n  }\n\n  /* Accented left border for flat and bordered variants */\n  :host([variant='flat'][accented]) .alert,\n  :host([variant='bordered'][accented]) .alert {\n    border-inline-start-width: var(--border-4, 4px);\n  }\n}\n\n@layer buildit.variants {\n  :host(:not([variant])) .alert,\n  :host([variant='flat']) .alert {\n    color: var(--_theme-base);\n    background: var(--color-canvas);\n    border-color: var(--_theme-base);\n    box-shadow: var(--shadow-none);\n  }\n\n  :host([variant='solid']) .alert {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n    box-shadow: var(--shadow-xs);\n  }\n\n  :host([variant='solid']) .close {\n    color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) .alert {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-backdrop), var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 30%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/alert/alert.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentSize, RoundedSize, ThemeColor } from '../../types';
+export type BitAlertEvents = {
+    dismiss: {
+        originalEvent: MouseEvent;
+    };
+};
+export type BitAlertProps = {
+    /** Show a left accent border (for flat/bordered variants) */
+    accented?: boolean;
+    /** Theme color */
+    color?: ThemeColor;
+    /** Show a dismissable (×) button */
+    dismissible?: boolean;
+    /** Heading text shown above the content */
+    heading?: string;
+    /** Position action buttons to the right instead of below */
+    horizontal?: boolean;
+    /** Border radius */
+    rounded?: RoundedSize | '';
+    /** Alert size */
+    size?: ComponentSize;
+    /** Visual style variant */
+    variant?: 'solid' | 'flat' | 'bordered';
+};
+/**
+ * A status/feedback banner with optional heading, icon slot, and dismiss button.
+ *
+ * @element bit-alert
+ *
+ * @attr {string} color - Theme color (primary/success/warning/error…)
+ * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius size
+ * @attr {string} heading - Bold heading text above the content
+ * @attr {boolean} dismissible - Show a close (×) button
+ * @attr {boolean} accented - Add a left accent border (flat/bordered only)
+ * @attr {boolean} horizontal - Position action buttons to the right instead of below
+ *
+ * @fires dismiss - Fired when the alert is dismissed
+ *
+ * @slot - Default slot for the alert message content
+ * @slot icon - Icon on the left side
+ * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)
+ * @slot actions - Action buttons shown below the message
+ *
+ * @cssprop --alert-bg - Background color
+ * @cssprop --alert-color - Text/icon color
+ * @cssprop --alert-border-color - Border color
+ * @cssprop --alert-radius - Border radius
+ * @cssprop --alert-padding - Padding
+ * @cssprop --alert-gap - Gap between icon, body, and close button
+ * @cssprop --alert-font-size - Font size
+ *
+ * @example
+ * ```html
+ * <bit-alert color="success">Your changes have been saved.</bit-alert>
+ * <bit-alert color="error" variant="solid" dismissible heading="Something went wrong">
+ *   Please try again later.
+ * </bit-alert>
+ * ```
+ */
+export declare const ALERT_TAG: string;
+//# sourceMappingURL=alert.d.ts.map

package/dist/feedback/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/feedback/alert/alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,SAAS,QA4EpB,CAAC"}

package/dist/feedback/badge/badge.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border));--_radius:var(--badge-radius,var(--rounded-full));--_font-size:var(--badge-font-size,var(--text-xs));--_font-weight:var(--badge-font-weight,var(--font-semibold));--_padding-x:var(--badge-padding-x,var(--size-1-5));--_padding-y:var(--badge-padding-y,var(--size-0-5));--_gap:var(--badge-gap,var(--size-1));vertical-align:middle;display:inline-flex}.badge{gap:var(--_gap);min-width:var(--size-2);max-width:var(--badge-max-width,24ch);padding:var(--_padding-y) var(--_padding-x);text-overflow:ellipsis;font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}}@layer buildit.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--badge-bg,var(--_theme-base));--_color:var(--badge-color,var(--_theme-contrast));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([variant=flat]){--_bg:var(--badge-bg,color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100)));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,color-mix(in srgb, var(--_theme-focus) 20%, transparent))}:host([variant=bordered]){--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border))}:host([variant=outline]){--_bg:var(--badge-bg,transparent);--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([dot]) .badge{min-width:unset;padding:var(--size-1);line-height:0}}@layer buildit.overrides{:host([dot]){--_bg:var(--badge-bg,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([anchor]){display:inline-flex;position:relative}:host{--_dir:1}:host(:dir(rtl)){--_dir:-1}:host([anchor]) .badge{z-index:1;transform:translate(calc(var(--_dir) * 50%), -50%);position:absolute;top:0}:host([anchor]) .badge: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))){right:0}:host([anchor]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host([anchor=top-start]) .badge{transform:translate(calc(var(--_dir) * -50%), -50%)}:host([anchor=top-start]) .badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0;right:unset}:host([anchor=top-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}:host([anchor=bottom-end]) .badge{top:unset;transform:translate(calc(var(--_dir) * 50%), 50%);bottom:0}:host([anchor=bottom-start]) .badge{top:unset;transform:translate(calc(var(--_dir) * -50%), 50%);bottom:0}:host([anchor=bottom-start]) .badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0;right:unset}:host([anchor=bottom-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}}`;exports.default=e;
+//# sourceMappingURL=badge.css?inline.cjs.map

package/dist/feedback/badge/badge.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.css?inline.cjs","names":[],"sources":["../../../src/feedback/badge/badge.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n    --_radius: var(--badge-radius, var(--rounded-full));\n    --_font-size: var(--badge-font-size, var(--text-xs));\n    --_font-weight: var(--badge-font-weight, var(--font-semibold));\n    --_padding-x: var(--badge-padding-x, var(--size-1-5));\n    --_padding-y: var(--badge-padding-y, var(--size-0-5));\n    --_gap: var(--badge-gap, var(--size-1));\n\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .badge {\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n\n    /* Dot-only (no text slot) gets circular shape */\n    min-width: var(--size-2);\n    max-width: var(--badge-max-width, 24ch);\n    padding: var(--_padding-y) var(--_padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_color: var(--badge-color, var(--_theme-contrast));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) {\n    --_bg: var(--badge-bg, color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100)));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, color-mix(in srgb, var(--_theme-focus) 20%, transparent));\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--badge-bg, transparent);\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Dot-only mode */\n  :host([dot]) .badge {\n    min-width: unset;\n    padding: var(--size-1);\n    line-height: 0;\n  }\n}\n\n@layer buildit.overrides {\n  /* Dot — always force badge background and border regardless of variant */\n  :host([dot]) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* ========================================\n       Anchor overlay mode\n       ======================================== */\n\n  :host([anchor]) {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /*\n     * Per-direction multiplier: +1 in LTR, -1 in RTL.\n     * Used to flip the translateX offset so the badge always overflows\n     * the correct physical edge that corresponds to its logical corner.\n     */\n  :host {\n    --_dir: 1;\n  }\n\n  :host(:dir(rtl)) {\n    --_dir: -1;\n  }\n\n  /* Default position: top-end */\n  :host([anchor]) .badge {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n    z-index: 1;\n    transform: translate(calc(var(--_dir) * 50%), -50%);\n  }\n\n  :host([anchor='top-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    transform: translate(calc(var(--_dir) * -50%), -50%);\n  }\n\n  :host([anchor='bottom-end']) .badge {\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * 50%), 50%);\n  }\n\n  :host([anchor='bottom-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * -50%), 50%);\n  }\n}\n"],"mappings":""}

package/dist/feedback/badge/badge.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/feedback/badge/badge.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border));--_radius:var(--badge-radius,var(--rounded-full));--_font-size:var(--badge-font-size,var(--text-xs));--_font-weight:var(--badge-font-weight,var(--font-semibold));--_padding-x:var(--badge-padding-x,var(--size-1-5));--_padding-y:var(--badge-padding-y,var(--size-0-5));--_gap:var(--badge-gap,var(--size-1));vertical-align:middle;display:inline-flex}.badge{gap:var(--_gap);min-width:var(--size-2);max-width:var(--badge-max-width,24ch);padding:var(--_padding-y) var(--_padding-x);text-overflow:ellipsis;font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}}@layer buildit.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--badge-bg,var(--_theme-base));--_color:var(--badge-color,var(--_theme-contrast));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([variant=flat]){--_bg:var(--badge-bg,color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100)));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,color-mix(in srgb, var(--_theme-focus) 20%, transparent))}:host([variant=bordered]){--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border))}:host([variant=outline]){--_bg:var(--badge-bg,transparent);--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([dot]) .badge{min-width:unset;padding:var(--size-1);line-height:0}}@layer buildit.overrides{:host([dot]){--_bg:var(--badge-bg,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([anchor]){display:inline-flex;position:relative}:host{--_dir:1}:host(:dir(rtl)){--_dir:-1}:host([anchor]) .badge{z-index:1;transform:translate(calc(var(--_dir) * 50%), -50%);position:absolute;top:0}:host([anchor]) .badge: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))){right:0}:host([anchor]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host([anchor=top-start]) .badge{transform:translate(calc(var(--_dir) * -50%), -50%)}:host([anchor=top-start]) .badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0;right:unset}:host([anchor=top-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}:host([anchor=bottom-end]) .badge{top:unset;transform:translate(calc(var(--_dir) * 50%), 50%);bottom:0}:host([anchor=bottom-start]) .badge{top:unset;transform:translate(calc(var(--_dir) * -50%), 50%);bottom:0}:host([anchor=bottom-start]) .badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0;right:unset}:host([anchor=bottom-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=badge.css?inline.js.map

package/dist/feedback/badge/badge.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.css?inline.js","names":[],"sources":["../../../src/feedback/badge/badge.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n    --_radius: var(--badge-radius, var(--rounded-full));\n    --_font-size: var(--badge-font-size, var(--text-xs));\n    --_font-weight: var(--badge-font-weight, var(--font-semibold));\n    --_padding-x: var(--badge-padding-x, var(--size-1-5));\n    --_padding-y: var(--badge-padding-y, var(--size-0-5));\n    --_gap: var(--badge-gap, var(--size-1));\n\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .badge {\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n\n    /* Dot-only (no text slot) gets circular shape */\n    min-width: var(--size-2);\n    max-width: var(--badge-max-width, 24ch);\n    padding: var(--_padding-y) var(--_padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_color: var(--badge-color, var(--_theme-contrast));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) {\n    --_bg: var(--badge-bg, color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100)));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, color-mix(in srgb, var(--_theme-focus) 20%, transparent));\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--badge-bg, transparent);\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Dot-only mode */\n  :host([dot]) .badge {\n    min-width: unset;\n    padding: var(--size-1);\n    line-height: 0;\n  }\n}\n\n@layer buildit.overrides {\n  /* Dot — always force badge background and border regardless of variant */\n  :host([dot]) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* ========================================\n       Anchor overlay mode\n       ======================================== */\n\n  :host([anchor]) {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /*\n     * Per-direction multiplier: +1 in LTR, -1 in RTL.\n     * Used to flip the translateX offset so the badge always overflows\n     * the correct physical edge that corresponds to its logical corner.\n     */\n  :host {\n    --_dir: 1;\n  }\n\n  :host(:dir(rtl)) {\n    --_dir: -1;\n  }\n\n  /* Default position: top-end */\n  :host([anchor]) .badge {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n    z-index: 1;\n    transform: translate(calc(var(--_dir) * 50%), -50%);\n  }\n\n  :host([anchor='top-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    transform: translate(calc(var(--_dir) * -50%), -50%);\n  }\n\n  :host([anchor='bottom-end']) .badge {\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * 50%), 50%);\n  }\n\n  :host([anchor='bottom-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * -50%), 50%);\n  }\n}\n"],"mappings":""}