@antadesign/anta 0.3.15 → 0.3.17

package/dist/elements/a-slider.js

@@ -0,0 +1,479 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-slider.css";
+const finiteNumber = (value, fallback) => {
+  if (value == null || value === "") return fallback;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+};
+const precisionOf = (value) => {
+  const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
+  return Math.max(0, (exponent?.[1]?.length ?? 0) - Number(exponent?.[2] ?? 0));
+};
+class ASliderElement extends HTMLElementBase {
+  static formAssociated = true;
+  static observedAttributes = [
+    "value",
+    "defaultvalue",
+    "min",
+    "max",
+    "step",
+    "disabled",
+    "track-click",
+    "value-display",
+    "value-prefix",
+    "value-suffix"
+  ];
+  #internals;
+  #control;
+  #railArea;
+  #fill;
+  #thumb;
+  #header;
+  #label;
+  #inlineValue;
+  #inlineValuePrefix;
+  #inlineValueSuffix;
+  #endValue;
+  #endValuePrefix;
+  #endValueSuffix;
+  #thumbValue;
+  #thumbValuePrefix;
+  #thumbValueSuffix;
+  #markers;
+  #extras;
+  #value = 0;
+  #seeded = false;
+  #dirty = false;
+  #drag;
+  get value() {
+    return this.#value;
+  }
+  set value(value) {
+    this.setAttribute("value", String(value));
+  }
+  get defaultValue() {
+    return finiteNumber(this.getAttribute("defaultvalue"), this.#min);
+  }
+  set defaultValue(value) {
+    this.setAttribute("defaultvalue", String(value));
+  }
+  constructor() {
+    super();
+    this.#internals = this.attachInternals?.();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1px;
+        outline: none;
+      }
+      [hidden] { display: none !important; }
+      .header {
+        display: flex;
+        align-items: baseline;
+        gap: 1px;
+        min-width: 0;
+      }
+      slot[name="label"] {
+        display: block;
+        min-width: 0;
+        color: var(--slider-label);
+        font-family: var(--sans-serif);
+        font-size: var(--slider-label-size);
+        font-weight: 500;
+        line-height: var(--slider-label-line-height);
+      }
+      .inline-value,
+      .end-value {
+        color: var(--slider-value);
+        font-family: var(--sans-serif);
+        font-feature-settings: 'ss02', 'ss05', 'tnum';
+        font-size: var(--slider-value-size);
+        font-variant-numeric: tabular-nums;
+        line-height: var(--slider-value-line-height);
+      }
+      .value-affix { color: var(--slider-value-affix); }
+      .inline-separator,
+      .inline-value { display: none; }
+      .inline-value { margin-inline-start: 0.5ch; }
+      .end-value {
+        display: block;
+        flex: 0 0 auto;
+        margin-inline-start: auto;
+        padding-inline-start: 1ch;
+      }
+      :host([value-display="inline"]) .inline-separator,
+      :host([value-display="inline"]) .inline-value { display: block; }
+      :host([value-display="inline"]) .end-value,
+      :host([value-display="thumb"]) .end-value,
+      :host([value-display="none"]) .end-value { display: none; }
+      .control {
+        position: relative;
+        block-size: var(--anta-slider-control-size);
+        border-radius: 4px;
+        cursor: grab;
+        touch-action: none;
+        user-select: none;
+      }
+      :host([track-click="jump"]) .control { cursor: pointer; }
+      .control[data-dragging] { cursor: grabbing; }
+      .control[data-dragging] .thumb { background: var(--slider-thumb-active); }
+      :host(:focus-visible) .control:not([data-pointer-focus]) {
+        outline: 1px solid var(--focus-ring);
+        outline-offset: 0;
+      }
+      .rail-area {
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline: calc(var(--anta-slider-thumb-size) / 2);
+        block-size: var(--anta-slider-track-size);
+        transform: translateY(-50%);
+      }
+      .rail,
+      .fill {
+        position: absolute;
+        inset: 0;
+        border-radius: var(--slider-track-radius);
+        transition: background-color 75ms ease-out;
+      }
+      .rail {
+        inset-inline: calc(var(--slider-track-inset) - var(--anta-slider-thumb-size) / 2);
+        background: var(--slider-track);
+      }
+      .fill {
+        inset-inline-start: calc(var(--slider-track-inset) - var(--anta-slider-thumb-size) / 2);
+        inset-inline-end: auto;
+        inline-size: calc(var(--_percent, 0%) + var(--anta-slider-thumb-size) / 2 - var(--slider-track-inset));
+        background: var(--slider-fill);
+      }
+      .thumb {
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline-start: var(--_percent, 0%);
+        box-sizing: border-box;
+        inline-size: var(--anta-slider-thumb-size);
+        block-size: var(--anta-slider-thumb-size);
+        border: var(--anta-slider-thumb-border-width) solid var(--slider-thumb-border);
+        border-radius: var(--slider-thumb-radius);
+        background: var(--slider-thumb);
+        transition: background-color 75ms ease-out, border-color 75ms ease-out;
+        transform: translate(-50%, -50%);
+      }
+      .thumb-value {
+        display: none;
+        position: absolute;
+        inset-inline-start: var(--_percent, 0%);
+        inset-block-start: 50%;
+        min-inline-size: max-content;
+        color: var(--slider-value);
+        font-family: var(--sans-serif);
+        font-feature-settings: 'ss02', 'ss05', 'tnum';
+        font-size: var(--slider-value-size);
+        font-variant-numeric: tabular-nums;
+        line-height: var(--slider-value-line-height);
+        padding-inline: 6px;
+        background: var(--bg-2);
+        border: 1px solid var(--border-3);
+        border-radius: 4px;
+        text-align: center;
+        transform: translate(-50%, calc(
+          -50% - var(--anta-slider-control-size) / 2 - 1px - var(--slider-value-line-height) / 2
+        ));
+      }
+      :host([value-display="thumb"]) .thumb-value { display: block; }
+      slot[name="markers"] {
+        display: block;
+        position: relative;
+        min-block-size: var(--slider-marker-line-height);
+      }
+      slot[name="markers"]::slotted(*) {
+        position: absolute;
+        inset-inline-start: var(--slider-marker-position);
+        max-inline-size: min(12rem, 50vw);
+        color: var(--slider-marker);
+        font-family: var(--sans-serif);
+        font-feature-settings: 'ss02', 'ss05', 'tnum';
+        font-size: var(--slider-marker-size);
+        font-variant-numeric: tabular-nums;
+        line-height: var(--slider-marker-line-height);
+        text-align: center;
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      slot[name="markers"]::slotted([data-slider-marker-start]) { text-align: start; transform: translateX(0); }
+      slot[name="markers"]::slotted([data-slider-marker-end]) { text-align: end; transform: translateX(-100%); }
+      slot:not([name]) { display: block; }
+      :host([disabled]) .control,
+      :host(:disabled) .control { cursor: not-allowed; }
+      @media (forced-colors: active) {
+        .rail { background: Canvas; border: 1px solid CanvasText; }
+        .fill { background: Highlight; }
+        .thumb { background: Canvas; border-color: CanvasText; }
+        :host(:focus-visible) .control { outline: 2px solid Highlight; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .rail,
+        .fill,
+        .thumb { transition: none; }
+      }
+    `;
+    this.#header = document.createElement("div");
+    this.#header.className = "header";
+    this.#header.part.add("header");
+    this.#label = document.createElement("slot");
+    this.#label.name = "label";
+    this.#label.part.add("label");
+    const separator = document.createElement("span");
+    separator.className = "inline-separator";
+    separator.textContent = ":";
+    this.#inlineValue = document.createElement("span");
+    this.#inlineValue.className = "inline-value";
+    this.#inlineValue.part.add("value");
+    this.#inlineValuePrefix = document.createElement("span");
+    this.#inlineValuePrefix.className = "value-affix";
+    this.#inlineValueSuffix = document.createElement("span");
+    this.#inlineValueSuffix.className = "value-affix";
+    this.#inlineValue.append(this.#inlineValuePrefix, this.#inlineValueSuffix);
+    this.#endValue = document.createElement("span");
+    this.#endValue.className = "end-value";
+    this.#endValue.part.add("value");
+    this.#endValuePrefix = document.createElement("span");
+    this.#endValuePrefix.className = "value-affix";
+    this.#endValueSuffix = document.createElement("span");
+    this.#endValueSuffix.className = "value-affix";
+    this.#endValue.append(this.#endValuePrefix, this.#endValueSuffix);
+    this.#header.append(this.#label, separator, this.#inlineValue, this.#endValue);
+    this.#control = document.createElement("div");
+    this.#control.className = "control";
+    this.#control.part.add("control");
+    this.#railArea = document.createElement("div");
+    this.#railArea.className = "rail-area";
+    const rail = document.createElement("div");
+    rail.className = "rail";
+    rail.part.add("track");
+    this.#fill = document.createElement("div");
+    this.#fill.className = "fill";
+    this.#fill.part.add("fill");
+    this.#thumb = document.createElement("div");
+    this.#thumb.className = "thumb";
+    this.#thumb.part.add("thumb");
+    this.#thumbValue = document.createElement("span");
+    this.#thumbValue.className = "thumb-value";
+    this.#thumbValue.part.add("thumb-value");
+    this.#thumbValuePrefix = document.createElement("span");
+    this.#thumbValuePrefix.className = "value-affix";
+    this.#thumbValueSuffix = document.createElement("span");
+    this.#thumbValueSuffix.className = "value-affix";
+    this.#thumbValue.append(this.#thumbValuePrefix, this.#thumbValueSuffix);
+    this.#railArea.append(rail, this.#fill, this.#thumb, this.#thumbValue);
+    this.#control.append(this.#railArea);
+    this.#markers = document.createElement("slot");
+    this.#markers.name = "markers";
+    this.#markers.part.add("markers");
+    this.#extras = document.createElement("slot");
+    this.#extras.part.add("extras");
+    for (const slot of [this.#label, this.#markers, this.#extras]) {
+      slot.addEventListener("slotchange", () => this.#syncSlotVisibility());
+    }
+    this.#control.addEventListener("pointerdown", (event) => this.#beginDrag(event));
+    this.#control.addEventListener("pointermove", (event) => this.#moveDrag(event));
+    this.#control.addEventListener("pointerup", (event) => this.#finishDrag(event));
+    this.#control.addEventListener("pointercancel", (event) => this.#finishDrag(event));
+    this.addEventListener("keydown", (event) => this.#handleKeydown(event));
+    this.addEventListener("blur", () => delete this.#control.dataset.pointerFocus);
+    shadow.append(style, this.#header, this.#control, this.#markers, this.#extras);
+  }
+  connectedCallback() {
+    if (!this.#seeded) {
+      this.#value = this.#initialValue();
+      this.#seeded = true;
+    }
+    this.#paint();
+    this.#syncSlotVisibility();
+  }
+  attributeChangedCallback(name) {
+    if (!this.#seeded) return;
+    if (name === "value") {
+      if (this.hasAttribute("value")) {
+        this.#value = this.#normalize(finiteNumber(this.getAttribute("value"), this.#min));
+        this.#dirty = false;
+      } else if (!this.#dirty) {
+        this.#value = this.#initialValue();
+      }
+    } else if (name === "defaultvalue" && !this.hasAttribute("value") && !this.#dirty) {
+      this.#value = this.#initialValue();
+    } else if (name === "min" || name === "max" || name === "step") {
+      this.#value = this.#normalize(this.#value);
+    }
+    this.#paint();
+    if (name === "value-display") this.#syncSlotVisibility();
+  }
+  formResetCallback() {
+    const previous = this.#value;
+    this.#value = this.#normalize(finiteNumber(this.getAttribute("defaultvalue"), this.#min));
+    this.#dirty = false;
+    this.#paint();
+    if (this.#value !== previous) this.#emitInputAndChange();
+  }
+  formStateRestoreCallback(state) {
+    if (typeof state !== "string") return;
+    this.#value = this.#normalize(finiteNumber(state, this.#min));
+    this.#dirty = true;
+    this.#paint();
+  }
+  formDisabledCallback() {
+    this.#paint();
+  }
+  get #min() {
+    return finiteNumber(this.getAttribute("min"), 0);
+  }
+  get #max() {
+    return Math.max(this.#min, finiteNumber(this.getAttribute("max"), 100));
+  }
+  get #step() {
+    const step = finiteNumber(this.getAttribute("step"), 1);
+    return step > 0 ? step : 1;
+  }
+  get #isDisabled() {
+    return this.hasAttribute("disabled") || this.matches(":disabled");
+  }
+  #initialValue() {
+    const source = this.getAttribute("value") ?? this.getAttribute("defaultvalue");
+    return this.#normalize(finiteNumber(source, this.#min));
+  }
+  #normalize(value) {
+    const min = this.#min;
+    const max = this.#max;
+    const step = this.#step;
+    const stepped = min + Math.round((Math.min(max, Math.max(min, value)) - min) / step) * step;
+    const precision = Math.min(12, Math.max(precisionOf(min), precisionOf(max), precisionOf(step)));
+    return Number(Math.min(max, Math.max(min, stepped)).toFixed(precision));
+  }
+  #percent(value = this.#value) {
+    const range = this.#max - this.#min;
+    return range > 0 ? (value - this.#min) / range * 100 : 0;
+  }
+  #paint() {
+    const percent = `${this.#percent()}%`;
+    this.#railArea.style.setProperty("--_percent", percent);
+    const value = this.#displayValue();
+    const displayedValue = String(this.#value);
+    const prefix = this.getAttribute("value-prefix") ?? "";
+    const suffix = this.getAttribute("value-suffix") ?? "";
+    for (const [element, prefixElement, suffixElement] of [
+      [this.#inlineValue, this.#inlineValuePrefix, this.#inlineValueSuffix],
+      [this.#endValue, this.#endValuePrefix, this.#endValueSuffix],
+      [this.#thumbValue, this.#thumbValuePrefix, this.#thumbValueSuffix]
+    ]) {
+      element.textContent = displayedValue;
+      prefixElement.textContent = prefix;
+      suffixElement.textContent = suffix;
+      element.prepend(prefixElement);
+      element.append(suffixElement);
+    }
+    const internals = this.#internals;
+    if (!internals) return;
+    internals.ariaValueMin = String(this.#min);
+    internals.ariaValueMax = String(this.#max);
+    internals.ariaValueNow = String(this.#value);
+    internals.ariaValueText = value;
+    internals.setFormValue(this.#isDisabled ? null : String(this.#value), String(this.#value));
+  }
+  #displayValue() {
+    return `${this.getAttribute("value-prefix") ?? ""}${this.#value}${this.getAttribute("value-suffix") ?? ""}`;
+  }
+  #syncSlotVisibility() {
+    const assigned = (slot) => slot.assignedNodes({ flatten: true }).length > 0;
+    this.#header.hidden = !assigned(this.#label) && this.getAttribute("value-display") === "none";
+    this.#markers.hidden = !assigned(this.#markers);
+    this.#extras.hidden = !assigned(this.#extras);
+  }
+  #setValue(value) {
+    const next = this.#normalize(value);
+    if (next === this.#value) return false;
+    this.#value = next;
+    this.#dirty = true;
+    this.#paint();
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    return true;
+  }
+  #emitInputAndChange() {
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  #valueAt(clientX) {
+    const rect = this.#railArea.getBoundingClientRect();
+    if (rect.width <= 0) return this.#value;
+    return this.#min + (clientX - rect.left) / rect.width * (this.#max - this.#min);
+  }
+  #beginDrag(event) {
+    if (this.#isDisabled || event.button !== 0) return;
+    const rect = this.#railArea.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    this.#drag = { pointerId: event.pointerId, startX: event.clientX, startValue: this.#value };
+    this.#control.setPointerCapture(event.pointerId);
+    this.#control.dataset.dragging = "";
+    this.#control.dataset.pointerFocus = "";
+    this.focus({ preventScroll: true });
+    if (this.getAttribute("track-click") === "jump") this.#setValue(this.#valueAt(event.clientX));
+    event.preventDefault();
+  }
+  #moveDrag(event) {
+    const drag = this.#drag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const next = this.getAttribute("track-click") === "jump" ? this.#valueAt(event.clientX) : drag.startValue + (event.clientX - drag.startX) / this.#railArea.getBoundingClientRect().width * (this.#max - this.#min);
+    this.#setValue(next);
+    event.preventDefault();
+  }
+  #finishDrag(event) {
+    const drag = this.#drag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    this.#drag = void 0;
+    delete this.#control.dataset.dragging;
+    if (this.#control.hasPointerCapture(event.pointerId)) this.#control.releasePointerCapture(event.pointerId);
+    if (this.#value !== drag.startValue) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  #handleKeydown(event) {
+    if (event.target !== this || this.#isDisabled) return;
+    delete this.#control.dataset.pointerFocus;
+    const page = Math.max(this.#step, (this.#max - this.#min) / 10);
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = this.#value + this.#step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = this.#value - this.#step;
+        break;
+      case "PageUp":
+        next = this.#value + page;
+        break;
+      case "PageDown":
+        next = this.#value - page;
+        break;
+      case "Home":
+        next = this.#min;
+        break;
+      case "End":
+        next = this.#max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (this.#setValue(next)) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+}
+function register_a_slider() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-slider")) customElements.define("a-slider", ASliderElement);
+}
+register_a_slider();
+export {
+  ASliderElement,
+  register_a_slider
+};

package/dist/elements/a-switch.css

@@ -0,0 +1 @@
+@layer anta{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: color-mix(in oklch, #44374b 10%, transparent);--switch-thumb: var(--bg-1);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--_switch-tone-l-rest: .56;--_switch-tone-l-hover: .48;--_switch-tone-l-active: .42;--switch-track-on: oklch(from var(--switch-tone-source) var(--_switch-tone-l-rest) c h);--switch-track-on-hover: oklch(from var(--switch-tone-source) var(--_switch-tone-l-hover) c h);--switch-track-on-active: oklch(from var(--switch-tone-source) var(--_switch-tone-l-active) c h);--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, attr(round type(<length>), 999px));--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px))}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:0 1px 2px color-mix(in oklch,#44374b 25%,transparent)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):not(:state(checked)):hover:before{border-color:var(--switch-track-off-stroke-hover)}&:not(:disabled):hover:state(checked):before{background:var(--switch-track-on-hover)}}&:not(:disabled):not(:state(checked)):active:before{border-color:var(--switch-track-off-stroke-active)}&:not(:disabled):active:state(checked):before{background:var(--switch-track-on-active)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--switch-label-color-disabled);&:before{background:var(--switch-track-disabled);border-color:var(--switch-track-disabled);transition:none}&:after{box-shadow:none;transition:none}&:state(checked){&:before{background:color-mix(in oklch,var(--switch-track-on) 50%,transparent);border-color:transparent}&:after{background:color-mix(in oklch,var(--switch-thumb) 50%,transparent);box-shadow:0 1px 2px color-mix(in oklch,#44374b 12.5%,transparent)}}a-switch-hint{color:var(--switch-label-color-disabled)}}&[size=small]{--switch-gap: 6px;--switch-track-inline-size: 26px;--switch-track-block-size: 16px;--switch-thumb-size: 10px;--switch-thumb-size-off: 8px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 11px;--switch-label-fs: 13px;--switch-label-lh: 16px;--switch-hint-fs: 12px;--switch-hint-lh: 14px}&[size=large]{--switch-track-inline-size: 34px;--switch-track-block-size: 20px;--switch-thumb-size: 14px;--switch-thumb-size-off: 11px;--switch-thumb-inset-off: 5px;--switch-thumb-travel: 15px;--switch-label-fs: 17px;--switch-label-lh: 22px;--switch-hint-fs: 15px;--switch-hint-lh: 19px}}a-switch-label,a-switch-hint{display:block;grid-column:2;min-inline-size:0}a-switch-hint{color:var(--switch-hint-color);font-size:var(--switch-hint-fs);line-height:var(--switch-hint-lh);margin-block-start:2px}a-switch[tone=brand]{--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand)}a-switch[tone=neutral]{--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral)}a-switch[tone=info]{--switch-tone-source: var(--anta-seed-info);--switch-off-tone-source: var(--anta-seed-info)}a-switch[tone=success]{--switch-tone-source: var(--anta-seed-success);--switch-off-tone-source: var(--anta-seed-success)}a-switch[tone=warning]{--switch-tone-source: var(--anta-seed-warning);--switch-off-tone-source: var(--anta-seed-warning)}a-switch[tone=critical]{--switch-tone-source: var(--anta-seed-critical);--switch-off-tone-source: var(--anta-seed-critical)}a-switch[tone]:not([tone=""],[tone=neutral]){--_switch-off-track: oklch(from var(--switch-off-tone-source) var(--_switch-tone-l-rest) c h);--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: oklch(from var(--_switch-off-chrome) calc(l + .17) c h);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: var(--_switch-off-chrome);--switch-thumb-off: var(--_switch-off-chrome)}a-switch[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--switch-tone-source: attr(tone type(<color>), transparent);--switch-off-tone-source: attr(tone type(<color>), transparent)}a-switch[tone-selected=brand]{--switch-tone-source: var(--anta-seed-brand)}a-switch[tone-selected=neutral]{--switch-tone-source: var(--anta-seed-neutral)}a-switch[tone-selected=info]{--switch-tone-source: var(--anta-seed-info)}a-switch[tone-selected=success]{--switch-tone-source: var(--anta-seed-success)}a-switch[tone-selected=warning]{--switch-tone-source: var(--anta-seed-warning)}a-switch[tone-selected=critical]{--switch-tone-source: var(--anta-seed-critical)}a-switch[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--switch-tone-source: attr(tone-selected type(<color>), transparent)}.dark a-switch{--switch-track-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--switch-thumb: #ece9ec;--switch-thumb-off: var(--switch-track-off-stroke);--_switch-tone-l-rest: .47;--_switch-tone-l-hover: .53;--_switch-tone-l-active: .58}.dark a-switch[tone]:not([tone=""],[tone=neutral]){--switch-track-off-stroke: var(--_switch-off-chrome);--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: oklch(from var(--_switch-off-chrome) calc(l + .17) c h)}@media(forced-colors:active){a-switch:before,a-switch:after{forced-color-adjust:none}a-switch:before{background-color:Canvas;border-color:CanvasText}a-switch:after{background-color:CanvasText;box-shadow:none}a-switch:state(checked):before{background-color:CanvasText;border-color:CanvasText}a-switch:state(checked):after{background-color:Canvas}a-switch:disabled:before{background-color:Canvas;border-color:GrayText}a-switch:disabled:after{background-color:GrayText}a-switch:disabled:state(checked):before{background-color:GrayText;border-color:GrayText}a-switch:disabled:state(checked):after{background-color:Canvas}}}

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

@@ -0,0 +1,31 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-switch.css";
+/**
+ * `<a-switch>` — a form-associated binary control for an immediate setting.
+ * State is held in ElementInternals, so the checked visual is available to CSS
+ * through `:state(checked)` without exposing a mutable host attribute. `state`
+ * is the controlled value; `default-state` is the uncontrolled initial value.
+ */
+export declare class ASwitchElement extends HTMLElementBase {
+    #private;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private internals?;
+    private currentState;
+    private seeded;
+    private dirty;
+    private alive;
+    /** Current checked value. Write through the `state` attribute instead. */
+    get checked(): boolean;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private seed;
+    private emitChange;
+    private toggle;
+    private paint;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(): void;
+}
+export declare function register_a_switch(): void;

package/dist/elements/a-switch.js

@@ -0,0 +1,109 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-switch.css";
+const parseState = (value) => value === "checked" ? "checked" : "unchecked";
+class ASwitchElement extends HTMLElementBase {
+  static formAssociated = true;
+  static observedAttributes = ["state", "default-state", "value"];
+  internals;
+  currentState = "unchecked";
+  seeded = false;
+  dirty = false;
+  alive = false;
+  /** Current checked value. Write through the `state` attribute instead. */
+  get checked() {
+    return this.currentState === "checked";
+  }
+  constructor() {
+    super();
+    this.internals = this.attachInternals?.();
+    this.addEventListener("click", (event) => this.toggle(event));
+    this.addEventListener("keydown", (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        this.click();
+      }
+    });
+  }
+  connectedCallback() {
+    if (!this.seeded) {
+      this.seed();
+      this.seeded = true;
+    }
+    this.paint();
+    this.alive = true;
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      const next = parseState(this.getAttribute("state"));
+      const changed = next !== this.currentState;
+      this.currentState = next;
+      this.paint();
+      if (changed && this.alive) this.emitChange();
+      return;
+    }
+    if (name === "default-state" && !this.#isControlled && !this.dirty) this.seed();
+    this.paint();
+  }
+  get #isDisabled() {
+    return this.matches(":disabled");
+  }
+  get #isControlled() {
+    return this.hasAttribute("state");
+  }
+  seed() {
+    this.currentState = parseState(
+      this.getAttribute("state") ?? this.getAttribute("default-state")
+    );
+  }
+  emitChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  toggle(_event) {
+    if (this.#isDisabled) return;
+    const prev = this.currentState;
+    const next = prev === "checked" ? "unchecked" : "checked";
+    const accepted = this.dispatchEvent(
+      new CustomEvent("statechange", {
+        cancelable: true,
+        detail: { next, prev }
+      })
+    );
+    if (this.#isControlled) return;
+    if (!accepted) return;
+    this.currentState = next;
+    this.dirty = true;
+    this.paint();
+    this.emitChange();
+  }
+  paint() {
+    const internals = this.internals;
+    if (!internals) return;
+    internals.states.delete("checked");
+    if (this.currentState === "checked") internals.states.add("checked");
+    internals.ariaChecked = this.currentState === "checked" ? "true" : "false";
+    internals.setFormValue?.(
+      this.currentState === "checked" ? this.getAttribute("value") ?? "on" : null,
+      this.currentState
+    );
+  }
+  formResetCallback() {
+    this.seed();
+    this.paint();
+  }
+  formStateRestoreCallback(state) {
+    this.currentState = parseState(state);
+    this.paint();
+  }
+  formDisabledCallback() {
+    this.paint();
+  }
+}
+function register_a_switch() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-switch")) customElements.define("a-switch", ASwitchElement);
+}
+register_a_switch();
+export {
+  ASwitchElement,
+  register_a_switch
+};

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)}}
+@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}}}}