@antadesign/anta 0.3.28 → 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 (135) hide show
  1. package/NOTICES.md +32 -1
  2. package/dist/anta_helpers.d.ts +21 -0
  3. package/dist/anta_helpers.js +24 -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 +64 -27
  9. package/dist/components/Box.d.ts +28 -12
  10. package/dist/components/Box.js +18 -11
  11. package/dist/components/Breadcrumbs.css +1 -1
  12. package/dist/components/Calendar.js +3 -5
  13. package/dist/components/Checkbox.d.ts +2 -2
  14. package/dist/components/Input.d.ts +8 -2
  15. package/dist/components/Input.js +4 -0
  16. package/dist/components/InputAutocomplete.js +3 -12
  17. package/dist/components/InputDate.css +1 -1
  18. package/dist/components/InputDate.js +2 -0
  19. package/dist/components/Menu.d.ts +4 -4
  20. package/dist/components/Menu.js +1 -1
  21. package/dist/components/Panel.d.ts +17 -0
  22. package/dist/components/Panel.js +22 -0
  23. package/dist/components/RadioGroup.d.ts +2 -1
  24. package/dist/components/Select.d.ts +14 -14
  25. package/dist/components/Select.js +47 -35
  26. package/dist/components/SelectFaceted.d.ts +17 -6
  27. package/dist/components/SelectFaceted.js +61 -41
  28. package/dist/components/Steps.css +1 -1
  29. package/dist/components/Switch.d.ts +3 -3
  30. package/dist/components/TabPanel.d.ts +3 -8
  31. package/dist/components/TabPanel.js +2 -1
  32. package/dist/components/Tabs.d.ts +2 -2
  33. package/dist/components/Tabs.js +2 -1
  34. package/dist/components/Tooltip.d.ts +1 -1
  35. package/dist/components/Tooltip.js +1 -1
  36. package/dist/components/select-parts.css +1 -1
  37. package/dist/elements/a-avatar.css +1 -1
  38. package/dist/elements/a-banner.css +1 -1
  39. package/dist/elements/a-box.css +1 -1
  40. package/dist/elements/a-box.d.ts +6 -6
  41. package/dist/elements/a-box.js +74 -23
  42. package/dist/elements/a-button.css +1 -1
  43. package/dist/elements/a-button.d.ts +9 -1
  44. package/dist/elements/a-button.js +64 -1
  45. package/dist/elements/a-calendar.css +1 -1
  46. package/dist/elements/a-capture.css +1 -1
  47. package/dist/elements/a-card.css +1 -1
  48. package/dist/elements/a-checkbox.css +1 -1
  49. package/dist/elements/a-checkbox.d.ts +3 -0
  50. package/dist/elements/a-checkbox.js +17 -1
  51. package/dist/elements/a-copy.css +1 -1
  52. package/dist/elements/a-dialog.css +1 -1
  53. package/dist/elements/a-expander.css +1 -1
  54. package/dist/elements/a-icon.css +1 -1
  55. package/dist/elements/a-icon.shapes.css +1 -1
  56. package/dist/elements/a-input-time.css +1 -1
  57. package/dist/elements/a-input-time.d.ts +8 -0
  58. package/dist/elements/a-input-time.js +115 -8
  59. package/dist/elements/a-input.css +1 -1
  60. package/dist/elements/a-input.d.ts +27 -1
  61. package/dist/elements/a-input.js +176 -35
  62. package/dist/elements/a-loader.css +1 -1
  63. package/dist/elements/a-menu-group.css +1 -1
  64. package/dist/elements/a-menu-item.css +1 -1
  65. package/dist/elements/a-menu-item.js +1 -0
  66. package/dist/elements/a-menu-separator.css +1 -1
  67. package/dist/elements/a-menu.css +1 -1
  68. package/dist/elements/a-menu.d.ts +8 -13
  69. package/dist/elements/a-menu.js +146 -45
  70. package/dist/elements/a-panel.css +1 -0
  71. package/dist/elements/a-panel.d.ts +16 -0
  72. package/dist/elements/a-panel.js +153 -0
  73. package/dist/elements/a-progress.css +1 -1
  74. package/dist/elements/a-radio-group.css +1 -1
  75. package/dist/elements/a-radio.css +1 -1
  76. package/dist/elements/a-radio.d.ts +4 -0
  77. package/dist/elements/a-radio.js +18 -0
  78. package/dist/elements/a-slider.css +1 -1
  79. package/dist/elements/a-slider.d.ts +1 -0
  80. package/dist/elements/a-slider.js +3 -3
  81. package/dist/elements/a-switch.css +1 -1
  82. package/dist/elements/a-switch.d.ts +3 -0
  83. package/dist/elements/a-switch.js +17 -1
  84. package/dist/elements/a-tab.css +1 -1
  85. package/dist/elements/a-tabpanel.css +1 -1
  86. package/dist/elements/a-tabs.css +1 -1
  87. package/dist/elements/a-tag.css +1 -1
  88. package/dist/elements/a-text.css +1 -1
  89. package/dist/elements/a-title.css +1 -1
  90. package/dist/elements/a-toast.css +1 -1
  91. package/dist/elements/a-toaster.css +1 -1
  92. package/dist/elements/a-tooltip.css +1 -1
  93. package/dist/elements/a-tooltip.js +30 -7
  94. package/dist/elements/focus.d.ts +9 -0
  95. package/dist/elements/focus.js +41 -0
  96. package/dist/elements/index.d.ts +1 -0
  97. package/dist/elements/index.js +3 -0
  98. package/dist/elements/panel-focus.d.ts +10 -0
  99. package/dist/elements/panel-focus.js +86 -0
  100. package/dist/elements/shadow-aria.d.ts +10 -0
  101. package/dist/elements/shadow-aria.js +155 -0
  102. package/dist/general_types.d.ts +48 -19
  103. package/dist/generate-icons.mjs +3 -0
  104. package/dist/index.d.ts +4 -1
  105. package/dist/index.js +2 -0
  106. package/dist/jsx-runtime.d.ts +10 -1
  107. package/dist/reset.css +1 -1
  108. package/dist/theme-antithesis.css +1 -1
  109. package/dist/theme-antune.css +1 -1
  110. package/dist/tokens.css +1 -1
  111. package/docs/accessibility.md +4 -2
  112. package/docs/changelog.md +82 -4
  113. package/docs/colors.md +6 -6
  114. package/docs/components/box.md +98 -34
  115. package/docs/components/breadcrumbs.md +33 -0
  116. package/docs/components/button.md +2 -2
  117. package/docs/components/capture.md +8 -8
  118. package/docs/components/checkbox.md +9 -4
  119. package/docs/components/input-autocomplete.md +6 -0
  120. package/docs/components/input-date.md +8 -2
  121. package/docs/components/input.md +99 -40
  122. package/docs/components/menu.md +3 -3
  123. package/docs/components/panel.md +189 -0
  124. package/docs/components/radio.md +4 -2
  125. package/docs/components/select-faceted.md +57 -2
  126. package/docs/components/select.md +63 -51
  127. package/docs/components/steps.md +4 -4
  128. package/docs/components/switch.md +12 -6
  129. package/docs/components/tabs.md +21 -8
  130. package/docs/components/tooltip.md +6 -4
  131. package/docs/index.md +1 -0
  132. package/docs/install-config.md +5 -4
  133. package/docs/normalization.md +3 -1
  134. package/docs/theming.md +1 -1
  135. package/package.json +4 -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
@@ -155,6 +158,19 @@ export declare function setMenuPresence(p: MenuPresence | null): void;
155
158
  export declare function isMenuOpen(): boolean;
156
159
  /** True if `node` sits inside the open menu system. */
157
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;
158
174
  /**
159
175
  * `HTMLElement` in browsers, a noop class in Node/Worker environments.
160
176
  * Use this as the base for custom element classes so importing the
@@ -178,6 +194,8 @@ export declare class HTMLElementBase extends NativeHTMLElement {
178
194
  /** This element's own document (the iframe's document when nested). */
179
195
  protected get doc(): Document;
180
196
  }
197
+ /** Apply default accessible names and descriptions through element references. */
198
+ export declare function applyAccessibilityRelations(internals: ElementInternals | undefined, labels: Element[], descriptions: Element[]): void;
181
199
  /**
182
200
  * Base for a coordinated presentational child — one option in a control whose
183
201
  * parent owns the selection (`<a-radio>` in `<a-radio-group>`, `<a-tab>` in
@@ -228,5 +246,8 @@ export declare class SelectableChildElement extends HTMLElementBase {
228
246
  get value(): string;
229
247
  set value(v: string);
230
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;
231
252
  }
232
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
  }
@@ -105,6 +106,10 @@ function isMenuOpen() {
105
106
  function isInsideOpenMenu(node) {
106
107
  return menuPresence?.contains(node) ?? false;
107
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
+ }
108
113
  const NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
109
114
  };
110
115
  class HTMLElementBase extends NativeHTMLElement {
@@ -117,6 +122,16 @@ class HTMLElementBase extends NativeHTMLElement {
117
122
  return this.ownerDocument ?? document;
118
123
  }
119
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
+ }
120
135
  class SelectableChildElement extends HTMLElementBase {
121
136
  static observedAttributes = ["selected"];
122
137
  /** ARIA property this element reflects selection into. Subclass sets it. */
@@ -166,14 +181,22 @@ class SelectableChildElement extends HTMLElementBase {
166
181
  else this.internals?.states?.delete("selected");
167
182
  this.internals[this.ariaProp] = on ? "true" : "false";
168
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
+ }
169
189
  }
170
190
  export {
171
191
  HTMLElementBase,
172
192
  ISOLATE_HINT,
193
+ ISOLATE_HINT_DELAY,
173
194
  IS_MAC,
174
195
  NAMED_TONES,
196
+ SYNC_POPUP_ARIA,
175
197
  SelectableChildElement,
176
198
  anchorRect,
199
+ applyAccessibilityRelations,
177
200
  cssLength,
178
201
  customEventHandler,
179
202
  finiteNumber,
@@ -181,6 +204,7 @@ export {
181
204
  installDismissTrigger,
182
205
  isInsideOpenMenu,
183
206
  isMenuOpen,
207
+ isPopupAriaReceiver,
184
208
  lengthStyle,
185
209
  nativeStateChange,
186
210
  neutralToneAttr,
@@ -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>;