@antadesign/anta 0.3.16 → 0.3.17

package/README.md

@@ -224,18 +224,19 @@ To use the Antithesis fonts, register your own `@font-face` declarations and ove
 
 ## Browser support
 
-Anta targets evergreen browsers and ships **no baseline polyfills or feature detection**. Its floor is the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), used by `<a-menu>` and `<a-tooltip>`:
+Anta targets evergreen browsers and ships **no baseline polyfills**. Its floor is [custom-element states](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet), used throughout the components for their internal CSS state, alongside the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API):
 
 | Browser | Minimum version |
 | --- | --- |
-| Chrome / Edge | 114 (May 2023) |
-| Safari | 17 (Sep 2023) |
-| Firefox | 125 (Apr 2024) |
-
-This is roughly [Baseline 2024](https://web.dev/baseline). Anta also relies on
-relative OKLCH, `:has()`, `dvh`, cascade layers, and constructable shadow DOM.
-Older browsers can fail hard, including `showPopover()` throwing. Gate Anta on
-your own support matrix when you support older browsers.
+| Chrome / Edge | 125 (May 2024) |
+| Safari | 17.4 (Mar 2024) |
+| Firefox | 126 (May 2024) |
+
+This is [Baseline 2024](https://web.dev/baseline). Anta also relies on relative
+OKLCH, `:has()`, `dvh`, cascade layers, and constructable shadow DOM. Older
+browsers can fail hard, including `:state()` being unrecognized or
+`showPopover()` throwing. Gate Anta on your own support matrix when you support
+older browsers.
 
 Two features progressively enhance with fallbacks: `checkVisibility()` falls
 back to `getClientRects()`, and typed CSS `attr()` supports raw

package/dist/anta_helpers.d.ts

@@ -73,18 +73,13 @@ export declare const NAMED_TONES: Set<string>;
  * derives the fill/text/border curve in oklch. Named tones return `base` unchanged.
  */
 export declare function toneStyle(tone: string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
-/**
- * Inline-style helper for a valued `round` — the polymorphic corner-radius prop
- * (`true` = fully round, a `number`/length = a custom radius). Mirrors `toneStyle`:
- * a custom value is handed to the element via `varName` (e.g. `--button-round`), so
- * the element's CSS resolves `border-radius: var(--{c}-round, <default>)`. This is
- * the portable path — the element's `attr(round type(<length>), …)` default only
- * resolves on newer engines, exactly like the tone-source `attr()`.
- *
- * A `number` becomes `<n>px`; a non-empty `string` is used verbatim (so `'1rem'` /
- * `'50%'` work). `true` / `false` / `undefined` add nothing (presence alone → the
- * element's default full-round). Returns `base` unchanged when there's no value.
- */
+/** Converts a numeric or string length to CSS text. Numbers become pixels. */
+export declare function cssLength(length: number | string | undefined): string | undefined;
+/** Adds a CSS length to an inline custom property. Numbers become pixels; a
+ * non-empty string is used verbatim. Returns `base` unchanged when absent. */
+export declare function lengthStyle(length: number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
+/** Inline-style helper for a valued `round`. Its boolean form leaves the
+ * element's default full-round radius in place. */
 export declare function roundStyle(round: boolean | number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
 /**
  * Presence flag for a `round` attribute: `''` when a radius applies, else

package/dist/anta_helpers.js

@@ -40,10 +40,16 @@ const NAMED_TONES = /* @__PURE__ */ new Set([
 function toneStyle(tone, varName, base) {
   return tone != null && !NAMED_TONES.has(tone) ? { ...base, [varName]: tone } : base;
 }
+function cssLength(length) {
+  if (typeof length === "number") return `${length}px`;
+  return length || void 0;
+}
+function lengthStyle(length, varName, base) {
+  const value = cssLength(length);
+  return value ? { ...base, [varName]: value } : base;
+}
 function roundStyle(round, varName, base) {
-  if (typeof round === "number") return { ...base, [varName]: `${round}px` };
-  if (typeof round === "string" && round !== "") return { ...base, [varName]: round };
-  return base;
+  return lengthStyle(typeof round === "number" || typeof round === "string" ? round : void 0, varName, base);
 }
 function roundAttr(round) {
   return round || round === 0 ? "" : void 0;
@@ -145,10 +151,12 @@ export {
   NAMED_TONES,
   SelectableChildElement,
   anchorRect,
+  cssLength,
   hasChildren,
   installDismissTrigger,
   isInsideOpenMenu,
   isMenuOpen,
+  lengthStyle,
   nativeStateChange,
   parseOpenState,
   roundAttr,

package/dist/components/ButtonCopy.d.ts

@@ -20,11 +20,14 @@ export type ButtonCopyProps = ButtonProps & {
     form?: never;
     iconTrailing?: never;
 } & CopyTarget & {
-    /** Where the copy glyph sits relative to the label — or `'none'` to omit it,
-     *  in which case the feedback is a ghost of the label floating up (`toast`)
-     *  plus a brief success / failure tone flash.
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  Without a glyph, a successful copy shows a small confirmation label near
+     *  the pointer and leaves the button unchanged.
      *  @defaultValue 'leading' */
     iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
 };
 /**
  * Copy button — a `Button` preset for copy-to-clipboard. Set `copy` for a literal
@@ -37,7 +40,7 @@ export type ButtonCopyProps = ButtonProps & {
  * copy glyph to a check (success) or ✕ (failure) and retones to `success` /
  * `critical` for ~2s (a re-render, no element state — see `useCopyFeedback`).
  * `iconPlacement` puts that glyph leading (default), trailing, or `'none'`; with
- * `'none'` the `<a-copy>` floats a ghost of the label upward instead.
+ * `'none'`, `<a-copy>` shows its `Copied` confirmation instead.
  *
  * With a `label` it's a labeled button; without one it's an icon-only copy button
  * (named "Copy" for assistive tech). Everything else is a normal `Button` prop —
@@ -48,9 +51,9 @@ export type ButtonCopyProps = ButtonProps & {
  * <ButtonCopy copy="npm i @antadesign/anta" label="Copy install" />
  * <ButtonCopy copy="https://anta.design" />                     // icon-only
  * <ButtonCopy copy={code} label="Copy" iconPlacement="trailing" />
- * <ButtonCopy copy={code} label="Copy snippet" iconPlacement="none" />  // ghost feedback
+ * <ButtonCopy copy={code} label="Copy snippet" iconPlacement="none" copiedLabel="Copied" />
  * <ButtonCopy copyNode=".snippet" label="Copy block" priority="tertiary" />
  * <ButtonCopy copyUrl label="Copy link" />                      // copies location.href
  * ```
  */
-export declare const ButtonCopy: ({ icon, iconPlacement, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children, "aria-label": ariaLabel, ...rest }: ButtonCopyProps) => any;
+export declare const ButtonCopy: ({ icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children, "aria-label": ariaLabel, ...rest }: ButtonCopyProps) => any;

package/dist/components/ButtonCopy.js

@@ -5,6 +5,7 @@ import { copyElementProps, isNodeCopy } from "./copy-props";
 const ButtonCopy = ({
   icon,
   iconPlacement = "leading",
+  copiedLabel,
   tone,
   onCopied,
   onCopyRequest,
@@ -28,15 +29,16 @@ const ButtonCopy = ({
     copyWithUrl,
     onCopyRequest,
     onCopied: handleCopied,
-    // Ghost feedback only makes sense when there's no glyph to swap.
-    toast: iconPlacement === "none"
+    // The top-layer confirmation only appears when there is no glyph to swap.
+    toast: iconPlacement === "none",
+    copiedLabel
   });
   return /* @__PURE__ */ jsxs(
     Button,
     {
       ...iconSlot,
       label,
-      tone: shownTone,
+      tone: iconPlacement === "none" ? tone : shownTone,
       "aria-label": ariaLabel ?? (hasText ? void 0 : "Copy"),
       "data-copy-node-button": isNodeCopy({ copyNode }) ? "" : void 0,
       ...rest,

package/dist/components/InputTime.d.ts

@@ -84,10 +84,11 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
 /**
  * `<InputTime>` — a segmented wall-clock time field. One boxed input (matching
  * the other inputs) with separate hour / minute / (12-hour) AM-PM sections that
- * behave as one control: each is a `role="spinbutton"` — ↑/↓ steps with wrap,
- * ←/→ moves between them, typing digits auto-advances, and AM/PM toggles with
- * ↑/↓ or `a`/`p`. Renders an `<a-input-time>` web component that owns the
- * segments, keyboard, and form value (via `ElementInternals`).
+ * behave as one control: each is a native text input — ↑/↓ steps with wrap,
+ * ←/→ crosses segments at caret boundaries, typing digits auto-advances, and
+ * AM/PM accepts its locale text or `a`/`p`. Renders an `<a-input-time>` web
+ * component that owns the segments, navigation, and form value (via
+ * `ElementInternals`).
  *
  * The clock and layout follow the locale (`en-US` → 12-hour, most others 24),
  * overridable with `hour12`. The value is a 24-hour `"HH:mm"` string; controlled

package/dist/components/Slider.d.ts

@@ -0,0 +1,89 @@
+import type { BaseProps, DOMEventHandlers } from '../general_types';
+/** A text marker displayed below the slider rail. Markers are labels only; they
+ * do not add dots or ticks to the rail. */
+export interface SliderMarker {
+    value: number;
+    label: React.ReactNode;
+}
+/** Snapshot passed to `onValueChange` and `onValueCommit`. */
+export interface SliderChangeAttrs {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    name?: string;
+}
+export interface SliderProps extends BaseProps, DOMEventHandlers {
+    /** Visible field label, shown above the rail. A string supplies the slider's
+     * accessible name; give a rich label an explicit `aria-label`. */
+    label?: React.ReactNode;
+    /** Controlled value. Update it from `onValueChange`. */
+    value?: number;
+    /** Initial uncontrolled value.
+     * @defaultValue 0 */
+    defaultValue?: number;
+    /** Lowest permitted value.
+     * @defaultValue 0 */
+    min?: number;
+    /** Highest permitted value.
+     * @defaultValue 100 */
+    max?: number;
+    /** Smallest keyboard and drag increment.
+     * @defaultValue 1 */
+    step?: number;
+    /** Form field name. The current numeric value submits under this name. */
+    name?: string;
+    /** Disables pointer and keyboard interaction. */
+    disabled?: boolean;
+    /** Colour of the filled rail. Pass a named tone or a literal CSS colour for a
+     * one-off custom tone. The unfilled rail stays neutral.
+     * @defaultValue 'neutral' */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Colour of the thumb stroke. Pass a named tone or a literal CSS colour for a
+     * one-off custom tone. Omit it to keep the thumb neutral.
+     * @defaultValue 'neutral' */
+    thumbTone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium=28px, large=32px tall.
+     * @defaultValue 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** Thickness of both rail segments. Numbers use pixels; strings are CSS
+     * lengths. Keep it no larger than the thumb diameter.
+     * @defaultValue 2 */
+    trackSize?: number | string;
+    /** Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
+     * it at least as large as `trackSize`.
+     * @defaultValue 18 */
+    thumbSize?: number | string;
+    /** Fill the thumb with its resolved border colour. This follows `thumbTone`
+     * and interactive states.
+     * @defaultValue false */
+    thumbFill?: boolean;
+    /** Fully round the rail and thumb. Pass a number (px) or CSS length string
+     * for a shared custom radius. */
+    round?: boolean | number | string;
+    /** Where the live value appears. `end` puts it at the right edge of the label
+     * row. `inline` renders `Label: value`. `thumb` keeps it above the thumb.
+     * @defaultValue 'end' */
+    valueDisplay?: 'end' | 'inline' | 'thumb' | 'none';
+    /** Text inserted before the live numeric value, such as `$`. */
+    valuePrefix?: string;
+    /** Text inserted after the live numeric value, such as `%` or `°C`. */
+    valueSuffix?: string;
+    /** Compact text labels positioned below the rail. They do not add dots or
+     * ticks to the rail. */
+    markers?: SliderMarker[];
+    /** Track press behaviour. `drag-only` starts a relative grab from the current
+     * value; `jump` first moves to the press position.
+     * @defaultValue 'drag-only' */
+    trackClick?: 'drag-only' | 'jump';
+    /** Fires on every keyboard or pointer value change. */
+    onValueChange?: (event: any, attrs: SliderChangeAttrs) => void;
+    /** Fires after a drag ends and after each keyboard value change. */
+    onValueCommit?: (event: any, attrs: SliderChangeAttrs) => void;
+}
+/**
+ * Slider selects one numeric value from a range. Pressing anywhere on its rail
+ * starts a relative drag by default, so the thumb never jumps to the press point.
+ * Requires `@antadesign/anta/elements` on the client.
+ */
+export declare const Slider: ({ label, value, defaultValue, min: minProp, max: maxProp, step: stepProp, name, disabled, tone, thumbTone, size, trackSize, thumbSize, thumbFill, round, valueDisplay, valuePrefix, valueSuffix, markers, trackClick, onInput, onChange, onValueChange, onValueCommit, className, style, children, tabIndex, ...rest }: SliderProps) => any;

package/dist/components/Slider.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { toneStyle, roundStyle, roundAttr, lengthStyle, cssLength } from "../anta_helpers";
+const number = (value, fallback) => Number.isFinite(value) ? value : fallback;
+const isStringish = (node) => typeof node === "string" || typeof node === "number";
+const bounds = (min, max) => {
+  const low = number(min, 0);
+  return { min: low, max: Math.max(low, number(max, 100)) };
+};
+const attrsOf = (event) => {
+  const element = event?.target ?? {};
+  return {
+    value: Number(element.value ?? 0),
+    min: Number(element.getAttribute?.("min") ?? 0),
+    max: Number(element.getAttribute?.("max") ?? 100),
+    step: Number(element.getAttribute?.("step") ?? 1),
+    name: element.getAttribute?.("name") ?? void 0
+  };
+};
+const Slider = ({
+  label,
+  value,
+  defaultValue,
+  min: minProp,
+  max: maxProp,
+  step: stepProp,
+  name,
+  disabled,
+  tone,
+  thumbTone,
+  size,
+  trackSize,
+  thumbSize,
+  thumbFill,
+  round,
+  valueDisplay = "end",
+  valuePrefix,
+  valueSuffix,
+  markers,
+  trackClick = "drag-only",
+  onInput,
+  onChange,
+  onValueChange,
+  onValueCommit,
+  className,
+  style,
+  children,
+  tabIndex,
+  ...rest
+}) => {
+  const trackSizeValue = cssLength(trackSize);
+  const thumbSizeValue = cssLength(thumbSize);
+  const computedStyle = lengthStyle(
+    thumbSize,
+    "--anta-slider-thumb-size",
+    lengthStyle(
+      trackSize,
+      "--anta-slider-track-size",
+      roundStyle(
+        round,
+        "--slider-round",
+        toneStyle(thumbTone, "--slider-thumb-tone-source", toneStyle(tone, "--slider-tone-source", style))
+      )
+    )
+  );
+  const { min, max } = bounds(minProp, maxProp);
+  const step = number(stepProp, 1) > 0 ? number(stepProp, 1) : 1;
+  const explicitAriaLabel = rest["aria-label"];
+  const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? (typeof label === "string" || typeof label === "number" ? String(label) : void 0);
+  const resolvedValueDisplay = valueDisplay === "inline" && label == null ? "end" : valueDisplay;
+  const markerPosition = (marker) => {
+    if (marker.value <= min) return "0%";
+    if (marker.value >= max) return "100%";
+    const ratio = (marker.value - min) / (max - min);
+    return `calc((100% - var(--anta-slider-thumb-size)) * ${ratio} + var(--anta-slider-thumb-size) / 2)`;
+  };
+  const markerAlignment = (marker) => marker.value <= min ? "start" : marker.value >= max ? "end" : void 0;
+  const markerStyle = (marker) => {
+    const markerStyle2 = {};
+    Object.assign(markerStyle2, { "--slider-marker-position": markerPosition(marker) });
+    return markerStyle2;
+  };
+  const handleInput = onInput || onValueChange ? (event) => {
+    const attrs = attrsOf(event);
+    onInput?.(event);
+    onValueChange?.(event, attrs);
+  } : void 0;
+  const handleChange = onChange || onValueCommit ? (event) => {
+    const attrs = attrsOf(event);
+    onChange?.(event);
+    onValueCommit?.(event, attrs);
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "a-slider",
+    {
+      value,
+      defaultvalue: defaultValue,
+      min,
+      max,
+      step,
+      name,
+      disabled: disabled ? "" : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      "thumb-tone": thumbTone && thumbTone !== "neutral" ? thumbTone : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      "track-size": trackSizeValue,
+      "thumb-size": thumbSizeValue,
+      "thumb-fill": thumbFill ? "" : void 0,
+      round: roundAttr(round),
+      "track-click": trackClick === "jump" ? "jump" : void 0,
+      "value-display": resolvedValueDisplay === "end" ? void 0 : resolvedValueDisplay,
+      "value-prefix": valuePrefix,
+      "value-suffix": valueSuffix,
+      role: "slider",
+      "aria-label": ariaLabel,
+      tabIndex: disabled ? -1 : tabIndex ?? 0,
+      oninput: handleInput,
+      onchange: handleChange,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
+        markers?.map((marker, index) => {
+          const alignment = markerAlignment(marker);
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              slot: "markers",
+              style: markerStyle(marker),
+              "data-slider-marker-start": alignment === "start" ? "" : void 0,
+              "data-slider-marker-end": alignment === "end" ? "" : void 0,
+              children: marker.label
+            },
+            `${marker.value}-${index}`
+          );
+        }),
+        children
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

package/dist/components/copy-props.d.ts

@@ -51,6 +51,7 @@ type CopyElementInput = {
     onCopyRequest?: () => void;
     onCopied?: (ok: boolean) => void;
     toast?: boolean;
+    copiedLabel?: string;
 };
 /** Project the copy-target props onto `<a-copy>` attributes + event handlers.
  *  Shared by `ButtonCopy` / `MenuItemCopy` so the mapping (and the cross-renderer
@@ -61,6 +62,7 @@ export declare function copyElementProps(p: CopyElementInput): {
     readonly 'copy-url': "" | undefined;
     readonly 'copy-with-url': "" | undefined;
     readonly toast: "" | undefined;
+    readonly 'copied-label': string | undefined;
     readonly oncopydone: ((e: any) => void) | undefined;
     readonly oncopyrequest: (() => void) | undefined;
 };

package/dist/components/copy-props.js

@@ -1,12 +1,13 @@
 import { nativeStateChange } from "../anta_helpers";
 function copyElementProps(p) {
-  const { copy, copyNode, copyUrl, copyWithUrl, onCopyRequest, onCopied, toast } = p;
+  const { copy, copyNode, copyUrl, copyWithUrl, onCopyRequest, onCopied, toast, copiedLabel } = p;
   return {
     copy: copy != null ? copy : void 0,
     "copy-node": copyNode === true ? "" : typeof copyNode === "string" ? copyNode : void 0,
     "copy-url": copyUrl ? "" : void 0,
     "copy-with-url": copyWithUrl ? "" : void 0,
     toast: toast ? "" : void 0,
+    "copied-label": copiedLabel,
     oncopydone: onCopied ? (e) => onCopied(nativeStateChange(e).detail?.ok ?? false) : void 0,
     oncopyrequest: onCopyRequest ? () => onCopyRequest() : void 0
   };

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

@@ -9,7 +9,7 @@ export declare class ACopyElement extends HTMLElementBase {
     #private;
     connectedCallback(): void;
     /** Run the copy for the activated host. Called from the delegated click /
-     *  menuselect handlers; the ghost (if any) follows on `copydone`. */
+     * menuselect handlers; the confirmation follows a successful `copydone`. */
     activate(): void;
     disconnectedCallback(): void;
 }