@antadesign/anta 0.3.32 → 0.3.33

package/dist/components/Input.d.ts

@@ -41,10 +41,16 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  success → `circle-check`, info → `info`, brand → `circle-small-solid`); pass a
      *  shape to override, or `false` to drop it. `neutral` has no default glyph. */
     statusIcon?: IconShape | (string & {}) | false;
-    /** Custom accent color — any literal CSS color tints the resting + hover
-     *  border (focus ring stays the global `--focus-ring`). For consistency with the
+    /** Custom accent color — any literal CSS color tints the border when shown
+     *  (focus ring stays the global `--focus-ring`). For consistency with the
      *  other controls' custom-tone knob; a `status` still overrides for validation. */
     tone?: string;
+    /** Field emphasis. `primary` has a fill and border, `secondary` keeps the
+     *  border without a fill, and `tertiary` makes the border transparent until
+     *  hover or focus.
+     *  Status borders remain visible at rest.
+     *  @defaultValue primary */
+    priority?: 'primary' | 'secondary' | 'tertiary';
     /** Size variant. small=24px, medium=28px, large=32px tall; the type scale and
      *  icon track the size (small 13/16 + 14px icon · medium 15/20 + 16px ·
      *  large 17/22 + 18px).
@@ -179,4 +185,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, button, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, role, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, priority, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, autoFocus, name, placeholder, truncate, disabled, readOnly, button, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, role, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -36,6 +36,7 @@ const Input = ({
   status,
   statusIcon,
   tone,
+  priority,
   size,
   round,
   value,
@@ -85,6 +86,7 @@ const Input = ({
   return /* @__PURE__ */ jsxs(
     "a-input",
     {
+      priority: priority && priority !== "primary" ? priority : void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       value,

package/dist/components/Slider.d.ts

@@ -5,9 +5,12 @@ export interface SliderMarker {
     value: number;
     label: React.ReactNode;
 }
+/** Two endpoints of a range slider. */
+export type SliderRangeValue = [number, number];
+export type SliderValue = number | SliderRangeValue;
 /** Snapshot passed to `onValueChange` and `onValueCommit`. */
-export interface SliderChangeAttrs {
-    value: number;
+export interface SliderChangeAttrs<T extends SliderValue = number> {
+    value: T;
     min: number;
     max: number;
     step: number;
@@ -17,11 +20,11 @@ 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;
+    /** Controlled value. A pair of numbers selects a range. Update it from `onValueChange`. */
+    value?: number | SliderRangeValue;
     /** Initial uncontrolled value.
      * @defaultValue 0 */
-    defaultValue?: number;
+    defaultValue?: number | SliderRangeValue;
     /** Lowest permitted value.
      * @defaultValue 0 */
     min?: number;
@@ -31,7 +34,7 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
     /** Smallest keyboard and drag increment.
      * @defaultValue 1 */
     step?: number;
-    /** Form field name. The current numeric value submits under this name. */
+    /** Form field name. A range submits two values under this name. */
     name?: string;
     /** Disables pointer and keyboard interaction. */
     disabled?: boolean;
@@ -76,14 +79,23 @@ export interface SliderProps extends BaseProps, DOMEventHandlers {
      * from the current value. `jump` first moves to the pressed position.
      * @defaultValue 'drag-only' */
     trackClick?: 'drag-only' | 'jump';
+    /** Fill the rail outside the selected value or range. */
+    inverted?: boolean;
     /** Fires on every keyboard or pointer value change. */
-    onValueChange?: (event: any, attrs: SliderChangeAttrs) => void;
+    onValueChange?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
     /** Fires after a drag ends and after each keyboard value change. */
-    onValueCommit?: (event: any, attrs: SliderChangeAttrs) => void;
+    onValueCommit?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
 }
+type TypedSliderProps<T extends SliderValue> = Omit<SliderProps, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'> & {
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (event: any, attrs: SliderChangeAttrs<T>) => void;
+    onValueCommit?: (event: any, attrs: SliderChangeAttrs<T>) => void;
+};
 /**
- * Slider selects one numeric value from a range. Pressing anywhere on its rail
+ * Slider selects one numeric value or a pair of range endpoints. 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;
+export declare const Slider: <T extends SliderValue = number>({ label, value, defaultValue, min: minProp, max: maxProp, step: stepProp, name, disabled, tone, thumbTone, size, trackSize, thumbSize, thumbFill, round, valueDisplay, valuePrefix, valueSuffix, markers, trackClick, inverted, onInput, onChange, onValueChange, onValueCommit, className, style, children, tabIndex, ...rest }: TypedSliderProps<T>) => any;
+export {};

package/dist/components/Slider.js

@@ -9,7 +9,7 @@ const bounds = (min, max) => {
 const attrsOf = (event) => {
   const element = event?.target ?? {};
   return {
-    value: Number(element.value ?? 0),
+    value: element.value,
     min: Number(element.getAttribute?.("min") ?? 0),
     max: Number(element.getAttribute?.("max") ?? 100),
     step: Number(element.getAttribute?.("step") ?? 1),
@@ -37,6 +37,7 @@ const Slider = ({
   valueSuffix,
   markers,
   trackClick = "drag-only",
+  inverted,
   onInput,
   onChange,
   onValueChange,
@@ -66,6 +67,8 @@ const Slider = ({
   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 range = Array.isArray(value) || Array.isArray(defaultValue);
+  const serializeValue = (input) => Array.isArray(input) ? `${input[0]} ${input[1]}` : typeof input === "number" ? input : void 0;
   const resolvedValueDisplay = valueDisplay === "inline" && label == null ? "end" : valueDisplay;
   const markerPosition = (marker) => {
     if (marker.value <= min) return "0%";
@@ -92,8 +95,8 @@ const Slider = ({
   return /* @__PURE__ */ jsxs(
     "a-slider",
     {
-      value,
-      defaultvalue: defaultValue,
+      value: serializeValue(value),
+      defaultvalue: serializeValue(defaultValue),
       min,
       max,
       step,
@@ -107,12 +110,13 @@ const Slider = ({
       "thumb-fill": thumbFill ? "" : void 0,
       round: roundAttr(round),
       "track-click": trackClick === "jump" ? "jump" : void 0,
+      inverted: inverted ? "" : void 0,
       "value-display": resolvedValueDisplay === "end" ? void 0 : resolvedValueDisplay,
       "value-prefix": valuePrefix,
       "value-suffix": valueSuffix,
-      role: "slider",
+      role: range ? "group" : "slider",
       "aria-label": ariaLabel,
-      tabIndex: disabled ? -1 : tabIndex ?? 0,
+      tabIndex: disabled || range ? -1 : tabIndex ?? 0,
       oninput: handleInput,
       onchange: handleChange,
       class: className,

package/dist/elements/a-button.js

@@ -82,10 +82,8 @@ class AButtonElement extends HTMLElementBase {
 }
 function findForm(el) {
   const formId = el.getAttribute("form");
-  if (formId) {
-    return el.ownerDocument.getElementById(formId);
-  }
-  return el.closest("form");
+  const candidate = formId === null ? el.closest("form") : el.ownerDocument.getElementById(formId);
+  return candidate?.namespaceURI === "http://www.w3.org/1999/xhtml" && candidate.localName === "form" ? candidate : null;
 }
 function handleClick(e) {
   const el = e.target.closest(

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

@@ -146,8 +146,7 @@ const SHADOW_STYLE = `
     flex-shrink: 0;
     visibility: hidden;
   }
-  :host(:state(filled)) slot[name="clear"] { visibility: visible; }
-  :host(:disabled) slot[name="clear"] { display: none; }
+  :host(:state(filled):not(:disabled)) slot[name="clear"] { visibility: visible; }
 
   .hint {
     display: none;

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-stretch:normal;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),textarea[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover,textarea[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus,textarea[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled,textarea[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-variation-settings:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta],textarea[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small],textarea[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large],textarea[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--native-field-round: attr(round type(<length>), 999px)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;background:var(--input-bg);box-shadow:inset 0 0 0 var(--input-border-width) var(--input-rest-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-stretch:normal;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input:not(:defined):after{border:1px solid ButtonBorder}}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-rest-border: var(--input-border);--input-border-width: .5px;--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-3);--input-hint: var(--text-3);--input-trailing-inset: 7px;width:100%}a-input[priority=secondary],a-input[priority=tertiary]{--input-bg: transparent}a-input[priority=tertiary]{--input-rest-border: transparent}@media(hover:hover)and (pointer:fine){a-input:not(:defined):not(:disabled):hover:after{box-shadow:inset 0 0 0 1px var(--input-border)}}a-input:has(>[slot=label])::part(label){display:block}a-input:has(>[slot=leading])::part(leading),a-input:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;flex-shrink:0}a-input:has(>[slot=leading])::part(leading){margin-inline-start:7px}a-input:has(>[slot=trailing])::part(trailing){gap:2px;margin-inline-end:var(--input-trailing-inset, 7px)}a-input:has(>[slot=leading])::part(input){padding-inline-start:5px}a-input[truncate]:not([multiline])::part(input){text-overflow:ellipsis}a-input:has(>[slot=hint])::part(hint){display:flex}a-input[multiline]:has(>[slot=leading])::part(leading),a-input[multiline]:has(>[slot=trailing])::part(trailing){align-self:flex-start;height:calc(var(--_lh) + var(--_pad-block) * 2)}a-input:has([slot=trailing] :is(a-button,button)),a-input:has([slot=trailing]:is(a-button,button)){--input-trailing-inset: 0}a-input[round]{--input-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--input-round: attr(round type(<length>), 999px)}}a-input[tone]:not([tone=""]):not([status]){--input-tone-source: var(--border-2);--input-border: light-dark( oklch(from var(--input-tone-source) .7 calc(c*.8) h), oklch(from var(--input-tone-source) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--input-tone-source: attr(tone type(<color>), var(--border-2))}}a-input[status=critical]{--input-status-source: var(--anta-seed-critical);--input-bg: var(--bg-2-critical);--input-hint: var(--text-2-critical)}a-input[status=warning]{--input-status-source: var(--anta-seed-warning);--input-bg: var(--bg-2-warning);--input-hint: var(--text-2-warning)}a-input[status=success]{--input-status-source: var(--anta-seed-success);--input-bg: var(--bg-2-success);--input-hint: var(--text-2-success)}a-input[status=info]{--input-status-source: var(--anta-seed-info);--input-bg: var(--bg-2-info);--input-hint: var(--text-2-info)}a-input[status=brand]{--input-status-source: var(--anta-seed-brand);--input-bg: var(--bg-2-brand);--input-hint: var(--text-2-brand)}a-input[status]:not([status=neutral]){--input-border-width: 1px;--input-rest-border: var(--input-border);--input-border: light-dark( oklch(from var(--input-status-source) .58 c h), oklch(from var(--input-status-source) .52 c h) )}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),textarea[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);caret-color:currentColor;color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}textarea[data-anta]{block-size:auto;min-block-size:var(--native-field-block-size);resize:vertical;overflow-y:auto}input[data-anta][list]::-webkit-calendar-picker-indicator{opacity:0!important;pointer-events:none!important}@media(hover:hover)and (pointer:fine){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):not(:disabled):hover,textarea[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):focus,textarea[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]):disabled,textarea[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}input[data-anta][type=number]{appearance:textfield;-moz-appearance:textfield}input[data-anta][type=number]::-webkit-inner-spin-button,input[data-anta][type=number]::-webkit-outer-spin-button{appearance:none;margin:0}input[data-anta][type=file]{--native-file-block-size: 28px;--native-file-padding-block: 4px;--native-file-font-size: 15px;--native-file-line-height: 20px;box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0;padding:0;border:0;color:var(--text-2);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-file-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-file-line-height)}input[data-anta][type=file]::file-selector-button{box-sizing:border-box;min-block-size:var(--native-file-block-size);margin:0 8px 0 0;padding:var(--native-file-padding-block) 9px;border:0;border-radius:4px;color:var(--text-2);background:color-mix(in oklch,var(--text-1) 10%,transparent);box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font:inherit;font-variation-settings:inherit;font-weight:450;letter-spacing:.05ch;line-height:var(--native-file-line-height);cursor:pointer;transition:color .15s ease-out,background-color .15s ease-out}@media(hover:hover)and (pointer:fine){input[data-anta][type=file]:not(:disabled):hover::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 15%,transparent)}}input[data-anta][type=file]:not(:disabled):active::file-selector-button{color:var(--text-1);background:color-mix(in oklch,var(--text-1) 20%,transparent)}input[data-anta][type=file]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=file]:disabled{color:var(--text-4);cursor:not-allowed}input[data-anta][type=file]:disabled::file-selector-button{color:var(--text-4);background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));cursor:not-allowed}select[data-anta]{--native-field-block-size: 28px;--native-field-padding-block: 4px;--native-field-font-size: 15px;--native-field-line-height: 20px;--native-field-round: 4px;--native-field-border: var(--border-2);--native-select-picker-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--native-select-picker-radius: var(--radius-md, 8px);--native-select-picker-border: 1px solid var(--border-3);--native-select-picker-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--native-select-option-color: var(--text-2);--native-select-option-hover: 5%;--native-select-option-active: 8%;--native-select-option-selected: 8%;--native-select-option-padding-x: 8px;--native-select-option-padding-y: 6px;box-sizing:border-box;block-size:var(--native-field-block-size);margin:0;padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;border-radius:var(--native-field-round);outline:0;background:var(--bg-1);box-shadow:inset 0 0 0 .5px var(--native-field-border);color:var(--text-1);color-scheme:inherit;font-family:var(--sans-serif);font-size:var(--native-field-font-size);font-weight:400;font-stretch:normal;font-style:normal;line-height:var(--native-field-line-height);transition:box-shadow .12s ease}.dark select[data-anta]{--native-select-picker-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}@media(hover:hover)and (pointer:fine){select[data-anta]:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--native-field-border)}}select[data-anta]:focus{box-shadow:inset 0 0 0 1px var(--native-field-border);outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta]:disabled{background:color-mix(in oklch,var(--text-1) 4%,var(--bg-1));box-shadow:inset 0 0 0 .5px color-mix(in oklch,var(--text-1) 15%,transparent);color:var(--text-4);cursor:not-allowed}@media(forced-colors:active){input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]),select[data-anta],textarea[data-anta]{border:1px solid ButtonBorder}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=small],select[data-anta][data-anta-size=small],textarea[data-anta][data-anta-size=small]{--native-field-block-size: 24px;--native-field-padding-block: 2px;--native-field-font-size: 13px;--native-field-line-height: 16px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[data-anta-size=large],select[data-anta][data-anta-size=large],textarea[data-anta][data-anta-size=large]{--native-field-block-size: 32px;--native-field-padding-block: 5px;--native-field-font-size: 17px;--native-field-line-height: 22px}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[round],select[data-anta][round],textarea[data-anta][round]{--native-field-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--native-field-round: attr(round type(<length>), 999px)}}input[data-anta]:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=password],[type=tel],[type=url],[type=date],[type=datetime-local],[type=month],[type=time],[type=week])[tone]:not([tone=""]),textarea[data-anta][tone]:not([tone=""]){--native-field-tone: var(--border-2);--native-field-border: light-dark( oklch(from var(--native-field-tone) .7 calc(c*.8) h), oklch(from var(--native-field-tone) .5 calc(c*.8) h) );@supports (color: attr(probe type(<color>),red)){--native-field-tone: attr(tone type(<color>), var(--border-2))}}@supports (appearance: base-select){select[data-anta],select[data-anta]::picker(select){appearance:base-select;-webkit-appearance:base-select}select[data-anta]{padding:0}select[data-anta]>button{box-sizing:border-box;display:flex;align-items:center;gap:4px;inline-size:100%;min-block-size:var(--native-field-block-size);padding-block:var(--native-field-padding-block);padding-inline:7px;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;text-align:start}select[data-anta]>button>selectedcontent{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select[data-anta]::picker-icon{display:none}select[data-anta]>button>a-icon{margin-inline-start:auto;color:var(--text-3);transition:transform .12s ease}select[data-anta]:open>button>a-icon{transform:rotate(180deg)}select[data-anta]::picker(select){box-sizing:border-box;display:flex;flex-direction:column;gap:1px;margin-block-start:4px;padding:4px;border:var(--native-select-picker-border);border-radius:var(--native-select-picker-radius);background:var(--native-select-picker-bg);box-shadow:var(--native-select-picker-shadow);color:var(--native-select-option-color);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}select[data-anta] option{box-sizing:border-box;min-block-size:28px;padding-block:var(--native-select-option-padding-y);padding-inline:var(--native-select-option-padding-x);border-radius:var(--radius-sm, 4px);background:transparent;color:var(--native-select-option-color);cursor:pointer;font-family:var(--sans-serif);font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:normal;line-height:16px;text-transform:none;transition:background-color .28s ease-out}select[data-anta] option:is(:hover,:focus-visible){background:color-mix(in oklch,currentColor var(--native-select-option-hover),transparent);transition:background-color 60ms ease-in-out}select[data-anta] option:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}select[data-anta] option:active{background:color-mix(in oklch,currentColor var(--native-select-option-active),transparent);transition:none}select[data-anta] option:checked{background:color-mix(in oklch,currentColor var(--native-select-option-selected),transparent);transition:background-color .28s ease-out}select[data-anta] option:disabled{color:var(--text-5);cursor:default}select[data-anta] optgroup{display:flex;flex-direction:column;gap:1px;color:var(--text-5);font-family:var(--sans-serif);font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}}}

package/dist/elements/a-input.js

@@ -60,8 +60,8 @@ const SHADOW_STYLE = `
   }
 
   .field {
-    --_bc: var(--input-border);
-    --_bw: 0.5px;
+    --_bc: var(--input-rest-border);
+    --_bw: var(--input-border-width);
     --_pad-block: 4px;
 
     display: flex;
@@ -74,7 +74,6 @@ const SHADOW_STYLE = `
     transition: box-shadow 120ms ease;
   }
   :host([multiline]) .field { align-items: stretch; }
-  :host([status]:not([status="neutral"])) .field { --_bw: 1px; }
   :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
   :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
   :host([size="small"]) .field { min-height: 24px; }
@@ -82,11 +81,12 @@ const SHADOW_STYLE = `
   :host([round]) .field { border-radius: var(--input-round, 999px); }
 
   @media (hover: hover) and (pointer: fine) {
-    :host(:not(:disabled)) .field:hover { --_bw: 1px; }
+    :host(:not(:disabled)) .field:hover { --_bw: 1px; --_bc: var(--input-border); }
   }
   :host(:not([readonly])) .field:has(input:focus, textarea:focus, button:focus-visible),
   :host([readonly]:state(kb-focus)) .field {
     --_bw: 1px;
+    --_bc: var(--input-border);
     outline: 1px solid var(--focus-ring);
     outline-offset: 1px;
   }
@@ -163,10 +163,13 @@ const SHADOW_STYLE = `
   :host(:disabled) slot[name="leading"],
   :host(:disabled) slot[name="trailing"] { opacity: 0.5; pointer-events: none; }
 
-  slot[name="clear"] { display: none; flex-shrink: 0; }
-  :host(:state(filled)) slot[name="clear"] { display: flex; align-items: center; }
-  :host(:disabled) slot[name="clear"],
-  :host([readonly]) slot[name="clear"] { display: none; }
+  slot[name="clear"] {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    visibility: hidden;
+  }
+  :host(:state(filled):not(:disabled):not([readonly])) slot[name="clear"] { visibility: visible; }
 
   :host([multiline]:state(filled)) slot[name="clear"] {
     align-self: flex-start;

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

@@ -206,7 +206,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *   - nothing → keep open (plain custom content doesn't dismiss).
      */
     private onSurfaceClick;
-    /** Close the whole open menu system from the root down. */
+    /** Close this popup inside persistent content, or the menu system otherwise. */
     private closeSystem;
     /** Called by the coordinator on the topmost open menu. Handles navigation;
      *  roving Enter / Space activation is `<a-menu-item>`'s own delegated keyup

package/dist/elements/a-menu.js

@@ -783,7 +783,11 @@ class AMenuElement extends HTMLElementBase {
       if (parent) {
         const pidx = openStack.indexOf(parent);
         if (pidx !== -1) {
-          for (let i = openStack.length - 1; i > pidx; i--) openStack[i]._doHide();
+          for (let i = openStack.length - 1; i > pidx; i--) {
+            const menu = openStack[i];
+            if (menu !== this && menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
+            menu._doHide();
+          }
           openStack.length = pidx + 1;
         }
       }
@@ -1091,6 +1095,10 @@ class AMenuElement extends HTMLElementBase {
    *   - nothing → keep open (plain custom content doesn't dismiss).
    */
   onSurfaceClick = (e) => {
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (node instanceof AMenuElement && node !== this) return;
+    }
     let contain = false;
     let exemptTrigger = false;
     for (const node of e.composedPath()) {
@@ -1130,11 +1138,15 @@ class AMenuElement extends HTMLElementBase {
         return this.closeSystem(e);
       }
       if (node.matches("a[data-anta-menu-item]")) return this.closeSystem(e);
-      if (node.hasAttribute("data-menu-close")) return this.closeSystem(e);
+      if (node.hasAttribute("data-menu-close")) return this.closeSystem(e, true);
     }
   };
-  /** Close the whole open menu system from the root down. */
-  closeSystem(e) {
+  /** Close this popup inside persistent content, or the menu system otherwise. */
+  closeSystem(e, explicit = false) {
+    if (!explicit && this.closest("[data-menu-open]")) {
+      this.requestClose(e);
+      return;
+    }
     const root = openStack[0] ?? this;
     root.requestClose(e);
   }
@@ -1309,6 +1321,7 @@ class AMenuElement extends HTMLElementBase {
       return;
     } else {
       const onClick = (e) => {
+        if (anchor.matches("a-input") && e.composedPath().some((node) => node instanceof Element && node.getAttribute("slot") === "clear")) return;
         const viaKeyboard = e.detail === 0;
         const coord = this.#isCoord ? viaKeyboard ? this.#anchorCoord(anchor) : [e.clientX, e.clientY] : void 0;
         if (this._shown) this.requestClose(e);

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

@@ -1,7 +1,8 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-slider.css';
+type SliderValue = number | [number, number];
 /**
- * `<a-slider>` is a form-associated single-value slider. Its rail uses relative
+ * `<a-slider>` is a form-associated single-value or range slider. Its rail uses relative
  * dragging by default: pressing any point captures the pointer, while only the
  * subsequent horizontal movement changes the value. Set `track-click="jump"`
  * for the conventional position-based track click.
@@ -11,10 +12,10 @@ export declare class ASliderElement extends HTMLElementBase {
     static formAssociated: boolean;
     static observedAttributes: string[];
     private internals?;
-    get value(): number;
-    set value(value: number | string);
-    get defaultValue(): number;
-    set defaultValue(value: number | string);
+    get value(): SliderValue;
+    set value(value: SliderValue | string);
+    get defaultValue(): SliderValue;
+    set defaultValue(value: SliderValue | string);
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string): void;
@@ -23,3 +24,4 @@ export declare class ASliderElement extends HTMLElementBase {
     formDisabledCallback(): void;
 }
 export declare function register_a_slider(): void;
+export {};