@antadesign/anta 0.3.34 → 0.3.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (184) hide show
  1. package/LICENSE.md +14 -1
  2. package/README.md +9 -0
  3. package/dist/anta_helpers.d.ts +46 -30
  4. package/dist/anta_helpers.js +66 -25
  5. package/dist/bundle.css +1 -1
  6. package/dist/bundle.js +2 -1333
  7. package/dist/components/Banner.d.ts +25 -40
  8. package/dist/components/Banner.js +15 -17
  9. package/dist/components/Button.js +1 -0
  10. package/dist/components/ButtonCopy.js +3 -2
  11. package/dist/components/Calendar.js +13 -13
  12. package/dist/components/Card.d.ts +9 -17
  13. package/dist/components/Card.js +50 -46
  14. package/dist/components/Dialog.d.ts +1 -0
  15. package/dist/components/Dialog.js +16 -10
  16. package/dist/components/Expander.d.ts +6 -21
  17. package/dist/components/Expander.js +24 -23
  18. package/dist/components/Icon.d.ts +8 -14
  19. package/dist/components/Input.d.ts +77 -96
  20. package/dist/components/Input.js +23 -27
  21. package/dist/components/InputAutocomplete.d.ts +29 -10
  22. package/dist/components/InputAutocomplete.js +25 -8
  23. package/dist/components/InputDate.js +2 -2
  24. package/dist/components/InputTime.d.ts +10 -4
  25. package/dist/components/InputTime.js +20 -16
  26. package/dist/components/Loader.d.ts +2 -2
  27. package/dist/components/Menu.d.ts +5 -4
  28. package/dist/components/Menu.js +13 -8
  29. package/dist/components/MenuItem.js +1 -14
  30. package/dist/components/MenuItemCopy.js +2 -2
  31. package/dist/components/Panel.d.ts +3 -1
  32. package/dist/components/Panel.js +17 -11
  33. package/dist/components/Progress.d.ts +21 -23
  34. package/dist/components/Progress.js +13 -9
  35. package/dist/components/RadioGroup.js +6 -8
  36. package/dist/components/{select-parts.css → Select.css} +1 -1
  37. package/dist/components/Select.d.ts +53 -35
  38. package/dist/components/Select.js +53 -97
  39. package/dist/components/SelectFaceted.d.ts +7 -3
  40. package/dist/components/SelectFaceted.js +21 -9
  41. package/dist/components/Slider.d.ts +28 -11
  42. package/dist/components/Slider.js +20 -20
  43. package/dist/components/Steps.css +1 -1
  44. package/dist/components/Steps.js +1 -11
  45. package/dist/components/Tabs.d.ts +17 -20
  46. package/dist/components/Tabs.js +5 -8
  47. package/dist/components/Text.d.ts +55 -36
  48. package/dist/components/Text.js +35 -22
  49. package/dist/components/Title.d.ts +16 -26
  50. package/dist/components/Title.js +2 -1
  51. package/dist/components/Toaster.js +9 -2
  52. package/dist/components/Tooltip.d.ts +10 -15
  53. package/dist/components/copy-props.d.ts +14 -3
  54. package/dist/components/copy-props.js +14 -3
  55. package/dist/components/select-tree.d.ts +24 -0
  56. package/dist/components/select-tree.js +35 -0
  57. package/dist/element-base.d.ts +10 -0
  58. package/dist/element-base.js +15 -0
  59. package/dist/elements/a-banner.css +1 -1
  60. package/dist/elements/a-banner.d.ts +4 -1
  61. package/dist/elements/a-banner.js +22 -112
  62. package/dist/elements/a-button.d.ts +2 -1
  63. package/dist/elements/a-button.js +18 -1
  64. package/dist/elements/a-calendar.d.ts +14 -13
  65. package/dist/elements/a-calendar.js +29 -24
  66. package/dist/elements/a-card.css +1 -1
  67. package/dist/elements/a-card.d.ts +0 -9
  68. package/dist/elements/a-card.js +0 -184
  69. package/dist/elements/a-checkbox.css +1 -1
  70. package/dist/elements/a-copy.css +1 -1
  71. package/dist/elements/a-copy.d.ts +1 -5
  72. package/dist/elements/a-copy.js +129 -108
  73. package/dist/elements/a-dialog.css +1 -1
  74. package/dist/elements/a-dialog.d.ts +1 -1
  75. package/dist/elements/a-dialog.js +66 -194
  76. package/dist/elements/a-expander.css +1 -1
  77. package/dist/elements/a-expander.d.ts +4 -30
  78. package/dist/elements/a-expander.js +85 -344
  79. package/dist/elements/a-icon.d.ts +5 -23
  80. package/dist/elements/a-icon.js +1 -2
  81. package/dist/elements/a-input-time.css +1 -1
  82. package/dist/elements/a-input-time.d.ts +2 -1
  83. package/dist/elements/a-input-time.js +101 -168
  84. package/dist/elements/a-input.css +1 -1
  85. package/dist/elements/a-input.d.ts +10 -8
  86. package/dist/elements/a-input.js +155 -230
  87. package/dist/elements/a-loader.d.ts +5 -8
  88. package/dist/elements/a-loader.js +1 -2
  89. package/dist/elements/a-menu-item.css +1 -1
  90. package/dist/elements/a-menu-item.d.ts +5 -3
  91. package/dist/elements/a-menu-item.js +5 -1
  92. package/dist/elements/a-menu.css +1 -1
  93. package/dist/elements/a-menu.d.ts +5 -7
  94. package/dist/elements/a-menu.js +383 -299
  95. package/dist/elements/a-panel.css +1 -1
  96. package/dist/elements/a-panel.js +19 -37
  97. package/dist/elements/a-progress.css +1 -1
  98. package/dist/elements/a-progress.d.ts +0 -22
  99. package/dist/elements/a-progress.js +0 -100
  100. package/dist/elements/a-radio-group.d.ts +1 -1
  101. package/dist/elements/a-radio-group.js +6 -4
  102. package/dist/elements/a-select-faceted.d.ts +1 -1
  103. package/dist/elements/a-select-faceted.js +1 -1
  104. package/dist/elements/a-select.d.ts +1 -1
  105. package/dist/elements/a-select.js +1 -1
  106. package/dist/elements/a-slider.css +1 -1
  107. package/dist/elements/a-slider.d.ts +11 -3
  108. package/dist/elements/a-slider.js +244 -242
  109. package/dist/elements/a-switch.css +1 -1
  110. package/dist/elements/a-tab.css +1 -1
  111. package/dist/elements/a-tabs.css +1 -1
  112. package/dist/elements/a-tabs.d.ts +1 -1
  113. package/dist/elements/a-tabs.js +6 -4
  114. package/dist/elements/a-tag.css +1 -1
  115. package/dist/elements/a-text.css +1 -1
  116. package/dist/elements/a-text.d.ts +6 -43
  117. package/dist/elements/a-text.js +110 -193
  118. package/dist/elements/a-title.css +1 -1
  119. package/dist/elements/a-toast.css +1 -1
  120. package/dist/elements/a-toast.d.ts +10 -45
  121. package/dist/elements/a-toast.js +80 -66
  122. package/dist/elements/a-toaster.css +1 -1
  123. package/dist/elements/a-toaster.js +9 -44
  124. package/dist/elements/a-tooltip.css +1 -1
  125. package/dist/elements/a-tooltip.d.ts +1 -1
  126. package/dist/elements/a-tooltip.js +142 -136
  127. package/dist/elements/copy-behavior.d.ts +1 -1
  128. package/dist/elements/copy-behavior.js +21 -21
  129. package/dist/elements/index.d.ts +3 -3
  130. package/dist/elements/index.js +3 -7
  131. package/dist/elements/input-focus-modality.d.ts +15 -0
  132. package/dist/elements/input-focus-modality.js +44 -0
  133. package/dist/elements/input-trailing-actions.d.ts +5 -0
  134. package/dist/elements/input-trailing-actions.js +38 -0
  135. package/dist/elements/shadow-aria.d.ts +2 -0
  136. package/dist/elements/shadow-aria.js +2 -1
  137. package/dist/elements/value-input.d.ts +3 -0
  138. package/dist/elements/value-input.js +12 -0
  139. package/dist/general_types.d.ts +103 -96
  140. package/dist/index.d.ts +1 -1
  141. package/dist/input-events.d.ts +4 -0
  142. package/dist/input-events.js +15 -0
  143. package/dist/jsx-runtime.d.ts +70 -23
  144. package/dist/jsx-runtime.js +26 -19
  145. package/dist/native-event-props.d.ts +2 -0
  146. package/dist/native-event-props.js +10 -0
  147. package/dist/reset.css +1 -1
  148. package/dist/theme-antithesis.css +10 -1
  149. package/dist/theme-antune.css +1 -1
  150. package/docs/accessibility.md +17 -3
  151. package/docs/changelog.md +348 -2
  152. package/docs/comparison.md +2 -2
  153. package/docs/components/avatar.md +5 -0
  154. package/docs/components/banner.md +117 -187
  155. package/docs/components/button.md +22 -0
  156. package/docs/components/card.md +74 -28
  157. package/docs/components/checkbox.md +9 -10
  158. package/docs/components/dialog.md +83 -32
  159. package/docs/components/expander.md +198 -435
  160. package/docs/components/icon.md +11 -17
  161. package/docs/components/input-autocomplete.md +152 -52
  162. package/docs/components/input-date.md +175 -148
  163. package/docs/components/input-time.md +81 -38
  164. package/docs/components/input.md +343 -349
  165. package/docs/components/loader.md +2 -1
  166. package/docs/components/menu.md +35 -6
  167. package/docs/components/panel.md +18 -0
  168. package/docs/components/progress.md +83 -49
  169. package/docs/components/radio.md +39 -43
  170. package/docs/components/select-faceted.md +54 -7
  171. package/docs/components/select.md +390 -386
  172. package/docs/components/slider.md +136 -19
  173. package/docs/components/steps.md +2 -1
  174. package/docs/components/switch.md +8 -9
  175. package/docs/components/tabs.md +110 -104
  176. package/docs/components/text.md +110 -86
  177. package/docs/components/title.md +47 -33
  178. package/docs/components/toaster.md +242 -84
  179. package/docs/components/tooltip.md +204 -113
  180. package/docs/install-config.md +183 -26
  181. package/docs/packages/plot.md +170 -148
  182. package/docs/theming.md +7 -0
  183. package/package.json +41 -3
  184. package/theme-antithesis-license.md +66 -0
@@ -0,0 +1,15 @@
1
+ export declare const MODALITY: unique symbol;
2
+ type Modality = {
3
+ keyboard: boolean;
4
+ readers: Set<() => void>;
5
+ active?: () => void;
6
+ key: () => void;
7
+ pointer: () => void;
8
+ refresh: () => void;
9
+ frame?: number;
10
+ };
11
+ export type InputDocument = Document & {
12
+ [MODALITY]?: Modality;
13
+ };
14
+ export declare function trackFocusModality(doc: InputDocument, reader: () => void): () => void;
15
+ export {};
@@ -0,0 +1,44 @@
1
+ const MODALITY = /* @__PURE__ */ Symbol.for("anta.input-focus-modality");
2
+ function trackFocusModality(doc, reader) {
3
+ let state = doc[MODALITY];
4
+ if (!state) {
5
+ const readers = /* @__PURE__ */ new Set();
6
+ state = { keyboard: false, readers, key: () => {
7
+ }, pointer: () => {
8
+ }, refresh: () => {
9
+ } };
10
+ const current = state;
11
+ current.refresh = () => {
12
+ if (!current.active || current.frame !== void 0) return;
13
+ current.frame = doc.defaultView?.requestAnimationFrame(() => {
14
+ current.frame = void 0;
15
+ current.active?.();
16
+ });
17
+ };
18
+ current.key = () => {
19
+ current.keyboard = true;
20
+ current.refresh();
21
+ };
22
+ current.pointer = () => {
23
+ current.keyboard = false;
24
+ current.refresh();
25
+ };
26
+ doc[MODALITY] = current;
27
+ doc.addEventListener("keydown", current.key, true);
28
+ doc.addEventListener("pointerdown", current.pointer, true);
29
+ }
30
+ state.readers.add(reader);
31
+ return () => {
32
+ state.readers.delete(reader);
33
+ if (state.active === reader) state.active = void 0;
34
+ if (state.readers.size) return;
35
+ if (state.frame !== void 0) doc.defaultView?.cancelAnimationFrame(state.frame);
36
+ doc.removeEventListener("keydown", state.key, true);
37
+ doc.removeEventListener("pointerdown", state.pointer, true);
38
+ delete doc[MODALITY];
39
+ };
40
+ }
41
+ export {
42
+ MODALITY,
43
+ trackFocusModality
44
+ };
@@ -0,0 +1,5 @@
1
+ /** Track the assigned actions without observing their labels or descendants. */
2
+ export declare function inputTrailingActions(host: HTMLElement, slot: HTMLSlotElement, groupTag: string, apply: (actions: boolean) => void): {
3
+ sync: () => void;
4
+ disconnect(): void;
5
+ };
@@ -0,0 +1,38 @@
1
+ function inputTrailingActions(host, slot, groupTag, apply) {
2
+ let observer;
3
+ const sync = () => {
4
+ if (!host.isConnected) return;
5
+ observer?.disconnect();
6
+ let hasAction = false;
7
+ const onlyActions = (nodes) => {
8
+ for (const node of nodes) {
9
+ if (node.nodeType === 3 && node.textContent?.trim()) return false;
10
+ if (node.nodeType !== 1) continue;
11
+ const element = node;
12
+ if (element.localName === groupTag) {
13
+ const view = host.ownerDocument.defaultView ?? window;
14
+ observer ??= new view.MutationObserver(sync);
15
+ observer.observe(element, { childList: true });
16
+ for (const child of element.childNodes) {
17
+ if (child.nodeType === 3) observer.observe(child, { characterData: true });
18
+ }
19
+ if (!onlyActions(element.childNodes)) return false;
20
+ } else if (element.localName === "a-button" || element.localName === "button" || element.matches('a[role="button"][data-anta]')) {
21
+ hasAction = true;
22
+ } else return false;
23
+ }
24
+ return true;
25
+ };
26
+ apply(onlyActions(slot.assignedNodes()) && hasAction);
27
+ };
28
+ return {
29
+ sync,
30
+ disconnect() {
31
+ observer?.disconnect();
32
+ observer = void 0;
33
+ }
34
+ };
35
+ }
36
+ export {
37
+ inputTrailingActions
38
+ };
@@ -5,6 +5,8 @@ export declare const SHADOW_ARIA_ATTRIBUTES: readonly ['role', 'aria-activedesce
5
5
  export type ShadowAriaAttribute = (typeof SHADOW_ARIA_ATTRIBUTES)[number];
6
6
  export declare const SHADOW_ARIA_ATTRIBUTE_SET: Set<string>;
7
7
  export declare function ariaAttributeProperty(name: ShadowAriaAttribute): string;
8
+ /** @internal Resolve authored ID references in the host tree. */
9
+ export declare function referencedElements(host: Element, value: string): Element[];
8
10
  /** Apply one consumed host attribute to a shadow control. ID-reference ARIA
9
11
  * uses element reflection so a shadow control can reference the host's tree. */
10
12
  export declare function applyShadowAria(host: Element, target: Element, name: ShadowAriaAttribute, value: string | null): void;
@@ -151,5 +151,6 @@ export {
151
151
  SHADOW_ARIA_ATTRIBUTES,
152
152
  SHADOW_ARIA_ATTRIBUTE_SET,
153
153
  applyShadowAria,
154
- ariaAttributeProperty
154
+ ariaAttributeProperty,
155
+ referencedElements
155
156
  };
@@ -0,0 +1,3 @@
1
+ /** @internal Replay consumer inputs during custom-element construction, including detached upgrades.
2
+ * Deleting the own property exposes the element's reflecting setter. */
3
+ export declare function upgradeValueProperties(element: HTMLElement): void;
@@ -0,0 +1,12 @@
1
+ function upgradeValueProperties(element) {
2
+ const inputs = element;
3
+ for (const name of ["value", "defaultValue"]) {
4
+ if (!Object.prototype.hasOwnProperty.call(inputs, name)) continue;
5
+ const value = inputs[name];
6
+ delete inputs[name];
7
+ inputs[name] = value;
8
+ }
9
+ }
10
+ export {
11
+ upgradeValueProperties
12
+ };
@@ -17,7 +17,7 @@ export interface BaseProps {
17
17
  /** HTML `title` attribute — native browser tooltip on hover. */
18
18
  title?: string;
19
19
  /** Assigns the element to a named `<slot>` of a parent web component (e.g.
20
- * `slot="header"` inside a `<Card>`, `slot="footer"` inside a `<Dialog>`). */
20
+ * `slot="header"` inside a `<Dialog>`, `slot="footer"` inside a `<Dialog>`). */
21
21
  slot?: string;
22
22
  /** Tab order. Set to `-1` to skip the element when tabbing. */
23
23
  tabIndex?: number;
@@ -157,15 +157,18 @@ export interface BaseAttributes extends DOMEventHandlers {
157
157
  role?: string;
158
158
  }
159
159
  /**
160
- * Attributes for the `<a-progress>` custom element.
160
+ * Attributes for the CSS-only `<a-progress>` container.
161
161
  *
162
- * These are the low-level web component attributes. For the JSX wrapper with
163
- * typed props and computed labels, use `Progress` from `@antadesign/anta`.
162
+ * CSS paints the indicator. Raw authors supply matching ARIA and optional labels.
163
+ * For typed props and computed labels, use the `Progress` JSX wrapper.
164
164
  */
165
165
  export interface AProgressAttributes extends BaseAttributes {
166
- /** Current progress value. Omit this attribute for indeterminate progress. */
166
+ /** Current progress value. CSS uses `--progress-value` when supplied, then
167
+ * this attribute where numeric `attr()` is supported. Omit for loading. */
167
168
  value?: number | string | false;
168
- /** Maximum value. Defaults to 100. */
169
+ /** Upper bound. CSS uses `--progress-max` when supplied, then this attribute
170
+ * where numeric `attr()` is supported.
171
+ * @defaultValue 100 */
169
172
  max?: number | string;
170
173
  /** Color variant, or any literal CSS color for a custom tone (derived in
171
174
  * oklch). Named tones track light/dark automatically. */
@@ -240,12 +243,18 @@ export interface ALoaderAttributes extends BaseAttributes {
240
243
  /** ARIA value-max. */
241
244
  'aria-valuemax'?: number | string;
242
245
  }
243
- /**
244
- * Attributes for the `<a-text>` custom element.
245
- *
246
- * Low-level web component attributes; for the JSX wrapper use `Text`
247
- * from `@antadesign/anta`.
248
- */
246
+ /** Measured Text presentation, reported without changing authored DOM. */
247
+ export interface TextPresentation {
248
+ /** Whether the reader has expanded the content. */
249
+ expanded: boolean;
250
+ /** Whether the folded preview overflows. Retained while expanded. */
251
+ overflowing: boolean;
252
+ }
253
+ /** Attributes on Text's authored content region. */
254
+ export interface ATextContentAttributes extends BaseAttributes {
255
+ inert?: boolean;
256
+ }
257
+ /** Attributes for `<a-text>`. For JSX, use `Text` from `@antadesign/anta`. */
249
258
  export interface ATextAttributes extends BaseAttributes {
250
259
  /** Visual priority. Maps to text-1..text-4. */
251
260
  priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
@@ -259,18 +268,25 @@ export interface ATextAttributes extends BaseAttributes {
259
268
  inline?: boolean | '';
260
269
  /** Truncate to N lines with a trailing ellipsis. The attribute value
261
270
  * carries the line count (e.g. `"1"`, `"3"`); the count is also
262
- * available via the `--line-clamp` CSS custom property set inline. */
271
+ * available via `--line-clamp`. Multi-line JSX values set it inline;
272
+ * raw authors set it in an allowed stylesheet. */
263
273
  truncate?: boolean | string | number;
264
- /** Marks the host as expandable when paired with `truncate`. Adds
265
- * the fade-out mask and the expand/collapse chevron button; the element
266
- * owns the click/keyboard expansion logic. Without `collapsible`,
267
- * expanding is one-way (the control is removed once expanded). */
274
+ /** Enables expansion with `truncate`. Supply a direct `a-button` control with
275
+ * `role="button"` and `tabindex="0"` before the `a-text-content` region. The
276
+ * elements own expansion and accessibility defaults off-DOM. Without
277
+ * `collapsible`, expansion is one-way and the control becomes hidden. */
268
278
  expandable?: boolean | '';
269
279
  /** Paired with `expandable`: the chevron becomes a two-way "Show more" /
270
280
  * "Show less" toggle that stays visible while expanded. Omit for one-way. */
271
281
  collapsible?: boolean | '';
272
- /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
273
- 'aria-expanded'?: boolean | 'true' | 'false';
282
+ /** Cover the folded, overflowing preview with the expand control. Raw authors
283
+ * manage `inert` on `a-text-content` using `textpresentationchange`. */
284
+ 'expandable-inert'?: boolean | '';
285
+ /** Non-bubbling notification after measurement or expansion, including a
286
+ * current snapshot when a listener attaches after upgrade. */
287
+ ontextpresentationchange?: (event: CustomEvent<TextPresentation> | {
288
+ nativeEvent: CustomEvent<TextPresentation>;
289
+ }) => void;
274
290
  }
275
291
  /** Panel presentation state. Normal panels remain visible in their parent layout. */
276
292
  export type PanelState = 'normal' | 'maximized';
@@ -388,6 +404,8 @@ export interface ATitleAttributes extends BaseAttributes {
388
404
  * tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
389
405
  * is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
390
406
  tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
407
+ /** Typeface. Omit it to let the theme choose by level. */
408
+ font?: 'serif' | 'sans-serif' | 'monospace';
391
409
  /** Truncate to N lines with a trailing ellipsis. The attribute value carries
392
410
  * the line count; set the same count on `--line-clamp` when using the styled
393
411
  * tag directly. */
@@ -421,21 +439,12 @@ export interface ATagAttributes extends BaseAttributes {
421
439
  allcaps?: boolean | '';
422
440
  }
423
441
  /**
424
- * Attributes for the `<a-expander>` collapsible disclosure.
425
- *
426
- * The element builds its own shadow DOM (no native `<details>`): a
427
- * `<button>` summary carrying `aria-expanded` plus an animated content
428
- * region. The title is projected via `slot="title"`; header actions
429
- * (rendered next to the trigger, outside it) via `slot="actions"`; the
430
- * body is the default slot. Low-level attributes; for the JSX wrapper
431
- * use `Expander` from `@antadesign/anta`.
442
+ * Attributes for the `<a-expander>` disclosure. Authors supply direct
443
+ * `a-expander-summary` (or `a-expander-title`), `a-expander-actions`,
444
+ * `a-expander-indicator`, and `a-expander-details` regions. The element owns
445
+ * its native shadow button and collapsed body; styles load externally.
432
446
  */
433
447
  export interface AExpanderAttributes extends BaseAttributes {
434
- /** Built-in disclosure mark. Custom visuals use `slot="indicator"`.
435
- * Defaults to `chevron`. */
436
- indicator?: 'chevron' | 'triangle' | 'plus';
437
- /** Logical side for the disclosure mark. Defaults to `start`. */
438
- 'indicator-placement'?: 'start' | 'end';
439
448
  /** Controlled open state (`'open'` / `'closed'`). Present → controlled: the
440
449
  * attribute is the source of truth, clicks only dispatch the cancelable
441
450
  * `statechange` event, and the consumer answers by updating it. Absent →
@@ -454,19 +463,14 @@ export interface AExpanderAttributes extends BaseAttributes {
454
463
  /** Disables the header: not clickable or focusable, hover affordance
455
464
  * off, text dimmed. The open state freezes as-is. Presence-based. */
456
465
  disabled?: boolean | '';
457
- /** Round corners sized to half the folded (header) height — a pill when folded,
458
- * the same radius when expanded (the element measures the header and publishes
459
- * `--_expander-round-radius`). A length value (`round="12px"`) is a fixed radius
460
- * that overrides the measurement. Presence-based for the boolean form. */
466
+ /** Use a `1rem` corner radius in both disclosure states. A length value
467
+ * (`round="12px"`) overrides it. Presence-based for the boolean form. */
461
468
  round?: boolean | number | string;
462
469
  /** Semantic tone, or any literal CSS color for a one-off custom tone.
463
470
  * Named tones re-point the text + filled surface palette; a custom
464
471
  * color keeps its hue with lightness/chroma pinned. `'neutral'` is the
465
472
  * default (same as omitting it). */
466
473
  tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
467
- /** Heading type scale for the summary, `'1'`–`'6'` (mirrors `<a-title>`
468
- * levels). Default (omitted) ≈ level 5. */
469
- level?: '1' | '2' | '3' | '4' | '5' | '6';
470
474
  /** Fires before the open state changes — the element dispatches a
471
475
  * `cancelable` `statechange` `CustomEvent` whose `detail` is
472
476
  * `{ next, prev }` in the `'open'|'closed'` vocabulary. Uncontrolled,
@@ -479,6 +483,21 @@ export interface AExpanderAttributes extends BaseAttributes {
479
483
  prev: 'open' | 'closed';
480
484
  }>) => void;
481
485
  }
486
+ /** Decorative Expander artwork. Place before the title or after the actions. */
487
+ export interface AExpanderIndicatorAttributes extends BaseAttributes {
488
+ /** Built-in artwork. Omit for custom children or an empty indicator. */
489
+ shape?: 'chevron' | 'triangle' | 'plus';
490
+ /** Keep custom artwork out of focus navigation. */
491
+ inert?: boolean;
492
+ /** Select artwork for one disclosure state. */
493
+ 'data-when'?: 'open' | 'closed';
494
+ }
495
+ /** Typography for the built-in Expander title. */
496
+ export interface AExpanderSummaryAttributes extends BaseAttributes {
497
+ /** Visual title scale; custom heading nodes own their own scale.
498
+ * @defaultValue '5' */
499
+ level?: '1' | '2' | '3' | '4' | '5' | '6';
500
+ }
482
501
  /**
483
502
  * Attributes for the `<a-dialog>` custom element — a modal dialog / edge drawer
484
503
  * built on a native `<dialog>` in shadow DOM (top layer, focus trap, backdrop,
@@ -682,8 +701,14 @@ export interface ASwitchAttributes extends BaseAttributes {
682
701
  * field whose real `<input>` / `<textarea>` lives in shadow DOM. For the
683
702
  * typed JSX wrapper use `Input` from `@antadesign/anta`.
684
703
  *
685
- * Slots (light-DOM children): `label`, `leading`, `trailing`, `hint`.
686
- * The element exposes `::part(field | input | label | leading | trailing | hint)`
704
+ * Slots (light-DOM children): `label`, `leading`, `clear`, `trailing`, `hint`.
705
+ * Direct trailing buttons and buttons-only `<a-input-trailing slot="trailing">`
706
+ * groups use compact spacing. Other wrappers keep the text inset. Override
707
+ * either inset with the `--input-trailing-inset` CSS property. Anta buttons
708
+ * fit the field height and keep their padding. Mark a raw icon-only action with
709
+ * `data-anta-icon-only` for a square box; unmarked content keeps its natural width.
710
+ * Other controls keep their own sizing.
711
+ * The element exposes `::part(field | input | label | leading | clear | trailing | hint)`
687
712
  * for styling, and `:state(filled)` / `:state(invalid)` as CSS hooks.
688
713
  */
689
714
  export interface AInputAttributes extends BaseAttributes {
@@ -765,9 +790,9 @@ export interface AInputAttributes extends BaseAttributes {
765
790
  /** Attributes for the `<a-slider>` custom element. For the typed JSX wrapper,
766
791
  * display formatting, and marker layout use `Slider` from `@antadesign/anta`. */
767
792
  export interface ASliderAttributes extends BaseAttributes {
768
- /** Controlled value. Range attributes use two space-separated numbers. */
793
+ /** Controlled numeric input. A range uses two space-separated numbers. */
769
794
  value?: number | string;
770
- /** Initial uncontrolled value and form-reset baseline. Range attributes use two space-separated numbers. */
795
+ /** Uncontrolled initial value and reset baseline. */
771
796
  defaultvalue?: number | string;
772
797
  /** Lowest permitted value. Defaults to 0. */
773
798
  min?: number | string;
@@ -845,6 +870,8 @@ export interface AInputTimeAttributes extends BaseAttributes {
845
870
  tone?: string;
846
871
  /** Disabled state. Presence-based. */
847
872
  disabled?: boolean | '';
873
+ /** Prevent editing while retaining focus and selection. Presence-based. */
874
+ readonly?: boolean | '';
848
875
  /** Required — drives native validity. Presence-based. */
849
876
  required?: boolean | '';
850
877
  /** Dim the trailing adornments at rest (0.6); brighten on hover / focus. */
@@ -860,6 +887,8 @@ export interface AInputTimeAttributes extends BaseAttributes {
860
887
  oninput?: (e: any) => void;
861
888
  /** Fires on commit (blur). */
862
889
  onchange?: (e: any) => void;
890
+ /** Cancelable request before clearing. */
891
+ onclearclick?: (e: any) => void;
863
892
  /** Fires after the built-in clear button empties the field (`clearinput`). */
864
893
  onclearinput?: (e: any) => void;
865
894
  'aria-invalid'?: 'true' | 'false' | boolean;
@@ -876,7 +905,7 @@ export interface AInputTimeAttributes extends BaseAttributes {
876
905
  * it (the `Calendar` JSX wrapper, or a vanilla consumer using the exported
877
906
  * `buildMonth` engine) fills it with day cells and *re-renders on its events* —
878
907
  * the `<a-radio-group>` model. Controlled by the presence of `value` (a pick only
879
- * *requests* a change); uncontrolled with `defaultvalue` (a pick self-applies).
908
+ * requests a change); uncontrolled with `defaultvalue` (a pick self-applies).
880
909
  * For the typed, batteries-included wrapper use `Calendar` from `@antadesign/anta`.
881
910
  *
882
911
  * `:state(filled)` is the styling hook for "has a selection".
@@ -895,7 +924,7 @@ export interface ACalendarAttributes extends BaseAttributes {
895
924
  * day cell whose `data-date` matches `<iso>` (set by the renderer after a
896
925
  * month-changing keyboard move). */
897
926
  'data-focus'?: string;
898
- /** Cancelable, bubbling `statechange` fired BEFORE a pick applies. `detail` is
927
+ /** Cancelable `statechange` fired BEFORE a pick applies. `detail` is
899
928
  * `{ next, prev, reason }` — ISO strings (or `null`); `reason` ∈
900
929
  * `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
901
930
  * uncontrolled mode. */
@@ -904,8 +933,8 @@ export interface ACalendarAttributes extends BaseAttributes {
904
933
  prev: string | null;
905
934
  reason: 'user' | 'reset' | 'restore';
906
935
  }>) => void;
907
- /** Native `change`, fired AFTER a selection applies (uncontrolled) and on
908
- * reset/restore. */
936
+ /** Native `change`, fired AFTER a selection applies, including controlled
937
+ * attribute updates and accepted reset/restore. */
909
938
  onchange?: (e: Event) => void;
910
939
  /** Keyboard navigation request — the element handles arrow / Home / End /
911
940
  * PageUp / PageDown, focuses the target cell when it's rendered, and emits this
@@ -939,9 +968,10 @@ export interface AMenuAttributes extends BaseAttributes {
939
968
  * default; this opts out, making the submenu click-only. Presence-based
940
969
  * (`''` on, omit off). */
941
970
  nohover?: boolean | '';
942
- /** Round: container softens to a 20px radius and its items go fully round. A
943
- * length value (`round="12px"`) tunes the container radius only (items stay
944
- * pills). Presence-based for the boolean form. */
971
+ /** Round the container to a 20px radius, or use a length such as `round="12px"`
972
+ * for a custom radius. Items use the container radius minus the menu's inset,
973
+ * clamped to zero. Submenus inherit the radius unless they set their own
974
+ * `round` value. Presence-based for the boolean form. */
945
975
  round?: boolean | number | string;
946
976
  /** Gap in pixels between the trigger and the menu. Defaults to 4. */
947
977
  offset?: number | string;
@@ -1150,8 +1180,7 @@ export interface ARadioAttributes extends BaseAttributes {
1150
1180
  * optional `<a-radio-hint>`. All plain light-DOM children, laid out by
1151
1181
  * `a-radio-group.css`, so the arrangement is restylable with ordinary CSS
1152
1182
  * (`a-radio-group a-radio-list { … }`). The group
1153
- * coordinates **off-DOM only** — it never writes the DOM: selection via each
1154
- * radio's `selected` property, focus via `internals.ariaActiveDescendantElement`,
1183
+ * coordinates selection off-DOM through each radio's `selected` property, focus via `internals.ariaActiveDescendantElement`,
1155
1184
  * the form value via `setFormValue`. Roving `tabindex` (the JSX path) is rendered
1156
1185
  * by the `RadioGroup` wrapper, not the element. The `RadioGroup` wrapper composes
1157
1186
  * the label/list/hint from `label` / `hint`; hand-authors write them directly.
@@ -1159,8 +1188,8 @@ export interface ARadioAttributes extends BaseAttributes {
1159
1188
  */
1160
1189
  export interface ARadioGroupAttributes extends BaseAttributes {
1161
1190
  /** Controlled selected value (the chosen radio's `value`). Present → controlled:
1162
- * the element reflects changes to this attribute and a pick only dispatches
1163
- * `statechange`. Absent → uncontrolled (seed with `default-state`). */
1191
+ * a pick only requests a change through `statechange`. Absent → uncontrolled
1192
+ * (seed with `default-state`). */
1164
1193
  state?: string;
1165
1194
  /** Uncontrolled initial selected value — read once on connect / form-reset. */
1166
1195
  'default-state'?: string;
@@ -1252,8 +1281,8 @@ export interface ATabAttributes extends BaseAttributes {
1252
1281
  * `a-tabs.css`, so the strip is restylable with ordinary CSS and usable hand-assembled.
1253
1282
  * Unlike `<a-radio-group>` it is NOT form-associated (a tablist submits nothing), and
1254
1283
  * the panels live outside it (siblings the `Tabs` wrapper shows/hides). The element
1255
- * coordinates **off-DOM only** — selection via each tab's `selected` property, focus via
1256
- * `internals.ariaActiveDescendantElement`, scroll via `scrollIntoView`. Roving
1284
+ * coordinates selection **off-DOM** — selection via each tab's `selected` property, focus via
1285
+ * `internals.ariaActiveDescendantElement`, scroll within the strip's own scrollport. Roving
1257
1286
  * `tabindex` (the JSX path) is rendered by the `Tabs` wrapper, not the element. For the
1258
1287
  * typed JSX wrapper use `Tabs` from `@antadesign/anta`.
1259
1288
  */
@@ -1334,16 +1363,11 @@ export interface ATabpanelAttributes extends BaseAttributes {
1334
1363
  * `internals.ariaLabelledByElements`. */
1335
1364
  role?: 'tabpanel';
1336
1365
  }
1337
- /**
1338
- * Attributes for the `<a-card>` custom element — a surface container that lays out
1339
- * an optional `media` region plus a `header` / body / `footer` stack, and becomes a
1340
- * link when given `href`. Slots (light-DOM children): `media`, `icon`, `header`,
1341
- * `footer`, and the default slot for the body. The element exposes
1342
- * `::part(container | media | content | icon | header | body | footer)`. In link
1343
- * mode it names the shadow anchor from `aria-label` → header text → body text →
1344
- * `href`. Low-level attributes; for the typed JSX wrapper use `Card` from
1345
- * `@antadesign/anta`.
1346
- */
1366
+ /** Surface attributes for the CSS-only `<a-card>` tag. Its `a-card-*` children
1367
+ * define the layout. Put navigation attributes and link ARIA on a native `<a>`
1368
+ * directly under `a-card`, marked with `data-anta-card-link`. Its
1369
+ * `a-card-layout` child groups media and content. The JSX `Card` wrapper emits
1370
+ * this structure. */
1347
1371
  export interface ACardAttributes extends BaseAttributes {
1348
1372
  /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
1349
1373
  * re-point the surface + text; a custom color keeps its hue with lightness/chroma
@@ -1354,40 +1378,22 @@ export interface ACardAttributes extends BaseAttributes {
1354
1378
  priority?: 'primary' | 'secondary' | 'tertiary';
1355
1379
  /** Size variant — scales the padding. `medium` is the default. */
1356
1380
  size?: 'small' | 'medium' | 'large';
1357
- /** Which edge the full-bleed `media` slot sits on. `top` is the default. */
1381
+ /** Which edge the full-bleed `a-card-media` region sits on. `top` is the default. */
1358
1382
  'media-position'?: 'top' | 'bottom' | 'left' | 'right';
1359
1383
  /** Selected / chosen state — an inset ring in the tone color. Presence-based
1360
1384
  * (`''` on, omit off). */
1361
1385
  selected?: boolean | '';
1362
- /** Loading state — skeleton pulse, `aria-busy`, and (in link mode) navigation is
1363
- * blocked (the anchor drops its `href`). Presence-based (`''` on, omit off). */
1386
+ /** Visual loading state. Raw authors also set `aria-busy` on the semantic node
1387
+ * and remove the native anchor's `href` to block keyboard navigation. */
1364
1388
  loading?: boolean | '';
1365
1389
  /** Fully-round corners (`border-radius: 999px`), or a custom radius via a length
1366
1390
  * value (`round="16px"`). Presence-based for the boolean form. */
1367
1391
  round?: boolean | number | string;
1368
- /** Turn the whole card into a link — the shadow container becomes a focusable
1369
- * anchor with this URL. */
1370
- href?: string;
1371
- /** Anchor target (only with `href`). */
1372
- target?: string;
1373
- /** Anchor rel (only with `href`). */
1374
- rel?: string;
1375
- /** Space-separated URLs pinged on navigation (only with `href`). */
1376
- ping?: string;
1377
- /** Explicit accessible name for the link — overrides the header → body → href
1378
- * chain the element derives in link mode. */
1379
- 'aria-label'?: string;
1380
1392
  }
1381
- /**
1382
- * Attributes for the `<a-banner>` custom element — a full-width, dismissible
1383
- * message strip (borderless by default; opt into a rule via `border-bottom-width` /
1384
- * `border-width`, the Progress pattern). Slots (light-DOM children): `message`
1385
- * (leading), the default slot (middle content), `actions` (trailing), and `close`
1386
- * (the ✕ button). The element exposes `::part(message | content | actions | close)`,
1387
- * and `:state(open)` / `:state(closed)` as visibility hooks (the external
1388
- * sheet collapses the host on `:state(closed)`). Low-level attributes; for the
1389
- * typed JSX wrapper use `Banner` from `@antadesign/anta`.
1390
- */
1393
+ /** Light-DOM Banner attributes. Authors supply `a-banner-message`, optional
1394
+ * boxless `a-banner-content`, one `a-banner-actions` region, and `a-banner-close`
1395
+ * containing an accessible Button. `statechange` requests dismissal;
1396
+ * ElementInternals holds uncontrolled visibility without rewriting authored DOM. */
1391
1397
  export interface ABannerAttributes extends BaseAttributes {
1392
1398
  /** Controlled visibility (`'open'` / `'closed'`). Present → controlled: the
1393
1399
  * attribute is the source of truth, the ✕ dismiss only dispatches the cancelable
@@ -1424,7 +1430,7 @@ export interface ABannerAttributes extends BaseAttributes {
1424
1430
  * Attributes for the `<a-toaster>` custom element — a viewport-anchored
1425
1431
  * notification region. One instance hosts all six placement zones; each
1426
1432
  * `<a-toast>` routes to a corner/edge by its `slot` attribute. Keep one mounted
1427
- * (the `<Toaster>` wrapper, or by hand). Exposes `::part(region)`. Low-level
1433
+ * (the `<Toaster>` wrapper, or by hand). Exposes `::part(region)`, `::part(zone)`, and a part for each placement. Low-level
1428
1434
  * attributes; for the typed JSX wrapper use `Toaster` from `@antadesign/anta`.
1429
1435
  */
1430
1436
  export interface AToasterAttributes extends BaseAttributes {
@@ -1450,10 +1456,11 @@ export interface AToastAttributes extends BaseAttributes {
1450
1456
  leaving?: boolean | '';
1451
1457
  /** Bumped on an in-place update so the element restarts its auto-dismiss timer. */
1452
1458
  rev?: number | string;
1453
- /** A live DOM node to show as the content (the wrapper's DOM-node branch);
1454
- * set as a property, not a string attribute. String / JSX content is slotted
1455
- * as children instead. */
1456
- content?: Node;
1459
+ /** Transfer insertion ownership of a live node to Toast. Set as a property;
1460
+ * never supply a node still owned by another reconciler. Identity and listeners
1461
+ * are retained. Replacing or clearing removes only the supplied node or a
1462
+ * fragment's inserted children. String/JSX content remains authored children. */
1463
+ content?: Node | null;
1457
1464
  /** Fires after the exit animation, when the toast has dismissed — a bubbling
1458
1465
  * `CustomEvent`. The owner removes the node in response. All-lowercase so both
1459
1466
  * renderers bind it (React 19 keeps the case after `on`; Preact lowercases). */
package/dist/index.d.ts CHANGED
@@ -103,7 +103,7 @@ export { Toaster, createToaster } from './components/Toaster';
103
103
  export type { ToasterProps, ToasterManager, ToastOptions, ToastPlacement, ToastContent, ToastRender, } from './components/Toaster';
104
104
  export type { BaseProps, BaseAttributes, ToneScope } from './general_types';
105
105
  export { configure } from './jsx-runtime';
106
- export type { AntaIntrinsicElements } from './jsx-runtime';
106
+ export type { AntaIntrinsicElements, RendererHooks, RendererOptions } from './jsx-runtime';
107
107
  /**
108
108
  * Seed interface for the icon shape registry. The generated
109
109
  * `a-icon.shapes.d.ts` augments this interface with one key per
@@ -0,0 +1,4 @@
1
+ export declare const CLEAR_TRIGGER = "clearrequest";
2
+ export declare const CLEAR_CLICK_EVENT = "clearclick";
3
+ export declare const CLEAR_INPUT_EVENT = "clearinput";
4
+ export declare function ownsInputClearRequest(host: Element, event: Event): boolean;
@@ -0,0 +1,15 @@
1
+ const CLEAR_TRIGGER = "clearrequest";
2
+ const CLEAR_CLICK_EVENT = "clearclick";
3
+ const CLEAR_INPUT_EVENT = "clearinput";
4
+ function ownsInputClearRequest(host, event) {
5
+ return event.composedPath().find((node) => {
6
+ const name = node?.localName;
7
+ return name === "a-input" || name === "a-input-time";
8
+ }) === host;
9
+ }
10
+ export {
11
+ CLEAR_CLICK_EVENT,
12
+ CLEAR_INPUT_EVENT,
13
+ CLEAR_TRIGGER,
14
+ ownsInputClearRequest
15
+ };