@antadesign/anta 0.3.16 → 0.3.18

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/copy-behavior.d.ts

@@ -3,9 +3,9 @@
  * productized "copy button" / "copying menu item". `<a-copy>` (slotted inside a
  * button or menu row) calls these on the host's activation: it performs the
  * clipboard write itself (rather than a UI-thread callback) and reports the
- * outcome with a `copydone` event; the JSX wrapper (`ButtonCopy` / `MenuItemCopy`)
- * listens and orchestrates the visual feedback (icon + tone swap). Nothing here touches the
- * DOM — no light-DOM mutation, no host attributes, no ElementInternals.
+ * outcome with a `copydone` event. JSX presets can render visual feedback from
+ * that event. Nothing here touches the DOM — no light-DOM mutation, no host
+ * attributes, no ElementInternals.
  *
  * Events are dispatched non-bubbling (`bubbles: false`): the wrapper binds on the
  * host itself, so it catches them in the target phase, and not bubbling keeps a

package/dist/elements/index.d.ts

@@ -14,6 +14,7 @@
  * `customElements` (SSR), but there's no reason to load it server-side.
  */
 export { AProgressElement, register_a_progress } from './a-progress';
+export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
@@ -23,6 +24,7 @@ export { ASwitchElement, register_a_switch } from './a-switch';
 export { AExpanderElement, register_a_expander } from './a-expander';
 export { ATooltipElement, register_a_tooltip } from './a-tooltip';
 export { AInputElement, register_a_input } from './a-input';
+export { ASliderElement, register_a_slider } from './a-slider';
 export { AInputTimeElement, register_a_input_time } from './a-input-time';
 export { ACalendarElement, register_a_calendar } from './a-calendar';
 export { ARadioElement, register_a_radio } from './a-radio';

package/dist/elements/index.js

@@ -1,4 +1,5 @@
 import { AProgressElement, register_a_progress } from "./a-progress";
+import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
@@ -8,6 +9,7 @@ import { ASwitchElement, register_a_switch } from "./a-switch";
 import { AExpanderElement, register_a_expander } from "./a-expander";
 import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import { AInputElement, register_a_input } from "./a-input";
+import { ASliderElement, register_a_slider } from "./a-slider";
 import { AInputTimeElement, register_a_input_time } from "./a-input-time";
 import { ACalendarElement, register_a_calendar } from "./a-calendar";
 import { ARadioElement, register_a_radio } from "./a-radio";
@@ -38,6 +40,7 @@ export {
   AIconElement,
   AInputElement,
   AInputTimeElement,
+  ALoaderElement,
   AMenuElement,
   AMenuGroupElement,
   AMenuItemElement,
@@ -45,6 +48,7 @@ export {
   AProgressElement,
   ARadioElement,
   ARadioGroupElement,
+  ASliderElement,
   ASwitchElement,
   ATabElement,
   ATabPanelElement,
@@ -64,6 +68,7 @@ export {
   register_a_icon,
   register_a_input,
   register_a_input_time,
+  register_a_loader,
   register_a_menu,
   register_a_menu_group,
   register_a_menu_item,
@@ -71,6 +76,7 @@ export {
   register_a_progress,
   register_a_radio,
   register_a_radio_group,
+  register_a_slider,
   register_a_switch,
   register_a_tab,
   register_a_tabpanel,

package/dist/general_types.d.ts

@@ -147,13 +147,15 @@ export interface BaseAttributes extends DOMEventHandlers {
  * typed props and computed labels, use `Progress` from `@antadesign/anta`.
  */
 export interface AProgressAttributes extends BaseAttributes {
-    /** Current progress value. */
-    value?: number | string;
+    /** Current progress value. Omit this attribute for indeterminate progress. */
+    value?: number | string | false;
     /** Maximum value. Defaults to 100. */
     max?: number | string;
     /** Colour variant, or any literal CSS colour for a custom tone (derived in
      *  oklch). Named tones track light/dark automatically. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. `medium` is the default. */
+    size?: 'small' | 'medium' | 'large';
     /** Fully-round track (`border-radius: 999px`), or a custom radius via a length
      *  value (`round="6px"`). Presence-based for the boolean form. */
     round?: boolean | number | string;
@@ -168,6 +170,27 @@ export interface AProgressAttributes extends BaseAttributes {
     /** ARIA accessible name. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-loader>` custom element. For the JSX wrapper with
+ * cross-browser sizing and accessible progress semantics, use `Loader` from
+ * `@antadesign/anta`.
+ */
+export interface ALoaderAttributes extends BaseAttributes {
+    /** Presence selects the static, determinate gradient. Set `--loader-value`
+     * in `style` to its percentage. Omit this attribute for the rotating
+     * indeterminate gradient. */
+    value?: number | string | false;
+    /** ARIA accessible name. */
+    'aria-label'?: string;
+    /** Hides a decorative loader from screen readers. */
+    'aria-hidden'?: 'true' | 'false' | boolean;
+    /** ARIA value-now for determinate progress. */
+    'aria-valuenow'?: number | string;
+    /** ARIA value-min. */
+    'aria-valuemin'?: number | string;
+    /** ARIA value-max. */
+    'aria-valuemax'?: number | string;
+}
 /**
  * Attributes for the `<a-text>` custom element.
  *
@@ -572,8 +595,58 @@ export interface AInputAttributes extends BaseAttributes {
     'aria-invalid'?: 'true' | 'false' | boolean;
     'aria-label'?: string;
 }
+/** Attributes for the `<a-slider>` custom element. For the typed JSX wrapper,
+ * display formatting, and marker layout use `Slider` from `@antadesign/anta`. */
+export interface ASliderAttributes extends BaseAttributes {
+    /** Controlled numeric value. */
+    value?: number | string;
+    /** Initial uncontrolled value and form-reset baseline. */
+    defaultvalue?: number | string;
+    /** Lowest permitted value. Defaults to 0. */
+    min?: number | string;
+    /** Highest permitted value. Defaults to 100. */
+    max?: number | string;
+    /** Smallest permitted increment. Defaults to 1. */
+    step?: number | string;
+    /** Form field name — submitted through ElementInternals. */
+    name?: string;
+    /** Disables pointer and keyboard interaction. Presence-based. */
+    disabled?: boolean | '';
+    /** Colour of the filled rail. Named tones or a literal CSS colour. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Colour of the thumb stroke. Named tones or a literal CSS colour. */
+    'thumb-tone'?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium=28px, large=32px tall. */
+    size?: 'small' | 'medium' | 'large';
+    /** Thickness of both rail segments as a CSS length, such as `'4px'`. */
+    'track-size'?: string;
+    /** Diameter of the thumb as a CSS length, such as `'20px'`. */
+    'thumb-size'?: string;
+    /** Fill the thumb with its resolved border colour. Presence-based. */
+    'thumb-fill'?: boolean | '';
+    /** Fully round the rail and thumb, or set both to a custom radius. */
+    round?: boolean | number | string;
+    /** `jump` moves to a pressed rail position. Omit for relative dragging. */
+    'track-click'?: 'jump';
+    /** `inline`, `thumb`, or `none`; omit for a value at the label row's end. */
+    'value-display'?: 'inline' | 'thumb' | 'none';
+    /** Text inserted before the live numeric value. */
+    'value-prefix'?: string;
+    /** Text inserted after the live numeric value. */
+    'value-suffix'?: string;
+    /** Fires on each value change. */
+    oninput?: (e: any) => void;
+    /** Fires when a drag ends or a keyboard value change completes. */
+    onchange?: (e: any) => void;
+    role?: string;
+    'aria-label'?: string;
+    'aria-valuenow'?: number | string;
+    'aria-valuemin'?: number | string;
+    'aria-valuemax'?: number | string;
+    'aria-valuetext'?: string;
+}
 /** Attributes for the `<a-input-time>` custom element — a segmented wall-clock
- *  time field (hour / minute / AM-PM spinbutton sections in one box). */
+ *  time field (hour / minute / AM-PM native text-input sections in one box). */
 export interface AInputTimeAttributes extends BaseAttributes {
     /** Controlled value — 24-hour `"HH:mm"`, `''` when incomplete. */
     value?: string;
@@ -835,10 +908,13 @@ export interface ACopyAttributes extends BaseAttributes {
     'copy-url'?: boolean | '';
     /** Prefix the copied `copy` string with `// URL: <href>`. Presence-based. */
     'copy-with-url'?: boolean | '';
-    /** Float a ghost of the host's content upward as visual feedback on a
-     *  successful copy (rendered in the top layer so the host's overflow can't clip
-     *  it). Presence-based. Opt-in — `ButtonCopy` sets it. */
+    /** Show a short confirmation label after a successful copy. It renders in the
+     *  top layer so the host's overflow cannot clip it. Presence-based. `ButtonCopy`
+     *  sets it when `iconPlacement="none"`. */
     toast?: boolean | '';
+    /** Text in the success confirmation shown by `toast`.
+     *  @defaultValue Copied */
+    'copied-label'?: string;
     /** Fired after a copy attempt (`copydone`, `detail: { ok }`, non-bubbling so a
      *  nested copy control can't flip an ancestor's feedback). All-lowercase so it
      *  binds in React *and* Preact. */