@antadesign/anta 0.3.2 → 0.3.4

package/dist/elements/a-radio-group.d.ts

@@ -1,6 +1,7 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-radio-group.css";
 export declare class ARadioGroupElement extends HTMLElementBase {
+    #private;
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals?;
@@ -17,9 +18,6 @@ export declare class ARadioGroupElement extends HTMLElementBase {
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
-    private get currentValue();
-    private get isDisabled();
-    private get radios();
     private sync;
     private requestSelect;
     private emitChange;

package/dist/elements/a-radio-group.js

@@ -12,7 +12,7 @@ class ARadioGroupElement extends HTMLElementBase {
   alive = false;
   /** The selected option's value, or `null` when nothing is selected. */
   get value() {
-    return this.currentValue;
+    return this.#currentValue;
   }
   constructor() {
     super();
@@ -51,28 +51,28 @@ class ARadioGroupElement extends HTMLElementBase {
   }
   formResetCallback() {
     const next = this.getAttribute("default-state");
-    this.emitStateChange(next, this.currentValue, "reset", false);
+    this.emitStateChange(next, this.#currentValue, "reset", false);
     this.uncontrolledValue = next;
     this.sync();
   }
   formStateRestoreCallback(state) {
-    this.emitStateChange(state, this.currentValue, "restore", false);
+    this.emitStateChange(state, this.#currentValue, "restore", false);
     this.uncontrolledValue = state;
     this.sync();
   }
   // Controlled when `state` is present; otherwise the in-memory uncontrolled value.
-  get currentValue() {
+  get #currentValue() {
     return this.hasAttribute("state") ? this.getAttribute("state") : this.uncontrolledValue;
   }
-  get isDisabled() {
+  get #isDisabled() {
     return this.hasAttribute("disabled") || (this.internals?.states.has("disabled") ?? false);
   }
-  get radios() {
+  get #radios() {
     return Array.from(this.querySelectorAll("a-radio"));
   }
   sync = () => {
-    const value = this.currentValue;
-    const radios = this.radios;
+    const value = this.#currentValue;
+    const radios = this.#radios;
     const selectedEl = radios.find((r) => r.value === value && value != null) ?? null;
     const submitted = selectedEl ? selectedEl.value : null;
     this.internals?.setFormValue(submitted, submitted);
@@ -84,7 +84,7 @@ class ARadioGroupElement extends HTMLElementBase {
   // The shared state algorithm: fire the cancelable `statechange` *before*
   // applying. Controlled never self-applies; uncontrolled applies unless vetoed.
   requestSelect(next) {
-    const prev = this.currentValue;
+    const prev = this.#currentValue;
     if (next === prev) return;
     const ok = this.emitStateChange(next, prev, "user", true);
     if (this.hasAttribute("state")) return;
@@ -114,7 +114,7 @@ class ARadioGroupElement extends HTMLElementBase {
     );
   }
   onClick = (e) => {
-    if (this.isDisabled) return;
+    if (this.#isDisabled) return;
     const radio = e.target?.closest(
       "a-radio"
     );
@@ -123,8 +123,8 @@ class ARadioGroupElement extends HTMLElementBase {
     this.requestSelect(radio.value);
   };
   onKeyDown = (e) => {
-    if (this.isDisabled) return;
-    const enabled = this.radios.filter((r) => !r.hasAttribute("disabled"));
+    if (this.#isDisabled) return;
+    const enabled = this.#radios.filter((r) => !r.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest(
       "a-radio"
@@ -141,7 +141,7 @@ class ARadioGroupElement extends HTMLElementBase {
     if (!forward && !back) return;
     e.preventDefault();
     let i = focused ? enabled.indexOf(focused) : -1;
-    if (i === -1) i = enabled.findIndex((r) => r.value === this.currentValue);
+    if (i === -1) i = enabled.findIndex((r) => r.value === this.#currentValue);
     if (i === -1) i = 0;
     const next = enabled[(i + (forward ? 1 : -1) + enabled.length) % enabled.length];
     next.focus();

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #ffffff;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 15%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:center;box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:center;justify-self:center;inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 24px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-fill: #635b65;--radio-fill-hover: #534c57;--radio-fill-active: #49424c}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone-text=brand],a-radio-group[tone-text=brand] a-radio:not([tone-text]){--radio-label-color: var(--text-2-brand);--radio-hint-color: var(--text-3-brand)}a-radio[tone-text=info],a-radio-group[tone-text=info] a-radio:not([tone-text]){--radio-label-color: var(--text-2-info);--radio-hint-color: var(--text-3-info)}a-radio[tone-text=success],a-radio-group[tone-text=success] a-radio:not([tone-text]){--radio-label-color: var(--text-2-success);--radio-hint-color: var(--text-3-success)}a-radio[tone-text=warning],a-radio-group[tone-text=warning] a-radio:not([tone-text]){--radio-label-color: var(--text-2-warning);--radio-hint-color: var(--text-3-warning)}a-radio[tone-text=critical],a-radio-group[tone-text=critical] a-radio:not([tone-text]){--radio-label-color: var(--text-2-critical);--radio-hint-color: var(--text-3-critical)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone]){--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}a-radio[tone-text]:not([tone-text=""],[tone-text=brand],[tone-text=neutral],[tone-text=info],[tone-text=success],[tone-text=warning],[tone-text=critical]){--radio-tone-text-source: attr(tone-text type(<color>), transparent)}a-radio[tone-text]:not([tone-text=""],[tone-text=brand],[tone-text=neutral],[tone-text=info],[tone-text=success],[tone-text=warning],[tone-text=critical]),a-radio-group[tone-text]:not([tone-text=""],[tone-text=brand],[tone-text=neutral],[tone-text=info],[tone-text=success],[tone-text=warning],[tone-text=critical]) a-radio:not([tone-text]){--radio-label-color: oklch(from var(--radio-tone-text-source) .5 c h);--radio-hint-color: oklch(from var(--radio-tone-text-source) .5 c h / .8);.dark &{--radio-label-color: oklch(from var(--radio-tone-text-source) .8 c h);--radio-hint-color: oklch(from var(--radio-tone-text-source) .8 c h / .8)}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px #000}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96;--radio-dot-disabled: #635b65;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 15%, transparent)}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]){--radio-fill: #534c57;--radio-fill-hover: #635b65;--radio-fill-active: #938d96}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f1eff1;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #d4ced4;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}

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

@@ -1,14 +1,6 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { SelectableChildElement } from "../anta_helpers";
 import "./a-radio.css";
-export declare class ARadioElement extends HTMLElementBase {
-    static observedAttributes: string[];
-    private internals?;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string): void;
-    get selected(): boolean;
-    set selected(on: boolean);
-    get value(): string;
-    private applyState;
+export declare class ARadioElement extends SelectableChildElement {
+    protected ariaProp: "ariaChecked";
 }
 export declare function register_a_radio(): void;

package/dist/elements/a-radio.js

@@ -1,38 +1,7 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { SelectableChildElement } from "../anta_helpers";
 import "./a-radio.css";
-class ARadioElement extends HTMLElementBase {
-  static observedAttributes = ["selected"];
-  internals;
-  constructor() {
-    super();
-    this.internals = this.attachInternals?.();
-  }
-  connectedCallback() {
-    this.applyState(this.hasAttribute("selected"));
-  }
-  attributeChangedCallback(name) {
-    if (name === "selected") this.applyState(this.hasAttribute("selected"));
-  }
-  get selected() {
-    return this.internals?.states.has("selected") ?? this.hasAttribute("selected");
-  }
-  set selected(on) {
-    this.applyState(!!on);
-  }
-  get value() {
-    return this.getAttribute("value") ?? "";
-  }
-  // `selected` is the single source: it drives the visual `:state(selected)` and
-  // publishes `aria-checked` through ElementInternals (the accessibility tree,
-  // not a DOM attribute). The group only sets `r.selected`; the radio owns how it
-  // reflects that. role="radio" comes from the wrapper, which gives ariaChecked
-  // something to attach to.
-  applyState(on) {
-    if (!this.internals) return;
-    if (on) this.internals.states.add("selected");
-    else this.internals.states.delete("selected");
-    this.internals.ariaChecked = on ? "true" : "false";
-  }
+class ARadioElement extends SelectableChildElement {
+  ariaProp = "ariaChecked";
 }
 function register_a_radio() {
   if (typeof customElements === "undefined") return;

package/dist/elements/a-tab.css

@@ -1 +1 @@
-@layer anta{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);box-shadow:0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;white-space:nowrap;text-wrap:nowrap;padding-block:var(--tab-padding-y);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}
+@layer anta{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;white-space:nowrap;text-wrap:nowrap;padding-block:var(--tab-padding-y);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}

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

@@ -1,14 +1,6 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { SelectableChildElement } from "../anta_helpers";
 import "./a-tab.css";
-export declare class ATabElement extends HTMLElementBase {
-    static observedAttributes: string[];
-    private internals?;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string): void;
-    get selected(): boolean;
-    set selected(on: boolean);
-    get value(): string;
-    private applyState;
+export declare class ATabElement extends SelectableChildElement {
+    protected ariaProp: "ariaSelected";
 }
 export declare function register_a_tab(): void;

package/dist/elements/a-tab.js

@@ -1,38 +1,7 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { SelectableChildElement } from "../anta_helpers";
 import "./a-tab.css";
-class ATabElement extends HTMLElementBase {
-  static observedAttributes = ["selected"];
-  internals;
-  constructor() {
-    super();
-    this.internals = this.attachInternals?.();
-  }
-  connectedCallback() {
-    if (this.hasAttribute("selected")) this.applyState(true);
-  }
-  attributeChangedCallback(name) {
-    if (name === "selected") this.applyState(this.hasAttribute("selected"));
-  }
-  get selected() {
-    return this.internals?.states.has("selected") ?? false;
-  }
-  set selected(on) {
-    this.applyState(!!on);
-  }
-  get value() {
-    return this.getAttribute("value") ?? "";
-  }
-  // `selected` is the single source: it drives the visual `:state(selected)` and
-  // publishes `aria-selected` through ElementInternals (the accessibility tree,
-  // not a DOM attribute). <a-tabs> only sets `t.selected`; the tab owns how it
-  // reflects that. role="tab" comes from the wrapper, which gives ariaSelected
-  // something to attach to.
-  applyState(on) {
-    if (!this.internals) return;
-    if (on) this.internals.states.add("selected");
-    else this.internals.states.delete("selected");
-    this.internals.ariaSelected = on ? "true" : "false";
-  }
+class ATabElement extends SelectableChildElement {
+  ariaProp = "ariaSelected";
 }
 function register_a_tab() {
   if (typeof customElements === "undefined") return;

package/dist/elements/a-tabpanel.css

@@ -1 +1 @@
-@layer anta{a-tabpanel{display:block}a-tabpanel[hidden]{display:none}a-tabpanel[data-hide=visibility]{visibility:hidden}}
+@layer anta{a-tabpanel{display:block}a-tabpanel:not(:state(active)):not([hide-mode=visibility]){display:none}a-tabpanel[hide-mode=visibility]:not(:state(active)){visibility:hidden}}

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

@@ -0,0 +1,17 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabpanel.css";
+export declare class ATabPanelElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    private internals?;
+    private tabs;
+    private onTabsChange;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
+     *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+    private bindTabs;
+    private sync;
+}
+export declare function register_a_tabpanel(): void;

package/dist/elements/a-tabpanel.js

@@ -0,0 +1,66 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-tabpanel.css";
+class ATabPanelElement extends HTMLElementBase {
+  static observedAttributes = ["value"];
+  internals;
+  // The tablist this panel belongs to (its flat sibling under the same parent).
+  tabs = null;
+  onTabsChange = () => this.sync();
+  constructor() {
+    super();
+    try {
+      this.internals = this.attachInternals?.();
+    } catch {
+    }
+  }
+  connectedCallback() {
+    this.bindTabs();
+    this.sync();
+    requestAnimationFrame(() => {
+      if (!this.tabs) this.bindTabs();
+      this.sync();
+    });
+  }
+  disconnectedCallback() {
+    this.tabs?.removeEventListener("change", this.onTabsChange);
+    this.tabs = null;
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  /** Locate the sibling <a-tabs> (the strip and panels are flat siblings under one
+   *  parent — `Tabs` renders no wrapper) and subscribe to its `change`. */
+  bindTabs() {
+    const tabs = this.parentElement?.querySelector(":scope > a-tabs") ?? null;
+    if (tabs === this.tabs) return;
+    this.tabs?.removeEventListener("change", this.onTabsChange);
+    this.tabs = tabs;
+    this.tabs?.addEventListener("change", this.onTabsChange);
+  }
+  sync() {
+    const value = this.getAttribute("value");
+    const active = !!this.tabs && value === (this.tabs.value ?? null);
+    try {
+      if (active) this.internals?.states.add("active");
+      else this.internals?.states.delete("active");
+    } catch {
+    }
+    if (this.internals && "ariaLabelledByElements" in this.internals) {
+      const tab = value != null ? this.tabs?.querySelector(`a-tab[value="${cssEscape(value)}"]`) : null;
+      this.internals.ariaLabelledByElements = tab ? [tab] : [];
+    }
+  }
+}
+function cssEscape(v) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(v) : v;
+}
+function register_a_tabpanel() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tabpanel"))
+    customElements.define("a-tabpanel", ATabPanelElement);
+}
+register_a_tabpanel();
+export {
+  ATabPanelElement,
+  register_a_tabpanel
+};

package/dist/elements/a-tabs.css

@@ -1 +1 @@
-@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-padding-y: calc((10px - var(--_pb)) / 2);--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: #635b65;--tab-fg-rest: var(--text-3);--tab-fg-hover: var(--text-1);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: color-mix(in oklch, #44374b 6%, transparent);--tabs-track-border: var(--border-4);--tab-pill-bg: var(--bg-1);--tab-pill-shadow: 0 0 3px 0 var(--border-3);--tab-secondary-bg: color-mix(in oklch, #44374b 3%, transparent);--tab-secondary-border: var(--border-3);--tab-secondary-shadow: 0 0 0px 1px var(--tab-secondary-border);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);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}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px}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: #5f4bc3;--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-secondary-border: var(--border-3-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: #1f6eb2;--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-secondary-border: var(--border-3-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: #2a7e43;--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-secondary-border: var(--border-3-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: #c37416;--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-secondary-border: var(--border-3-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: #c9302c;--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-secondary-border: var(--border-3-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .08);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5)}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-secondary-border: var(--border-3-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-secondary-border: var(--border-3-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}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);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .047 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .87 .065 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-fg-hover)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);border:.5px solid var(--tabs-track-border);border-radius:6px;padding:1.5px}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-pill-bg);box-shadow:var(--tab-pill-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone);--tab-fg-hover: var(--tab-selected-text)}a-tabs[priority=secondary]{border:.5px solid transparent;padding:1.5px}@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-secondary-shadow)}a-tabs[priority=tertiary]{padding-inline:2px}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary]:not([orientation=vertical]) a-tab{padding-block:calc(var(--tab-padding-y) + 2px)}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-pill-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-pill-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-secondary-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{--tabs-track-bg: color-mix(in oklch, #e4d1ef 10%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 6%, transparent)}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .12);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.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);--tabs-track-border: oklch(from var(--tabs-tone-source) .25 .057 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .33 .087 h)}}
+@layer anta{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-padding-y: calc((10px - var(--_pb)) / 2);--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: #635b65;--tab-fg-rest: var(--text-3);--tab-fg-hover: var(--text-1);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: color-mix(in oklch, #44374b 6%, transparent);--tabs-track-border: var(--border-4);--tab-pill-bg: var(--bg-1);--tab-pill-shadow: 0 0 3px 0 var(--border-3);--tab-secondary-bg: color-mix(in oklch, #44374b 3%, transparent);--tab-secondary-border: var(--border-3);--tab-secondary-shadow: 0 0 0px 1px var(--tab-secondary-border);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);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}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px}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: #5f4bc3;--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-secondary-border: var(--border-3-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: #1f6eb2;--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-secondary-border: var(--border-3-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: #2a7e43;--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-secondary-border: var(--border-3-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: #c37416;--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-secondary-border: var(--border-3-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: #c9302c;--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-secondary-border: var(--border-3-critical)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .08);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5)}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: #5f4bc3;--tab-selected-text: var(--text-1-brand);--tab-secondary-border: var(--border-3-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: #1f6eb2;--tab-selected-text: var(--text-1-info);--tab-secondary-border: var(--border-3-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: #2a7e43;--tab-selected-text: var(--text-1-success);--tab-secondary-border: var(--border-3-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: #c37416;--tab-selected-text: var(--text-1-warning);--tab-secondary-border: var(--border-3-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: #c9302c;--tab-selected-text: var(--text-1-critical);--tab-secondary-border: var(--border-3-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .62 .12 h / .5);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .55 .14 h / .03)}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);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .047 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .87 .065 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-fg-hover)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);border:.5px solid var(--tabs-track-border);border-radius:6px;padding:1.5px}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-pill-bg);box-shadow:var(--tab-pill-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone);--tab-fg-hover: var(--tab-selected-text)}a-tabs[priority=secondary]{border:.5px solid transparent;padding:1.5px}@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-secondary-shadow)}a-tabs[priority=tertiary]{padding-inline:2px}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary]:not([orientation=vertical]) a-tab{padding-block:calc(var(--tab-padding-y) + 2px)}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-pill-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-pill-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-secondary-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{--tabs-track-bg: color-mix(in oklch, #e4d1ef 10%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 6%, transparent)}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .12);--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tab-secondary-bg: oklch(from var(--tabs-tone-source) .8 .12 h / .06);--tab-pill-shadow: 0 0 3px 0 oklch(from var(--tabs-tone-source) .8 .1 h / .45)}.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);--tabs-track-border: oklch(from var(--tabs-tone-source) .25 .057 h);--tab-secondary-border: oklch(from var(--tabs-tone-source) .33 .087 h)}}

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

@@ -1,6 +1,7 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-tabs.css";
 export declare class ATabsElement extends HTMLElementBase {
+    #private;
     static observedAttributes: string[];
     private internals?;
     private uncontrolledValue;
@@ -15,10 +16,6 @@ export declare class ATabsElement extends HTMLElementBase {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     formDisabledCallback(disabled: boolean): void;
-    private get currentValue();
-    private get isDisabled();
-    private get isVertical();
-    private get tabs();
     private sync;
     private requestSelect;
     private emitChange;

package/dist/elements/a-tabs.js

@@ -14,7 +14,7 @@ class ATabsElement extends HTMLElementBase {
   alive = false;
   /** The selected tab's value, or `null` when nothing is selected. */
   get value() {
-    return this.currentValue;
+    return this.#currentValue;
   }
   constructor() {
     super();
@@ -52,21 +52,21 @@ class ATabsElement extends HTMLElementBase {
     this.sync();
   }
   // Controlled when `state` is present; otherwise the in-memory uncontrolled value.
-  get currentValue() {
+  get #currentValue() {
     return this.hasAttribute("state") ? this.getAttribute("state") : this.uncontrolledValue;
   }
-  get isDisabled() {
+  get #isDisabled() {
     return this.hasAttribute("disabled") || (this.internals?.states.has("disabled") ?? false);
   }
-  get isVertical() {
+  get #isVertical() {
     return this.getAttribute("orientation") === "vertical";
   }
-  get tabs() {
+  get #tabs() {
     return Array.from(this.querySelectorAll("a-tab"));
   }
   sync = () => {
-    const value = this.currentValue;
-    const tabs = this.tabs;
+    const value = this.#currentValue;
+    const tabs = this.#tabs;
     const selectedEl = tabs.find((t) => t.value === value && value != null) ?? null;
     for (const t of tabs) t.selected = t === selectedEl;
     if (this.internals && "ariaActiveDescendantElement" in this.internals) {
@@ -80,7 +80,7 @@ class ATabsElement extends HTMLElementBase {
   // The shared state algorithm: fire the cancelable `statechange` *before* applying.
   // Controlled never self-applies; uncontrolled applies unless vetoed.
   requestSelect(next) {
-    const prev = this.currentValue;
+    const prev = this.#currentValue;
     if (next === prev) return;
     const ok = this.emitStateChange(next, prev);
     if (this.hasAttribute("state")) return;
@@ -108,15 +108,15 @@ class ATabsElement extends HTMLElementBase {
     );
   }
   onClick = (e) => {
-    if (this.isDisabled) return;
+    if (this.#isDisabled) return;
     const tab = e.target?.closest("a-tab");
     if (!tab || tab.hasAttribute("disabled")) return;
     tab.focus();
     this.requestSelect(tab.value);
   };
   onKeyDown = (e) => {
-    if (this.isDisabled) return;
-    const enabled = this.tabs.filter((t) => !t.hasAttribute("disabled"));
+    if (this.#isDisabled) return;
+    const enabled = this.#tabs.filter((t) => !t.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest("a-tab");
     if (e.key === " " || e.key === "Enter") {
@@ -133,12 +133,12 @@ class ATabsElement extends HTMLElementBase {
       this.requestSelect(target.value);
       return;
     }
-    const forward = e.key === (this.isVertical ? "ArrowDown" : "ArrowRight");
-    const back = e.key === (this.isVertical ? "ArrowUp" : "ArrowLeft");
+    const forward = e.key === (this.#isVertical ? "ArrowDown" : "ArrowRight");
+    const back = e.key === (this.#isVertical ? "ArrowUp" : "ArrowLeft");
     if (!forward && !back) return;
     e.preventDefault();
     let i = focused ? enabled.indexOf(focused) : -1;
-    if (i === -1) i = enabled.findIndex((t) => t.value === this.currentValue);
+    if (i === -1) i = enabled.findIndex((t) => t.value === this.#currentValue);
     if (i === -1) i = 0;
     const next = enabled[(i + (forward ? 1 : -1) + enabled.length) % enabled.length];
     next.focus();

package/dist/elements/a-tag.css

@@ -1 +1 @@
-@layer anta{a-tag{--tag-text: var(--text-3);--tag-tint: #44374b;--tag-fill: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%;--tag-bg: color-mix(in oklch, var(--tag-tint) var(--_tag-bg-alpha), transparent);--tag-border: color-mix(in oklch, var(--tag-tint) var(--_tag-border-alpha), transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone=brand]{--tag-text: var(--text-3-brand);--tag-tint: #7460d7;--tag-fill: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-text: var(--text-3-info);--tag-tint: #2686d9;--tag-fill: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-text: var(--text-3-success);--tag-tint: #329550;--tag-fill: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-text: var(--text-3-warning);--tag-tint: #c37416;--tag-fill: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-text: var(--text-3-critical);--tag-tint: #de4545;--tag-fill: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-fill: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-fill: #5f4bc3}.dark a-tag[tone=info]{--tag-fill: #1f6eb2}.dark a-tag[tone=success]{--tag-fill: #2a7e43}.dark a-tag[tone=warning]{--tag-fill: #995200}.dark a-tag[tone=critical]{--tag-fill: #c9302c}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--_tag-bg-alpha: 10%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 20%;--_tag-tint-l: .54;--_tag-tint-c: .16;--tag-tint: oklch(from var(--tag-tone-source) var(--_tag-tint-l) var(--_tag-tint-c) h);--_tag-fill-l: .5;--tag-fill: oklch(from var(--tag-tone-source) var(--_tag-fill-l) var(--_tag-tint-c) h);--_tag-text-l: .4;--_tag-text-c: .15;--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%;--_tag-tint-l: .58;--_tag-fill-l: .45;--_tag-text-l: .75;--_tag-text-c: .11}a-tag[priority=primary]{--tag-bg: var(--tag-fill);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: color-mix(in oklch, var(--tag-edge) var(--_tag-edge-alpha), transparent)}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:10px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:12px;line-height:18px}a-tag[nocaps]{font-size:12px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag[size=large][nocaps]{font-size:13px}}
+@layer anta{a-tag{--tag-text: var(--text-3);--tag-tint: #44374b;--tag-fill: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%;--tag-bg: color-mix(in oklch, var(--tag-tint) var(--_tag-bg-alpha), transparent);--tag-border: color-mix(in oklch, var(--tag-tint) var(--_tag-border-alpha), transparent);--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.02ch;font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt"}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone=brand]{--tag-text: var(--text-3-brand);--tag-tint: #7460d7;--tag-fill: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-text: var(--text-3-info);--tag-tint: #2686d9;--tag-fill: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-text: var(--text-3-success);--tag-tint: #329550;--tag-fill: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-text: var(--text-3-warning);--tag-tint: #c37416;--tag-fill: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-text: var(--text-3-critical);--tag-tint: #de4545;--tag-fill: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-fill: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-fill: #5f4bc3}.dark a-tag[tone=info]{--tag-fill: #1f6eb2}.dark a-tag[tone=success]{--tag-fill: #2a7e43}.dark a-tag[tone=warning]{--tag-fill: #995200}.dark a-tag[tone=critical]{--tag-fill: #c9302c}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: attr(tone type(<color>), currentColor);--_tag-bg-alpha: 10%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 20%;--_tag-tint-l: .54;--_tag-tint-c: .16;--tag-tint: oklch(from var(--tag-tone-source) var(--_tag-tint-l) var(--_tag-tint-c) h);--_tag-fill-l: .5;--tag-fill: oklch(from var(--tag-tone-source) var(--_tag-fill-l) var(--_tag-tint-c) h);--_tag-text-l: .4;--_tag-text-c: .15;--tag-text: color-mix(in oklch, oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h) 80%, transparent);--tag-edge: oklch(from var(--tag-tone-source) var(--_tag-text-l) var(--_tag-text-c) h)}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%;--_tag-tint-l: .58;--_tag-fill-l: .45;--_tag-text-l: .75;--_tag-text-c: .11}a-tag[priority=primary]{--tag-bg: var(--tag-fill);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: color-mix(in oklch, var(--tag-edge) var(--_tag-edge-alpha), transparent)}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase;letter-spacing:.08ch;font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt"}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}}

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

@@ -22,29 +22,30 @@ import './a-text.css';
  *   `(hover: hover) and (pointer: fine)` to avoid sticky hover after a tap.
  */
 export declare class ATextElement extends HTMLElementBase {
+    #private;
     static observedAttributes: string[];
     private slotEl;
-    /** The expand/collapse chevron — built lazily, only while the element is
-     *  expandable (a plain `<a-text>` never creates a button or a listener).
-     *  Removed when `expandable` is dropped, and when a one-way expand completes. */
+    /** The chevron — built only while expandable, removed on drop or one-way expand. */
     private expandBtn?;
-    /** Expanded state lives here, on the element — a stateless wrapper can't hold
-     *  it and the app DOM may be reconciled off the UI thread. */
+    /** Expanded state lives on the element — a stateless wrapper can't hold it. */
     private expanded;
+    private overflowObserver?;
+    private contentObserver?;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    private get isExpandable();
-    private get isCollapsible();
-    /** Create or remove the chevron button to match `expandable`, then refresh
-     *  its label/visibility — the single place the button's lifecycle lives. */
+    /** Create or remove the chevron to match `expandable`, then refresh it. */
     private syncExpandButton;
     private handleToggle;
     private setExpanded;
-    /** Reflect the current state onto the button: label + `aria-expanded` + the
-     *  `.expanded` class (CSS keeps it visible and rotates the chevron up). A
-     *  one-way expand (no `collapsible`) removes the button once expanded — there
-     *  is nothing to collapse back to. */
+    private startOverflowObserver;
+    private stopOverflowObserver;
+    /** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
+     *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
+    private measureOverflow;
+    /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
+     *  one-way expand removes it once open. */
     private refreshButton;
 }
 export declare function register_a_text(): void;