@antadesign/anta 0.3.27 → 0.3.29

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 (162) hide show
  1. package/NOTICES.md +32 -1
  2. package/dist/anta_helpers.d.ts +25 -0
  3. package/dist/anta_helpers.js +28 -0
  4. package/dist/box-observation.d.ts +8 -0
  5. package/dist/box-observation.js +41 -0
  6. package/dist/box-types.d.ts +2 -0
  7. package/dist/bundle.css +1 -1
  8. package/dist/bundle.js +77 -46
  9. package/dist/components/Banner.js +2 -2
  10. package/dist/components/Box.d.ts +28 -12
  11. package/dist/components/Box.js +18 -11
  12. package/dist/components/Breadcrumbs.css +1 -1
  13. package/dist/components/Button.js +2 -2
  14. package/dist/components/Calendar.js +3 -5
  15. package/dist/components/Card.js +2 -2
  16. package/dist/components/Checkbox.d.ts +12 -13
  17. package/dist/components/Checkbox.js +5 -13
  18. package/dist/components/Expander.js +2 -2
  19. package/dist/components/Input.d.ts +8 -2
  20. package/dist/components/Input.js +6 -2
  21. package/dist/components/InputAutocomplete.js +3 -12
  22. package/dist/components/InputDate.css +1 -1
  23. package/dist/components/InputDate.js +2 -0
  24. package/dist/components/InputTime.js +2 -2
  25. package/dist/components/Loader.js +2 -1
  26. package/dist/components/Menu.d.ts +4 -4
  27. package/dist/components/Menu.js +1 -1
  28. package/dist/components/MenuItem.d.ts +7 -8
  29. package/dist/components/MenuItem.js +4 -4
  30. package/dist/components/Panel.d.ts +17 -0
  31. package/dist/components/Panel.js +22 -0
  32. package/dist/components/Progress.js +2 -2
  33. package/dist/components/RadioGroup.d.ts +14 -14
  34. package/dist/components/RadioGroup.js +7 -23
  35. package/dist/components/Select.d.ts +26 -21
  36. package/dist/components/Select.js +51 -38
  37. package/dist/components/SelectFaceted.d.ts +24 -11
  38. package/dist/components/SelectFaceted.js +65 -44
  39. package/dist/components/Slider.js +3 -3
  40. package/dist/components/Steps.css +1 -1
  41. package/dist/components/Switch.d.ts +10 -11
  42. package/dist/components/Switch.js +3 -11
  43. package/dist/components/TabPanel.d.ts +3 -8
  44. package/dist/components/TabPanel.js +2 -1
  45. package/dist/components/Tabs.d.ts +2 -2
  46. package/dist/components/Tabs.js +4 -3
  47. package/dist/components/Tag.d.ts +7 -9
  48. package/dist/components/Tag.js +2 -2
  49. package/dist/components/Text.js +2 -2
  50. package/dist/components/Title.js +2 -2
  51. package/dist/components/Tooltip.d.ts +1 -1
  52. package/dist/components/Tooltip.js +1 -1
  53. package/dist/components/select-parts.css +1 -1
  54. package/dist/elements/a-avatar.css +1 -1
  55. package/dist/elements/a-banner.css +1 -1
  56. package/dist/elements/a-box.css +1 -1
  57. package/dist/elements/a-box.d.ts +6 -6
  58. package/dist/elements/a-box.js +74 -23
  59. package/dist/elements/a-button.css +1 -1
  60. package/dist/elements/a-button.d.ts +16 -10
  61. package/dist/elements/a-button.js +64 -1
  62. package/dist/elements/a-calendar.css +1 -1
  63. package/dist/elements/a-capture.css +1 -1
  64. package/dist/elements/a-card.css +1 -1
  65. package/dist/elements/a-checkbox.css +1 -1
  66. package/dist/elements/a-checkbox.d.ts +3 -0
  67. package/dist/elements/a-checkbox.js +17 -1
  68. package/dist/elements/a-copy.css +1 -1
  69. package/dist/elements/a-dialog.css +1 -1
  70. package/dist/elements/a-expander.css +1 -1
  71. package/dist/elements/a-expander.js +1 -0
  72. package/dist/elements/a-icon.css +1 -1
  73. package/dist/elements/a-icon.shapes.css +1 -1
  74. package/dist/elements/a-input-time.css +1 -1
  75. package/dist/elements/a-input-time.d.ts +8 -0
  76. package/dist/elements/a-input-time.js +120 -15
  77. package/dist/elements/a-input.css +1 -1
  78. package/dist/elements/a-input.d.ts +27 -1
  79. package/dist/elements/a-input.js +180 -41
  80. package/dist/elements/a-loader.css +1 -1
  81. package/dist/elements/a-menu-group.css +1 -1
  82. package/dist/elements/a-menu-item.css +1 -1
  83. package/dist/elements/a-menu-item.js +1 -0
  84. package/dist/elements/a-menu-separator.css +1 -1
  85. package/dist/elements/a-menu.css +1 -1
  86. package/dist/elements/a-menu.d.ts +8 -13
  87. package/dist/elements/a-menu.js +146 -45
  88. package/dist/elements/a-panel.css +1 -0
  89. package/dist/elements/a-panel.d.ts +16 -0
  90. package/dist/elements/a-panel.js +153 -0
  91. package/dist/elements/a-progress.css +1 -1
  92. package/dist/elements/a-radio-group.css +1 -1
  93. package/dist/elements/a-radio.css +1 -1
  94. package/dist/elements/a-radio.d.ts +4 -0
  95. package/dist/elements/a-radio.js +18 -0
  96. package/dist/elements/a-slider.css +1 -1
  97. package/dist/elements/a-slider.d.ts +1 -0
  98. package/dist/elements/a-slider.js +3 -6
  99. package/dist/elements/a-switch.css +1 -1
  100. package/dist/elements/a-switch.d.ts +3 -0
  101. package/dist/elements/a-switch.js +17 -1
  102. package/dist/elements/a-tab.css +1 -1
  103. package/dist/elements/a-tabpanel.css +1 -1
  104. package/dist/elements/a-tabs.css +1 -1
  105. package/dist/elements/a-tag.css +1 -1
  106. package/dist/elements/a-text.css +1 -1
  107. package/dist/elements/a-text.js +1 -0
  108. package/dist/elements/a-title.css +1 -1
  109. package/dist/elements/a-toast.css +1 -1
  110. package/dist/elements/a-toaster.css +1 -1
  111. package/dist/elements/a-tooltip.css +1 -1
  112. package/dist/elements/a-tooltip.d.ts +3 -4
  113. package/dist/elements/a-tooltip.js +30 -8
  114. package/dist/elements/focus.d.ts +9 -0
  115. package/dist/elements/focus.js +41 -0
  116. package/dist/elements/index.d.ts +1 -0
  117. package/dist/elements/index.js +3 -0
  118. package/dist/elements/panel-focus.d.ts +10 -0
  119. package/dist/elements/panel-focus.js +86 -0
  120. package/dist/elements/shadow-aria.d.ts +10 -0
  121. package/dist/elements/shadow-aria.js +155 -0
  122. package/dist/general_types.d.ts +70 -42
  123. package/dist/generate-icons.mjs +3 -0
  124. package/dist/index.d.ts +5 -2
  125. package/dist/index.js +2 -0
  126. package/dist/jsx-runtime.d.ts +10 -1
  127. package/dist/reset.css +1 -1
  128. package/dist/theme-antithesis.css +1 -0
  129. package/dist/theme-antune.css +1 -0
  130. package/dist/tokens.css +1 -1
  131. package/docs/accessibility.md +4 -2
  132. package/docs/changelog.md +135 -0
  133. package/docs/colors.md +7 -7
  134. package/docs/comparison.md +2 -2
  135. package/docs/components/box.md +98 -34
  136. package/docs/components/breadcrumbs.md +75 -6
  137. package/docs/components/button.md +2 -2
  138. package/docs/components/capture.md +8 -8
  139. package/docs/components/checkbox.md +21 -16
  140. package/docs/components/input-autocomplete.md +6 -0
  141. package/docs/components/input-date.md +8 -2
  142. package/docs/components/input.md +99 -40
  143. package/docs/components/menu.md +5 -6
  144. package/docs/components/panel.md +189 -0
  145. package/docs/components/radio.md +16 -13
  146. package/docs/components/select-faceted.md +58 -2
  147. package/docs/components/select.md +72 -59
  148. package/docs/components/steps.md +4 -4
  149. package/docs/components/switch.md +16 -10
  150. package/docs/components/tabs.md +21 -8
  151. package/docs/components/tag.md +5 -3
  152. package/docs/components/tooltip.md +6 -4
  153. package/docs/index.md +1 -0
  154. package/docs/install-config.md +23 -12
  155. package/docs/normalization.md +6 -4
  156. package/docs/theming.md +95 -17
  157. package/package.json +8 -4
  158. package/dist/components/InputDate.module.css +0 -1
  159. package/dist/components/Select.module.css +0 -1
  160. package/dist/components/SelectFaceted.module.css +0 -1
  161. package/dist/search-index.json +0 -0
  162. package/dist/theme-anta.css +0 -1
package/NOTICES.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Third-party notices
2
2
 
3
- The Anta design system bundles icons derived from third-party
3
+ The Anta design system bundles code and icons derived from third-party
4
4
  projects. Their original copyright and license texts are reproduced
5
5
  below as required by those licenses.
6
6
 
@@ -277,3 +277,34 @@ Some of the Blueprint-derived SVGs in this package have been modified
277
277
  `currentColor`, and renamed to follow Anta's icon-naming conventions);
278
278
  these modifications are themselves released under the Apache License,
279
279
  Version 2.0.
280
+
281
+ ---
282
+
283
+ ## Tabbable
284
+
285
+ Panel uses [Tabbable](https://github.com/focus-trap/tabbable) to determine
286
+ keyboard focus order. The bundled runtime includes it under the MIT license:
287
+
288
+ ```
289
+ The MIT License (MIT)
290
+
291
+ Copyright (c) 2015 David Clark
292
+
293
+ Permission is hereby granted, free of charge, to any person obtaining a copy
294
+ of this software and associated documentation files (the "Software"), to deal
295
+ in the Software without restriction, including without limitation the rights
296
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
297
+ copies of the Software, and to permit persons to whom the Software is
298
+ furnished to do so, subject to the following conditions:
299
+
300
+ The above copyright notice and this permission notice shall be included in all
301
+ copies or substantial portions of the Software.
302
+
303
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
304
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
305
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
306
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
307
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
308
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
309
+ SOFTWARE.
310
+ ```
@@ -62,6 +62,9 @@ export declare const IS_MAC: boolean;
62
62
  * bulk-select rows (`Select` multiple, `SelectFaceted` multiple facets). Shared
63
63
  * so the wording stays identical across both. */
64
64
  export declare const ISOLATE_HINT: string;
65
+ /** The accelerator hint is secondary guidance shown while traversing a menu, so
66
+ * wait longer than Tooltip's general 300ms default before surfacing it. */
67
+ export declare const ISOLATE_HINT_DELAY = 700;
65
68
  /** Parse an open/closed `state` / `default-state` attribute — the shared
66
69
  * open-state vocabulary (`a-dialog`, `a-expander`, …). Anything but the literal
67
70
  * `'open'` is `'closed'`, so an absent / malformed attribute reads closed. Kept
@@ -80,6 +83,10 @@ export declare function installDismissTrigger(host: HTMLElement, attr: string, o
80
83
  /** The six named tones every toned component shares. Anything else is a literal
81
84
  * CSS color the element resolves through its `--{component}-tone-source` var. */
82
85
  export declare const NAMED_TONES: Set<string>;
86
+ /** Omits the neutral default from JSX-generated DOM. Use only where an absent
87
+ * tone is equivalent to neutral; per-child tones keep an explicit `neutral`
88
+ * value when it resets an inherited group tone. */
89
+ export declare function neutralToneAttr<T extends string>(tone: T | undefined): T | undefined;
83
90
  /**
84
91
  * Inline-style helper for a custom (non-named) tone: hands the literal color to
85
92
  * the element via `varName` (e.g. `--radio-tone-source`) so the element's CSS
@@ -151,6 +158,19 @@ export declare function setMenuPresence(p: MenuPresence | null): void;
151
158
  export declare function isMenuOpen(): boolean;
152
159
  /** True if `node` sits inside the open menu system. */
153
160
  export declare function isInsideOpenMenu(node: Node): boolean;
161
+ /** Internal element protocol used by a popup to associate itself and its active
162
+ * item with an Anta-owned focus target without serializing cross-root IDs. */
163
+ export declare const SYNC_POPUP_ARIA: unique symbol;
164
+ export interface PopupAriaRelations {
165
+ source: Element;
166
+ controls?: Element | null;
167
+ activeDescendant?: Element | null;
168
+ clear?: boolean;
169
+ }
170
+ export interface PopupAriaReceiver extends Element {
171
+ [SYNC_POPUP_ARIA](relations: PopupAriaRelations): void;
172
+ }
173
+ export declare function isPopupAriaReceiver(element: Element | null): element is PopupAriaReceiver;
154
174
  /**
155
175
  * `HTMLElement` in browsers, a noop class in Node/Worker environments.
156
176
  * Use this as the base for custom element classes so importing the
@@ -174,6 +194,8 @@ export declare class HTMLElementBase extends NativeHTMLElement {
174
194
  /** This element's own document (the iframe's document when nested). */
175
195
  protected get doc(): Document;
176
196
  }
197
+ /** Apply default accessible names and descriptions through element references. */
198
+ export declare function applyAccessibilityRelations(internals: ElementInternals | undefined, labels: Element[], descriptions: Element[]): void;
177
199
  /**
178
200
  * Base for a coordinated presentational child — one option in a control whose
179
201
  * parent owns the selection (`<a-radio>` in `<a-radio-group>`, `<a-tab>` in
@@ -224,5 +246,8 @@ export declare class SelectableChildElement extends HTMLElementBase {
224
246
  get value(): string;
225
247
  set value(v: string);
226
248
  protected applyState(on: boolean): void;
249
+ /** Give subclasses name/description relationships to their light-DOM content
250
+ * without exposing IDs or the shared ElementInternals instance. */
251
+ protected applyAccessibilityRelations(labels: Element[], descriptions: Element[]): void;
227
252
  }
228
253
  export {};
@@ -38,6 +38,7 @@ function finiteNumber(value, fallback) {
38
38
  }
39
39
  const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
40
40
  const ISOLATE_HINT = IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this";
41
+ const ISOLATE_HINT_DELAY = 700;
41
42
  function parseOpenState(v) {
42
43
  return v === "open" ? "open" : "closed";
43
44
  }
@@ -57,6 +58,9 @@ const NAMED_TONES = /* @__PURE__ */ new Set([
57
58
  "warning",
58
59
  "critical"
59
60
  ]);
61
+ function neutralToneAttr(tone) {
62
+ return tone && tone !== "neutral" ? tone : void 0;
63
+ }
60
64
  function toneStyle(tone, varName, base) {
61
65
  return tone != null && !NAMED_TONES.has(tone) ? { ...base, [varName]: tone } : base;
62
66
  }
@@ -102,6 +106,10 @@ function isMenuOpen() {
102
106
  function isInsideOpenMenu(node) {
103
107
  return menuPresence?.contains(node) ?? false;
104
108
  }
109
+ const SYNC_POPUP_ARIA = Symbol("anta.sync-popup-aria");
110
+ function isPopupAriaReceiver(element) {
111
+ return element != null && typeof element[SYNC_POPUP_ARIA] === "function";
112
+ }
105
113
  const NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
106
114
  };
107
115
  class HTMLElementBase extends NativeHTMLElement {
@@ -114,6 +122,16 @@ class HTMLElementBase extends NativeHTMLElement {
114
122
  return this.ownerDocument ?? document;
115
123
  }
116
124
  }
125
+ function applyAccessibilityRelations(internals, labels, descriptions) {
126
+ if (!internals) return;
127
+ try {
128
+ if ("ariaLabelledByElements" in internals)
129
+ internals.ariaLabelledByElements = labels;
130
+ if ("ariaDescribedByElements" in internals)
131
+ internals.ariaDescribedByElements = descriptions;
132
+ } catch {
133
+ }
134
+ }
117
135
  class SelectableChildElement extends HTMLElementBase {
118
136
  static observedAttributes = ["selected"];
119
137
  /** ARIA property this element reflects selection into. Subclass sets it. */
@@ -163,14 +181,22 @@ class SelectableChildElement extends HTMLElementBase {
163
181
  else this.internals?.states?.delete("selected");
164
182
  this.internals[this.ariaProp] = on ? "true" : "false";
165
183
  }
184
+ /** Give subclasses name/description relationships to their light-DOM content
185
+ * without exposing IDs or the shared ElementInternals instance. */
186
+ applyAccessibilityRelations(labels, descriptions) {
187
+ applyAccessibilityRelations(this.internals, labels, descriptions);
188
+ }
166
189
  }
167
190
  export {
168
191
  HTMLElementBase,
169
192
  ISOLATE_HINT,
193
+ ISOLATE_HINT_DELAY,
170
194
  IS_MAC,
171
195
  NAMED_TONES,
196
+ SYNC_POPUP_ARIA,
172
197
  SelectableChildElement,
173
198
  anchorRect,
199
+ applyAccessibilityRelations,
174
200
  cssLength,
175
201
  customEventHandler,
176
202
  finiteNumber,
@@ -178,8 +204,10 @@ export {
178
204
  installDismissTrigger,
179
205
  isInsideOpenMenu,
180
206
  isMenuOpen,
207
+ isPopupAriaReceiver,
181
208
  lengthStyle,
182
209
  nativeStateChange,
210
+ neutralToneAttr,
183
211
  optionPresentationAttrs,
184
212
  parseOpenState,
185
213
  roundAttr,
@@ -0,0 +1,8 @@
1
+ import type { BoxMeasurement } from './box-types';
2
+ /** Resolves the same observation vocabulary for JSX handlers and raw attributes. */
3
+ export declare function boxObservation(value: string | null): {
4
+ fields: Set<keyof BoxMeasurement>;
5
+ context: boolean;
6
+ content: boolean;
7
+ scroll: boolean;
8
+ };
@@ -0,0 +1,41 @@
1
+ const groups = {
2
+ width: ["width"],
3
+ height: ["height"],
4
+ size: ["width", "height"],
5
+ overflow: [
6
+ "clientWidth",
7
+ "clientHeight",
8
+ "scrollWidth",
9
+ "scrollHeight",
10
+ "overflowX",
11
+ "overflowY",
12
+ "clippedX",
13
+ "clippedY",
14
+ "scrollableX",
15
+ "scrollableY"
16
+ ],
17
+ edges: ["hiddenStartX", "hiddenEndX", "hiddenStartY", "hiddenEndY"],
18
+ scroll: ["scrollLeft", "scrollTop"]
19
+ };
20
+ const measurementFields = new Set(Object.values(groups).flat());
21
+ function boxObservation(value) {
22
+ const fields = /* @__PURE__ */ new Set();
23
+ let context = false;
24
+ const tokens = value === "" ? ["all"] : value?.trim().split(/\s+/) ?? [];
25
+ for (const token of tokens) {
26
+ if (token === "all") {
27
+ for (const field of measurementFields) fields.add(field);
28
+ context = true;
29
+ } else if (token === "context") {
30
+ context = true;
31
+ } else if (Object.hasOwn(groups, token)) {
32
+ for (const field of groups[token]) fields.add(field);
33
+ }
34
+ }
35
+ const content = [...fields].some((field) => field !== "width" && field !== "height");
36
+ const scroll = [...groups.scroll, ...groups.edges].some((field) => fields.has(field));
37
+ return { fields, context, content, scroll };
38
+ }
39
+ export {
40
+ boxObservation
41
+ };
@@ -152,6 +152,8 @@ export interface BoxMeasurement {
152
152
  hiddenStartY: boolean;
153
153
  hiddenEndY: boolean;
154
154
  }
155
+ /** Independent Box observation selections, from resize signals to scroll tracking. */
156
+ export type BoxObservation = 'width' | 'height' | 'size' | 'context' | 'overflow' | 'edges' | 'scroll' | 'all';
155
157
  /** Box observation events include changed fields and a complete current snapshot. */
156
158
  export interface BoxChange<T> {
157
159
  changed: Partial<T>;