@antadesign/anta 0.3.34 → 0.3.35

package/dist/elements/a-expander.js

@@ -1,382 +1,123 @@
 import { HTMLElementBase, parseOpenState } from "../anta_helpers";
 import "./a-expander.css";
-const ANIM_MS = 200;
 const INTERACTIVE_SELECTOR = 'a-button,a-checkbox,a-radio,a-radio-group,a-input,a-input-time,a-calendar,a-menu-item,a-tab,[data-anta][role="button"],button,a[href],input,select,textarea,label,[contenteditable=""],[contenteditable="true"]';
 const DISABLED_SELECTOR = ':disabled,[disabled],[aria-disabled="true"]';
-function ignoresToggle(el) {
-  if (el.matches("[data-expander-ignore]")) return true;
-  return el.matches(INTERACTIVE_SELECTOR) && !el.matches(DISABLED_SELECTOR);
+function ignoresToggle(element) {
+  return element.hasAttribute("data-expander-ignore") || element.matches(INTERACTIVE_SELECTOR) && !element.matches(DISABLED_SELECTOR);
 }
-const SHADOW_STYLE = `
-  :host { display: block; }
-
-  .header {
-    display: flex;
-    /* Stretch so the trigger button (and the actions row) fill the full host
-       height \u2014 the title's hit area is the whole header, not just the text. */
-    align-items: stretch;
-  }
-
-  :host([indicator-placement="end"]) .header {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto var(--_expander-indicator-track);
-  }
-
-  slot[name="actions"] { display: none; }
-  .header.has-actions slot[name="actions"] {
-    display: flex;
-    align-items: center;
-    gap: var(--_expander-actions-gap);
-    flex-shrink: 0;
-    margin-inline-start: var(--_expander-actions-start);
-    /* Inset from the right edge (the host has no padding of its own). */
-    margin-inline-end: var(--_expander-actions-end);
-  }
-  :host([indicator-placement="end"]) .header.has-actions slot[name="actions"] {
-    grid-column: 2;
-    grid-row: 1;
-    z-index: 1;
-  }
-
-  button {
-    appearance: none;
-    -webkit-appearance: none;
-    background: none;
-    border: none;
-    margin: 0;
-    /* The default button fills the header beside its actions. The title and
-       body share --expander-gutter, and the indicator hangs inside that gutter.
-       End placement switches to the header's subgrid. */
-    position: relative;
-    padding: var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter);
-    flex: 1;
-    min-width: 0;
-    font: inherit;
-    font-variation-settings: inherit;
-    color: inherit;
-    text-align: left;
-
-    display: flex;
-    align-items: center;
-    gap: 0;
-    cursor: pointer;
-    user-select: text;
-    border-radius: 2px;
-    outline: none;
-  }
-
-  :host([indicator-placement="end"]) button {
-    grid-column: 1 / -1;
-    grid-row: 1;
-    display: grid;
-    grid-template-columns: subgrid;
-    padding: var(--_expander-header-padding-block) 0;
-  }
-  :host([indicator-placement="end"]) slot[name="title"] {
-    grid-column: 1;
-    display: block;
-    min-width: 0;
-    margin-inline-start: var(--expander-gutter);
-  }
-
-  button:focus-visible {
-    outline: 1px solid var(--focus-ring);
-    outline-offset: 0px;
-  }
-
-  .indicator {
-    position: absolute;
-    inset-inline-start: var(--_expander-indicator-start);
-    top: 50%;
-    width: var(--_expander-indicator-size);
-    height: var(--_expander-indicator-size);
-    pointer-events: none;
-    opacity: 0.6;
-    transform: translateY(-50%);
-    transition: transform 150ms ease, opacity 150ms ease;
-  }
-  .indicator slot { display: grid; place-items: center; width: 100%; height: 100%; }
-  .indicator slot::slotted(*) { pointer-events: none; }
-  .indicator .glyph {
-    display: block;
-    width: var(--_expander-indicator-size);
-    height: var(--_expander-indicator-size);
-    background-color: currentColor;
-    -webkit-mask-image: var(--_expander-indicator-mask);
-            mask-image: var(--_expander-indicator-mask);
-    -webkit-mask-size: contain;
-            mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-            mask-position: center;
-  }
-  :host([indicator="plus"]) .indicator .glyph { position: relative; background: none; mask: none; -webkit-mask: none; }
-  :host([indicator="plus"]) .indicator .glyph::before,
-  :host([indicator="plus"]) .indicator .glyph::after {
-    content: '';
-    position: absolute;
-    background: currentColor;
-    border-radius: calc(var(--_expander-indicator-stroke) / 2);
-  }
-  :host([indicator="plus"]) .indicator .glyph::before {
-    width: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
-    height: var(--_expander-indicator-stroke);
-    left: var(--_expander-indicator-stroke);
-    top: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
-  }
-  :host([indicator="plus"]) .indicator .glyph::after {
-    width: var(--_expander-indicator-stroke);
-    height: calc(var(--_expander-indicator-size) - 2 * var(--_expander-indicator-stroke));
-    left: calc((var(--_expander-indicator-size) - var(--_expander-indicator-stroke)) / 2);
-    top: var(--_expander-indicator-stroke);
-    transition: transform 150ms ease;
-  }
-  button:enabled:hover .indicator { opacity: 1; }
-  button[aria-expanded="true"] .indicator { transform: translateY(-50%) rotate(90deg); opacity: 1; }
-  :host([indicator="plus"]) button[aria-expanded="true"] .indicator,
-  button[aria-expanded="true"] .indicator.has-pair { transform: translateY(-50%); }
-  :host([indicator="plus"]) button[aria-expanded="true"] .glyph::after { transform: scaleY(0); }
-  button[aria-expanded="false"] slot[name="indicator"]::slotted([data-when="open"]),
-  button[aria-expanded="true"] slot[name="indicator"]::slotted([data-when="closed"]) { display: none; }
-
-  :host([indicator-placement="end"]) .indicator {
-    position: static;
-    grid-column: 3;
-    grid-row: 1;
-    justify-self: end;
-    align-self: center;
-    margin-inline-end: var(--_expander-indicator-edge);
-    transform: rotate(90deg);
-  }
-  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator { transform: rotate(270deg); }
-  :host([indicator-placement="end"]) .indicator.has-custom,
-  :host([indicator-placement="end"]) .indicator.has-pair { transform: none; }
-  :host([indicator-placement="end"][indicator="plus"]) .indicator { transform: none; }
-  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-custom { transform: rotate(180deg); }
-  :host([indicator-placement="end"]) button[aria-expanded="true"] .indicator.has-pair,
-  :host([indicator-placement="end"][indicator="plus"]) button[aria-expanded="true"] .indicator { transform: none; }
-
-  button:enabled:hover { color: var(--expander-text-hover); }
-  :host([priority="tertiary"]) button:enabled:hover { --_summary-underline: underline; }
-  button:enabled:active { color: var(--expander-text); }
-  button:disabled { cursor: default; }
-  button:enabled:not([aria-expanded="true"]):active .indicator {
-    opacity: 0.6;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .indicator, :host([indicator="plus"]) .indicator .glyph::after { transition: none; }
-  }
-
-  .region {
-    display: grid;
-    grid-template-rows: 0fr;
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .header:has(button[aria-expanded="true"]) + .region { grid-template-rows: 1fr; }
-
-  /* The transparent tertiary border still insets the content by 1px. Pull the
-     header and region back so outdent lands flush with surrounding content. */
-  :host([priority="tertiary"][outdent]) .header,
-  :host([priority="tertiary"][outdent]) .region {
-    margin-inline-start: -1px;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    .region { transition: grid-template-rows ${ANIM_MS}ms ease; }
-  }
-
-  [part="content"] { display: block; min-height: 0; overflow: clip; }
-  .header:has(button[aria-expanded="true"]) + .region [part="content"] {
-    overflow: visible;
-    transition: overflow 0s ${ANIM_MS}ms;
-    transition-behavior: allow-discrete;
-  }
-`;
-const parseState = parseOpenState;
 class AExpanderElement extends HTMLElementBase {
-  static observedAttributes = ["state", "disabled", "round"];
-  summary;
-  titleSlot;
-  region;
-  header;
-  // A dedicated shadow <style> the element rewrites to publish the measured
-  // `round` radius as a `:host` custom property (see `measureRoundRadius`). Kept
-  // separate from the static SHADOW_STYLE so updating it is a cheap textContent
-  // swap on one small sheet, and it's shadow-internal (no host mutation).
-  roundStyle;
-  // Observes the header (folded) box so the `round` radius tracks its height —
-  // including custom header content. Guarded for engines without ResizeObserver.
-  roundObserver;
-  // ElementInternals exposes the open/closed state as a custom state
-  // (`:state(open)`) for consumer styling, including the indicator. It's NOT a host
-  // attribute (declarative-DOM safe: no host mutation, no reconciliation
-  // churn), just element-internal state the browser exposes for CSS matching.
-  // Guarded for engines without attachInternals / CustomStateSet (no-op there).
-  internals;
+  static observedAttributes = ["state", "disabled"];
+  #internals;
+  #summary;
+  #title;
+  #actions;
+  #indicator;
+  #content;
+  #region;
+  #observer;
+  #seeded = false;
   constructor() {
     super();
-    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : void 0;
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.summary = document.createElement("button");
-    this.summary.type = "button";
-    this.summary.setAttribute("aria-expanded", "false");
-    this.summary.setAttribute("part", "summary");
-    const titleSlot = document.createElement("slot");
-    titleSlot.name = "title";
-    this.titleSlot = titleSlot;
-    const indicator = document.createElement("span");
-    indicator.className = "indicator";
-    indicator.setAttribute("part", "indicator");
+    this.#internals = this.attachInternals();
+    const shadow = this.attachShadow({ mode: "open", slotAssignment: "manual" });
+    const node = (tag, part) => {
+      const element = this.ownerDocument.createElement(tag);
+      element.setAttribute("part", part);
+      return element;
+    };
+    this.#summary = node("button", "summary");
+    this.#summary.type = "button";
+    this.#summary.setAttribute("aria-expanded", "false");
+    this.#title = node("slot", "title");
+    const indicator = node("span", "indicator");
     indicator.setAttribute("aria-hidden", "true");
     indicator.inert = true;
-    const indicatorSlot = document.createElement("slot");
-    indicatorSlot.name = "indicator";
-    const glyph = document.createElement("span");
-    glyph.className = "glyph";
-    indicatorSlot.append(glyph);
-    indicatorSlot.addEventListener("slotchange", () => {
-      const assigned = indicatorSlot.assignedElements();
-      const hasPair = assigned.some((el) => el.hasAttribute("data-when"));
-      indicator.classList.toggle("has-custom", assigned.length > 0 && !hasPair);
-      indicator.classList.toggle("has-pair", hasPair);
-    });
-    indicator.append(indicatorSlot);
-    this.summary.append(titleSlot, indicator);
-    this.summary.addEventListener("click", this.onSummaryClick);
-    const header = document.createElement("div");
-    header.className = "header";
-    this.header = header;
-    const actionsSlot = document.createElement("slot");
-    actionsSlot.name = "actions";
-    actionsSlot.setAttribute("part", "actions");
-    actionsSlot.addEventListener("slotchange", () => {
-      header.classList.toggle("has-actions", actionsSlot.assignedElements().length > 0);
-    });
-    header.append(this.summary, actionsSlot);
-    this.region = document.createElement("div");
-    this.region.className = "region";
-    const content = document.createElement("slot");
-    content.setAttribute("part", "content");
-    this.region.append(content);
-    this.roundStyle = document.createElement("style");
-    if (typeof ResizeObserver !== "undefined") {
-      this.roundObserver = new ResizeObserver(() => this.measureRoundRadius());
-    }
-    shadow.append(style, this.roundStyle, header, this.region);
+    this.#indicator = node("slot", "indicator-content");
+    indicator.append(this.#indicator);
+    this.#summary.append(this.#title, indicator);
+    this.#summary.addEventListener("click", this.#onSummaryClick);
+    const header = node("div", "header");
+    this.#actions = node("slot", "actions");
+    header.append(this.#summary, this.#actions);
+    this.#region = node("div", "region");
+    this.#region.inert = true;
+    this.#content = node("slot", "content");
+    this.#region.append(this.#content);
+    shadow.append(header, this.#region);
   }
-  /** Publish HALF the folded (header + host borders) height as
-   *  `--_expander-round-radius` on `:host`, for `a-expander[round]` to consume.
-   *  Reads layout only; writes only the shadow sheet — no host mutation. */
-  /** A `round` attribute carrying a length (`round="12px"`) is a fixed radius —
-   *  the CSS uses it directly and the measured pill is unused, so skip measuring.
-   *  (The wrapper's `round={12}` path sets an inline var + a bare `round=""`, so
-   *  it isn't caught here; the measurement runs but its var is simply overridden.) */
-  hasFixedRound() {
-    const v = this.getAttribute("round");
-    return v != null && v.trim() !== "";
-  }
-  measureRoundRadius() {
-    if (!this.hasAttribute("round") || this.hasFixedRound()) return;
-    const h = this.header.getBoundingClientRect().height;
-    if (h <= 0) return;
-    const cs = getComputedStyle(this);
-    const borders = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
-    const radius = (h + borders) / 2;
-    this.roundStyle.textContent = `:host{--_expander-round-radius:${radius}px}`;
-  }
-  startRoundObserver() {
-    if (!this.roundObserver || this.hasFixedRound()) return;
-    this.roundObserver.observe(this.header);
-    this.measureRoundRadius();
-  }
-  stopRoundObserver() {
-    this.roundObserver?.disconnect();
-    this.roundStyle.textContent = "";
-  }
-  /** Controlled mode: the `state` attribute is present and owns the state. */
   get #controlled() {
     return this.hasAttribute("state");
   }
-  /** The currently *applied* state (read from the shadow, the source of truth
-   *  for what's painted). */
   get #current() {
-    return this.summary.getAttribute("aria-expanded") === "true" ? "open" : "closed";
+    return this.#summary.getAttribute("aria-expanded") === "true" ? "open" : "closed";
   }
   connectedCallback() {
-    this.syncDisabled();
-    this.applyState(parseState(this.getAttribute(this.#controlled ? "state" : "default-state")));
-    if (this.hasAttribute("round")) this.startRoundObserver();
+    this.#summary.disabled = this.hasAttribute("disabled");
+    if (this.#controlled) this.#applyState(parseOpenState(this.getAttribute("state")));
+    else if (!this.#seeded) this.#applyState(parseOpenState(this.getAttribute("default-state")));
+    this.#seeded = true;
+    this.#observer ??= new MutationObserver(() => this.#project());
+    this.#observer.observe(this, { childList: true });
+    this.#project();
   }
   disconnectedCallback() {
-    this.roundObserver?.disconnect();
+    this.#observer?.disconnect();
   }
-  attributeChangedCallback(name) {
-    if (name === "disabled") this.syncDisabled();
-    else if (name === "state" && this.#controlled) this.applyState(parseState(this.getAttribute("state")));
-    else if (name === "round") {
-      if (this.hasAttribute("round")) this.startRoundObserver();
-      else this.stopRoundObserver();
-    }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "disabled") this.#summary.disabled = this.hasAttribute("disabled");
+    else if (name === "state" && this.#controlled) this.#applyState(parseOpenState(newValue));
   }
-  syncDisabled() {
-    this.summary.disabled = this.hasAttribute("disabled");
+  #project() {
+    const children = [...this.children];
+    this.#title.assign(...children.filter((node) => node.localName === "a-expander-summary" || node.localName === "a-expander-title"));
+    this.#actions.assign(...children.filter((node) => node.localName === "a-expander-actions"));
+    this.#indicator.assign(...children.filter((node) => node.localName === "a-expander-indicator"));
+    this.#content.assign(...children.filter((node) => node.localName === "a-expander-details"));
   }
-  /** Apply state to the shadow internals (idempotent; reads the host, writes
-   *  only the shadow). `aria-expanded` is both the a11y signal and the CSS
-   *  state hook; `inert` keeps collapsed content out of the tab order and the
-   *  accessibility tree. */
-  applyState(state) {
+  #applyState(state) {
     const open = state === "open";
-    this.summary.setAttribute("aria-expanded", open ? "true" : "false");
-    this.region.inert = !open;
-    try {
-      if (open) this.internals?.states?.add("open");
-      else this.internals?.states?.delete("open");
-    } catch {
+    this.#summary.setAttribute("aria-expanded", String(open));
+    this.#region.inert = !open;
+    this.#internals.states.delete(open ? "closed" : "open");
+    this.#internals.states.add(state);
+  }
+  #clickIgnoresToggle(event) {
+    const path = event.composedPath();
+    const nearest = path.find((node) => node.nodeType === 1 && node.localName === "a-expander");
+    if (nearest && nearest !== this) return true;
+    return path.slice(0, path.indexOf(this.#summary)).some((node) => node.nodeType === 1 && ignoresToggle(node));
+  }
+  #titleControlHasFocus() {
+    let active = this.ownerDocument.activeElement;
+    const titles = this.#title.assignedElements();
+    while (active && active !== this) {
+      if (titles.some((title) => title.contains(active)) && ignoresToggle(active)) return true;
+      active = active.parentElement;
     }
+    return false;
   }
-  /** Refuse to toggle when the click landed on a control inside the projected
-   *  title — walk the composed path up to (not including) the summary button and
-   *  test each element with `ignoresToggle` (enabled interactive control or the
-   *  opt-out marker). Synchronous and read here in the element, so it stands in
-   *  off-UI-thread runtimes. Suppressing before the dispatch also keeps a
-   *  *controlled* consumer from toggling (no `statechange` fires). */
-  #clickIgnoresToggle(e) {
-    const path = e.composedPath();
-    const end = path.indexOf(this.summary);
-    const scope = end === -1 ? path : path.slice(0, end);
-    return scope.some((n) => n instanceof Element && ignoresToggle(n));
-  }
-  /** A selection that reaches projected title content came from a drag. Keep it
-   *  selected instead of treating its release as an activation. */
   #titleHasSelection() {
     const selection = this.ownerDocument.getSelection();
-    if (!selection || selection.isCollapsed || selection.rangeCount === 0) return false;
+    if (!selection || selection.isCollapsed || !selection.rangeCount) return false;
     const range = selection.getRangeAt(0);
-    return this.titleSlot.assignedNodes().some((node) => range.intersectsNode(node));
+    return this.#title.assignedNodes().some((node) => range.intersectsNode(node));
   }
-  /** Compute the requested next state, announce it (cancelable, *before*
-   *  applying), then — uncontrolled only, and only if not vetoed — apply it.
-   *  Controlled: never self-apply; the consumer answers via the `state`
-   *  attribute. See STATEFUL-COMPONENTS.md. */
-  onSummaryClick = (e) => {
-    if (this.#clickIgnoresToggle(e) || e.detail !== 0 && this.#titleHasSelection()) return;
+  #onSummaryClick = (event) => {
+    if (this.hasAttribute("disabled") || this.#clickIgnoresToggle(event) || event.isTrusted && event.detail === 0 && this.#titleControlHasFocus() || event.detail !== 0 && this.#titleHasSelection()) return;
+    const controlled = this.#controlled;
     const prev = this.#current;
     const next = prev === "open" ? "closed" : "open";
-    const ok = this.dispatchEvent(
-      new CustomEvent("statechange", { cancelable: true, detail: { next, prev } })
-    );
-    if (this.#controlled) return;
-    if (ok) this.applyState(next);
+    const accepted = this.dispatchEvent(new this.view.CustomEvent("statechange", {
+      cancelable: true,
+      detail: { next, prev }
+    }));
+    if (!controlled && !this.#controlled && accepted) this.#applyState(next);
   };
 }
 function register_a_expander() {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-expander")) {
-    customElements.define("a-expander", AExpanderElement);
-  }
+  if (!customElements.get("a-expander")) customElements.define("a-expander", AExpanderElement);
 }
 register_a_expander();
 export {

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

@@ -1,29 +1,11 @@
-import { HTMLElementBase } from '../anta_helpers';
+import { HTMLElementBase } from '../element-base';
 import './a-icon.css';
 import './a-icon.shapes.css';
 import './a-loader.css';
-/**
- * `<a-icon shape="…">` — pure declarative icon element.
- *
- * No shadow DOM and no JS state. Styling is driven entirely by external
- * CSS: the base rule (`a-icon.css`) sets up the mask compositing, and
- * the per-shape rules (`a-icon.shapes.css`, generated) supply the
- * `--icon` URL. Color follows `currentColor`.
- *
- * Sizing notes (`a-icon.css` ships comment-free):
- * - The 16px default lives in a plain `--icon-size: 16px` declaration,
- *   never inside `attr()` — Safari has no typed `attr()` for `<length>`,
- *   so a default on the attr() path can't resolve there and the
- *   var-substituted `width` would collapse to 0 on an empty inline-block.
- * - `<a-icon size="N">` maps to `--icon-size` via CSS Values 5 typed
- *   `attr()` (Chrome 133+ / Safari 18.2+) behind an `@supports` guard.
- *   Custom properties parse permissively, so without the guard the invalid
- *   `attr()` would only fail later, at `width: var(--icon-size)`
- *   substitution — collapsing the icon to 0×0 on unsupported engines
- *   instead of falling back to the 16px base. The `<Icon size={N}>` JSX
- *   wrapper sets `--icon-size` inline as a plain length and is the
- *   cross-browser path.
- */
+/** Compatibility class for applications that explicitly register `<a-icon>`.
+ * Icon renders through CSS and does not require registration. */
 export declare class AIconElement extends HTMLElementBase {
 }
+/** Register the compatibility class when an integration requires a defined tag.
+ * Ordinary Icon usage needs only its stylesheet. */
 export declare function register_a_icon(): void;

package/dist/elements/a-icon.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase } from "../element-base";
 import "./a-icon.css";
 import "./a-icon.shapes.css";
 import "./a-loader.css";
@@ -10,7 +10,6 @@ function register_a_icon() {
     customElements.define("a-icon", AIconElement);
   }
 }
-register_a_icon();
 export {
   AIconElement,
   register_a_icon

package/dist/elements/a-input-time.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-stretch:normal;font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: 999px;--input-time-field-radius: var(--input-time-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--input-time-round: attr(round type(<length>), 999px)}}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: var(--border-2);--input-time-border: light-dark( oklch(from var(--input-time-tone-source) .7 calc(c*.8) h), oklch(from var(--input-time-tone-source) .5 calc(c*.8) h) );--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);@supports (color: attr(probe type(<color>),red)){--input-time-tone-source: attr(tone type(<color>), var(--border-2))}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]:not([status=neutral]){--input-time-border: light-dark( oklch(from var(--input-time-tone-source) .58 c h), oklch(from var(--input-time-tone-source) .52 c h) );--input-time-border-hover: var(--input-time-border)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input-time{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;outline:none}a-input-time::part(label){display:none;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time::part(field){--_bc: var(--input-time-border);--_bw: .5px;display:flex;align-items:center;box-sizing:border-box;min-height:var(--input-time-field-height);background:var(--input-time-bg);border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 var(--_bw) var(--_bc);transition:box-shadow .12s ease}a-input-time[status]:not([status=neutral])::part(field){--_bw: 1px}@media(hover:hover)and (pointer:fine){a-input-time:not(:disabled)::part(field):hover{--_bc: var(--input-time-border-hover);--_bw: 1px}}a-input-time:not(:disabled):not([readonly]):focus::part(field),a-input-time:not(:disabled)[readonly]:focus:state(kb-focus)::part(field){--_bc: var(--input-time-border-hover);--_bw: 1px;outline:1px solid var(--focus-ring);outline-offset:1px}@media(forced-colors:active){a-input-time::part(field){border:1px solid ButtonBorder}}a-input-time::part(leading){display:none;color:var(--input-time-adornment);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height)}a-input-time:disabled::part(leading),a-input-time:disabled::part(trailing){opacity:.5;pointer-events:none}a-input-time::part(segments){display:flex;align-items:center;flex:1 1 auto;min-width:0;padding-inline:7px;color:var(--input-time-text);font-family:var(--sans-serif);font-stretch:normal;font-style:normal;font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:400}a-input-time::part(segment){appearance:none;display:inline-block;box-sizing:border-box;min-width:0;padding-inline:1px;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;font-variation-settings:inherit;font-stretch:inherit;font-style:inherit;line-height:inherit;text-align:center;white-space:nowrap;outline:none;cursor:text;font-variant-numeric:tabular-nums}a-input-time::part(period){color:var(--input-time-period-color)}a-input-time::part(segment)::placeholder{color:var(--input-time-placeholder);opacity:1}a-input-time::part(literal){margin-inline:-1px;white-space:pre;color:var(--input-time-text)}a-input-time:disabled::part(segments){cursor:not-allowed}a-input-time:disabled::part(segment){cursor:not-allowed}a-input-time::part(trailing){display:none;color:var(--input-time-adornment);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height)}a-input-time::part(clear){display:flex;align-items:center;flex-shrink:0;visibility:hidden;box-sizing:border-box}a-input-time:state(filled):not(:disabled):not([readonly])::part(clear){visibility:visible}a-input-time::part(hint){display:none;gap:4px;align-items:flex-start;padding-inline-start:1px;color:var(--input-time-hint);font-family:var(--sans-serif);font-size:calc(var(--input-time-font-size) - 1px);line-height:calc(var(--input-time-line-height) - 2px)}a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-stretch:normal;font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--_input-time-action-size: 24px;--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:defined>:is(a-input-time-label,a-input-time-leading,a-input-time-clear,a-input-time-trailing,a-input-time-hint){display:contents}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading),a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input-time:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input-time:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-time-trailing-inset, 7px)}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time>:is([slot=clear],[slot=trailing]) :is(a-button,button[data-anta],a[role=button][data-anta]),a-input-time>:is(a-button,button[data-anta],a[role=button][data-anta]):is([slot=clear],[slot=trailing]){--_fs: var(--input-time-font-size);--_lh: var(--input-time-line-height);--_pb: 0px;box-sizing:border-box;width:auto;min-width:var(--_input-time-action-size);height:var(--_input-time-action-size);min-height:0;justify-content:center;&[data-anta-icon-only]{width:var(--_input-time-action-size)}}a-input-time:state(trailing-actions)::part(trailing){margin-inline-end:0;padding-inline-end:var(--input-time-trailing-inset, 2px)}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px;--_input-time-action-size: 20px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px;--_input-time-action-size: 28px}a-input-time[round]{--input-time-round: 999px;--input-time-field-radius: var(--input-time-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--input-time-round: attr(round type(<length>), 999px)}}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]):not([status]:not([status=neutral])){--input-time-tone-source: var(--border-2);--input-time-border: light-dark( oklch(from var(--input-time-tone-source) .7 calc(c*.8) h), oklch(from var(--input-time-tone-source) .5 calc(c*.8) h) );--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);@supports (color: attr(probe type(<color>),red)){--input-time-tone-source: attr(tone type(<color>), var(--border-2))}}a-input-time[status=critical]{--input-time-status-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-status-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-status-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-status-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-status-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]:not([status=neutral]){--input-time-border: light-dark( oklch(from var(--input-time-status-source) .58 c h), oklch(from var(--input-time-status-source) .52 c h) );--input-time-border-hover: var(--input-time-border)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}}@layer anta.components{a-input-time[dim-actions]::part(leading),a-input-time[dim-actions]::part(trailing),a-input-time[dim-actions]::part(clear){opacity:var(--_input-time-actions-opacity, .6);transition:opacity .12s ease}a-input-time[dim-actions]:not(:disabled)::part(field):hover,a-input-time[dim-actions]:not(:disabled)::part(field):focus-within{--_input-time-actions-opacity: 1}a-input-time:has(>[slot=clear])::part(clear){padding:2px}a-input-time[dim-actions]:disabled::part(leading),a-input-time[dim-actions]:disabled::part(trailing){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time::part(field),a-input-time[dim-actions]::part(leading),a-input-time[dim-actions]::part(trailing),a-input-time[dim-actions]::part(clear){transition:none}}}

package/dist/elements/a-input-time.d.ts

@@ -10,6 +10,7 @@ export declare class AInputTimeElement extends HTMLElementBase {
     constructor();
     getAnchorRect(): DOMRect;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     removeAttribute(name: string): void;
     toggleAttribute(name: string, force?: boolean): boolean;
@@ -23,7 +24,7 @@ export declare class AInputTimeElement extends HTMLElementBase {
     /** Focus the first editable segment. */
     focus(options?: FocusOptions): void;
     get name(): string;
-    set name(v: string);
+    set name(v: string | null | undefined);
     get validity(): ValidityState | undefined;
     get validationMessage(): string;
     get willValidate(): boolean;