@vielzeug/refine 2.2.5 → 2.4.0

package/dist/disclosure/tabs/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(: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 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;
+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(: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 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}}@layer refine.density{:host([density=compact]){--tabs-radius:var(--rounded-md);height:auto}:host([density=compact]) [role=tablist]{gap:var(--size-1);padding:var(--size-1)}:host([density=compact][variant=ghost]) [role=tablist]{padding:0}}`;exports.default=e;
 //# sourceMappingURL=tabs.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.cjs","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\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":""}
+{"version":3,"file":"tabs.css.cjs","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\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\n@layer refine.density {\n  :host([density='compact']) {\n    --tabs-radius: var(--rounded-md);\n\n    height: auto;\n  }\n\n  :host([density='compact']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n  }\n\n  :host([density='compact'][variant='ghost']) [role='tablist'] {\n    padding: 0;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 //#region src/disclosure/tabs/tabs.css?inline
-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(: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 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}}";
+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(: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 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}}@layer refine.density{:host([density=compact]){--tabs-radius:var(--rounded-md);height:auto}:host([density=compact]) [role=tablist]{gap:var(--size-1);padding:var(--size-1)}:host([density=compact][variant=ghost]) [role=tablist]{padding:0}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\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":""}
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../src/disclosure/tabs/tabs.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --tabs-transition: var(--transition-normal);\n    --tabs-radius: var(--rounded-lg);\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\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\n@layer refine.density {\n  :host([density='compact']) {\n    --tabs-radius: var(--rounded-md);\n\n    height: auto;\n  }\n\n  :host([density='compact']) [role='tablist'] {\n    gap: var(--size-1);\n    padding: var(--size-1);\n  }\n\n  :host([density='compact'][variant='ghost']) [role='tablist'] {\n    padding: 0;\n  }\n}\n"],"mappings":""}

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

@@ -3,6 +3,7 @@ import type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';
 /** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */
 export type TabsContext = {
     color: Readable<ThemeColor | undefined>;
+    density: Readable<'compact' | 'default'>;
     orientation: Readable<'horizontal' | 'vertical'>;
     size: Readable<ComponentSize | undefined>;
     value: Readable<string | undefined>;
@@ -24,6 +25,8 @@ export type OreTabsProps = {
     activation?: 'auto' | 'manual';
     /** Theme color */
     color?: ThemeColor;
+    /** Spatial density; compact renders a 24px tab control for dense interfaces. */
+    density?: 'compact' | 'default';
     /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */
     label?: string;
     /** Tab list orientation */
@@ -45,6 +48,7 @@ export type OreTabsProps = {
  * @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} density - Spatial density: 'default' | 'compact'
  * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
  *
  * @fires change - Emitted when the active tab changes with detail: { value: string }

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,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7E,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC/C,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,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,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/disclosure/tabs/tabs.ts"],"names":[],"mappings":"AAaA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG7E,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,OAAO,EAAE,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;IACzC,WAAW,EAAE,QAAQ,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC;IACjD,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC/C,CAAC;AACF,0CAA0C;AAC1C,eAAO,MAAM,QAAQ,mDAA4C,CAAC;AAElE,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,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,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,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}

package/dist/feedback/typing-indicator/typing-indicator.d.ts

@@ -17,8 +17,8 @@ export type OreTypingIndicatorProps = {
  * announced through the shared singleton live region (`core/announcer.ts`) rather than a
  * static `aria-live` element in the template. A live region populated in the same paint as
  * its own insertion is unreliable across browsers/screen readers; routing through the shared
- * announcer (pre-existing region, clear-then-set) is the same pattern already used for other
- * transient status messages across this package.
+ * announcer (pre-existing region, clear-then-set, document-scoped) is the same pattern
+ * already used for other transient status messages across this package.
  *
  * @element ore-typing-indicator
  *

package/dist/file-input.cjs

@@ -1,34 +1,34 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/ref-callback.cjs"),o=require("./shared/size-presets.cjs"),s=require("./inputs/file-input/file-input.css.cjs"),c=require("./inputs/file-input/file-input-upload.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/dnd");var f=e=>e.type.startsWith(`image/`),p=`ore-file-input`;(0,l.define)(p,{formAssociated:!0,props:{accept:l.prop.string(),color:l.prop.string(),disabled:l.prop.bool(!1),error:l.prop.string(),gallery:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"max-files":l.prop.number(0),"max-size":l.prop.number(0),multiple:l.prop.bool(!1),name:l.prop.string(),ref:l.prop.data(),required:l.prop.bool(!1),size:l.prop.string(),upload:l.prop.data()},setup(e){let t=(0,l.useEmit)(),n=(0,u.signal)(!1),r=(0,u.signal)(null),o=(0,u.computed)(()=>!!e.disabled.value),s=(0,u.computed)(()=>e[`max-files`].value??0),p=(0,u.computed)(()=>e[`max-size`].value??0),m=c.createFileQueue({accept:e.accept,disabled:o,maxFiles:s,maxSize:p,multiple:(0,u.computed)(()=>!!e.multiple.value),onChange:(e,n)=>t(`change`,{files:e,originalEvent:n,value:e}),onRemove:(e,n,r)=>t(`remove`,{file:e,files:n,originalEvent:r,value:n}),onUploadError:(e,n)=>t(`upload-error`,{error:n,file:e}),onUploadProgress:(e,n,r)=>t(`upload-progress`,{file:e,loaded:n,total:r}),onUploadSuccess:e=>t(`upload-success`,{file:e}),upload:(0,u.computed)(()=>e.upload.value??void 0)});(0,l.onCleanup)(()=>m.dispose()),(0,l.useField)({disabled:o,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:m.files});let h=(0,u.computed)(()=>!!e.error.value);(0,l.bind)({attr:{"drag-over":()=>n.value?!0:void 0,invalid:()=>h.value?!0:void 0,size:e.size}});let g=(0,l.createStableId)(`file-input`),_=`label-${g}`,v=`helper-${g}`,y=`error-${g}`,b=(0,l.ref)(),x=(0,l.ref)(),S=(0,u.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=p.value;n>0&&t.push(`max ${c.formatBytes(n)}`);let r=s.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function C(e){r.value=e,x.value?.click()}let w=new Map;function T(e){let t=w.get(e);return t||(t=URL.createObjectURL(e),w.set(e,t)),t}function E(e){let t=new Set(e);for(let[e,n]of w)t.has(e)||(URL.revokeObjectURL(n),w.delete(e))}return(0,u.watch)(m.files,E),(0,l.onCleanup)(()=>{for(let e of w.values())URL.revokeObjectURL(e);w.clear()}),(0,l.onElement)(x,t=>a.bindRefCallback(e.ref,t)),(0,l.onMounted)(()=>{let e=x.value,t=b.value,a=!1,s=i.createInteraction({disabled:o,onPress:()=>{e.click()}});(0,l.onEvent)(e,`change`,e=>{let t=e.target,n=r.value;r.value=null,n&&t.files?.[0]?m.replaceFile(n,t.files[0],e):t.files?.length&&m.addFiles(Array.from(t.files),e),t.value=``}),(0,l.onEvent)(t,`click`,t=>{if(t.target!==e){if(a){a=!1;return}o.value||e.click()}}),(0,l.onEvent)(t,`keydown`,e=>{a=s.handleKeydown(e)&&e.key===`Enter`}),(0,u.watch)(o,e=>{let r=(0,d.createDropZone)({disabled:e,element:t,onDrop:e=>m.addFiles(e),onHoverChange:e=>{n.value=e}});return()=>r.dispose()},{immediate:!0})}),l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/keyboard.cjs"),a=require("./core/ref-callback.cjs"),o=require("./shared/size-presets.cjs"),s=require("./inputs/file-input/file-input.css.cjs"),c=require("./inputs/file-input/file-input-upload.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/dnd");var f=e=>e.type.startsWith(`image/`),p=`ore-file-input`;(0,l.define)(p,{formAssociated:!0,props:{accept:l.prop.string(),color:l.prop.string(),disabled:l.prop.bool(!1),error:l.prop.string(),gallery:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"max-files":l.prop.number(0),"max-size":l.prop.number(0),multiple:l.prop.bool(!1),name:l.prop.string(),ref:l.prop.data(),required:l.prop.bool(!1),size:l.prop.string(),upload:l.prop.data()},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),r=(0,u.signal)(!1),o=(0,u.signal)(null),s=(0,u.computed)(()=>!!e.disabled.value),p=(0,u.computed)(()=>e[`max-files`].value??0),m=(0,u.computed)(()=>e[`max-size`].value??0),h=c.createFileQueue({accept:e.accept,disabled:s,document:t.ownerDocument,maxFiles:p,maxSize:m,multiple:(0,u.computed)(()=>!!e.multiple.value),onChange:(e,t)=>n(`change`,{files:e,originalEvent:t,value:e}),onRemove:(e,t,r)=>n(`remove`,{file:e,files:t,originalEvent:r,value:t}),onUploadError:(e,t)=>n(`upload-error`,{error:t,file:e}),onUploadProgress:(e,t,r)=>n(`upload-progress`,{file:e,loaded:t,total:r}),onUploadSuccess:e=>n(`upload-success`,{file:e}),upload:(0,u.computed)(()=>e.upload.value??void 0)});(0,l.onCleanup)(()=>h.dispose()),(0,l.useField)({disabled:s,toFormValue:t=>{if(t.length===0)return null;let n=e.name.value||`file`,r=new FormData;for(let e of t)r.append(n,e);return r},value:h.files});let g=(0,u.computed)(()=>!!e.error.value);(0,l.bind)({attr:{"drag-over":()=>r.value?!0:void 0,invalid:()=>g.value?!0:void 0,size:e.size}});let _=(0,l.createStableId)(`file-input`),v=`label-${_}`,y=`helper-${_}`,b=`error-${_}`,x=(0,l.ref)(),S=(0,l.ref)(),C=(0,u.computed)(()=>{let t=[];e.accept.value&&t.push(e.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let n=m.value;n>0&&t.push(`max ${c.formatBytes(n)}`);let r=p.value;return r>0&&t.push(`up to ${r} file${r===1?``:`s`}`),t.join(` · `)});function w(e){o.value=e,S.value?.click()}let T=new Map;function E(e){let t=T.get(e);return t||(t=URL.createObjectURL(e),T.set(e,t)),t}function D(e){let t=new Set(e);for(let[e,n]of T)t.has(e)||(URL.revokeObjectURL(n),T.delete(e))}return(0,u.watch)(h.files,D),(0,l.onCleanup)(()=>{for(let e of T.values())URL.revokeObjectURL(e);T.clear()}),(0,l.onElement)(S,t=>a.bindRefCallback(e.ref,t)),(0,l.onMounted)(()=>{let e=S.value,t=x.value,n=!1,a=i.createInteraction({disabled:s,onPress:()=>{e.click()}});(0,l.onEvent)(e,`change`,e=>{let t=e.target,n=o.value;o.value=null,n&&t.files?.[0]?h.replaceFile(n,t.files[0],e):t.files?.length&&h.addFiles(Array.from(t.files),e),t.value=``}),(0,l.onEvent)(t,`click`,t=>{if(t.target!==e){if(n){n=!1;return}s.value||e.click()}}),(0,l.onEvent)(t,`keydown`,e=>{n=a.handleKeydown(e)&&e.key===`Enter`}),(0,u.watch)(s,e=>{let n=(0,d.createDropZone)({disabled:e,element:t,onDrop:e=>h.addFiles(e),onHoverChange:e=>{r.value=e}});return()=>n.dispose()},{immediate:!0})}),l.html`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${_}" part="label" ?hidden=${()=>!e.label.value}>
+        <label class="label-outside" id="${v}" part="label" ?hidden=${()=>!e.label.value}>
           ${e.label}
         </label>
         <div
           class="dropzone"
           part="dropzone"
-          ref=${b}
+          ref=${x}
           role="button"
-          tabindex="${()=>o.value?`-1`:`0`}"
-          aria-disabled="${()=>String(o.value)}"
+          tabindex="${()=>s.value?`-1`:`0`}"
+          aria-disabled="${()=>String(s.value)}"
           aria-label="${()=>e.label.value?null:`File upload drop zone`}"
-          aria-labelledby="${()=>e.label.value?_:null}"
-          aria-describedby="${v}">
+          aria-labelledby="${()=>e.label.value?v:null}"
+          aria-describedby="${y}">
           <input
             type="file"
-            ref=${x}
+            ref=${S}
             part="input"
-            id="${g}"
+            id="${_}"
             accept="${e.accept}"
             ?multiple="${e.multiple}"
             ?required="${e.required}"
-            ?disabled="${o}"
+            ?disabled="${s}"
             name="${e.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true" data-status="${()=>h.value?`error`:null}">
-              ${()=>h.value?l.html`
+            <span class="dropzone-icon" aria-hidden="true" data-status="${()=>g.value?`error`:null}">
+              ${()=>g.value?l.html`
                       <ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
                     `:l.html`
                       <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
@@ -37,16 +37,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a
                  static "Drop files here" during an active drag reads as if the drop target
                  hasn't noticed the file yet. -->
-            ${(0,l.when)(()=>n.value,()=>l.html`
+            ${(0,l.when)(()=>r.value,()=>l.html`
                 <span class="dropzone-title dropzone-title-active">Release to upload</span>
               `)}
-            ${(0,l.when)(()=>!n.value,()=>l.html`
+            ${(0,l.when)(()=>!r.value,()=>l.html`
                 <span class="dropzone-title">
                   Drop files here or
                   <u>click to browse</u>
                 </span>
               `)}
-            <span class="dropzone-hint" ?hidden=${()=>!S.value}>${S}</span>
+            <span class="dropzone-hint" ?hidden=${()=>!C.value}>${C}</span>
           </div>
         </div>
         <ul
@@ -54,46 +54,46 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="${()=>e.gallery.value?`gallery`:null}"
           role="list"
           aria-label="Selected files"
-          ?hidden=${()=>m.files.value.length===0}>
-          ${()=>m.files.value.map(t=>e.gallery.value?l.html`
-                    <li class="file-card" data-status=${()=>m.fileState(t).status}>
+          ?hidden=${()=>h.files.value.length===0}>
+          ${()=>h.files.value.map(t=>e.gallery.value?l.html`
+                    <li class="file-card" data-status=${()=>h.fileState(t).status}>
                       <span class="file-thumb-frame">
                         ${f(t)?l.html`
                                 <img
                                   class="file-thumb"
                                   alt=""
-                                  ref="${e=>{e&&(e.src=T(t))}}" />
+                                  ref="${e=>{e&&(e.src=E(t))}}" />
                               `:l.html`
                                 <span class="file-thumb file-thumb-generic" aria-hidden="true">
                                   <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
                                 </span>
                               `}
-                        ${(0,l.when)(()=>m.fileState(t).status===`success`,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`success`,()=>l.html`
                             <span class="file-status-badge file-status-badge-success" aria-hidden="true">
                               <ore-icon name="check" size="11" stroke-width="3" aria-hidden="true"></ore-icon>
                             </span>
                           `)}
-                        ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
                             <span class="file-status-badge file-status-badge-error" aria-hidden="true">
                               <ore-icon name="alert-circle" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                             </span>
                           `)}
                         <span class="file-card-actions">
-                          ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
+                          ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
                               <button
                                 class="file-card-action"
                                 type="button"
                                 aria-label="${`Retry uploading ${t.name}`}"
-                                @click=${()=>m.retryUpload(t)}>
+                                @click=${()=>h.retryUpload(t)}>
                                 <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
-                          ${(0,l.when)(()=>m.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
+                          ${(0,l.when)(()=>h.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
                               <button
                                 class="file-card-action"
                                 type="button"
                                 aria-label="${`Replace ${t.name}`}"
-                                @click=${()=>C(t)}>
+                                @click=${()=>w(t)}>
                                 <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
@@ -101,66 +101,66 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                             class="file-card-action file-card-remove"
                             type="button"
                             aria-label="${`Remove ${t.name}`}"
-                            @click=${e=>m.removeFile(t,e)}>
+                            @click=${e=>h.removeFile(t,e)}>
                             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                           </button>
                         </span>
                       </span>
                       <span class="file-card-name" title="${t.name}">${t.name}</span>
-                      ${(0,l.when)(()=>m.fileState(t).status===`uploading`,()=>l.html`
+                      ${(0,l.when)(()=>h.fileState(t).status===`uploading`,()=>l.html`
                           <ore-progress
                             type="linear"
                             size="sm"
-                            value=${()=>m.uploadPercent(t)}
-                            label=${()=>`${m.uploadPercent(t)}%`}></ore-progress>
-                          <span class="file-progress-meta">${()=>m.uploadMetaText(t)}</span>
+                            value=${()=>h.uploadPercent(t)}
+                            label=${()=>`${h.uploadPercent(t)}%`}></ore-progress>
+                          <span class="file-progress-meta">${()=>h.uploadMetaText(t)}</span>
                         `)}
-                      ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
-                          <span class="file-error-text">${()=>m.fileState(t).error}</span>
+                      ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
+                          <span class="file-error-text">${()=>h.fileState(t).error}</span>
                         `)}
                     </li>
                   `:l.html`
-                    <li class="file-item" data-status=${()=>m.fileState(t).status}>
+                    <li class="file-item" data-status=${()=>h.fileState(t).status}>
                       <span class="file-icon" aria-hidden="true">
                         <ore-icon
-                          name=${()=>m.statusIconName(t)}
+                          name=${()=>h.statusIconName(t)}
                           size="18"
                           stroke-width="1.75"
                           aria-hidden="true"></ore-icon>
                       </span>
                       <span class="file-meta">
                         <span class="file-name" title="${t.name}">${t.name}</span>
-                        ${(0,l.when)(()=>m.fileState(t).status===`uploading`,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`uploading`,()=>l.html`
                             <ore-progress
                               type="linear"
                               size="sm"
-                              value=${()=>m.uploadPercent(t)}
-                              label=${()=>`${m.uploadPercent(t)}%`}></ore-progress>
-                            <span class="file-progress-meta">${()=>m.uploadMetaText(t)}</span>
+                              value=${()=>h.uploadPercent(t)}
+                              label=${()=>`${h.uploadPercent(t)}%`}></ore-progress>
+                            <span class="file-progress-meta">${()=>h.uploadMetaText(t)}</span>
                           `)}
-                        ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
-                            <span class="file-error-text">${()=>m.fileState(t).error}</span>
+                        ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
+                            <span class="file-error-text">${()=>h.fileState(t).error}</span>
                           `)}
-                        ${(0,l.when)(()=>m.fileState(t).status===`idle`||m.fileState(t).status===`success`,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`idle`||h.fileState(t).status===`success`,()=>l.html`
                             <span class="file-size">${c.formatBytes(t.size)}</span>
                           `)}
                       </span>
                       <span class="file-actions">
-                        ${(0,l.when)(()=>m.fileState(t).status===`error`,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`error`,()=>l.html`
                             <button
                               class="file-action"
                               type="button"
                               aria-label="${`Retry uploading ${t.name}`}"
-                              @click=${()=>m.retryUpload(t)}>
+                              @click=${()=>h.retryUpload(t)}>
                               <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
-                        ${(0,l.when)(()=>m.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
+                        ${(0,l.when)(()=>h.fileState(t).status===`success`&&!!e.multiple.value&&!!e.upload.value,()=>l.html`
                             <button
                               class="file-action"
                               type="button"
                               aria-label="${`Replace ${t.name}`}"
-                              @click=${()=>C(t)}>
+                              @click=${()=>w(t)}>
                               <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
@@ -168,22 +168,22 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                           class="file-remove"
                           type="button"
                           aria-label="${`Remove ${t.name}`}"
-                          @click=${e=>m.removeFile(t,e)}>
+                          @click=${e=>h.removeFile(t,e)}>
                           <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                         </button>
                       </span>
                     </li>
                   `)}
         </ul>
-        <div class="helper-text" id="${v}" part="helper" ?hidden=${()=>h.value||!e.helper.value}>
+        <div class="helper-text" id="${y}" part="helper" ?hidden=${()=>g.value||!e.helper.value}>
           ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${y}"
+          id="${b}"
           role="alert"
           part="error"
-          ?hidden=${()=>!h.value}>
+          ?hidden=${()=>!g.value}>
           ${()=>e.error.value??``}
         </div>
       </div>