@antadesign/anta 0.3.17 → 0.3.19

package/README.md

@@ -1,244 +1,40 @@
 # @antadesign/anta
 
-<a href="https://antithesis.com" target="_blank" rel="noopener noreferrer">Antithesis</a> design system, **Anta**, has three layers: global CSS tokens with swappable themes, framework-agnostic web components that work in plain HTML, and JSX wrappers for React and Preact.
-
-One constraint shapes the architecture. Antithesis runs most of its UI in a Worker thread, driven by a custom reactive engine, and a component that mutates its own attributes would desync the Worker from the UI thread. So Anta's web components are **fully declarative**: they never touch their own attributes, and internal state lives in Shadow DOM, invisible to the outer document. The components carry the styling without imposing a framework, and most are stateless; the JSX wrappers exist for dynamic state and conditional rendering.
-
-## Installation
-
-```sh
-npm install @antadesign/anta   # or pnpm / bun
-```
-
-Pin an exact version in `package.json` (`"@antadesign/anta": "0.3.16"`) instead
-of a floating tag such as `"latest"`.
-
-### Usage
-
-```tsx
-import '@antadesign/anta/tokens.css'  // CSS custom properties
-import '@antadesign/anta/reset.css'   // reset and typography defaults
-import '@antadesign/anta/elements'    // registers <a-*> elements
-import { Progress } from '@antadesign/anta'
-
-<Progress value={42} label="Uploaded" hint="3 of 7" />
-```
-
-### What you import (and why)
-
-Tokens, elements, and the JSX layer render a styled component. The reset is
-recommended; the reference theme is optional.
-
-| Import | Provides | Skip if… |
-|---|---|---|
-| `@antadesign/anta/tokens.css` | Six seed tokens, derived role scales (`--bg-1…5`, `--text-1…5`, `--border-1…5`), `.dark`, the 15px root size, and layer order. Override a seed to reskin its tone. | You provide those variables. |
-| `@antadesign/anta/reset.css` | A small reset plus Anta's heading, list, and link typography in `@layer anta`. | You use another reset and typography. |
-| `@antadesign/anta/elements` | Registers every `<a-*>` element and its CSS. Per-element entries register one; see [Registering elements](#registering-elements). | You render only on the server or register elements individually. |
-| `@antadesign/anta` | Typed React/Preact wrappers such as `Progress`, `Text`, and `Icon`. | You write `<a-*>` elements directly. |
-| `@antadesign/anta/theme-anta.css` *(optional)* | The hand-tuned reference palette. Import last to replace the seed-derived default. | You want the seed-derived or your own palette. |
-
-Load `tokens.css` before element CSS. Elements read its variables; without it,
-they render unstyled.
-
-### Cascade layers
-
-Anta's reset and element CSS live in `@layer anta`. `tokens.css` declares
-`@layer base, anta, components, utilities`, placing Anta above preflight resets
-and below your component and utility layers.
-
-To change that order, declare it in CSS loaded **before** `tokens.css`. The
-first declaration fixes a layer's position:
-
-```css
-/* your global.css, loaded before anta */
-@layer reset, anta, my-components, utilities;
-```
-
-Token custom properties stay unlayered so they apply everywhere.
-
-> **Gotcha: an unlayered hard reset defeats Anta's element rules.**
->
-> ```css
-> *, *::before, *::after { box-sizing: border-box; }
-> * { margin: 0; }
-> ```
->
-> Unlayered styles beat layered ones regardless of specificity. This reset
-> overrides Anta's element defaults. Delete the duplicate, or put your reset in
-> `@layer base { … }`; `reset.css` already applies the same universal reset in
-> `@layer anta`.
-
-## Registering elements
-
-JSX wrappers render `<a-*>` tags. Register their classes before those tags reach
-the DOM. Registration needs `HTMLElement`, so the import is a no-op in Node.js
-and Worker threads.
-
-```ts
-import '@antadesign/anta/elements'  // auto-registers all elements
-```
-
-`/elements` registers everything. Per-element entries register one element and
-load only its CSS:
-
-```ts
-import '@antadesign/anta/elements/a-tooltip'  // only <a-tooltip> + its CSS
-import '@antadesign/anta/elements/a-button'   // only <a-button> + its CSS
-```
-
-Both are idempotent, side-effect imports and safe during SSR.
-
-Use a static import in your app entry, outside components and hooks:
-
-```ts
-// src/main.tsx (or wherever your root render lives)
-import '@antadesign/anta/elements'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-createRoot(document.getElementById('root')!).render(<App />)
-```
-
-Module initialisation registers the classes before the first render, avoiding a
-flash of un-upgraded elements.
-
-> **Why not `useEffect(() => import('@antadesign/anta/elements'), [])`?**
-> `useEffect` runs after paint and the import resolves later. The browser can
-> paint unregistered elements first. `useLayoutEffect` is still asynchronous and
-> warns during SSR hydration.
-
-Choose the entry point for your runtime:
-
-- **Plain HTML or static sites:** a `<script type="module">` in the document head.
-- **Astro or Next.js:** a client-only script. In Astro, use
-  `<script>import '@antadesign/anta/elements'</script>`; in Next.js, import it
-  from a `'use client'` file.
-- **Worker-rendered UI:** the UI-thread bootstrap that owns the DOM. A Worker
-  has no `HTMLElement`.
-
-## Framework setup
-
-### React
-
-Works out of the box.
-
-### Preact with compat
-
-If your bundler aliases `react` to `preact/compat`, Anta works without setup.
-
-### Preact without compat
-
-Call `configure()` before rendering any anta components:
-
-```ts
-import { configure } from '@antadesign/anta'
-import { h, Fragment } from 'preact'
-configure(h, Fragment)
-```
-
-### TypeScript: typing raw `<a-*>` tags in JSX
-
-JSX wrappers such as `<Button>` and `<Progress>` need no extra typing. Configure
-JSX only when you write raw `<a-*>` tags.
-
-**Option A (preferred)** — point JSX types at Anta in `tsconfig.json`:
-
-```jsonc
-{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@antadesign/anta" } }
-```
-
-Every `a-*` tag type-checks, standard HTML tags keep working, and importing
-`@antadesign/stickers` adds its tags automatically.
-
-**Option B** — if `jsxImportSource` cannot change, merge Anta's tag map into
-your JSX namespace with `AntaIntrinsicElements` (and `StickerIntrinsicElements`
-when needed):
-
-```ts
-import type { AntaIntrinsicElements } from '@antadesign/anta'
-import type { StickerIntrinsicElements } from '@antadesign/stickers' // only if you use stickers
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements extends AntaIntrinsicElements, StickerIntrinsicElements {}
-  }
-}
-```
-
-With `@types/react` 18+ and `jsx: "react-jsx"`, JSX is module-scoped. Extend
-the `react` module instead:
-
-```ts
-import type { AntaIntrinsicElements } from '@antadesign/anta'
-
-declare module 'react' {
-  namespace JSX {
-    interface IntrinsicElements extends AntaIntrinsicElements {}
-  }
-}
-```
-
-Both options reject unknown tags and invalid props. New tags arrive with Anta
-upgrades; there is no per-tag list to maintain.
-
-### Raw web components (no JSX)
-
-Elements also work in plain HTML. Registration loads their CSS; resolve the bare
-specifier with a bundler or import map.
-
-```html
-<script type="module">
-  import '@antadesign/anta/elements'
-</script>
-
-<a-progress value="42" max="100" tone="info"></a-progress>
-```
-
-## Dark mode
-
-Add the `dark` class to any ancestor element:
-
-```html
-<div class="dark">
-  <Progress value={50} />
-</div>
-```
-
-## Fonts
-
-Anta is designed for a customized <a href="https://typetype.org/fonts/tt-interphases-pro" target="_blank" rel="noopener noreferrer">TT Interphases Pro</a>, but ships no font binaries. Components use `--sans-serif` and `--monospace` with system fallbacks. `tokens.css` sets a 15px root size (`1rem = 15px`).
-
-To use the Antithesis fonts, register your own `@font-face` declarations and override the variables:
-
-```css
-@font-face {
-  font-family: "Antithesis sans";
-  src: url("/path/to/your/sans.woff2") format("woff2");
-  /* ... */
-}
-
-:root {
-  --sans-serif: "Antithesis sans", sans-serif;
-  --monospace: "Antithesis mono", monospace;
-}
-```
-
-## Browser support
-
-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 | 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
-`<a-icon size>` in Chrome 133+ and Safari 18.2+. Elsewhere use `<Icon size>`
-or `--icon-size`.
+**Anta** is [Antithesis](https://antithesis.com)'s design system. It provides
+design tokens, declarative web components, and typed JSX wrappers. Use the same
+components in React, Preact via compat, plain HTML, and custom JSX runtimes via
+`configure()`.
+
+## Documentation for coding agents
+
+Start with [`./docs/index.md`](./docs/index.md). This path is relative to the
+root of the installed Anta package, not to the consuming application.
+
+This package includes version-specific documentation inside the installed npm
+package.
+
+Example:
+
+```text
+node_modules/
+└── @antadesign/
+    └── anta/
+        ├── README.md
+        ├── docs/
+        │   ├── index.md
+        │   ├── install-config.md
+        │   ├── theming.md
+        │   └── components/
+        │       ├── button.md
+        │       ├── dialog.md
+        │       └── ...
+        └── dist/
+```
+
+When working with Anta components:
+
+1. Read `./docs/index.md` from the installed `@antadesign/anta` package.
+2. Open only the documentation relevant to the component or feature you are using.
+3. Do **not** guess component names, props, or behavior from similarly named component libraries (e.g. MUI, Chakra UI, Radix UI, Mantine, shadcn/ui, Ant Design, etc.).
+4. Use the installed package's TypeScript declarations (`*.d.ts`) as the source of truth for the installed package version.
+5. If the Markdown documentation and TypeScript declarations disagree, prefer the TypeScript declarations, as they always correspond to the installed version.

package/dist/components/Input.d.ts

@@ -92,6 +92,9 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     name?: string;
     /** Placeholder shown when empty. */
     placeholder?: string;
+    /** Ellipsize an overflowing single-line value. Read-only inputs already do
+     * this; use `truncate` when an editable field should keep the same treatment. */
+    truncate?: boolean;
     /** Disable the field. */
     disabled?: boolean;
     /** Make the field read-only. */
@@ -167,4 +170,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, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -51,6 +51,7 @@ const Input = ({
   inputMode,
   name,
   placeholder,
+  truncate,
   disabled,
   readOnly,
   required,
@@ -93,6 +94,7 @@ const Input = ({
       type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,
+      truncate: presence(truncate),
       disabled: presence(disabled),
       readonly: presence(readOnly),
       required: presence(required),

package/dist/components/InputDate.css

@@ -0,0 +1 @@
+@layer anta{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}

package/dist/components/InputDate.d.ts

@@ -1,6 +1,7 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
+import './InputDate.css';
 /** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO value
  *  (`''` when cleared) plus the field name (mirrors `Input` / `Calendar`). */
 export interface InputDateChangeAttrs {

package/dist/components/InputDate.js

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import cn from "clsx";
 import { useMemo, useState } from "../jsx-runtime";
 import { Temporal } from "temporal-polyfill";
 import {
@@ -18,7 +17,7 @@ import { Calendar } from "./Calendar";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 import { InputTime } from "./InputTime";
-import styles from "./InputDate.module.css";
+import "./InputDate.css";
 const InputDate = ({
   value,
   defaultValue,
@@ -147,7 +146,8 @@ const InputDate = ({
             if (resolve(e.currentTarget.value)) setOpen(false);
           }
         },
-        className: cn(styles.dateField, className),
+        truncate: true,
+        className,
         style,
         ...rest
       }
@@ -159,7 +159,7 @@ const InputDate = ({
         placement: placement ?? "bottom-start",
         offset,
         autoWidth: true,
-        className: styles.calendarMenu,
+        inset: 8,
         onStateChange: (_e, { next }) => setOpen(next),
         children: /* @__PURE__ */ jsxs("div", { "data-menu-open": "", children: [
           /* @__PURE__ */ jsx(
@@ -180,7 +180,7 @@ const InputDate = ({
               }
             }
           ),
-          time && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
+          time && /* @__PURE__ */ jsxs("a-input-date-time-container", { children: [
             /* @__PURE__ */ jsx(
               InputTime,
               {

package/dist/components/Loader.d.ts

@@ -0,0 +1,39 @@
+import type { BaseProps } from '../general_types';
+export interface LoaderProps extends BaseProps {
+    /** Current progress value. Omit this prop, or pass `false`, for an
+     * indeterminate rotating gradient. */
+    value?: number | false;
+    /** Upper bound of the range.
+     * @defaultValue 100 */
+    max?: number;
+    /** Width and height in pixels.
+     * @defaultValue 16 */
+    size?: number;
+    /** Seconds per rotation. Pass a positive number.
+     * @defaultValue 0.75 */
+    speed?: number;
+    /** Accessible name for a standalone loader. Without a label, the loader is
+     * decorative so nearby status text remains the single announcement. */
+    label?: string;
+}
+/**
+ * Animated, icon-sized feedback for loading work.
+ *
+ * Omit `value` for the rotating gradient. Pass `value` to fill a static circle
+ * 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.
+ *
+ * @example Indeterminate
+ * ```tsx
+ * <Loader label="Loading results" />
+ * ```
+ *
+ * @example Determinate
+ * ```tsx
+ * <Loader value={42} label="Uploading files" />
+ * ```
+ */
+export declare const Loader: ({ value, max, size, speed, label, className, style, ...rest }: LoaderProps) => any;

package/dist/components/Loader.js

@@ -0,0 +1,33 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const Loader = ({ value, max = 100, size, speed, label, className, style, ...rest }) => {
+  const determinate = typeof value === "number" && Number.isFinite(value);
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const clampedValue = determinate ? Math.min(safeMax, Math.max(0, value)) : void 0;
+  const percentage = clampedValue != null ? clampedValue / safeMax * 100 : void 0;
+  const computedStyle = {
+    ...style,
+    ...size != null ? { ["--loader-size"]: `${size}px` } : {},
+    ...!determinate && speed != null && Number.isFinite(speed) && speed > 0 ? { ["--loader-speed"]: `${speed}s` } : {},
+    ...percentage != null ? { ["--loader-value"]: `${percentage}%` } : {}
+  };
+  const a11y = label != null ? {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuenow": determinate ? clampedValue : void 0,
+    "aria-valuemin": determinate ? 0 : void 0,
+    "aria-valuemax": determinate ? safeMax : void 0
+  } : { "aria-hidden": "true" };
+  return /* @__PURE__ */ jsx(
+    "a-loader",
+    {
+      ...determinate ? { value: clampedValue } : {},
+      class: className,
+      style: computedStyle,
+      ...a11y,
+      ...rest
+    }
+  );
+};
+export {
+  Loader
+};

package/dist/components/Menu.d.ts

@@ -28,6 +28,10 @@ export interface MenuProps extends BaseProps {
      *  content menu under a wide trigger (e.g. a calendar below a full-width field)
      *  so it wraps its content and left-aligns under the trigger. */
     autoWidth?: boolean;
+    /** Inner inset for the scroll body and named header/footer content. A number is
+     * pixels; a CSS length string is used as written.
+     * @defaultValue 4 */
+    inset?: number | string;
     /** Controlled open state. Omit for the default **uncontrolled** menu (it
      *  opens/closes itself via its triggers). Pass a boolean to **control** it:
      *  the menu's visibility follows `open`, and user dismiss (Esc, outside-click,
@@ -92,4 +96,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, roundStyle, roundAttr } from "../anta_helpers";
+import { nativeStateChange, lengthStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Menu = ({
   placement,
   context,
@@ -7,6 +7,7 @@ const Menu = ({
   nohover,
   offset,
   autoWidth,
+  inset,
   open,
   onStateChange,
   round,
@@ -38,7 +39,7 @@ const Menu = ({
       role,
       "aria-orientation": "vertical",
       class: className,
-      style: roundStyle(round, "--menu-round", style),
+      style: lengthStyle(inset, "--menu-padding", roundStyle(round, "--menu-round", style)),
       ...rest,
       children
     }

package/dist/components/Progress.d.ts

@@ -1,7 +1,8 @@
 import type { BaseProps } from "../general_types";
 export interface ProgressProps extends BaseProps {
-    /** Current progress value. Negative values are clamped to 0. */
-    value: number;
+    /** Current progress value. Omit this prop, or pass `false`, to show
+     * indeterminate progress. Negative values are clamped to 0. */
+    value?: number | false;
     /** Upper bound of the range.
      *  @defaultValue 100 */
     max?: number;
@@ -10,20 +11,23 @@ export interface ProgressProps extends BaseProps {
      *  light/dark automatically.
      *  @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. */
     round?: boolean | number | string;
-    /** Text label displayed after the percentage. 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, so
-     *  pass it for screen readers to announce more than the bare percentage. */
+    /** 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. */
     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. */
     hint?: string;
 }
 /**
- * Progress indicator for displaying task completion.
+ * Progress indicator for task completion and indeterminate work.
  *
  * Renders an `<a-progress>` web component with an optional label area
  * showing percentage, text label, and hint.
@@ -44,9 +48,14 @@ export interface ProgressProps extends BaseProps {
  * <Progress value={42} label="Uploading files..." hint="3 of 7" />
  * ```
  *
+ * @example Indeterminate
+ * ```tsx
+ * <Progress label="Preparing upload..." />
+ * ```
+ *
  * @example Info tone
  * ```tsx
  * <Progress value={75} tone="info" label="Processing" />
  * ```
  */
-export declare const Progress: ({ value, max, tone, round, label, hint, className, style, children, ...rest }: ProgressProps) => any;
+export declare const Progress: ({ value, max, tone, size, round, label, hint, className, style, children, ...rest }: ProgressProps) => any;

package/dist/components/Progress.js

@@ -1,26 +1,29 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { hasChildren, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
-const Progress = ({ value, max = 100, tone, round, label, hint, className, style, children, ...rest }) => {
-  const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
-  const clampedValue = max > 0 ? Math.min(max, Math.max(0, value)) : 0;
-  const ariaLabel = [label, `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || void 0;
+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 ariaLabel = [label, !indeterminate && `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || (indeterminate ? "Loading" : void 0);
   return /* @__PURE__ */ jsx(
     "a-progress",
     {
-      value,
+      value: indeterminate ? false : numericValue,
       max,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       role: "progressbar",
-      "aria-valuenow": clampedValue,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
+      "aria-valuenow": indeterminate ? void 0 : clampedValue,
+      "aria-valuemin": indeterminate ? void 0 : 0,
+      "aria-valuemax": indeterminate ? void 0 : max,
       "aria-label": ariaLabel,
       class: className,
       style: roundStyle(round, "--progress-round", toneStyle(tone, "--progress-tone-source", style)),
       ...rest,
       children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
-        /* @__PURE__ */ jsxs("a-progress-number", { children: [
+        !indeterminate && /* @__PURE__ */ jsxs("a-progress-number", { children: [
           percent,
           "%"
         ] }),

package/dist/components/Select.d.ts

@@ -1,6 +1,7 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
+import './select-parts.css';
 /** The type an option `value` may take: `string`, `number`, or `boolean`. Selection
  *  compares values with `===`. Object-shaped values are out of scope; give the option a
  *  stable primitive `value` and read the object back off `attrs.option` (or, in

package/dist/components/Select.js

@@ -9,7 +9,7 @@ import { MenuItem } from "./MenuItem";
 import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tooltip } from "./Tooltip";
-import styles from "./Select.module.css";
+import "./select-parts.css";
 function optionsWithSelection(options, values) {
   const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
   const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
@@ -269,16 +269,9 @@ const Select = (props) => {
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
         trailing: (
-          // Chevron rotates down → up when open (spacing + rotation in the CSS
-          // module, matching the Input "Select dropdown" example).
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              shape: "chevron-down",
-              className: open ? `${styles.chevron} ${styles.open}` : styles.chevron,
-              style: statusColor ? { color: statusColor } : void 0
-            }
-          )
+          // The named tag owns the select-specific rotation while the icon remains
+          // a normal currentColor glyph.
+          /* @__PURE__ */ jsx("a-select-chevron", { open: open ? "" : void 0, style: statusColor ? { color: statusColor } : void 0, children: /* @__PURE__ */ jsx(Icon, { shape: "chevron-down" }) })
         ),
         className,
         style,
@@ -302,7 +295,7 @@ const Select = (props) => {
           filtering && // `slot="header"` pins the field in the Menu's fixed header region (above
           // the scrolling options); `data-menu-search` puts the menu in combobox
           // mode — it focuses this field on open and drives an active-option cursor.
-          /* @__PURE__ */ jsx("div", { className: styles.filter, slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("a-select-header", { slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
             Input,
             {
               "data-menu-search": "",
@@ -332,7 +325,10 @@ const Select = (props) => {
           ] }),
           visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false),
           clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
-          /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MenuSeparator, { slot: "footer" }),
+            /* @__PURE__ */ jsx("a-select-footer", { slot: "footer", children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
+          ] })
         ]
       }
     )

package/dist/components/SelectFaceted.d.ts

@@ -2,6 +2,7 @@ import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import type { OptionValue, SelectItem, SelectOption } from './Select';
 import { type MenuProps } from './Menu';
+import './select-parts.css';
 interface FacetBase {
     /** The facet's namespace — the key its value is stored under in the value
      *  record, and what `onValueChange`'s `attrs.facet` reports. Unique across