@vielzeug/buildit 2.0.0 → 2.1.0

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

@@ -1 +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":""}
+{"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  :host([variant='bordered'][orientation='vertical']) [role='tablist'] {\n    border-right: none;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n  }\n\n  :host([variant='bordered'][orientation='vertical']) .panels {\n    border-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\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

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

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

@@ -1 +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":""}
+{"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  :host([variant='bordered'][orientation='vertical']) [role='tablist'] {\n    border-right: none;\n    border-bottom: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n  }\n\n  :host([variant='bordered'][orientation='vertical']) .panels {\n    border-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\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

@@ -39,13 +39,15 @@ export type BitTabsProps = {
  * Tabs container. Manages tab selection and syncs state to child tab items and panels.
  *
  * @element bit-tabs
+ * @element bit-tab-item - Child element for tab buttons (auto-discovered)
+ * @element bit-tab-panel - Child element for tab content (auto-discovered)
  *
  * @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 }
+ * @fires change - Emitted when the active tab changes with detail: { value: string }
  *
  * @slot tabs - Place `bit-tab-item` elements here
  * @slot - Place `bit-tab-panel` elements here

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

@@ -1 +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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5E,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;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,QAwPnB,CAAC"}

package/dist/drawer.cjs

@@ -1,11 +1,11 @@
-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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./packages/craftit/dist/controls/overlay-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const 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.define)(`bit-drawer`,{props:{backdrop:void 0,dismissible:!0,"initial-focus":void 0,label:void 0,open:!1,persistent:!1,placement:`right`,"return-focus":!0,size:void 0,title: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.signal)(!1),f=`programmatic`,p=(0,o.computed)(()=>s.has(`header`).value||!!a.title.value||a.dismissible.value),m=(0,o.computed)(()=>s.has(`footer`).value),{applyInitialFocus:h,captureReturnFocus:g,restoreFocus:_}=i.useOverlay(t.el,l,()=>u.value,a),v=e=>{l.value&&o.fire.custom(t.el,`close-request`,{cancelable:!0,detail:{placement:a.placement.value??`right`,reason:e}})&&(f=e,y.close(e,!1))},y=n.i({elements:{boundary:t.el,panel:u.value},isOpen:d,onOpen:t=>e(`open`,{placement:a.placement.value??`right`,reason:t}),setOpen:(e,n)=>{let i=l.value;if(i){if(e){if(i.open)return;g(),i.showModal(),r.lockBackground(t.el),h(),d.value=!0;return}if(i.open){f=n,i.close();return}d.value=!1}}});return(0,o.onMount)(()=>{let n=l.value;if(!n)return;let i=t.el;return i.show=()=>{y.open(`programmatic`)},i.hide=()=>{y.close(`programmatic`,!1)},(0,o.watch)(a.open,e=>{if(e){y.open(`programmatic`);return}y.close(`programmatic`,!1)},{immediate:!0}),(0,o.handle)(n,`close`,()=>{r.unlockBackground(),t.el.removeAttribute(`open`),d.value=!1,_(),e(`close`,{placement:a.placement.value??`right`,reason:f}),f=`programmatic`}),(0,o.handle)(n,`cancel`,e=>{e.preventDefault(),!a.persistent.value&&v(`escape`)}),(0,o.handle)(n,`click`,e=>{a.persistent.value||e.target===n&&v(`outside-click`)}),()=>{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}>
+          <div class="header" part="header" ?hidden=${()=>!p.value}>
             <span class="header-title" id="${c}">
               <slot name="header">${()=>a.title.value??``}</slot>
             </span>
@@ -14,18 +14,18 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               part="close-btn"
               type="button"
               aria-label="Close"
-              ?hidden=${()=>!a.dismissable.value}
-              @click="${()=>_(`button`)}">
-              ${n.closeIcon}
+              ?hidden=${()=>!a.dismissible.value}
+              @click="${()=>{l.value&&v(`trigger`)}}">
+              <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
             </button>
           </div>
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${()=>!f.value}>
+          <div class="footer" part="footer" ?hidden=${()=>!m.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;
+    `},styles:[t.elevationMixin,t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,a.default]});exports.DRAWER_TAG=s;
 //# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -1 +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"}
+{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayCloseReason, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, createId, fire, handle, html, onMount, ref, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\n\nimport '../../content/icon/icon';\nimport { type PropBundle } from '../../inputs/shared/bundles';\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: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { 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  dismissible?: 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} dismissible - 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 with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, reason }\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 */\n\n/** Event schema for bit-drawer. */\n\nconst drawerProps = {\n  backdrop: undefined,\n  dismissible: true,\n  'initial-focus': undefined,\n  label: undefined,\n  open: false,\n  persistent: false,\n  placement: 'right',\n  'return-focus': true,\n  size: undefined,\n  title: undefined,\n} satisfies PropBundle<BitDrawerProps>;\n\nexport const DRAWER_TAG = define<BitDrawerProps, BitDrawerEvents>('bit-drawer', {\n  props: drawerProps,\n  setup({ emit, host, props, slots }) {\n    const drawerLabelId = createId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n    const isOpen = signal(false);\n    let closeReason: OverlayCloseReason = 'programmatic';\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.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { applyInitialFocus, captureReturnFocus, restoreFocus } = useOverlay(\n      host.el,\n      dialogRef,\n      () => panelRef.value,\n      props,\n    );\n\n    const requestClose = (reason: Exclude<OverlayCloseReason, 'programmatic'>) => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      const closeAllowed = fire.custom(host.el, 'close-request', {\n        cancelable: true,\n        detail: { placement: props.placement.value ?? 'right', reason },\n      });\n\n      if (!closeAllowed) return;\n\n      closeReason = reason;\n\n      overlay.close(reason, false);\n    };\n\n    const overlay = createOverlayControl({\n      elements: {\n        boundary: host.el,\n        panel: panelRef.value,\n      },\n      isOpen,\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      setOpen: (next, reason) => {\n        const dialog = dialogRef.value;\n\n        if (!dialog) return;\n\n        if (next) {\n          if (dialog.open) return;\n\n          captureReturnFocus();\n          dialog.showModal();\n          lockBackground(host.el);\n          applyInitialFocus();\n          isOpen.value = true;\n\n          return;\n        }\n\n        if (dialog.open) {\n          closeReason = reason as OverlayCloseReason;\n          dialog.close();\n\n          return;\n        }\n\n        isOpen.value = false;\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const el = host.el as DrawerElement;\n\n      el.show = () => {\n        overlay.open('programmatic');\n      };\n\n      el.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Native Close, Escape, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.el.removeAttribute('open');\n        isOpen.value = false;\n        restoreFocus();\n        emit('close', { placement: props.placement.value ?? 'right', reason: closeReason });\n        closeReason = 'programmatic';\n      };\n\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n\n        if (props.persistent.value) return;\n\n        requestClose('escape');\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outside-click');\n      };\n\n      // Sync open prop → native dialog\n      watch(\n        props.open,\n        (isOpen) => {\n          if (isOpen) {\n            overlay.open('programmatic');\n\n            return;\n          }\n\n          overlay.close('programmatic', false);\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.dismissible.value}\n              @click=\"${() => {\n                const dialog = dialogRef.value;\n\n                if (!dialog) return;\n\n                requestClose('trigger');\n              }}\">\n              <bit-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"iiBA2HA,IAAa,GAAA,EAAA,EAAA,QAAqD,aAAc,CAC9E,MAdkB,CAClB,SAAU,IAAA,GACV,YAAa,GACb,gBAAiB,IAAA,GACjB,MAAO,IAAA,GACP,KAAM,GACN,WAAY,GACZ,UAAW,QACX,eAAgB,GAChB,KAAM,IAAA,GACN,MAAO,IAAA,GACR,CAIC,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAClC,IAAM,GAAA,EAAA,EAAA,UAAyB,eAAe,CACxC,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,MAAgC,CAChC,GAAA,EAAA,EAAA,QAAgB,GAAM,CACxB,EAAkC,eAGhC,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,CAMrD,CAAE,oBAAmB,qBAAoB,gBAAiB,EAAA,WAC9D,EAAK,GACL,MACM,EAAS,MACf,EACD,CAEK,EAAgB,GAAwD,CAC7D,EAAU,OAIJ,EAAA,KAAK,OAAO,EAAK,GAAI,gBAAiB,CACzD,WAAY,GACZ,OAAQ,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,SAAQ,CAChE,CAAC,GAIF,EAAc,EAEd,EAAQ,MAAM,EAAQ,GAAM,GAGxB,EAAU,EAAA,EAAqB,CACnC,SAAU,CACR,SAAU,EAAK,GACf,MAAO,EAAS,MACjB,CACD,SACA,OAAS,GAAW,EAAK,OAAQ,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,SAAQ,CAAC,CACzF,SAAU,EAAM,IAAW,CACzB,IAAM,EAAS,EAAU,MAEpB,KAEL,IAAI,EAAM,CACR,GAAI,EAAO,KAAM,OAEjB,GAAoB,CACpB,EAAO,WAAW,CAClB,EAAA,eAAe,EAAK,GAAG,CACvB,GAAmB,CACnB,EAAO,MAAQ,GAEf,OAGF,GAAI,EAAO,KAAM,CACf,EAAc,EACd,EAAO,OAAO,CAEd,OAGF,EAAO,MAAQ,KAElB,CAAC,CA8EF,OAxEA,EAAA,EAAA,aAAc,CACZ,IAAM,EAAS,EAAU,MAEzB,GAAI,CAAC,EAAQ,OAGb,IAAM,EAAK,EAAK,GA0DhB,MAxDA,GAAG,SAAa,CACd,EAAQ,KAAK,eAAe,EAG9B,EAAG,SAAa,CACd,EAAQ,MAAM,eAAgB,GAAM,GAiCtC,EAAA,EAAA,OACE,EAAM,KACL,GAAW,CACV,GAAI,EAAQ,CACV,EAAQ,KAAK,eAAe,CAE5B,OAGF,EAAQ,MAAM,eAAgB,GAAM,EAEtC,CAAE,UAAW,GAAM,CACpB,EAED,EAAA,EAAA,QAAO,EAAQ,YAxCiB,CAC9B,EAAA,kBAAkB,CAClB,EAAK,GAAG,gBAAgB,OAAO,CAC/B,EAAO,MAAQ,GACf,GAAc,CACd,EAAK,QAAS,CAAE,UAAW,EAAM,UAAU,OAAS,QAAS,OAAQ,EAAa,CAAC,CACnF,EAAc,gBAkC0B,EAC1C,EAAA,EAAA,QAAO,EAAQ,SAhCO,GAAa,CACjC,EAAE,gBAAgB,CAEd,GAAM,WAAW,OAErB,EAAa,SAAS,EA2Bc,EACtC,EAAA,EAAA,QAAO,EAAQ,QAzBc,GAAkB,CACzC,EAAM,WAAW,OAEjB,EAAE,SAAW,GAEjB,EAAa,gBAAgB,EAoBa,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,CACC,EAAU,OAIzB,EAAa,UAAU,EACvB;;;;;;;0DAO4C,CAAC,EAAU,MAAM;;;;;OAO3E,OAAQ,CAAC,EAAA,eAAgB,EAAA,kBAAmB,EAAA,mBAAoB,EAAA,mBAAoB,EAAA,QAAO,CAC5F,CAAC"}

package/dist/drawer.js

@@ -1,54 +1,85 @@
+import "./icon.js";
 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 { i } from "./packages/craftit/dist/controls/overlay-control.js";
+import "./packages/craftit/dist/controls.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({
+import { computed as l, createId as u, define as d, fire as f, handle as p, html as m, onMount as h, ref as g, signal as _, watch as v } from "@vielzeug/craftit";
+var y = d("bit-drawer", {
 	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 }
+		backdrop: void 0,
+		dismissible: !0,
+		"initial-focus": void 0,
+		label: void 0,
+		open: !1,
+		persistent: !1,
+		placement: "right",
+		"return-focus": !0,
+		size: void 0,
+		title: 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", {
+		let c = u("drawer-label"), d = g(), y = g(), b = _(!1), x = "programmatic", S = l(() => r.has("header").value || !!n.title.value || n.dismissible.value), C = l(() => r.has("footer").value), { applyInitialFocus: w, captureReturnFocus: T, restoreFocus: E } = s(t.el, d, () => y.value, n), D = (e) => {
+			d.value && f.custom(t.el, "close-request", {
 				cancelable: !0,
 				detail: {
 					placement: n.placement.value ?? "right",
-					trigger: e
+					reason: e
 				}
-			}) && w();
-		}, E = () => {
-			let r = d.value;
-			!r || r.open || (S(), r.showModal(), a(t), x(), e("open", { placement: n.placement.value ?? "right" }));
-		};
+			}) && (x = e, O.close(e, !1));
+		}, O = i({
+			elements: {
+				boundary: t.el,
+				panel: y.value
+			},
+			isOpen: b,
+			onOpen: (t) => e("open", {
+				placement: n.placement.value ?? "right",
+				reason: t
+			}),
+			setOpen: (e, n) => {
+				let r = d.value;
+				if (r) {
+					if (e) {
+						if (r.open) return;
+						T(), r.showModal(), a(t.el), w(), b.value = !0;
+						return;
+					}
+					if (r.open) {
+						x = n, r.close();
+						return;
+					}
+					b.value = !1;
+				}
+			}
+		});
 		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();
+			let i = t.el;
+			return i.show = () => {
+				O.open("programmatic");
+			}, i.hide = () => {
+				O.close("programmatic", !1);
+			}, v(n.open, (e) => {
+				if (e) {
+					O.open("programmatic");
+					return;
+				}
+				O.close("programmatic", !1);
 			}, { immediate: !0 }), p(r, "close", () => {
-				o(), t.removeAttribute("open"), C(), e("close", { placement: n.placement.value ?? "right" });
+				o(), t.el.removeAttribute("open"), b.value = !1, E(), e("close", {
+					placement: n.placement.value ?? "right",
+					reason: x
+				}), x = "programmatic";
 			}), p(r, "cancel", (e) => {
-				e.preventDefault(), n.persistent.value || T("escape");
+				e.preventDefault(), !n.persistent.value && D("escape");
 			}), p(r, "click", (e) => {
-				!n.persistent.value && e.target === r && T("backdrop");
+				n.persistent.value || e.target === r && D("outside-click");
 			}), () => {
 				r.open && (o(), r.close());
 			};
@@ -58,8 +89,8 @@ var v = 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}>
+        <div class="panel" part="panel" ref=${y}>
+          <div class="header" part="header" ?hidden=${() => !S.value}>
             <span class="header-title" id="${c}">
               <slot name="header">${() => n.title.value ?? ""}</slot>
             </span>
@@ -68,15 +99,17 @@ var v = d({
               part="close-btn"
               type="button"
               aria-label="Close"
-              ?hidden=${() => !n.dismissable.value}
-              @click="${() => T("button")}">
-              ${i}
+              ?hidden=${() => !n.dismissible.value}
+              @click="${() => {
+			d.value && D("trigger");
+		}}">
+              <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
             </button>
           </div>
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${() => !b.value}>
+          <div class="footer" part="footer" ?hidden=${() => !C.value}>
             <slot name="footer"></slot>
           </div>
         </div>
@@ -89,10 +122,9 @@ var v = d({
 		e,
 		t,
 		c
-	],
-	tag: "bit-drawer"
+	]
 });
 //#endregion
-export { v as DRAWER_TAG };
+export { y as DRAWER_TAG };
 
 //# sourceMappingURL=drawer.js.map

package/dist/drawer.js.map

@@ -1 +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"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import type { OverlayCloseDetail, OverlayCloseReason, OverlayOpenDetail } from '@vielzeug/craftit/controls';\n\nimport { define, computed, createId, fire, handle, html, onMount, ref, signal, watch } from '@vielzeug/craftit';\nimport { createOverlayControl } from '@vielzeug/craftit/controls';\n\nimport '../../content/icon/icon';\nimport { type PropBundle } from '../../inputs/shared/bundles';\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: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { 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  dismissible?: 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} dismissible - 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 with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, reason }\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 */\n\n/** Event schema for bit-drawer. */\n\nconst drawerProps = {\n  backdrop: undefined,\n  dismissible: true,\n  'initial-focus': undefined,\n  label: undefined,\n  open: false,\n  persistent: false,\n  placement: 'right',\n  'return-focus': true,\n  size: undefined,\n  title: undefined,\n} satisfies PropBundle<BitDrawerProps>;\n\nexport const DRAWER_TAG = define<BitDrawerProps, BitDrawerEvents>('bit-drawer', {\n  props: drawerProps,\n  setup({ emit, host, props, slots }) {\n    const drawerLabelId = createId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n    const isOpen = signal(false);\n    let closeReason: OverlayCloseReason = 'programmatic';\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.dismissible.value);\n    const hasFooter = computed(() => slots.has('footer').value);\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { applyInitialFocus, captureReturnFocus, restoreFocus } = useOverlay(\n      host.el,\n      dialogRef,\n      () => panelRef.value,\n      props,\n    );\n\n    const requestClose = (reason: Exclude<OverlayCloseReason, 'programmatic'>) => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      const closeAllowed = fire.custom(host.el, 'close-request', {\n        cancelable: true,\n        detail: { placement: props.placement.value ?? 'right', reason },\n      });\n\n      if (!closeAllowed) return;\n\n      closeReason = reason;\n\n      overlay.close(reason, false);\n    };\n\n    const overlay = createOverlayControl({\n      elements: {\n        boundary: host.el,\n        panel: panelRef.value,\n      },\n      isOpen,\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      setOpen: (next, reason) => {\n        const dialog = dialogRef.value;\n\n        if (!dialog) return;\n\n        if (next) {\n          if (dialog.open) return;\n\n          captureReturnFocus();\n          dialog.showModal();\n          lockBackground(host.el);\n          applyInitialFocus();\n          isOpen.value = true;\n\n          return;\n        }\n\n        if (dialog.open) {\n          closeReason = reason as OverlayCloseReason;\n          dialog.close();\n\n          return;\n        }\n\n        isOpen.value = false;\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMount(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const el = host.el as DrawerElement;\n\n      el.show = () => {\n        overlay.open('programmatic');\n      };\n\n      el.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Native Close, Escape, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n\n      const handleNativeClose = () => {\n        unlockBackground();\n        host.el.removeAttribute('open');\n        isOpen.value = false;\n        restoreFocus();\n        emit('close', { placement: props.placement.value ?? 'right', reason: closeReason });\n        closeReason = 'programmatic';\n      };\n\n      const handleCancel = (e: Event) => {\n        e.preventDefault();\n\n        if (props.persistent.value) return;\n\n        requestClose('escape');\n      };\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outside-click');\n      };\n\n      // Sync open prop → native dialog\n      watch(\n        props.open,\n        (isOpen) => {\n          if (isOpen) {\n            overlay.open('programmatic');\n\n            return;\n          }\n\n          overlay.close('programmatic', false);\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.dismissible.value}\n              @click=\"${() => {\n                const dialog = dialogRef.value;\n\n                if (!dialog) return;\n\n                requestClose('trigger');\n              }}\">\n              <bit-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter.value}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;;;;AA2HA,IAAa,IAAa,EAAwC,cAAc;CAC9E,OAdkB;EAClB,UAAU,KAAA;EACV,aAAa;EACb,iBAAiB,KAAA;EACjB,OAAO,KAAA;EACP,MAAM;EACN,YAAY;EACZ,WAAW;EACX,gBAAgB;EAChB,MAAM,KAAA;EACN,OAAO,KAAA;EACR;CAIC,MAAM,EAAE,SAAM,SAAM,UAAO,YAAS;EAClC,IAAM,IAAgB,EAAS,eAAe,EACxC,IAAY,GAAwB,EACpC,IAAW,GAAqB,EAChC,IAAS,EAAO,GAAM,EACxB,IAAkC,gBAGhC,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC,EAAM,MAAM,SAAS,EAAM,YAAY,MAAM,EACvG,IAAY,QAAe,EAAM,IAAI,SAAS,CAAC,MAAM,EAMrD,EAAE,sBAAmB,uBAAoB,oBAAiB,EAC9D,EAAK,IACL,SACM,EAAS,OACf,EACD,EAEK,KAAgB,MAAwD;AAC7D,KAAU,SAIJ,EAAK,OAAO,EAAK,IAAI,iBAAiB;IACzD,YAAY;IACZ,QAAQ;KAAE,WAAW,EAAM,UAAU,SAAS;KAAS;KAAQ;IAChE,CAAC,KAIF,IAAc,GAEd,EAAQ,MAAM,GAAQ,GAAM;KAGxB,IAAU,EAAqB;GACnC,UAAU;IACR,UAAU,EAAK;IACf,OAAO,EAAS;IACjB;GACD;GACA,SAAS,MAAW,EAAK,QAAQ;IAAE,WAAW,EAAM,UAAU,SAAS;IAAS;IAAQ,CAAC;GACzF,UAAU,GAAM,MAAW;IACzB,IAAM,IAAS,EAAU;AAEpB,WAEL;SAAI,GAAM;AACR,UAAI,EAAO,KAAM;AAMjB,MAJA,GAAoB,EACpB,EAAO,WAAW,EAClB,EAAe,EAAK,GAAG,EACvB,GAAmB,EACnB,EAAO,QAAQ;AAEf;;AAGF,SAAI,EAAO,MAAM;AAEf,MADA,IAAc,GACd,EAAO,OAAO;AAEd;;AAGF,OAAO,QAAQ;;;GAElB,CAAC;AA8EF,SAxEA,QAAc;GACZ,IAAM,IAAS,EAAU;AAEzB,OAAI,CAAC,EAAQ;GAGb,IAAM,IAAK,EAAK;AA0DhB,UAxDA,EAAG,aAAa;AACd,MAAQ,KAAK,eAAe;MAG9B,EAAG,aAAa;AACd,MAAQ,MAAM,gBAAgB,GAAM;MAiCtC,EACE,EAAM,OACL,MAAW;AACV,QAAI,GAAQ;AACV,OAAQ,KAAK,eAAe;AAE5B;;AAGF,MAAQ,MAAM,gBAAgB,GAAM;MAEtC,EAAE,WAAW,IAAM,CACpB,EAED,EAAO,GAAQ,eAxCiB;AAM9B,IALA,GAAkB,EAClB,EAAK,GAAG,gBAAgB,OAAO,EAC/B,EAAO,QAAQ,IACf,GAAc,EACd,EAAK,SAAS;KAAE,WAAW,EAAM,UAAU,SAAS;KAAS,QAAQ;KAAa,CAAC,EACnF,IAAc;KAkC0B,EAC1C,EAAO,GAAQ,WAhCO,MAAa;AACjC,MAAE,gBAAgB,EAEd,GAAM,WAAW,SAErB,EAAa,SAAS;KA2Bc,EACtC,EAAO,GAAQ,UAzBc,MAAkB;AACzC,MAAM,WAAW,SAEjB,EAAE,WAAW,KAEjB,EAAa,gBAAgB;KAoBa,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;AACC,KAAU,SAIzB,EAAa,UAAU;IACvB;;;;;;;4DAO4C,CAAC,EAAU,MAAM;;;;;;;CAO3E,QAAQ;EAAC;EAAgB;EAAmB;EAAoB;EAAoB;EAAO;CAC5F,CAAC"}

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

@@ -1,4 +1,5 @@
 import type { ComponentSize, RoundedSize, ThemeColor } from '../../types';
+import '../../content/icon/icon';
 export type BitAlertEvents = {
     dismiss: {
         originalEvent: MouseEvent;
@@ -9,7 +10,7 @@ export type BitAlertProps = {
     accented?: boolean;
     /** Theme color */
     color?: ThemeColor;
-    /** Show a dismissable (×) button */
+    /** Show a dismissible (×) button */
     dismissible?: boolean;
     /** Heading text shown above the content */
     heading?: string;

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

@@ -1 +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"}
+{"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;AAE1E,OAAO,yBAAyB,CAAC;AAMjC,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,QA+DpB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_color:var(--async-color,var(--color-contrast-500));--_icon-size:var(--async-icon-size,var(--size-12));--_gap:var(--async-gap,var(--size-3));display:block}.region{display:block}.empty-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--_color);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.4;justify-content:center;align-items:center;display:flex}.empty-state .icon svg{width:100%;height:100%}.empty-state .icon bit-icon{width:100%;height:100%;display:flex}.empty-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-700)}.empty-state .description{max-width:28ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.75}.error-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--color-error-600);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.7;justify-content:center;align-items:center;display:flex}.error-state .icon svg{width:100%;height:100%}.error-state .icon bit-icon{width:100%;height:100%;display:flex}.error-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-error-700)}.error-state .description{max-width:32ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.85}.error-state .retry-btn{gap:var(--size-1-5);padding:var(--size-2) var(--size-4);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-error-700);cursor:pointer;border-radius:var(--rounded-md);transition:var(--_motion-transition,background var(--transition-fast), opacity var(--transition-fast));background:0 0;border:1px solid;align-items:center;display:inline-flex}.error-state .retry-btn bit-icon{flex:none}.error-state .retry-btn:hover{background:color-mix(in srgb, var(--color-error-500) 10%, transparent)}.error-state .retry-btn:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.loading-default{gap:var(--size-2);padding:var(--size-4);flex-direction:column;display:flex}}`;exports.default=e;
+//# sourceMappingURL=async.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async.css?inline.cjs","names":[],"sources":["../../../src/feedback/async/async.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_color: var(--async-color, var(--color-contrast-500));\n    --_icon-size: var(--async-icon-size, var(--size-12));\n    --_gap: var(--async-gap, var(--size-3));\n\n    display: block;\n  }\n\n  /* ── Status regions ─────────────────────────────────────────────── */\n\n  .region {\n    /* `display: contents` can drop slotted/shadow content in some runtimes. */\n    display: block;\n  }\n\n  /* ── Empty state ─────────────────────────────────────────────────── */\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--_color);\n    text-align: center;\n  }\n\n  .empty-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.4;\n  }\n\n  .empty-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .icon bit-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .empty-state .description {\n    max-width: 28ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.75;\n  }\n\n  /* ── Error state ─────────────────────────────────────────────────── */\n\n  .error-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--color-error-600);\n    text-align: center;\n  }\n\n  .error-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.7;\n  }\n\n  .error-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .icon bit-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-error-700);\n  }\n\n  .error-state .description {\n    max-width: 32ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.85;\n  }\n\n  .error-state .retry-btn {\n    display: inline-flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-error-700);\n    cursor: pointer;\n    background: none;\n    border: 1px solid currentcolor;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), opacity var(--transition-fast));\n  }\n\n  .error-state .retry-btn bit-icon {\n    flex: none;\n  }\n\n  .error-state .retry-btn:hover {\n    background: color-mix(in srgb, var(--color-error-500) 10%, transparent);\n  }\n\n  .error-state .retry-btn:focus-visible {\n    outline: 2px solid var(--color-error-500);\n    outline-offset: 2px;\n  }\n\n  /* ── Loading (fallback skeleton block) ───────────────────────────── */\n\n  .loading-default {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-4);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/feedback/async/async.css?inline
+var e = "@layer buildit.base{:host{--_color:var(--async-color,var(--color-contrast-500));--_icon-size:var(--async-icon-size,var(--size-12));--_gap:var(--async-gap,var(--size-3));display:block}.region{display:block}.empty-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--_color);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.4;justify-content:center;align-items:center;display:flex}.empty-state .icon svg{width:100%;height:100%}.empty-state .icon bit-icon{width:100%;height:100%;display:flex}.empty-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-700)}.empty-state .description{max-width:28ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.75}.error-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--color-error-600);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.7;justify-content:center;align-items:center;display:flex}.error-state .icon svg{width:100%;height:100%}.error-state .icon bit-icon{width:100%;height:100%;display:flex}.error-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-error-700)}.error-state .description{max-width:32ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.85}.error-state .retry-btn{gap:var(--size-1-5);padding:var(--size-2) var(--size-4);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-error-700);cursor:pointer;border-radius:var(--rounded-md);transition:var(--_motion-transition,background var(--transition-fast), opacity var(--transition-fast));background:0 0;border:1px solid;align-items:center;display:inline-flex}.error-state .retry-btn bit-icon{flex:none}.error-state .retry-btn:hover{background:color-mix(in srgb, var(--color-error-500) 10%, transparent)}.error-state .retry-btn:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.loading-default{gap:var(--size-2);padding:var(--size-4);flex-direction:column;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=async.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async.css?inline.js","names":[],"sources":["../../../src/feedback/async/async.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_color: var(--async-color, var(--color-contrast-500));\n    --_icon-size: var(--async-icon-size, var(--size-12));\n    --_gap: var(--async-gap, var(--size-3));\n\n    display: block;\n  }\n\n  /* ── Status regions ─────────────────────────────────────────────── */\n\n  .region {\n    /* `display: contents` can drop slotted/shadow content in some runtimes. */\n    display: block;\n  }\n\n  /* ── Empty state ─────────────────────────────────────────────────── */\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--_color);\n    text-align: center;\n  }\n\n  .empty-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.4;\n  }\n\n  .empty-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .icon bit-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .empty-state .description {\n    max-width: 28ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.75;\n  }\n\n  /* ── Error state ─────────────────────────────────────────────────── */\n\n  .error-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--color-error-600);\n    text-align: center;\n  }\n\n  .error-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.7;\n  }\n\n  .error-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .icon bit-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-error-700);\n  }\n\n  .error-state .description {\n    max-width: 32ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.85;\n  }\n\n  .error-state .retry-btn {\n    display: inline-flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-error-700);\n    cursor: pointer;\n    background: none;\n    border: 1px solid currentcolor;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), opacity var(--transition-fast));\n  }\n\n  .error-state .retry-btn bit-icon {\n    flex: none;\n  }\n\n  .error-state .retry-btn:hover {\n    background: color-mix(in srgb, var(--color-error-500) 10%, transparent);\n  }\n\n  .error-state .retry-btn:focus-visible {\n    outline: 2px solid var(--color-error-500);\n    outline-offset: 2px;\n  }\n\n  /* ── Loading (fallback skeleton block) ───────────────────────────── */\n\n  .loading-default {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-4);\n  }\n}\n"],"mappings":""}

package/dist/feedback/async/async.d.ts

@@ -0,0 +1,69 @@
+import '../../content/icon/icon';
+import '../skeleton/skeleton';
+export type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';
+export type BitAsyncEvents = {
+    retry: void;
+};
+export type BitAsyncProps = {
+    /** Description shown below the empty label in the default empty state */
+    'empty-description'?: string;
+    /** Descriptive label for the empty state, shown when no custom `empty` slot is provided */
+    'empty-label'?: string;
+    /** Detailed error text shown below the error label in the default error state */
+    'error-description'?: string;
+    /** Descriptive label for the error state, shown when no custom `error` slot is provided */
+    'error-label'?: string;
+    /** Whether to show the retry button in the default error state */
+    retryable?: boolean;
+    /**
+     * Current data-fetch status.
+     * - `idle`    — not yet started; renders nothing
+     * - `loading` — shows the `loading` slot (or a default skeleton stack)
+     * - `empty`   — shows the `empty` slot (or a built-in empty-state illustration)
+     * - `error`   — shows the `error` slot (or a built-in error state with optional retry)
+     * - `success` — shows the default slot (the actual content)
+     */
+    status: AsyncStatus;
+};
+/**
+ * A composable wrapper that renders the correct UI for each async data-fetch status.
+ * Drives `aria-live` and `aria-busy` automatically so screen readers stay informed.
+ *
+ * @element bit-async
+ *
+ * @attr {string} status - Data status: 'idle' | 'loading' | 'empty' | 'error' | 'success'
+ * @attr {string} empty-label - Heading for the default empty state
+ * @attr {string} empty-description - Description for the default empty state
+ * @attr {string} error-label - Heading for the default error state
+ * @attr {string} error-description - Description for the default error state
+ * @attr {boolean} retryable - Show a retry button in the default error state
+ *
+ * @fires retry - Emitted when the retry button is clicked
+ *
+ * @slot - Shown when `status="success"` (default)
+ * @slot loading - Shown when `status="loading"` (defaults to skeleton stack)
+ * @slot empty - Shown when `status="empty"` (defaults to built-in illustration)
+ * @slot error - Shown when `status="error"` (defaults to built-in error view)
+ *
+ * @cssprop --async-color - Icon/text color for default empty/error states
+ * @cssprop --async-icon-size - Icon size in default states (default: var(--size-12))
+ * @cssprop --async-gap - Gap between elements in default states (default: var(--size-3))
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage — let buildit handle empty and error UI -->
+ * <bit-async status="loading" empty-label="No results" error-label="Failed to load" retryable>
+ *   <my-data-table></my-data-table>
+ * </bit-async>
+ *
+ * <!-- Custom empty slot -->
+ * <bit-async status="empty">
+ *   <div slot="empty">
+ *     <img src="/no-results.svg" alt="" />
+ *     <p>Try adjusting your filters.</p>
+ *   </div>
+ * </bit-async>
+ * ```
+ */
+export declare const ASYNC_TAG: string;
+//# sourceMappingURL=async.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async.d.ts","sourceRoot":"","sources":["../../../src/feedback/async/async.ts"],"names":[],"mappings":"AAGA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,SAAS,QA+JpB,CAAC"}