@vielzeug/refine 1.1.3 → 1.3.0

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

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

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

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

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

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

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

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{width:100%;display:none}:host([active]){flex-d
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=tab-panel.css?inline.js.map
+//# sourceMappingURL=tab-panel.css.js.map

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

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

package/dist/disclosure/tabs/{tabs.css?inline.cjs → tabs.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.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:transform var(--tabs-transition);position:absolute;bottom:0;left:0}.panels{flex-direction:column;flex:1;min-height:0;display:flex}}@layer refine.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{top:0;bottom:unset;width:2px;height:unset;transition:transform var(--tabs-transition)}:host([orientation=vertical]) .indicator:not(: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 refine.variants{:host,:host([variant=solid]){--tabs-tab-gap:var(--size-1);--_tablist-bg:var(--tabs-tablist-bg,var(--color-contrast-100));--_tablist-border-color:var(--tabs-tablist-border-color,var(--color-contrast-200))}:host [role=tablist],:host([variant=solid]) [role=tablist]{padding:var(--size-1);background:var(--_tablist-bg);border:var(--border) solid var(--_tablist-border-color);border-radius:var(--tabs-radius)}:host .indicator,:host([variant=solid]) .indicator{display:none}:host([variant=flat]){--_tablist-border-color:var(--tabs-tablist-border-color,var(--color-contrast-200));background:var(--tabs-bg,var(--color-contrast-100));border:var(--border) solid var(--_tablist-border-color);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(--_tablist-border-color);background:0 0;border-radius:0}:host([variant=flat]) .indicator{display:none}:host([variant=bordered]){--_tablist-border-color:var(--tabs-tablist-border-color,var(--color-contrast-200))}:host([variant=bordered]) [role=tablist]{gap:var(--size-1);padding:var(--size-1);border:var(--border) solid var(--_tablist-border-color);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(--_tablist-border-color);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(--_tablist-border-color);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]){--_tablist-bg:var(--tabs-tablist-bg,color-mix(in oklch, var(--color-secondary) 20%, transparent));--_tablist-border-color:var(--tabs-tablist-border-color,color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent))}:host([variant=glass]) [role=tablist]{padding:var(--size-1);background:var(--_tablist-bg);border:var(--border) solid var(--_tablist-border-color);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]){--_tablist-bg:var(--tabs-tablist-bg,color-mix(in oklch, var(--color-canvas) 55%, transparent));--_tablist-border-color:var(--tabs-tablist-border-color,color-mix(in oklch, var(--color-contrast-300) 50%, transparent))}:host([variant=frost]) [role=tablist]{padding:var(--size-1);background:var(--_tablist-bg);border:var(--border) solid var(--_tablist-border-color);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}}`;exports.default=e;
-//# sourceMappingURL=tabs.css?inline.cjs.map
+//# sourceMappingURL=tabs.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css.cjs","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.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    left: 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: transform 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 refine.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    top: 0;\n\n    /* Reposition indicator to inline-start side for vertical */\n    bottom: unset;\n    width: 2px;\n    height: unset;\n    transition: transform var(--tabs-transition);\n  }\n}\n\n@layer refine.variants {\n  /* ─── solid (default) ─── */\n  :host,\n  :host([variant='solid']) {\n    --tabs-tab-gap: var(--size-1);\n    --_tablist-bg: var(--tabs-tablist-bg, var(--color-contrast-100));\n    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n  }\n\n  :host [role='tablist'],\n  :host([variant='solid']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n\n    overflow: hidden;\n    background: var(--tabs-bg, var(--color-contrast-100));\n    border: var(--border) solid var(--_tablist-border-color);\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(--_tablist-border-color);\n    border-radius: 0;\n  }\n\n  :host([variant='flat']) .indicator {\n    display: none;\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) {\n    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n  }\n\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(--_tablist-border-color);\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(--_tablist-border-color);\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(--_tablist-border-color);\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']) {\n    --_tablist-bg: var(--tabs-tablist-bg, color-mix(in oklch, var(--color-secondary) 20%, transparent));\n    --_tablist-border-color: var(\n      --tabs-tablist-border-color,\n      color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent)\n    );\n  }\n\n  :host([variant='glass']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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']) {\n    --_tablist-bg: var(--tabs-tablist-bg, color-mix(in oklch, var(--color-canvas) 55%, transparent));\n    --_tablist-border-color: var(\n      --tabs-tablist-border-color,\n      color-mix(in oklch, var(--color-contrast-300) 50%, transparent)\n    );\n  }\n\n  :host([variant='frost']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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"],"mappings":""}

package/dist/disclosure/tabs/{tabs.css?inline.js → tabs.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--tabs-transition:var(--transition-normal);--t
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=tabs.css?inline.js.map
+//# sourceMappingURL=tabs.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.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    left: 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: transform 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 refine.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    top: 0;\n\n    /* Reposition indicator to inline-start side for vertical */\n    bottom: unset;\n    width: 2px;\n    height: unset;\n    transition: transform var(--tabs-transition);\n  }\n}\n\n@layer refine.variants {\n  /* ─── solid (default) ─── */\n  :host,\n  :host([variant='solid']) {\n    --tabs-tab-gap: var(--size-1);\n    --_tablist-bg: var(--tabs-tablist-bg, var(--color-contrast-100));\n    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n  }\n\n  :host [role='tablist'],\n  :host([variant='solid']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n\n    overflow: hidden;\n    background: var(--tabs-bg, var(--color-contrast-100));\n    border: var(--border) solid var(--_tablist-border-color);\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(--_tablist-border-color);\n    border-radius: 0;\n  }\n\n  :host([variant='flat']) .indicator {\n    display: none;\n  }\n\n  /* ─── bordered ─── */\n  :host([variant='bordered']) {\n    --_tablist-border-color: var(--tabs-tablist-border-color, var(--color-contrast-200));\n  }\n\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(--_tablist-border-color);\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(--_tablist-border-color);\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(--_tablist-border-color);\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']) {\n    --_tablist-bg: var(--tabs-tablist-bg, color-mix(in oklch, var(--color-secondary) 20%, transparent));\n    --_tablist-border-color: var(\n      --tabs-tablist-border-color,\n      color-mix(in oklch, var(--color-secondary-contrast) 15%, transparent)\n    );\n  }\n\n  :host([variant='glass']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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']) {\n    --_tablist-bg: var(--tabs-tablist-bg, color-mix(in oklch, var(--color-canvas) 55%, transparent));\n    --_tablist-border-color: var(\n      --tabs-tablist-border-color,\n      color-mix(in oklch, var(--color-contrast-300) 50%, transparent)\n    );\n  }\n\n  :host([variant='frost']) [role='tablist'] {\n    padding: var(--size-1);\n    background: var(--_tablist-bg);\n    border: var(--border) solid var(--_tablist-border-color);\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"],"mappings":""}

package/dist/drawer.cjs

@@ -1,14 +1,14 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./headless/swipe.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},c=`ore-drawer`;(0,a.define)(c,{props:{backdrop:a.prop.string(),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:a.prop.bool(!1),persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(e,{el:t,emit:i,onCleanup:c,onEvent:l,onMounted:u,slots:d}){let f=(0,a.createStableId)(`drawer-label`),p=(0,a.ref)(),m=(0,a.ref)(),h=(0,o.signal)(!1),g,_=()=>e.label.value??e.title.value??``,v=()=>d.has(`header`).value||!!_(),y=()=>v()||e.dismissible.value,b=()=>d.has(`footer`).value,x=()=>e.placement.value||`right`,S=()=>s[x()],C=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},w=(e,t)=>S().closingDistance(e)>=t,T=e=>{if(!h.value)return;g&&=(clearTimeout(g),void 0);let t=p.value;if(!t){h.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,N(`swipe`)},E=(e,t,n)=>{if(h.value)return;h.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target!==e||t.propertyName!==`transform`||(e.removeEventListener(`transitionend`,o),T(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;g=setTimeout(()=>{e.removeEventListener(`transitionend`,o),T(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},D=e=>{g&&=(clearTimeout(g),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,h.value=!1},O=({distance:e,threshold:t})=>{let n=m.value;if(n){if(w(e,t)){E(n,S(),e);return}D(n)}},k=n.createSwipeControl({axis:()=>S().axis,disabled:h,onCancel:O,onCommit:({distance:e})=>{let t=m.value;t&&E(t,S(),e)},onMove:({distance:e,threshold:t})=>{let n=m.value;if(!n)return;let r=S(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:O,shouldCommit:({distance:e,threshold:t})=>w(e,t),threshold:()=>{let e=m.value;return e?C(e,S().axis):48}}),{closeWithAnimation:A,handleCancel:j,overlay:M,requestClose:N,watchOpenProp:P}=r.useDialogControl({beforeOpen:e=>{let t=m.value;t&&D(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),dialogRef:p,getPanelEl:()=>m.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:c,onEvent:l,onNativeClose:t=>{let n=m.value;n&&t!==`swipe`&&D(n);let r=p.value;r&&(r.style.transition=``),i(`close`,{placement:e.placement.value??`right`,reason:t})},onOpen:t=>i(`open`,{placement:e.placement.value??`right`,reason:t}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():A()},returnFocus:e[`return-focus`]});return u(()=>{let n=p.value;if(!n)return;let r=t;r.show=()=>{M.open(`programmatic`)},r.hide=()=>{M.close(`programmatic`,!1)},P(),l(n,`cancel`,j),l(n,`click`,t=>{e.persistent.value||k.isActive()||h.value||t.target===n&&N(`outsideClick`)});let i=m.value?.querySelector(`[part="drag-handle"]`);return i&&(l(i,`pointerdown`,k.handlePointerDown),l(i,`pointermove`,k.handlePointerMove),l(i,`pointerup`,k.handlePointerUp),l(i,`pointercancel`,k.handlePointerCancel)),()=>{M.dispose()}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./headless/swipe.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},c=`ore-drawer`;(0,a.define)(c,{props:{backdrop:a.prop.string(),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:a.prop.bool(!1),persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=(0,a.createStableId)(`drawer-label`),u=(0,a.ref)(),d=(0,a.ref)(),f=(0,o.signal)(!1),p,m=()=>e.label.value??e.title.value??``,h=()=>c.has(`header`).value||!!m(),g=()=>h()||e.dismissible.value,_=()=>c.has(`footer`).value,v=()=>e.placement.value||`right`,y=()=>s[v()],b=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},x=(e,t)=>y().closingDistance(e)>=t,S=e=>{if(!f.value)return;p&&=(clearTimeout(p),void 0);let t=u.value;if(!t){f.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,A(`swipe`)},C=(e,t,n)=>{if(f.value)return;f.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target!==e||t.propertyName!==`transform`||(e.removeEventListener(`transitionend`,o),S(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;p=setTimeout(()=>{e.removeEventListener(`transitionend`,o),S(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},w=e=>{p&&=(clearTimeout(p),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,f.value=!1},T=({distance:e,threshold:t})=>{let n=d.value;if(n){if(x(e,t)){C(n,y(),e);return}w(n)}},E=n.createSwipeControl({axis:()=>y().axis,disabled:f,onCancel:T,onCommit:({distance:e})=>{let t=d.value;t&&C(t,y(),e)},onMove:({distance:e,threshold:t})=>{let n=d.value;if(!n)return;let r=y(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:T,shouldCommit:({distance:e,threshold:t})=>x(e,t),threshold:()=>{let e=d.value;return e?b(e,y().axis):48}}),{closeWithAnimation:D,handleCancel:O,overlay:k,requestClose:A,watchOpenProp:j}=r.useDialogControl({beforeOpen:e=>{let t=d.value;t&&w(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),dialogRef:u,getPanelEl:()=>d.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:a.onCleanup,onEvent:a.onEvent,onNativeClose:t=>{let n=d.value;n&&t!==`swipe`&&w(n);let r=u.value;r&&(r.style.transition=``),i(`close`,{placement:e.placement.value??`right`,reason:t})},onOpen:t=>i(`open`,{placement:e.placement.value??`right`,reason:t}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():D()},returnFocus:e[`return-focus`]});return(0,a.onMounted)(()=>{let n=u.value;if(!n)return;let r=t;r.show=()=>{k.open(`programmatic`)},r.hide=()=>{k.close(`programmatic`,!1)},j(),(0,a.onEvent)(n,`cancel`,O),(0,a.onEvent)(n,`click`,t=>{e.persistent.value||E.isActive()||f.value||t.target===n&&A(`outsideClick`)});let i=d.value?.querySelector(`[part="drag-handle"]`);return i&&((0,a.onEvent)(i,`pointerdown`,E.handlePointerDown),(0,a.onEvent)(i,`pointermove`,E.handlePointerMove),(0,a.onEvent)(i,`pointerup`,E.handlePointerUp),(0,a.onEvent)(i,`pointercancel`,E.handlePointerCancel)),()=>{k.dispose()}}),a.html`
       <dialog
-        ref=${p}
+        ref=${u}
         aria-modal="true"
         :aria-label="${()=>e.label.value??null}"
-        :aria-labelledby="${()=>e.label.value?null:f}">
-        <div class="panel" part="panel" ref=${m}>
+        :aria-labelledby="${()=>e.label.value?null:l}">
+        <div class="panel" part="panel" ref=${d}>
           <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
-          <div class="header" part="header" ?hidden=${()=>!y()}>
-            <span class="header-title" id="${f}" ?hidden=${()=>!v()}>
-              <slot name="header">${()=>_()}</slot>
+          <div class="header" part="header" ?hidden=${()=>!g()}>
+            <span class="header-title" id="${l}" ?hidden=${()=>!h()}>
+              <slot name="header">${()=>m()}</slot>
             </span>
             <button
               class="close-btn"
@@ -16,14 +16,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               type="button"
               aria-label="Close"
               ?hidden=${()=>!e.dismissible.value}
-              @click=${()=>{N(`trigger`)}}>
+              @click=${()=>{A(`trigger`)}}>
               <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
             </button>
           </div>
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${()=>!b()}>
+          <div class="footer" part="footer" ?hidden=${()=>!_()}>
             <slot name="footer"></slot>
           </div>
         </div>

package/dist/drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { createStableId, define, html, prop, ref } from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, '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 OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\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  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\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 ore-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} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\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 * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\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 * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps, OreDrawerEvents>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props, { el, emit, onCleanup, onEvent, onMounted, slots }) {\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\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=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</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=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"drawer.cjs","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, '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 OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\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  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\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 ore-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} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\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 * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\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 * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\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=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</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=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/drawer.js

@@ -2,11 +2,11 @@ import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixin
 import { elevationMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
 import { createSwipeControl as i } from "./headless/swipe.js";
 import { useDialogControl as a } from "./overlay/shared/use-dialog.js";
-import o from "./overlay/drawer/drawer.css?inline.js";
-import { createStableId as s, define as c, html as l, prop as u, ref as d } from "@vielzeug/ore";
-import { signal as f } from "@vielzeug/ripple";
+import o from "./overlay/drawer/drawer.css.js";
+import { createStableId as s, define as c, getHost as l, html as u, onCleanup as d, onEvent as f, onMounted as p, prop as m, ref as h, useEmit as g, useSlots as _ } from "@vielzeug/ore";
+import { signal as v } from "@vielzeug/ripple";
 //#region src/overlay/drawer/drawer.ts
-var p = {
+var y = {
 	bottom: {
 		axis: "y",
 		closingDistance: (e) => Math.max(0, e),
@@ -27,100 +27,100 @@ var p = {
 		closingDistance: (e) => Math.max(0, -e),
 		translate: (e) => `translateY(${e}px)`
 	}
-}, m = "ore-drawer";
-c(m, {
+}, b = "ore-drawer";
+c(b, {
 	props: {
-		backdrop: u.string(),
-		dismissible: u.bool(!0),
-		"drag-handle-placement": u.oneOf(["outside", "inset"], "outside"),
-		"initial-focus": u.string(),
-		label: u.string(),
-		open: u.bool(!1),
-		persistent: u.bool(!1),
-		placement: u.oneOf([
+		backdrop: m.string(),
+		dismissible: m.bool(!0),
+		"drag-handle-placement": m.oneOf(["outside", "inset"], "outside"),
+		"initial-focus": m.string(),
+		label: m.string(),
+		open: m.bool(!1),
+		persistent: m.bool(!1),
+		placement: m.oneOf([
 			"left",
 			"right",
 			"top",
 			"bottom"
 		], "right"),
-		"return-focus": u.bool(!0),
-		size: u.string(),
-		title: u.string()
+		"return-focus": m.bool(!0),
+		size: m.string(),
+		title: m.string()
 	},
-	setup(e, { el: t, emit: n, onCleanup: r, onEvent: o, onMounted: c, slots: u }) {
-		let m = s("drawer-label"), h = d(), g = d(), _ = f(!1), v, y = () => e.label.value ?? e.title.value ?? "", b = () => u.has("header").value || !!y(), x = () => b() || e.dismissible.value, S = () => u.has("footer").value, C = () => e.placement.value || "right", w = () => p[C()], T = (e, t) => {
+	setup(e) {
+		let t = l(), n = g(), r = _(), o = s("drawer-label"), c = h(), m = h(), b = v(!1), x, S = () => e.label.value ?? e.title.value ?? "", C = () => r.has("header").value || !!S(), w = () => C() || e.dismissible.value, T = () => r.has("footer").value, E = () => e.placement.value || "right", D = () => y[E()], O = (e, t) => {
 			let n = t === "x" ? e.offsetWidth : e.offsetHeight;
 			return Math.min(96, Math.max(36, n * .18));
-		}, E = (e, t) => w().closingDistance(e) >= t, D = (e) => {
-			if (!_.value) return;
-			v &&= (clearTimeout(v), void 0);
-			let t = h.value;
+		}, k = (e, t) => D().closingDistance(e) >= t, A = (e) => {
+			if (!b.value) return;
+			x &&= (clearTimeout(x), void 0);
+			let t = c.value;
 			if (!t) {
-				_.value = !1;
+				b.value = !1;
 				return;
 			}
-			t.style.transition = "none", e.style.opacity = "0", e.style.visibility = "hidden", t.offsetWidth, F("swipe");
-		}, O = (e, t, n) => {
-			if (_.value) return;
-			_.value = !0;
+			t.style.transition = "none", e.style.opacity = "0", e.style.visibility = "hidden", t.offsetWidth, R("swipe");
+		}, j = (e, t, n) => {
+			if (b.value) return;
+			b.value = !0;
 			let r = t.axis === "x" ? e.offsetWidth : e.offsetHeight, i = n >= 0 ? Math.max(n, r) : Math.min(n, -r), a = t.translate(i);
 			e.style.transition = "transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out", e.offsetWidth;
 			let o = (t) => {
-				t.target !== e || t.propertyName !== "transform" || (e.removeEventListener("transitionend", o), D(e));
+				t.target !== e || t.propertyName !== "transform" || (e.removeEventListener("transitionend", o), A(e));
 			};
 			e.addEventListener("transitionend", o);
 			let s = parseFloat(getComputedStyle(e).transitionDuration) * 1e3;
-			v = setTimeout(() => {
-				e.removeEventListener("transitionend", o), D(e);
+			x = setTimeout(() => {
+				e.removeEventListener("transitionend", o), A(e);
 			}, s + 50), e.style.transform = a, e.style.opacity = "0.2";
-		}, k = (e) => {
-			v &&= (clearTimeout(v), void 0), e.style.transition = "", e.style.transform = "", e.style.opacity = "", e.style.visibility = "", _.value = !1;
-		}, A = ({ distance: e, threshold: t }) => {
-			let n = g.value;
+		}, M = (e) => {
+			x &&= (clearTimeout(x), void 0), e.style.transition = "", e.style.transform = "", e.style.opacity = "", e.style.visibility = "", b.value = !1;
+		}, N = ({ distance: e, threshold: t }) => {
+			let n = m.value;
 			if (n) {
-				if (E(e, t)) {
-					O(n, w(), e);
+				if (k(e, t)) {
+					j(n, D(), e);
 					return;
 				}
-				k(n);
+				M(n);
 			}
-		}, j = i({
-			axis: () => w().axis,
-			disabled: _,
-			onCancel: A,
+		}, P = i({
+			axis: () => D().axis,
+			disabled: b,
+			onCancel: N,
 			onCommit: ({ distance: e }) => {
-				let t = g.value;
-				t && O(t, w(), e);
+				let t = m.value;
+				t && j(t, D(), e);
 			},
 			onMove: ({ distance: e, threshold: t }) => {
-				let n = g.value;
+				let n = m.value;
 				if (!n) return;
-				let r = w(), i = r.closingDistance(e), a = Math.min(i / t, 1);
+				let r = D(), i = r.closingDistance(e), a = Math.min(i / t, 1);
 				n.style.transition = "none", n.style.transform = r.translate(e), n.style.opacity = String(1 - a * .4);
 			},
-			onRelease: A,
-			shouldCommit: ({ distance: e, threshold: t }) => E(e, t),
+			onRelease: N,
+			shouldCommit: ({ distance: e, threshold: t }) => k(e, t),
 			threshold: () => {
-				let e = g.value;
-				return e ? T(e, w().axis) : 48;
+				let e = m.value;
+				return e ? O(e, D().axis) : 48;
 			}
-		}), { closeWithAnimation: M, handleCancel: N, overlay: P, requestClose: F, watchOpenProp: I } = a({
+		}), { closeWithAnimation: F, handleCancel: I, overlay: L, requestClose: R, watchOpenProp: z } = a({
 			beforeOpen: (e) => {
-				let t = g.value;
-				t && k(t);
+				let t = m.value;
+				t && M(t);
 			},
 			closeRequestDetail: (t) => ({ placement: e.placement.value ?? "right" }),
-			dialogRef: h,
-			getPanelEl: () => g.value,
+			dialogRef: c,
+			getPanelEl: () => m.value,
 			host: t,
 			initialFocus: e["initial-focus"],
 			isPersistent: () => !!e.persistent.value,
-			onCleanup: r,
-			onEvent: o,
+			onCleanup: d,
+			onEvent: f,
 			onNativeClose: (t) => {
-				let r = g.value;
-				r && t !== "swipe" && k(r);
-				let i = h.value;
+				let r = m.value;
+				r && t !== "swipe" && M(r);
+				let i = c.value;
 				i && (i.style.transition = ""), n("close", {
 					placement: e.placement.value ?? "right",
 					reason: t
@@ -132,36 +132,36 @@ c(m, {
 			}),
 			openProp: e.open,
 			performClose: (e, t) => {
-				t === "swipe" ? e.close() : M();
+				t === "swipe" ? e.close() : F();
 			},
 			returnFocus: e["return-focus"]
 		});
-		return c(() => {
-			let n = h.value;
+		return p(() => {
+			let n = c.value;
 			if (!n) return;
 			let r = t;
 			r.show = () => {
-				P.open("programmatic");
+				L.open("programmatic");
 			}, r.hide = () => {
-				P.close("programmatic", !1);
-			}, I(), o(n, "cancel", N), o(n, "click", (t) => {
-				e.persistent.value || j.isActive() || _.value || t.target === n && F("outsideClick");
+				L.close("programmatic", !1);
+			}, z(), f(n, "cancel", I), f(n, "click", (t) => {
+				e.persistent.value || P.isActive() || b.value || t.target === n && R("outsideClick");
 			});
-			let i = g.value?.querySelector("[part=\"drag-handle\"]");
-			return i && (o(i, "pointerdown", j.handlePointerDown), o(i, "pointermove", j.handlePointerMove), o(i, "pointerup", j.handlePointerUp), o(i, "pointercancel", j.handlePointerCancel)), () => {
-				P.dispose();
+			let i = m.value?.querySelector("[part=\"drag-handle\"]");
+			return i && (f(i, "pointerdown", P.handlePointerDown), f(i, "pointermove", P.handlePointerMove), f(i, "pointerup", P.handlePointerUp), f(i, "pointercancel", P.handlePointerCancel)), () => {
+				L.dispose();
 			};
-		}), l`
+		}), u`
       <dialog
-        ref=${h}
+        ref=${c}
         aria-modal="true"
         :aria-label="${() => e.label.value ?? null}"
-        :aria-labelledby="${() => e.label.value ? null : m}">
-        <div class="panel" part="panel" ref=${g}>
+        :aria-labelledby="${() => e.label.value ? null : o}">
+        <div class="panel" part="panel" ref=${m}>
           <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
-          <div class="header" part="header" ?hidden=${() => !x()}>
-            <span class="header-title" id="${m}" ?hidden=${() => !b()}>
-              <slot name="header">${() => y()}</slot>
+          <div class="header" part="header" ?hidden=${() => !w()}>
+            <span class="header-title" id="${o}" ?hidden=${() => !C()}>
+              <slot name="header">${() => S()}</slot>
             </span>
             <button
               class="close-btn"
@@ -170,7 +170,7 @@ c(m, {
               aria-label="Close"
               ?hidden=${() => !e.dismissible.value}
               @click=${() => {
-			F("trigger");
+			R("trigger");
 		}}>
               <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
             </button>
@@ -178,7 +178,7 @@ c(m, {
           <div class="body" part="body">
             <slot></slot>
           </div>
-          <div class="footer" part="footer" ?hidden=${() => !S()}>
+          <div class="footer" part="footer" ?hidden=${() => !T()}>
             <slot name="footer"></slot>
           </div>
         </div>
@@ -194,6 +194,6 @@ c(m, {
 	]
 });
 //#endregion
-export { m as DRAWER_TAG };
+export { b as DRAWER_TAG };
 
 //# sourceMappingURL=drawer.js.map