@antadesign/anta 0.3.18 → 0.3.20

package/dist/elements/a-tabs.css

@@ -1 +1 @@
-@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--_track-l: .55;--_track-c: .008;--_track-a: .06;--_sec-a: .03;--tabs-track-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_track-a));--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a));display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab a-icon{--icon-size: 16px}a-tabs[size=small] a-tab a-icon{--icon-size: 14px}a-tabs[size=large] a-tab a-icon{--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .14}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .14}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .045 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: attr(round type(<length>), 999px)}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--_track-l: .8;--_track-a: .07;--_sec-a: .08}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .12}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .12}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .26 .055 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
+@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--_track-l: .55;--_track-c: .008;--_track-a: .06;--_sec-a: .03;--tabs-track-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_track-a));--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a));display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab a-icon{--icon-size: 16px}a-tabs[size=small] a-tab a-icon{--icon-size: 14px}a-tabs[size=large] a-tab a-icon{--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .14}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .14}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: attr(tone type(<color>), #635b65);--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .045 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h)}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: attr(round type(<length>), 999px)}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--_track-l: .8;--_track-a: .07;--_sec-a: .08}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .12}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .12}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .26 .055 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}

package/dist/elements/a-tabs.d.ts

@@ -7,6 +7,9 @@ export declare class ATabsElement extends HTMLElementBase {
     private uncontrolledValue;
     private seeded;
     private observer?;
+    private resizeObserver?;
+    private resizeTimer?;
+    private resizeFrame?;
     private lastSelected;
     private alive;
     private childrenReady;

package/dist/elements/a-tabs.js

@@ -1,11 +1,14 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-tabs.css";
 class ATabsElement extends HTMLElementBase {
-  static observedAttributes = ["state", "disabled", "orientation"];
+  static observedAttributes = ["state", "disabled", "orientation", "noslide"];
   internals;
   uncontrolledValue = null;
   seeded = false;
   observer;
+  resizeObserver;
+  resizeTimer;
+  resizeFrame;
   // The tab last scrolled into view — so scroll-into-view fires only when the SELECTION
   // changes, not on every sync() (orientation / disabled changes call sync() too).
   lastSelected = null;
@@ -42,6 +45,7 @@ class ATabsElement extends HTMLElementBase {
       if (touchedTabs) this.sync();
     });
     this.observer.observe(this, { childList: true, subtree: true });
+    this.#syncResizeObserver();
     queueMicrotask(() => {
       if (!this.isConnected) return;
       this.childrenReady = true;
@@ -51,8 +55,11 @@ class ATabsElement extends HTMLElementBase {
   }
   disconnectedCallback() {
     this.observer?.disconnect();
+    this.resizeObserver?.disconnect();
+    this.#clearResizeTransitionPause();
   }
   attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "noslide" && this.isConnected) this.#syncResizeObserver();
     this.sync();
     if (name === "state" && this.alive && newValue !== oldValue) this.emitChange();
   }
@@ -74,6 +81,38 @@ class ATabsElement extends HTMLElementBase {
   get #tabs() {
     return Array.from(this.querySelectorAll("a-tab"));
   }
+  #syncResizeObserver() {
+    const canSlide = !this.hasAttribute("noslide") && typeof this.view.ResizeObserver === "function" && this.view.CSS.supports("anchor-scope: all");
+    if (!canSlide) {
+      this.resizeObserver?.disconnect();
+      this.#clearResizeTransitionPause();
+      return;
+    }
+    this.resizeObserver ??= new this.view.ResizeObserver(this.#pauseIndicatorTransition);
+    this.resizeObserver.observe(this);
+  }
+  // The anchored indicator's far edge changes when its strip resizes. Pause its
+  // edge transition through a resize burst so it cannot stretch between layouts.
+  #pauseIndicatorTransition = () => {
+    this.internals?.states.add("resizing");
+    if (this.resizeTimer != null) this.view.clearTimeout(this.resizeTimer);
+    if (this.resizeFrame != null) this.view.cancelAnimationFrame(this.resizeFrame);
+    this.resizeFrame = void 0;
+    this.resizeTimer = this.view.setTimeout(() => {
+      this.resizeTimer = void 0;
+      this.resizeFrame = this.view.requestAnimationFrame(() => {
+        this.resizeFrame = void 0;
+        this.internals?.states.delete("resizing");
+      });
+    }, 120);
+  };
+  #clearResizeTransitionPause() {
+    if (this.resizeTimer != null) this.view.clearTimeout(this.resizeTimer);
+    if (this.resizeFrame != null) this.view.cancelAnimationFrame(this.resizeFrame);
+    this.resizeTimer = void 0;
+    this.resizeFrame = void 0;
+    this.internals?.states.delete("resizing");
+  }
   sync = () => {
     if (!this.childrenReady) return;
     const value = this.#currentValue;

package/dist/elements/a-tooltip.css

@@ -1 +1 @@
-@layer anta{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: attr(round type(<length>), 20px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}
+@layer anta{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: attr(round type(<length>), 20px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-tooltip.d.ts

@@ -109,7 +109,7 @@ export declare class ATooltipElement extends HTMLElementBase {
     private position;
     /** Opacity for the inner bubble from the cursor's distance to the anchor rect
      *  (0 inside the rect): 1 within PROX_NEAR, a linear ramp to 0 at PROX_FAR.
-     *  Cursor-follow only — drives the "fade as you move away" behaviour. */
+     *  Cursor-follow only — drives the "fade as you move away" behavior. */
     private proximityOpacity;
     show: (e?: MouseEvent) => void;
     hide: () => void;

package/dist/elements/a-tooltip.js

@@ -341,7 +341,7 @@ class ATooltipElement extends HTMLElementBase {
   }
   /** Opacity for the inner bubble from the cursor's distance to the anchor rect
    *  (0 inside the rect): 1 within PROX_NEAR, a linear ramp to 0 at PROX_FAR.
-   *  Cursor-follow only — drives the "fade as you move away" behaviour. */
+   *  Cursor-follow only — drives the "fade as you move away" behavior. */
   proximityOpacity(e) {
     if (!this.anchor) return 1;
     const r = anchorRect(this.anchor);

package/dist/elements/index.d.ts

@@ -6,7 +6,7 @@
  * set + injects every element's CSS. Importing this barrel for side effects —
  * `import '@antadesign/anta/elements'` — gives you everything.
  *
- * For a SMALLER footprint, import just the element(s) you use instead:
+ * To reduce bundle size, import only the element(s) you use:
  *   import '@antadesign/anta/elements/a-tooltip'   // registers a-tooltip + its CSS, nothing else
  * That granular path pulls in only that element's code and CSS, nothing else.
  *

package/dist/general_types.d.ts

@@ -151,7 +151,7 @@ export interface AProgressAttributes extends BaseAttributes {
     value?: number | string | false;
     /** Maximum value. Defaults to 100. */
     max?: number | string;
-    /** Colour variant, or any literal CSS colour for a custom tone (derived in
+    /** Color variant, or any literal CSS color for a custom tone (derived in
      *  oklch). Named tones track light/dark automatically. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `medium` is the default. */
@@ -435,12 +435,12 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark colour in every state — checked fill *and* unselected box border — or any
+    /** Mark color in every state — checked fill *and* unselected box border — or any
      *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
      *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
-     *  stay neutral — recolour them in plain CSS via the `--text-N-{tone}` tokens. */
+     *  stay neutral — recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the checked mark only — the empty box stays
+    /** Like `tone`, but colored onto the checked mark only — the empty box stays
      *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
      *  off-state border and `tone-selected` the checked fill. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
@@ -489,9 +489,9 @@ export interface ACheckboxAttributes extends BaseAttributes {
  * wrapper supplies both.
  */
 export interface ASwitchAttributes extends BaseAttributes {
-    /** Track and thumb colour. A tinted tone also colours the unchecked chrome. */
+    /** Track and thumb color. A tinted tone also colors the unchecked chrome. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Checked-track-only colour. The unchecked track and thumb stay neutral. */
+    /** Checked-track-only color. The unchecked track and thumb stay neutral. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 26×16px, `medium` (default) = 30×18px, `large` = 34×20px. */
     size?: 'small' | 'medium' | 'large';
@@ -547,7 +547,7 @@ export interface AInputAttributes extends BaseAttributes {
      *  wrapper) the glyph. Only `critical` carries validity weight (`aria-invalid`
      *  + `:state(invalid)`); the others are advisory. Omit for the neutral field. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Custom accent colour (any literal CSS colour) — tints the resting + hover
+    /** Custom accent color (any literal CSS color) — tints the resting + hover
      *  border via an oklch derivation. `status` overrides it for validation. */
     tone?: string;
     /** Disabled state. Presence-based. */
@@ -571,6 +571,8 @@ export interface AInputAttributes extends BaseAttributes {
     name?: string;
     /** Placeholder shown when empty. */
     placeholder?: string;
+    /** Ellipsize an overflowing single-line value. Presence-based. */
+    truncate?: boolean | '';
     autocomplete?: string;
     inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     maxlength?: number | string;
@@ -612,9 +614,9 @@ export interface ASliderAttributes extends BaseAttributes {
     name?: string;
     /** Disables pointer and keyboard interaction. Presence-based. */
     disabled?: boolean | '';
-    /** Colour of the filled rail. Named tones or a literal CSS colour. */
+    /** Color of the filled rail. Named tones or a literal CSS color. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Colour of the thumb stroke. Named tones or a literal CSS colour. */
+    /** Color of the thumb stroke. Named tones or a literal CSS color. */
     'thumb-tone'?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=24px, medium=28px, large=32px tall. */
     size?: 'small' | 'medium' | 'large';
@@ -622,7 +624,7 @@ export interface ASliderAttributes extends BaseAttributes {
     'track-size'?: string;
     /** Diameter of the thumb as a CSS length, such as `'20px'`. */
     'thumb-size'?: string;
-    /** Fill the thumb with its resolved border colour. Presence-based. */
+    /** Fill the thumb with its resolved border color. Presence-based. */
     'thumb-fill'?: boolean | '';
     /** Fully round the rail and thumb, or set both to a custom radius. */
     round?: boolean | number | string;
@@ -666,7 +668,7 @@ export interface AInputTimeAttributes extends BaseAttributes {
     max?: string;
     /** Validation/feedback tone. Only `critical` carries validity weight. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Custom accent colour (any literal CSS colour) — tints the resting + hover
+    /** Custom accent color (any literal CSS color) — tints the resting + hover
      *  border via an oklch derivation; `status` overrides for validation. */
     tone?: string;
     /** Disabled state. Presence-based. */
@@ -938,12 +940,12 @@ export interface ACopyAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark colour in every state — selected ring fill + dot *and* unselected ring
+    /** Mark color in every state — selected ring fill + dot *and* unselected ring
      *  border — or any literal CSS color for a one-off custom tone. Named tones track
      *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
-     *  recolour them in plain CSS via the `--text-N-{tone}` tokens. */
+     *  recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the selected mark only — an unselected ring stays
+    /** Like `tone`, but colored onto the selected mark only — an unselected ring stays
      *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
      *  off-state border and `tone-selected` the selected fill. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
@@ -989,17 +991,17 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Colours every child's ring fill + dot *and*
-     *  unselected border. The option text stays neutral — recolour it in plain CSS via
+     *  color for a one-off custom tone. Colors every child's ring fill + dot *and*
+     *  unselected border. The option text stays neutral — recolor it in plain CSS via
      *  the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the selected option only — every unselected ring
+    /** Like `tone`, but colored onto the selected option only — every unselected ring
      *  stays neutral grey. Cascaded to children that don't set their own. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
-     *  `status`. Recolours `<a-radio-group-hint>`; omit for the neutral default. */
+     *  `status`. Recolors `<a-radio-group-hint>`; omit for the neutral default. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Disable the whole group. Presence-based. */
     disabled?: boolean | '';
@@ -1044,9 +1046,9 @@ export interface ARadioGroupAttributes extends BaseAttributes {
 export interface ATabAttributes extends BaseAttributes {
     /** This tab's identity / the value reported when it's selected. */
     value?: string;
-    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colours this tab's
+    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colors this tab's
      *  label + icons and, when selected, its indicator. Named tones tone the sliding
-     *  indicator too; a custom literal colour tones the indicator only in `noslide`.
+     *  indicator too; a custom literal color tones the indicator only in `noslide`.
      *  Custom tones also set `--tabs-tone-source` on the tab (via the wrapper's style). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Selected state — connect-time seed for the standalone render path (no tablist).
@@ -1176,7 +1178,7 @@ export interface ACardAttributes extends BaseAttributes {
     size?: 'small' | 'medium' | 'large';
     /** Which edge the full-bleed `media` slot sits on. `top` is the default. */
     'media-position'?: 'top' | 'bottom' | 'left' | 'right';
-    /** Selected / chosen state — an inset ring in the tone colour. Presence-based
+    /** Selected / chosen state — an inset ring in the tone color. Presence-based
      *  (`''` on, omit off). */
     selected?: boolean | '';
     /** Loading state — skeleton pulse, `aria-busy`, and (in link mode) navigation is
@@ -1220,7 +1222,7 @@ export interface ABannerAttributes extends BaseAttributes {
      *  `'closed'` starts it dismissed. */
     'default-state'?: 'open' | 'closed';
     /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
-     *  re-point the surface + text + border colour (used if you opt into a border); a
+     *  re-point the surface + text + border color (used if you opt into a border); a
      *  custom color keeps its hue with lightness/chroma pinned. `'neutral'` is the
      *  default (same as omitting it). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @antadesign/anta — Antithesis Design System
+ * @antadesign/anta — Anta design system
  *
  * Portable UI components with web component internals and JSX wrappers.
  * Works with React, Preact (via compat or `configure()`), or any custom JSX runtime.
@@ -43,7 +43,7 @@ export type { SwitchProps, SwitchChangeAttrs } from './components/Switch';
 export { Menu } from './components/Menu';
 export type { MenuProps } from './components/Menu';
 export { MenuItem } from './components/MenuItem';
-export type { MenuItemProps } from './components/MenuItem';
+export type { MenuItemProps, MenuItemCommonProps, MenuItemLinkMode, MenuItemActionMode, } from './components/MenuItem';
 export { MenuItemCopy } from './components/MenuItemCopy';
 export type { MenuItemCopyProps } from './components/MenuItemCopy';
 export { MenuSeparator } from './components/MenuSeparator';
@@ -71,7 +71,7 @@ export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
 export { Select, optionsWithSelection } from './components/Select';
 export type { SelectProps, SelectCommonProps, OptionValue, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } from './components/Select';
 export { SelectFaceted } from './components/SelectFaceted';
-export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
+export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, FacetFilter, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';

package/dist/jsx-runtime.d.ts

@@ -94,6 +94,14 @@ export interface AntaIntrinsicElements {
     'a-menu-item-hint': BaseAttributes;
     'a-menu-item-text': BaseAttributes;
     'a-menu-separator': BaseAttributes;
+    'a-menu-header': BaseAttributes;
+    'a-menu-footer': BaseAttributes;
+    'a-select-header': BaseAttributes;
+    'a-select-footer': BaseAttributes;
+    'a-select-chevron': BaseAttributes & {
+        open?: boolean | '';
+    };
+    'a-select-faceted-summary': BaseAttributes;
     'a-menu-group': AMenuGroupAttributes;
     'a-menu-group-label': BaseAttributes;
     'a-tabs': ATabsAttributes;
@@ -103,6 +111,7 @@ export interface AntaIntrinsicElements {
     'a-dialog': ADialogAttributes;
     'a-card': ACardAttributes;
     'a-card-icon-chip': BaseAttributes;
+    'a-input-date-time-container': BaseAttributes;
     'a-banner': ABannerAttributes;
     'a-banner-message': BaseAttributes;
     'a-toaster': AToasterAttributes;

package/docs/accessibility.md

@@ -0,0 +1,34 @@
+# Accessibility
+
+A few guidelines for designers and engineers using Anta.
+
+## Colors
+
+The matrix renders every text level on every background for the selected tone and theme. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. The controls change rendering and pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
+
+This table uses the browser's system colors directly. It changes with the active
+forced-colors palette, so it shows the values a component can use in that mode.
+
+## Color is not a unique communication channel
+
+A color-only message fails when a reader cannot distinguish its color. This includes color blindness, low contrast, low brightness, monochrome printing, glare, and theme changes.
+
+`tone` on `Progress`, `Text`, backgrounds, and borders is a secondary signal. Pair it with text and, where useful, a distinct icon shape such as a checkmark or cross.
+
+The simulator above makes it easy to check a candidate combination across the most common color-vision deficiencies and a handful of other vision conditions.
+
+## Low-priority text and contrast
+
+The `Text`/`Title` `quaternary` priority (`text-4`) and the `text-5` step (the faintest — used for disabled and hint text across components) sit at intentionally muted contrast, designed for non-essential metadata: timestamps, captions, helper hints, secondary counters. At small sizes (13–15 px) they may not pass WCAG AA against some background levels and tones. Use the matrix above to verify combinations before relying on them for content that has to be readable.
+
+`text-1` and `text-2` are the primary-content priorities; reach for them whenever the content matters.
+
+## Truncated text and screen readers
+
+When `Text` is `truncated` *without* `expandable`, the hidden portion is also hidden from the accessibility tree — the visible ellipsis is what AT reads, exactly like sighted users see. This is intentional: the content the user *can* see is what gets read. If the truncated content matters, set `expandable` too — the chevron is keyboard-discoverable, focus-visible, and Enter/click reveals the rest.
+
+## ARIA lives in JSX wrappers, not in web components
+
+Anta's web components (`<a-progress>`, `<a-text>`, `<a-icon>`, …) are **pure declarative DOM**. They never set ARIA attributes from JS — no `setAttribute` from constructors or `attributeChangedCallback`. ARIA wiring (`role`, `aria-label`, `aria-valuenow`, etc.) is layered on by the JSX wrappers (`Progress`, `Icon`, `Text`) as ordinary attribute pass-through. If you write the elements by hand instead of via the wrappers, you're responsible for the ARIA bits — the elements stay DOM-clean either way.
+
+This means consumers in other reactive engines (Worker-driven UIs, plain HTML, hand-rolled JSX) get web components that don't fight their state model, while React/Preact users get accessible defaults out of the box from the wrappers.