@antadesign/anta 0.3.34 → 0.3.35

package/dist/components/InputTime.d.ts

@@ -56,6 +56,9 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
     name?: string;
     /** Disable the field. */
     disabled?: boolean;
+    /** Keep the time selectable and focusable while preventing edits. Blur emits
+     *  `change` only if an edit was pending when the field became read-only. */
+    readOnly?: boolean;
     /** Mark the field required (drives native validity). */
     required?: boolean;
     /** Leading icon at the start of the field — the clock affordance. Pass another
@@ -74,8 +77,11 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
     autoFocus?: boolean;
     /** Fires on every edit (`input`), with the native event + an `attrs` snapshot
      *  (`value`, `name`, `empty`, `valid`, `validationMessage`). Also fires on
-     *  `change` (blur) and on clear. */
+     *  `change` (blur) and on clear. Read-only blur is silent unless committing
+     *  an edit made before the field became read-only. */
     onValueChange?: (event: any, attrs: InputTimeChangeAttrs) => void;
+    /** Fires before clearing. Call `preventDefault()` synchronously to keep the value. */
+    onClearClick?: (e: CustomEvent) => void;
     /** Fires after the built-in clear button has cleared the field. */
     onClearInput?: (e: CustomEvent) => void;
     /** Fires when the field gains focus. */
@@ -97,12 +103,12 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
  * (`value` + `onValueChange`) or uncontrolled (`defaultValue`), submitting under
  * `name`.
  *
- * Requires `@antadesign/anta/elements` (client-side only). Reads
- * `navigator.language` at render, so render client-side (not SSR-safe).
+ * Import element behavior in the browser. The wrapper supports server rendering;
+ * the owned segments resolve the locale when the element connects.
  *
  * @example
  * ```tsx
  * <InputTime label="Start" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />
  * ```
  */
-export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, autoFocus, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;
+export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, readOnly, required, icon, clearable, dimActions, trailing, autoFocus, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;

package/dist/components/InputTime.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { CLEAR_TRIGGER } from "../input-events";
+import { useNativeEventProps } from "../native-event-props";
 import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
-const isStringish = (n) => typeof n === "string" || typeof n === "number";
 const attrsOf = (e) => {
   const el = e?.target ?? {};
   const value = el.value ?? "";
   return {
     value,
-    name: el.getAttribute?.("name") ?? void 0,
+    name: el.name || void 0,
     empty: !value,
     valid: el.validity ? el.validity.valid : void 0,
     validationMessage: el.validationMessage ?? ""
@@ -38,6 +39,7 @@ const InputTime = ({
   max,
   name,
   disabled,
+  readOnly,
   required,
   icon,
   clearable,
@@ -45,12 +47,19 @@ const InputTime = ({
   trailing,
   autoFocus,
   onValueChange,
+  onClearClick,
   onClearInput,
   children,
   className,
   style,
   ...rest
 }) => {
+  const eventProps = useNativeEventProps({
+    oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
+    onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
+    onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
+    onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0
+  });
   const statusTone = status && status !== "neutral" ? status : void 0;
   const glyph = statusIcon === void 0 ? statusTone ? STATUS_ICON[statusTone] : void 0 : statusIcon;
   return /* @__PURE__ */ jsxs(
@@ -68,25 +77,20 @@ const InputTime = ({
       tone: neutralToneAttr(tone),
       name,
       disabled: presence(disabled),
+      readonly: presence(readOnly),
       required: presence(required),
       "dim-actions": presence(dimActions),
       autofocus: autoFocus ? true : void 0,
       "aria-invalid": status === "critical" ? "true" : void 0,
-      oninput: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
-      onchange: onValueChange ? (e) => onValueChange(e, attrsOf(e)) : void 0,
-      onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,
+      ...eventProps,
       class: className,
       style: roundStyle(round, "--input-time-round", toneStyle(tone, "--input-time-tone-source", style)),
       ...rest,
       children: [
-        label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
-        icon !== false && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: /* @__PURE__ */ jsx(Icon, { shape: icon ?? "clock" }) }),
-        clearable && // Real <a-button> in the element's `clear` slot; the element controls its
-        // visibility (shown only when filled). It fires `clearrequest`, which the
-        // element turns into clear(). CONTRACT: `data-custom-event` MUST match
-        // CLEAR_TRIGGER in src/elements/a-input-time.ts (string duplicated, not
-        // shared, to keep the wrapper/element decoupled).
-        /* @__PURE__ */ jsx("span", { slot: "clear", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+        label != null && /* @__PURE__ */ jsx("a-input-time-label", { slot: "label", children: label }),
+        icon !== false && /* @__PURE__ */ jsx("a-input-time-leading", { slot: "leading", children: /* @__PURE__ */ jsx(Icon, { shape: icon ?? "clock" }) }),
+        clearable && // The UI element handles the clear lifecycle before framework hydration.
+        /* @__PURE__ */ jsx("a-input-time-clear", { slot: "clear", children: /* @__PURE__ */ jsx(
           Button,
           {
             priority: "tertiary",
@@ -94,11 +98,11 @@ const InputTime = ({
             round: !!round,
             icon: "x",
             "aria-label": "Clear",
-            "data-custom-event": "clearrequest"
+            "data-custom-event": CLEAR_TRIGGER
           }
         ) }),
-        trailing != null && /* @__PURE__ */ jsx("span", { slot: "trailing", style: { display: "contents" }, children: trailing }),
-        hint != null && /* @__PURE__ */ jsxs("span", { slot: "hint", style: { display: "contents" }, children: [
+        trailing != null && /* @__PURE__ */ jsx("a-input-time-trailing", { slot: "trailing", children: trailing }),
+        hint != null && /* @__PURE__ */ jsxs("a-input-time-hint", { slot: "hint", children: [
           glyph && /* @__PURE__ */ jsx(Icon, { shape: glyph, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { children: hint })
         ] }),

package/dist/components/Loader.d.ts

@@ -27,8 +27,8 @@ export interface LoaderProps extends BaseProps {
  * to the current proportion. `shape="loader"` provides the indeterminate
  * visual for string-only icon props such as `Button`'s `icon`.
  *
- * Requires `@antadesign/anta/elements` to be imported (client-side only) to
- * register the underlying custom element.
+ * Loader needs CSS without element registration. See
+ * [Install and configure](https://anta.design/install/) for stylesheet setup.
  *
  * @example Indeterminate
  * ```tsx

package/dist/components/Menu.d.ts

@@ -39,9 +39,10 @@ export interface MenuProps extends BaseProps {
      *  in response. Submenus are always uncontrolled regardless of this. See
      *  STATEFUL-COMPONENTS.md. */
     open?: boolean;
-    /** Round the menu: the container softens to a 20px radius and its items go
-     *  fully round. A `number` (px) or CSS length string tunes the container radius
-     *  only — items stay full pills. */
+    /** Round the menu container to a 20px radius. A `number` (px) or CSS length
+     *  string sets a custom container radius. Items use the container radius minus
+     *  `inset`, clamped to zero. Nested submenus inherit the container radius unless
+     *  they set their own `round` value. */
     round?: boolean | number | string;
     /** Contain events so they don't bubble out of the menu to ancestor handlers
      *  (e.g. a clickable row the menu sits in). Selecting an item is always
@@ -101,4 +102,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, stopPropagation, role, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, onactivedescendant, round, stopPropagation, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -1,5 +1,6 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
 import { nativeStateChange, lengthStyle, roundStyle, roundAttr } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
 const Menu = ({
   placement,
   context,
@@ -10,6 +11,7 @@ const Menu = ({
   inset,
   open,
   onStateChange,
+  onactivedescendant,
   round,
   stopPropagation,
   role = "menu",
@@ -18,6 +20,16 @@ const Menu = ({
   children,
   ...rest
 }) => {
+  const events = useNativeEventProps({
+    onstatechange: onStateChange ? (e) => {
+      const { event, detail, isOwn } = nativeStateChange(e);
+      if (isOwn && detail) onStateChange(event, {
+        next: detail.next === "open",
+        prev: detail.prev === "open"
+      });
+    } : void 0,
+    onactivedescendant
+  });
   return /* @__PURE__ */ jsx(
     "a-menu",
     {
@@ -28,14 +40,7 @@ const Menu = ({
       offset: offset != null ? String(offset) : void 0,
       autowidth: autoWidth ? "" : void 0,
       state: open === void 0 ? void 0 : open ? "open" : "closed",
-      onstatechange: onStateChange ? (e) => {
-        const { event, detail, isOwn } = nativeStateChange(e);
-        if (isOwn && detail)
-          onStateChange(event, {
-            next: detail.next === "open",
-            prev: detail.prev === "open"
-          });
-      } : void 0,
+      ...events,
       round: roundAttr(round),
       "stop-propagation": stopPropagation === void 0 || stopPropagation === false ? void 0 : stopPropagation === true ? "" : Array.isArray(stopPropagation) ? stopPropagation.join(" ") : stopPropagation,
       role,

package/dist/components/MenuItem.js

@@ -152,20 +152,7 @@ const MenuItem = ({
       ...rest,
       ...switchBehavior,
       children: [
-        indicator != null ? (
-          // `min-height: 1lh` makes the wrapper one text line tall and centers the node
-          // in it, so a small indicator aligns with the label's first line in a hinted
-          // (top-aligned) row instead of riding at the top.
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-indicator": "",
-              style: { flex: "none", display: "inline-flex", alignItems: "center", minHeight: "1lh", pointerEvents: "none" },
-              children: indicator
-            }
-          )
-        ) : selectionIndicator === "checkbox" ? /* @__PURE__ */ jsx(
+        indicator != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-indicator": "", children: indicator }) : selectionIndicator === "checkbox" ? /* @__PURE__ */ jsx(
           "a-checkbox",
           {
             "aria-hidden": "true",

package/dist/components/MenuItemCopy.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { MenuItem } from "./MenuItem";
 import { useCopyFeedback } from "../anta_helpers";
-import { copyElementProps, isNodeCopy } from "./copy-props";
+import { useCopyElementProps, isNodeCopy } from "./copy-props";
 const MenuItemCopy = ({
   label = "Copy",
   icon = "copy",
@@ -20,7 +20,7 @@ const MenuItemCopy = ({
   const restingIcon = iconPlacement === "none" ? void 0 : icon;
   const { shownIcon, shownTone, handleCopied } = useCopyFeedback(restingIcon, tone, onCopied);
   const iconSlot = iconPlacement === "trailing" ? { iconTrailing: shownIcon } : iconPlacement === "none" ? {} : { icon: shownIcon };
-  const copyAttrs = copyElementProps({
+  const copyAttrs = useCopyElementProps({
     copy,
     copyNode,
     copyUrl,

package/dist/components/Panel.d.ts

@@ -13,5 +13,7 @@ export interface PanelProps extends BaseProps, DOMEventHandlers {
     }) => void;
 }
 /** A scroll container that fills its parent and can maximize to the viewport.
- * Percentage height requires a parent with a defined height. */
+ * Percentage height requires a parent with a defined height.
+ * Inside another shadow root, load `@antadesign/anta/elements/a-panel.css`
+ * there through a stylesheet link so its part rules can reach Panel. */
 export declare const Panel: ({ maximized, defaultMaximized, onStateChange, className, children, ...rest }: PanelProps) => any;

package/dist/components/Panel.js

@@ -1,22 +1,28 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
+import { useNativeEventProps } from "../native-event-props";
 import { nativeStateChange } from "../anta_helpers";
-const Panel = ({ maximized, defaultMaximized, onStateChange, className, children, ...rest }) => /* @__PURE__ */ jsx(
-  "a-panel",
-  {
-    state: maximized === void 0 ? void 0 : maximized ? "maximized" : "normal",
-    "default-state": maximized === void 0 && defaultMaximized ? "maximized" : void 0,
+const Panel = ({ maximized, defaultMaximized, onStateChange, className, children, ...rest }) => {
+  const events = useNativeEventProps({
     onstatechange: onStateChange ? (event) => {
       const { event: native, detail, isOwn } = nativeStateChange(event);
       if (isOwn && detail) onStateChange(native, {
         next: detail.next === "maximized",
         prev: detail.prev === "maximized"
       });
-    } : void 0,
-    class: className,
-    ...rest,
-    children
-  }
-);
+    } : void 0
+  });
+  return /* @__PURE__ */ jsx(
+    "a-panel",
+    {
+      state: maximized === void 0 ? void 0 : maximized ? "maximized" : "normal",
+      "default-state": maximized === void 0 && defaultMaximized ? "maximized" : void 0,
+      ...events,
+      class: className,
+      ...rest,
+      children
+    }
+  );
+};
 export {
   Panel
 };

package/dist/components/Progress.d.ts

@@ -1,51 +1,49 @@
 import type { BaseProps } from "../general_types";
 export interface ProgressProps extends BaseProps {
-    /** Current progress value. Omit this prop, or pass `false`, to show
-     * indeterminate progress. Negative values are clamped to 0. */
+    /** Completed amount relative to `max`. Omit this prop or pass `false` to show
+     *  a loading animation without a percentage. Values are clamped to the range;
+     *  non-finite values show zero completion. */
     value?: number | false;
-    /** Upper bound of the range.
+    /** Total amount to complete. Use a positive number to show a count, such as
+     *  3 of 7 files. When `value` is supplied, a non-positive or non-finite total
+     *  shows an empty fill.
      *  @defaultValue 100 */
     max?: number;
-    /** Color variant, or any literal CSS color for a one-off custom tone (the
-     *  surface / indicator / text are derived from it in oklch). Named tones track
-     *  light/dark automatically.
+    /** Color for the track, fill, and label row. Pass a named tone or a CSS color.
+     *  Named tones follow the current theme.
      *  @defaultValue 'neutral' */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. Scales the track and the default label row together.
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
-    /** Fully-round track (`border-radius: 999px`); the fill is clipped to it. Pass a
-     *  `number` (px) or a CSS length string for a custom radius. */
+    /** Pill-shaped track. Pass a number in pixels or a CSS length for a custom
+     *  corner radius. */
     round?: boolean | number | string;
-    /** Text label displayed after the percentage, or on its own for
-     *  indeterminate progress. When you provide custom `children` (which replace
-     *  the default label row), `label` is no longer rendered — but it still
-     *  supplies the progressbar's accessible name. */
+    /** Task name shown after the percentage, or on its own during loading.
+     *  Custom `children` replace the label row; this prop still supplies the
+     *  progressbar's accessible name. */
     label?: string;
-    /** Right-aligned hint text (e.g. "3 of 7"). Like `label`, it's not rendered
-     *  when custom `children` are provided but still feeds the accessible name. */
+    /** Details shown at the end of the row, such as "3 of 7" or a time estimate.
+     *  Included in the accessible name even when custom `children` replace the row. */
     hint?: string;
 }
 /**
- * Progress indicator for task completion and indeterminate work.
+ * Shows task completion with a percentage, label, and optional hint.
  *
- * Renders an `<a-progress>` web component with an optional label area
- * showing percentage, text label, and hint.
- *
- * Requires `@antadesign/anta/elements` to be imported (client-side only)
- * to register the underlying custom element.
+ * Use `value` and `max` when the total is known. Omit `value` for a loading
+ * animation. Custom children replace the default label row while `label` and
+ * `hint` retain an accessible description of the task.
  *
  * @example Basic usage
  * ```tsx
- * import { Progress } from '@antadesign/anta'
- * import '@antadesign/anta/elements'
+ * import { Progress } from '@antadesign/anta/bundle'
  *
  * <Progress value={60} />
  * ```
  *
  * @example With label and hint
  * ```tsx
- * <Progress value={42} label="Uploading files..." hint="3 of 7" />
+ * <Progress value={3} max={7} label="Uploading files..." hint="3 of 7" />
  * ```
  *
  * @example Indeterminate

package/dist/components/Progress.js

@@ -2,10 +2,17 @@ import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { hasChildren, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Progress = ({ value, max = 100, tone, size, round, label, hint, className, style, children, ...rest }) => {
   const indeterminate = value == null || value === false;
-  const numericValue = typeof value === "number" ? value : 0;
-  const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, numericValue / max * 100))) : 0;
-  const clampedValue = max > 0 ? Math.min(max, Math.max(0, numericValue)) : 0;
+  const numericValue = typeof value === "number" && Number.isFinite(value) ? value : 0;
+  const validMax = Number.isFinite(max) && max > 0;
+  const fillPercent = validMax ? Math.min(100, Math.max(0, numericValue / max * 100)) : 0;
+  const percent = Math.round(fillPercent);
+  const clampedValue = validMax ? Math.min(max, Math.max(0, numericValue)) : 0;
   const ariaLabel = [label, !indeterminate && `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || (indeterminate ? "Loading" : void 0);
+  const progressStyle = indeterminate ? style : {
+    "--progress-value": numericValue,
+    "--progress-max": validMax ? max : 0,
+    ...style
+  };
   return /* @__PURE__ */ jsx(
     "a-progress",
     {
@@ -17,16 +24,13 @@ const Progress = ({ value, max = 100, tone, size, round, label, hint, className,
       role: "progressbar",
       "aria-valuenow": indeterminate ? void 0 : clampedValue,
       "aria-valuemin": indeterminate ? void 0 : 0,
-      "aria-valuemax": indeterminate ? void 0 : max,
+      "aria-valuemax": indeterminate ? void 0 : validMax ? max : 100,
       "aria-label": ariaLabel,
       class: className,
-      style: roundStyle(round, "--progress-round", toneStyle(tone, "--progress-tone-source", style)),
+      style: roundStyle(round, "--progress-round", toneStyle(tone, "--progress-tone-source", progressStyle)),
       ...rest,
       children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
-        !indeterminate && /* @__PURE__ */ jsxs("a-progress-number", { children: [
-          percent,
-          "%"
-        ] }),
+        !indeterminate && /* @__PURE__ */ jsx("a-progress-number", { children: `${percent}%` }),
         label != null && /* @__PURE__ */ jsx("a-progress-text", { children: label }),
         hint != null && /* @__PURE__ */ jsx("a-progress-hint", { children: hint })
       ] })

package/dist/components/RadioGroup.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { useId, useState } from "../jsx-runtime";
-import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle } from "../anta_helpers";
+import { useNativeEventProps } from "../native-event-props";
+import { useId } from "../jsx-runtime";
+import { nativeStateChange, neutralToneAttr, optionPresentationAttrs, toneStyle, useSelectionMirror } from "../anta_helpers";
 const radioAttrsOf = (el) => ({
   value: el?.value ?? null,
   name: el?.getAttribute?.("name") ?? void 0
@@ -28,8 +29,7 @@ const RadioGroup = ({
   ...rest
 }) => {
   const controlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = controlled ? value : internalValue;
+  const [currentValue, setInternalValue] = useSelectionMirror(value, defaultValue);
   const seen = /* @__PURE__ */ new Set();
   for (const o of options) {
     if (seen.has(o.value))
@@ -51,6 +51,7 @@ const RadioGroup = ({
     onChange?.(e);
     onValueChange?.(e, radioAttrsOf(e.currentTarget));
   } : void 0;
+  const events = useNativeEventProps({ onstatechange, onchange, onfocusin: onFocus, onfocusout: onBlur });
   return /* @__PURE__ */ jsxs(
     "a-radio-group",
     {
@@ -68,10 +69,7 @@ const RadioGroup = ({
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
-      onstatechange,
-      onchange,
-      onfocusin: onFocus,
-      onfocusout: onBlur,
+      ...events,
       class: className,
       style: toneStyle(tone, "--radio-tone-source", toneStyle(tone, "--radio-off-tone-source", style)),
       children: [

package/dist/components/{select-parts.css → Select.css}

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-select-field{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;--select-text: var(--text-1);--select-bg: var(--bg-1);--select-border: var(--border-2);--select-hint: var(--text-3);--select-fs: 15px;--select-lh: 20px;font-family:var(--sans-serif);font-size:var(--select-fs);line-height:var(--select-lh)}a-select-field[size=small]{--select-fs: 13px;--select-lh: 16px}a-select-field[size=large]{--select-fs: 17px;--select-lh: 22px}a-select-label{color:var(--text-3);font-weight:500}a-select-hint{display:flex;align-items:start;gap:4px;padding-inline:1px;color:var(--select-hint);font-size:calc(var(--select-fs) - 1px);line-height:var(--select-lh)}a-select-field>a-button{width:100%;min-width:0;box-sizing:border-box;padding-inline:7px;color:var(--select-text);background:var(--select-bg);box-shadow:inset 0 0 0 .5px var(--select-border);font-size:var(--select-fs);line-height:var(--select-lh);font-weight:400;letter-spacing:normal}a-select-field>a-button>a-button-label{flex:1;text-align:start;line-height:var(--select-lh);padding:0}a-select-field>a-button>a-button-label[data-placeholder]{color:var(--text-4)}a-select-field>a-button:focus-visible{box-shadow:inset 0 0 0 1px var(--select-border)}@media(hover:hover)and (pointer:fine){a-select-field>a-button:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--select-border)}}a-select-leading,a-select-chevron{flex:none;color:var(--text-3)}a-select-leading{display:inline-flex;align-items:center}a-select-field[size=small] a-icon{--icon-size: 14px}a-select-field[size=large] a-icon{--icon-size: 18px}a-select-field[status=critical]{--select-status-source: var(--anta-seed-critical);--select-bg: var(--bg-2-critical);--select-hint: var(--text-2-critical)}a-select-field[status=warning]{--select-status-source: var(--anta-seed-warning);--select-bg: var(--bg-2-warning);--select-hint: var(--text-2-warning)}a-select-field[status=success]{--select-status-source: var(--anta-seed-success);--select-bg: var(--bg-2-success);--select-hint: var(--text-2-success)}a-select-field[status=info]{--select-status-source: var(--anta-seed-info);--select-bg: var(--bg-2-info);--select-hint: var(--text-2-info)}a-select-field[status=brand]{--select-status-source: var(--anta-seed-brand);--select-bg: var(--bg-2-brand);--select-hint: var(--text-2-brand)}a-select-field[status]:not([status=neutral]){--select-border: light-dark(oklch(from var(--select-status-source) .58 c h), oklch(from var(--select-status-source) .52 c h))}a-select-field[status]:not([status=neutral])>a-button{box-shadow:inset 0 0 0 1px var(--select-border)}a-select-field[disabled]{--select-text: var(--text-4);--select-hint: var(--text-5);--select-bg: color-mix(in oklch, var(--text-1) 5%, transparent);--select-border: var(--border-2)}a-select-field[disabled]>a-select-label{color:var(--text-4)}a-select-chevron{display:inline-flex;transition:transform .15s ease}a-select-chevron[open]{transform:rotate(180deg)}a-select-faceted-summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-select-field{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;--select-text: var(--text-1);--select-bg: var(--bg-1);--select-border: var(--border-2);--select-hint: var(--text-3);--select-fs: 15px;--select-lh: 20px;font-family:var(--sans-serif);font-size:var(--select-fs);line-height:var(--select-lh)}a-select-field[size=small]{--select-fs: 13px;--select-lh: 16px}a-select-field[size=large]{--select-fs: 17px;--select-lh: 22px}a-select-label{color:var(--text-3);font-weight:500}a-select-hint{display:flex;align-items:start;gap:4px;padding-inline:1px;color:var(--select-hint);font-size:calc(var(--select-fs) - 1px);line-height:var(--select-lh)}a-select-field>a-button{width:100%;min-width:0;box-sizing:border-box;padding-inline:7px;color:var(--select-text);background:var(--select-bg);box-shadow:inset 0 0 0 .5px var(--select-border);font-size:var(--select-fs);line-height:var(--select-lh);font-weight:400;letter-spacing:normal}a-select-field>a-button>a-button-label{flex:1;text-align:start;line-height:var(--select-lh);padding:0}a-select-field>a-button>a-button-label[data-placeholder]{color:var(--text-4)}a-select-field>a-button:focus-visible{box-shadow:inset 0 0 0 1px var(--select-border)}@media(hover:hover)and (pointer:fine){a-select-field>a-button:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--select-border)}}a-select-leading,a-select-chevron{flex:none;color:var(--text-3)}a-select-leading{display:inline-flex;align-items:center}a-select-field[size=small] a-icon{--icon-size: 14px}a-select-field[size=large] a-icon{--icon-size: 18px}a-select-field[status=critical]{--select-status-source: var(--anta-seed-critical);--select-bg: var(--bg-2-critical);--select-hint: var(--text-2-critical)}a-select-field[status=warning]{--select-status-source: var(--anta-seed-warning);--select-bg: var(--bg-2-warning);--select-hint: var(--text-2-warning)}a-select-field[status=success]{--select-status-source: var(--anta-seed-success);--select-bg: var(--bg-2-success);--select-hint: var(--text-2-success)}a-select-field[status=info]{--select-status-source: var(--anta-seed-info);--select-bg: var(--bg-2-info);--select-hint: var(--text-2-info)}a-select-field[status=brand]{--select-status-source: var(--anta-seed-brand);--select-bg: var(--bg-2-brand);--select-hint: var(--text-2-brand)}a-select-field[status]:not([status=neutral]){--select-border: light-dark(oklch(from var(--select-status-source) .58 c h), oklch(from var(--select-status-source) .52 c h))}a-select-field[status]:not([status=neutral])>a-button{box-shadow:inset 0 0 0 1px var(--select-border)}a-select-field[disabled]{--select-text: var(--text-4);--select-hint: var(--text-5);--select-bg: color-mix(in oklch, var(--text-1) 5%, transparent);--select-border: var(--border-2)}a-select-field[disabled]>a-select-label{color:var(--text-4)}a-select-chevron{display:inline-flex;transition:transform .15s ease}a-select-chevron[open]{transform:rotate(180deg)}a-select-faceted-text{display:block;padding:4px}a-select-faceted-summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}