@antadesign/anta 0.3.20 → 0.3.22
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.
- package/dist/anta_helpers.d.ts +9 -0
- package/dist/anta_helpers.js +9 -0
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.js +12 -5
- package/dist/components/Checkbox.js +6 -2
- package/dist/components/Input.d.ts +2 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/InputAutocomplete.js +24 -18
- package/dist/components/InputDate.js +1 -0
- package/dist/components/Menu.d.ts +6 -1
- package/dist/components/Menu.js +2 -0
- package/dist/components/RadioGroup.d.ts +2 -2
- package/dist/components/RadioGroup.js +25 -6
- package/dist/components/Select.d.ts +5 -3
- package/dist/components/Select.js +6 -1
- package/dist/components/SelectFaceted.d.ts +4 -2
- package/dist/components/SelectFaceted.js +5 -1
- package/dist/components/TabPanel.d.ts +1 -2
- package/dist/components/TabPanel.js +0 -1
- package/dist/components/Tabs.d.ts +2 -2
- package/dist/components/Tabs.js +5 -2
- package/dist/components/Text.d.ts +5 -3
- package/dist/components/Text.js +7 -3
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.js +1 -1
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.js +1 -1
- package/dist/elements/a-menu.d.ts +5 -10
- package/dist/elements/a-menu.js +123 -44
- package/dist/elements/a-radio.css +1 -1
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-text.d.ts +4 -0
- package/dist/elements/a-text.js +10 -3
- package/dist/elements/a-tooltip.d.ts +7 -0
- package/dist/elements/a-tooltip.js +87 -14
- package/dist/general_types.d.ts +17 -0
- package/dist/theme-anta.css +1 -1
- package/docs/changelog.md +45 -0
- package/docs/components/input.md +2 -2
- package/docs/components/menu.md +33 -0
- package/docs/components/radio.md +4 -0
- package/docs/components/select-faceted.md +4 -2
- package/docs/components/select.md +6 -1
- package/docs/components/text.md +27 -3
- package/docs/install-config.md +5 -0
- package/docs/theming.md +15 -0
- package/package.json +3 -8
|
@@ -13,6 +13,7 @@ const PROX_FAR = 100;
|
|
|
13
13
|
const PROX_FADE_MS = 60;
|
|
14
14
|
const ENTER_TOUCH_DELAY = 500;
|
|
15
15
|
const TRUNCATING_PARTS = "a-tab-label, a-button-label";
|
|
16
|
+
const AUTOMATIC_TEXT_TOOLTIP = "data-anta-text-tooltip";
|
|
16
17
|
const LEAVE_TOUCH_DELAY = 1500;
|
|
17
18
|
const TOUCH_SLOP = 10;
|
|
18
19
|
let currentOpen = null;
|
|
@@ -45,16 +46,37 @@ function releaseOpen(el) {
|
|
|
45
46
|
graceTimer = void 0;
|
|
46
47
|
}, GRACE_MS);
|
|
47
48
|
}
|
|
48
|
-
const
|
|
49
|
+
const anchorToTooltips = /* @__PURE__ */ new WeakMap();
|
|
50
|
+
function preferredTooltip(registry) {
|
|
51
|
+
let automatic;
|
|
52
|
+
let explicit;
|
|
53
|
+
for (const tooltip of registry.tooltips) {
|
|
54
|
+
if (tooltip.hasAttribute(AUTOMATIC_TEXT_TOOLTIP)) automatic = tooltip;
|
|
55
|
+
else explicit = tooltip;
|
|
56
|
+
}
|
|
57
|
+
return explicit ?? automatic;
|
|
58
|
+
}
|
|
59
|
+
function syncAnchorListeners(anchor, registry) {
|
|
60
|
+
const preferred = preferredTooltip(registry);
|
|
61
|
+
for (const tooltip of registry.tooltips) {
|
|
62
|
+
if (tooltip !== preferred) tooltip.teardownListeners();
|
|
63
|
+
}
|
|
64
|
+
if (!preferred || !registry.intersecting) {
|
|
65
|
+
preferred?.teardownListeners();
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
requestAnimationFrame(() => {
|
|
69
|
+
const current = anchorToTooltips.get(anchor);
|
|
70
|
+
if (current !== registry || !current.intersecting || preferredTooltip(current) !== preferred) return;
|
|
71
|
+
preferred.setupListeners();
|
|
72
|
+
});
|
|
73
|
+
}
|
|
49
74
|
function handleIntersection(entries) {
|
|
50
75
|
for (const entry of entries) {
|
|
51
|
-
const
|
|
52
|
-
if (!
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} else if (tooltip.listening && !entry.isIntersecting) {
|
|
56
|
-
requestAnimationFrame(() => tooltip.teardownListeners());
|
|
57
|
-
}
|
|
76
|
+
const registry = anchorToTooltips.get(entry.target);
|
|
77
|
+
if (!registry) continue;
|
|
78
|
+
registry.intersecting = entry.isIntersecting;
|
|
79
|
+
syncAnchorListeners(entry.target, registry);
|
|
58
80
|
}
|
|
59
81
|
}
|
|
60
82
|
const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
|
|
@@ -178,15 +200,26 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
178
200
|
const parent = this.parentElement;
|
|
179
201
|
if (!parent) return;
|
|
180
202
|
this.anchor = parent;
|
|
181
|
-
|
|
182
|
-
|
|
203
|
+
let registry = anchorToTooltips.get(parent);
|
|
204
|
+
if (!registry) {
|
|
205
|
+
registry = { tooltips: /* @__PURE__ */ new Set(), intersecting: false };
|
|
206
|
+
anchorToTooltips.set(parent, registry);
|
|
207
|
+
lazyObserver?.observe(parent);
|
|
208
|
+
}
|
|
209
|
+
registry.tooltips.add(this);
|
|
210
|
+
syncAnchorListeners(parent, registry);
|
|
183
211
|
}
|
|
184
212
|
disconnectedCallback() {
|
|
185
213
|
this.cleanup();
|
|
186
214
|
if (this.anchor) {
|
|
187
|
-
|
|
188
|
-
|
|
215
|
+
const anchor = this.anchor;
|
|
216
|
+
const registry = anchorToTooltips.get(anchor);
|
|
217
|
+
registry?.tooltips.delete(this);
|
|
218
|
+
if (registry && registry.tooltips.size === 0) {
|
|
219
|
+
anchorToTooltips.delete(anchor);
|
|
189
220
|
lazyObserver?.unobserve(this.anchor);
|
|
221
|
+
} else if (registry) {
|
|
222
|
+
syncAnchorListeners(anchor, registry);
|
|
190
223
|
}
|
|
191
224
|
this.anchor = null;
|
|
192
225
|
}
|
|
@@ -228,6 +261,34 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
228
261
|
get #truncatedOnly() {
|
|
229
262
|
return this.hasAttribute("truncated-only");
|
|
230
263
|
}
|
|
264
|
+
/** JSX `<Text truncate>` emits an empty marked tooltip. It takes its content
|
|
265
|
+
* from the anchor, while a consumer-provided sibling tooltip takes precedence
|
|
266
|
+
* even when that sibling is empty. */
|
|
267
|
+
get #isAutomaticTextTooltip() {
|
|
268
|
+
return this.hasAttribute(AUTOMATIC_TEXT_TOOLTIP);
|
|
269
|
+
}
|
|
270
|
+
hasExplicitTextTooltip() {
|
|
271
|
+
const anchor = this.anchor;
|
|
272
|
+
if (!this.#isAutomaticTextTooltip || !anchor) return false;
|
|
273
|
+
return Array.from(anchor.children).some(
|
|
274
|
+
(child) => child !== this && child.localName === "a-tooltip" && !child.hasAttribute(AUTOMATIC_TEXT_TOOLTIP)
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
/** Text rendered by the anchor, excluding every tooltip's light-DOM content.
|
|
278
|
+
* An automatic text tooltip has no light children itself, but nested custom
|
|
279
|
+
* tooltips might; including their hidden content would produce a misleading
|
|
280
|
+
* fallback string. */
|
|
281
|
+
anchorText() {
|
|
282
|
+
const read = (node) => {
|
|
283
|
+
if (node.nodeType === 3) return node.textContent ?? "";
|
|
284
|
+
if (node.nodeType === 1 && node.localName === "a-tooltip") return "";
|
|
285
|
+
return Array.from(node.childNodes).map(read).join("");
|
|
286
|
+
};
|
|
287
|
+
return this.anchor ? Array.from(this.anchor.childNodes).map(read).join("").trim() : "";
|
|
288
|
+
}
|
|
289
|
+
syncAutomaticTextContent() {
|
|
290
|
+
if (this.#isAutomaticTextTooltip) this.bubble.textContent = this.anchorText();
|
|
291
|
+
}
|
|
231
292
|
/** The element whose overflow decides whether the tooltip shows: a
|
|
232
293
|
* `truncated-selector` resolved within the anchor wins; else the first of
|
|
233
294
|
* Anta's ellipsizing label parts inside the anchor; else the anchor itself
|
|
@@ -252,6 +313,8 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
252
313
|
isTargetTruncated() {
|
|
253
314
|
const t = this.resolveTruncationTarget();
|
|
254
315
|
if (!t) return false;
|
|
316
|
+
const reported = t.isTruncated;
|
|
317
|
+
if (typeof reported === "boolean") return reported;
|
|
255
318
|
if (t.clientWidth === 0 && t.clientHeight === 0) return false;
|
|
256
319
|
return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
|
|
257
320
|
}
|
|
@@ -260,6 +323,7 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
260
323
|
* (so formatting whitespace / an empty conditional doesn't open a blank bubble).
|
|
261
324
|
* Re-checked on every show(), so a tooltip populated later self-corrects. */
|
|
262
325
|
isEmpty() {
|
|
326
|
+
if (this.#isAutomaticTextTooltip) return this.anchorText() === "";
|
|
263
327
|
return this.children.length === 0 && (this.textContent ?? "").trim() === "";
|
|
264
328
|
}
|
|
265
329
|
/** While shown, watch the slotted content so a bubble whose content is
|
|
@@ -279,10 +343,16 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
279
343
|
if (typeof MutationObserver === "undefined") return;
|
|
280
344
|
if (!this.contentObserver) {
|
|
281
345
|
this.contentObserver = new MutationObserver(() => {
|
|
282
|
-
if (this.shown
|
|
346
|
+
if (!this.shown) return;
|
|
347
|
+
this.syncAutomaticTextContent();
|
|
348
|
+
if (this.isEmpty()) this.hide();
|
|
283
349
|
});
|
|
284
350
|
}
|
|
285
|
-
this.contentObserver.observe(this
|
|
351
|
+
this.contentObserver.observe(this.#isAutomaticTextTooltip ? this.anchor ?? this : this, {
|
|
352
|
+
childList: true,
|
|
353
|
+
characterData: true,
|
|
354
|
+
subtree: true
|
|
355
|
+
});
|
|
286
356
|
}
|
|
287
357
|
// --- positioning (sets only the shadow container's own transform) ---
|
|
288
358
|
// Single pending position frame: a burst of mousemoves within one frame
|
|
@@ -356,8 +426,10 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
356
426
|
show = (e) => {
|
|
357
427
|
if (!this.anchor) return;
|
|
358
428
|
if (isMenuOpen() && !isInsideOpenMenu(this.anchor)) return;
|
|
429
|
+
if (this.hasExplicitTextTooltip()) return;
|
|
359
430
|
if (this.isEmpty()) return;
|
|
360
431
|
if (this.#truncatedOnly && !this.isTargetTruncated()) return;
|
|
432
|
+
this.syncAutomaticTextContent();
|
|
361
433
|
this.cancelHide();
|
|
362
434
|
if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
|
|
363
435
|
return;
|
|
@@ -472,6 +544,7 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
472
544
|
/** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
|
|
473
545
|
* show with the latest cursor event. */
|
|
474
546
|
trigger(e) {
|
|
547
|
+
if (this.hasExplicitTextTooltip()) return;
|
|
475
548
|
if (this.isEmpty()) return;
|
|
476
549
|
if (this.#truncatedOnly && !this.isTargetTruncated()) return;
|
|
477
550
|
if (isHot()) {
|
package/dist/general_types.d.ts
CHANGED
|
@@ -27,6 +27,17 @@ export interface BaseProps {
|
|
|
27
27
|
/** Any `aria-*` attribute is forwarded to the rendered element. */
|
|
28
28
|
[key: `aria-${string}`]: unknown;
|
|
29
29
|
}
|
|
30
|
+
/** Safe presentation attributes for a data-rendered option. They land on the
|
|
31
|
+
* option's rendered row, rather than on the enclosing control. Menu-based
|
|
32
|
+
* components reserve `data-menu-*` for their own selection and focus behavior. */
|
|
33
|
+
export interface OptionPresentationProps {
|
|
34
|
+
/** CSS class on the option's rendered row. */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** Inline styles on the option's rendered row. */
|
|
37
|
+
style?: React.CSSProperties;
|
|
38
|
+
/** Additional data attributes on the option's rendered row. */
|
|
39
|
+
[key: `data-${string}`]: unknown;
|
|
40
|
+
}
|
|
30
41
|
/**
|
|
31
42
|
* Standard DOM event handlers Anta forwards to the rendered element. These are
|
|
32
43
|
* **enumerated on purpose** — rather than an open `on${string}` index signature
|
|
@@ -802,6 +813,12 @@ export interface AMenuAttributes extends BaseAttributes {
|
|
|
802
813
|
onactivedescendant?: (e: CustomEvent<{
|
|
803
814
|
id: string | null;
|
|
804
815
|
}>) => void;
|
|
816
|
+
/** Contain events so they don't bubble out of the menu surface to ancestor /
|
|
817
|
+
* document handlers. Space- or comma-separated event names
|
|
818
|
+
* (`stop-propagation="click pointerdown"`); a bare / empty attribute defaults to
|
|
819
|
+
* `click`. Menu-item / `data-menu-close` selections are always contained; this
|
|
820
|
+
* extends containment to whole event types. */
|
|
821
|
+
'stop-propagation'?: string;
|
|
805
822
|
/** ARIA role — the JSX wrapper sets this to `'menu'`. */
|
|
806
823
|
role?: string;
|
|
807
824
|
'aria-orientation'?: 'vertical' | 'horizontal';
|
package/dist/theme-anta.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: var(--text-2-brand)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: var(--text-2-brand)}@layer anta{a-button:not([tone]),a[role=button][data-anta]:not([tone]),button[data-anta]:not([tone]),input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a[role=button][data-anta]:not([tone]),.dark button[data-anta]:not([tone]),.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]){--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}a-tag:not([tone]){--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
|
|
1
|
+
:root:root,.light.light{--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--focus-ring: oklch(.55 .2 284.15)}.dark.dark{--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 14%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--focus-ring: #a897fc}@layer anta{a-button:not([tone]),a-button[tone=neutral],a[role=button][data-anta]:not([tone]),a[role=button][data-anta][tone=neutral],button[data-anta]:not([tone]),button[data-anta][tone=neutral],input[data-anta]:is([type=reset],[type=submit]):not([tone]),input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button:not([tone]),.dark a-button[tone=neutral],.dark a[role=button][data-anta]:not([tone]),.dark a[role=button][data-anta][tone=neutral],.dark button[data-anta]:not([tone]),.dark button[data-anta][tone=neutral],.dark input[data-anta]:is([type=reset],[type=submit]):not([tone]),.dark input[data-anta]:is([type=reset],[type=submit])[tone=neutral]{--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][data-anta][tone=brand],.dark button[data-anta][tone=brand],.dark input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][data-anta][tone=critical],.dark button[data-anta][tone=critical],.dark input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][data-anta][tone=info],.dark button[data-anta][tone=info],.dark input[data-anta]:is([type=reset],[type=submit])[tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][data-anta][tone=success],.dark button[data-anta][tone=success],.dark input[data-anta]:is([type=reset],[type=submit])[tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][data-anta][tone=warning],.dark button[data-anta][tone=warning],.dark input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-checkbox:not([tone]):not([tone-selected]){--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #5f4bc3;--checkbox-bg-selected-hover: #503cb4;--checkbox-bg-selected-active: #483493}a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #878089;--checkbox-bg-selected-hover: #776e77;--checkbox-bg-selected-active: #635b65}a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1f6eb2;--checkbox-bg-selected-hover: #1a5b93;--checkbox-bg-selected-active: #175082}a-checkbox[tone-selected=success]{--checkbox-bg-selected: #2a7e43;--checkbox-bg-selected-hover: #226737;--checkbox-bg-selected-active: #1f5c31}a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #c37416;--checkbox-bg-selected-hover: #ae6613;--checkbox-bg-selected-active: #995200}a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #c9302c;--checkbox-bg-selected-hover: #b02120;--checkbox-bg-selected-active: #a01c1c}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h)}.dark a-checkbox:not([tone]):not([tone-selected]){--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}.dark a-checkbox[tone-selected=brand]{--checkbox-bg-selected: #503cb4;--checkbox-bg-selected-hover: #5f4bc3;--checkbox-bg-selected-active: #7460d7}.dark a-checkbox[tone-selected=neutral]{--checkbox-bg-selected: #49424c;--checkbox-bg-selected-hover: #534c57;--checkbox-bg-selected-active: #635b65}.dark a-checkbox[tone-selected=info]{--checkbox-bg-selected: #1a5b93;--checkbox-bg-selected-hover: #1f6eb2;--checkbox-bg-selected-active: #2686d9}.dark a-checkbox[tone-selected=success]{--checkbox-bg-selected: #226737;--checkbox-bg-selected-hover: #2a7e43;--checkbox-bg-selected-active: #329550}.dark a-checkbox[tone-selected=warning]{--checkbox-bg-selected: #7f410b;--checkbox-bg-selected-hover: #995200;--checkbox-bg-selected-active: #ae6613}.dark a-checkbox[tone-selected=critical]{--checkbox-bg-selected: #b02120;--checkbox-bg-selected-hover: #c9302c;--checkbox-bg-selected-active: #de4545}.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h)}a-radio:not([tone]):not([tone-selected]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent)}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--_radio-off-bg-selected) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base)}a-radio[tone-selected=brand],a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #5f4bc3;--radio-bg-selected-hover: #503cb4;--radio-bg-selected-active: #483493}a-radio[tone-selected=neutral],a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #878089;--radio-bg-selected-hover: #776e77;--radio-bg-selected-active: #635b65}a-radio[tone-selected=info],a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1f6eb2;--radio-bg-selected-hover: #1a5b93;--radio-bg-selected-active: #175082}a-radio[tone-selected=success],a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #2a7e43;--radio-bg-selected-hover: #226737;--radio-bg-selected-active: #1f5c31}a-radio[tone-selected=warning],a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c37416;--radio-bg-selected-hover: #ae6613;--radio-bg-selected-active: #995200}a-radio[tone-selected=critical],a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #c9302c;--radio-bg-selected-hover: #b02120;--radio-bg-selected-active: #a01c1c}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h)}.dark a-radio:not([tone]):not([tone-selected]){--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65;--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}.dark a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);--radio-bg: oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}.dark a-radio[tone-selected=brand],.dark a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #503cb4;--radio-bg-selected-hover: #5f4bc3;--radio-bg-selected-active: #7460d7}.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #49424c;--radio-bg-selected-hover: #534c57;--radio-bg-selected-active: #635b65}.dark a-radio[tone-selected=info],.dark a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #1a5b93;--radio-bg-selected-hover: #1f6eb2;--radio-bg-selected-active: #2686d9}.dark a-radio[tone-selected=success],.dark a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #226737;--radio-bg-selected-hover: #2a7e43;--radio-bg-selected-active: #329550}.dark a-radio[tone-selected=warning],.dark a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #7f410b;--radio-bg-selected-hover: #995200;--radio-bg-selected-active: #ae6613}.dark a-radio[tone-selected=critical],.dark a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-bg-selected: #b02120;--radio-bg-selected-hover: #c9302c;--radio-bg-selected-active: #de4545}.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone],[tone-selected]){--radio-bg-selected: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-bg-selected-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-bg-selected-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h)}a-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: #44374b;--tag-bg-solid: #776e77;--tag-edge: var(--tag-tint);--_tag-bg-alpha: 7%;--_tag-border-alpha: 15%;--_tag-edge-alpha: 25%}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: #7460d7;--tag-edge: var(--text-2-brand);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: #2686d9;--tag-edge: var(--text-2-info);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: #329550;--tag-edge: var(--text-2-success);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: #ae6613;--tag-edge: var(--text-2-warning);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: #de4545;--tag-edge: var(--text-2-critical);--_tag-bg-alpha: 10%;--_tag-edge-alpha: 20%}.dark a-tag:not([tone]),.dark a-tag[tone=neutral]{--tag-tint: #e4d1ef;--tag-bg-solid: #635b65;--_tag-bg-alpha: 12%}.dark a-tag[tone=brand],.dark a-tag[tone=info],.dark a-tag[tone=success],.dark a-tag[tone=warning],.dark a-tag[tone=critical]{--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tag[tone=brand]{--tag-bg-solid: #5f4bc3}.dark a-tag[tone=info]{--tag-bg-solid: #1f6eb2}.dark a-tag[tone=success]{--tag-bg-solid: #2a7e43}.dark a-tag[tone=warning]{--tag-bg-solid: #995200}.dark a-tag[tone=critical]{--tag-bg-solid: #c9302c}.dark a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_tag-bg-alpha: 20%;--_tag-border-alpha: 25%;--_tag-edge-alpha: 30%}.dark a-tabs{--tabs-track-bg: color-mix(in oklch, #e4d1ef 7%, transparent);--tab-secondary-bg: color-mix(in oklch, #e4d1ef 8%, transparent)}a-input:not([tone]){--input-bg: var(--bg-1);--input-border: var(--border-2);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-hint: var(--text-5)}.dark a-input:not([status]):not([tone]){--input-border: #49424c}.dark a-input[status=success]{--input-border: var(--border-1-success)}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: #fefbfb;--input-time-border: #de4545;--input-time-border-hover: #de4545;--input-time-hint: #c9302c}a-input-time[status=warning]{--input-time-bg: #fefbf6;--input-time-border: #ae6613;--input-time-border-hover: #ae6613;--input-time-hint: #995200}a-input-time[status=success]{--input-time-bg: #f7fcf9;--input-time-border: #329550;--input-time-border-hover: #329550;--input-time-hint: #2a7e43}a-input-time[status=info]{--input-time-bg: #fbfcfe;--input-time-border: #2686d9;--input-time-border-hover: #2686d9;--input-time-hint: #175082}a-input-time[status=brand]{--input-time-bg: #fcfcfe;--input-time-border: #7460d7;--input-time-border-hover: #7460d7;--input-time-hint: #5f4bc3}.dark a-input-time[status=critical]{--input-time-bg: #1f0506;--input-time-border: #c9302c;--input-time-border-hover: #c9302c;--input-time-hint: #e25858}.dark a-input-time[status=warning]{--input-time-bg: #120a03;--input-time-border: #995200;--input-time-border-hover: #995200;--input-time-hint: #c37416}.dark a-input-time[status=success]{--input-time-bg: #041008;--input-time-border: var(--border-1-success);--input-time-border-hover: var(--border-1-success);--input-time-hint: #3aab5c}.dark a-input-time[status=info]{--input-time-bg: #040d18;--input-time-border: #1f6eb2;--input-time-border-hover: #1f6eb2;--input-time-hint: #3e93dd}.dark a-input-time[status=brand]{--input-time-bg: #0b0916;--input-time-border: #5f4bc3;--input-time-border-hover: #5f4bc3;--input-time-hint: #8270db}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-hint: var(--text-5)}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time:not([status]){--input-time-border: #49424c;--input-time-border-hover: #635b65}}
|
package/docs/changelog.md
CHANGED
|
@@ -3,6 +3,51 @@
|
|
|
3
3
|
This page tracks changes that ship in `@antadesign/anta`. Documentation-only
|
|
4
4
|
changes are not listed.
|
|
5
5
|
|
|
6
|
+
## 0.3.22 — August 20, 2026
|
|
7
|
+
|
|
8
|
+
### Changed
|
|
9
|
+
|
|
10
|
+
- JSX `Input` now truncates overflowing single-line values by default. Pass
|
|
11
|
+
`truncate={false}` to show the full value.
|
|
12
|
+
- Selecting a `Menu` item no longer bubbles the click to ancestor handlers (e.g. a
|
|
13
|
+
clickable row the menu sits in). Set `stopPropagation` to contain more event types.
|
|
14
|
+
- Open menus follow their trigger vertically as it scrolls or shifts, keeping the
|
|
15
|
+
side chosen at open.
|
|
16
|
+
|
|
17
|
+
### Fixed
|
|
18
|
+
|
|
19
|
+
- Buttons and Tags with an explicit `tone="neutral"` now receive the reference
|
|
20
|
+
theme's neutral values.
|
|
21
|
+
- Disabled and loading Buttons with `href` now use the disabled palette and block
|
|
22
|
+
activation.
|
|
23
|
+
- `Select` and `InputDate` triggers carry a `combobox` role, so their
|
|
24
|
+
`aria-expanded` is valid (WCAG 4.1.2 / `aria-allowed-attr`) — it was previously
|
|
25
|
+
set on an element with no supporting role.
|
|
26
|
+
- Checkbox, Radio, and Switch now show one focus ring around their visual control.
|
|
27
|
+
- Checkboxes without a tone now receive the Anta neutral reference values;
|
|
28
|
+
`tone="neutral"` remains equivalent.
|
|
29
|
+
- Checkbox and Radio `toneSelected` now consistently overrides `tone`, including
|
|
30
|
+
explicit neutral selected tones and custom `RadioGroup` tones.
|
|
31
|
+
- `a-input` and `a-input-time` now treat `status="neutral"` like their default
|
|
32
|
+
status.
|
|
33
|
+
|
|
34
|
+
## 0.3.21 — August 11, 2026
|
|
35
|
+
|
|
36
|
+
### Added
|
|
37
|
+
|
|
38
|
+
- `Select`, `SelectFaceted`, `InputAutocomplete`, `RadioGroup`, and `Tabs`
|
|
39
|
+
option objects accept `className`, `style`, and safe `data-*`
|
|
40
|
+
attributes on their rendered rows. `data-menu-*` remains component-owned.
|
|
41
|
+
|
|
42
|
+
### Fixed
|
|
43
|
+
|
|
44
|
+
- Tab panels no longer add a default tab stop.
|
|
45
|
+
- Menus no longer dismiss when their visible trigger changes size. They request
|
|
46
|
+
dismissal only after the trigger leaves the viewport.
|
|
47
|
+
- JSX `Text` now shows its clipped content in a tooltip by default. A nested
|
|
48
|
+
`Tooltip` replaces it, and expandable text does not add one.
|
|
49
|
+
- The Anta theme now uses the shared focus-ring colors in light and dark modes.
|
|
50
|
+
|
|
6
51
|
## 0.3.20 — August 4, 2026
|
|
7
52
|
|
|
8
53
|
### Changed
|
package/docs/components/input.md
CHANGED
|
@@ -513,8 +513,8 @@ wraps to fewer columns as it narrows. Resize the preview to see it reflow.
|
|
|
513
513
|
other controls' custom-tone knob; a `status` still overrides for validation. |
|
|
514
514
|
| `trailing?` | ReactNode | — | Content pinned to the end of the field (e.g. icons, buttons), after the
|
|
515
515
|
clear button when `clearable`. |
|
|
516
|
-
| `truncate?` | boolean |
|
|
517
|
-
this;
|
|
516
|
+
| `truncate?` | boolean | true | Ellipsize an overflowing single-line value. Read-only inputs already do
|
|
517
|
+
this; pass `false` when an editable field should show the full value. |
|
|
518
518
|
| `type?` | 'text' \| 'search' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number' | text | Single-line input type. Ignored when `multiline`. `search` is a
|
|
519
519
|
**wrapper-only** shorthand: it defaults a leading search icon and a clear
|
|
520
520
|
button (both overridable — pass your own `leading`, or `clearable={false}`)
|
package/docs/components/menu.md
CHANGED
|
@@ -240,6 +240,11 @@ run off the UI thread. Walking out from the click, the nearest marker wins:
|
|
|
240
240
|
element (or a "Done" button inside a `data-menu-open` region) can dismiss the
|
|
241
241
|
menu without being a `MenuItem`.
|
|
242
242
|
|
|
243
|
+
Selecting an item won't also click the region the menu sits in — the activation
|
|
244
|
+
click stops at the surface, so a `<Menu>` inside a clickable row or card is safe.
|
|
245
|
+
Other events still bubble; pass `stopPropagation` (`true` for clicks, or event
|
|
246
|
+
names like `"click pointerdown"`) to contain those too.
|
|
247
|
+
|
|
243
248
|
For programmatic open/close from app state, drive the `open` prop (the `state`
|
|
244
249
|
attribute, `"open"` / `"closed"`) and react via `onStateChange`, or keep a `ref`
|
|
245
250
|
and call `.open()` / `.close()` / `.toggle()`.
|
|
@@ -261,6 +266,34 @@ and call `.open()` / `.close()` / `.toggle()`.
|
|
|
261
266
|
</Menu>
|
|
262
267
|
```
|
|
263
268
|
|
|
269
|
+
## Inside a clickable row
|
|
270
|
+
|
|
271
|
+
A `<Menu>` can live inside a clickable row or card without its items triggering
|
|
272
|
+
that row's `onClick` — selecting an item is contained at the menu surface. In the
|
|
273
|
+
row below, the counter moves when you click the row, but not when you pick a menu
|
|
274
|
+
item. The kebab trigger is a plain button, so its click is stopped by hand; the menu
|
|
275
|
+
items need nothing. To contain more (a slotted control's clicks, say), add
|
|
276
|
+
`stopPropagation` to the `<Menu>`.
|
|
277
|
+
|
|
278
|
+
```tsx
|
|
279
|
+
<div className="row" onClick={openRow}>
|
|
280
|
+
<span>Quarterly report.pdf</span>
|
|
281
|
+
{/* the trigger is a plain button — stop its click so opening the
|
|
282
|
+
menu isn't a row click; the menu items need no handling */}
|
|
283
|
+
<Button
|
|
284
|
+
icon="dots-vertical"
|
|
285
|
+
aria-label="File actions"
|
|
286
|
+
onClick={(e) => e.stopPropagation()}
|
|
287
|
+
/>
|
|
288
|
+
<Menu>
|
|
289
|
+
<MenuItem icon="edit" label="Rename" onSelect={rename} />
|
|
290
|
+
<MenuItem icon="copy" label="Duplicate" onSelect={duplicate} />
|
|
291
|
+
<MenuSeparator />
|
|
292
|
+
<MenuItem icon="trash" tone="critical" label="Delete" onSelect={confirmDelete} />
|
|
293
|
+
</Menu>
|
|
294
|
+
</div>
|
|
295
|
+
```
|
|
296
|
+
|
|
264
297
|
## Links
|
|
265
298
|
|
|
266
299
|
Give a `MenuItem` an **`href`** and it renders a native `<a>` instead of the
|
package/docs/components/radio.md
CHANGED
|
@@ -27,6 +27,10 @@ styled like `Input`'s hint.
|
|
|
27
27
|
The group's own `label` and `hint` form a header **above** the options: the
|
|
28
28
|
`label` first, the `hint` (an instruction for the whole set) directly under it.
|
|
29
29
|
|
|
30
|
+
Each option can also set `className`, `style`, and `data-*`.
|
|
31
|
+
`RadioGroup` forwards them to that option's `<a-radio>` so you can add
|
|
32
|
+
per-option presentation and application metadata.
|
|
33
|
+
|
|
30
34
|
## Tones
|
|
31
35
|
|
|
32
36
|
```tsx
|
|
@@ -381,8 +381,10 @@ const recency: SelectFacetCustom<Recency> = {
|
|
|
381
381
|
Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
|
|
382
382
|
the menu is positioned relative to that element and opens when it is clicked.
|
|
383
383
|
Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
|
|
384
|
-
element
|
|
385
|
-
|
|
384
|
+
element, on a role that supports them (an Anta `Button` already carries
|
|
385
|
+
`role="button"`; otherwise add `role="combobox"`). `className`, `style`, and
|
|
386
|
+
other trigger props apply only to the default Button, so add styling and
|
|
387
|
+
attributes to the returned element. |
|
|
386
388
|
| `searchable?` | boolean | — | Adds a search field at the top of the root menu. It searches the options of
|
|
387
389
|
every `single` and `multiple` facet in one list. For example, "alice" can
|
|
388
390
|
appear under application-defined Assignee and Owner facets. `text` and
|
|
@@ -702,7 +702,9 @@ scannable list instead of hiding matches behind flyouts.
|
|
|
702
702
|
one focusable element, such as an Anta `Button`. The menu is positioned
|
|
703
703
|
relative to that element and opens when it is clicked. Do not return a
|
|
704
704
|
fragment, multiple siblings, or a non-focusable wrapper. Add
|
|
705
|
-
`aria-haspopup="menu"` and `aria-expanded={state.open}` to the element
|
|
705
|
+
`aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
|
|
706
|
+
role that supports them (an Anta `Button` already carries `role="button"`;
|
|
707
|
+
otherwise add `role="combobox"`).
|
|
706
708
|
Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
|
|
707
709
|
`className` / `style` apply only to the default field. Add styling and
|
|
708
710
|
attributes to the returned element instead. |
|
|
@@ -776,6 +778,9 @@ the same thing):
|
|
|
776
778
|
| `disabled` | `boolean` | Disable just this option. |
|
|
777
779
|
| `tone` | `string` | The row's color across label, icon, hint, selected tint, and indicator. A named tone (`neutral` / `brand` / `info` / `success` / `warning` / `critical`) or any CSS color. |
|
|
778
780
|
| `tooltip` | `React.ReactNode` | Row tooltip. In a `multiple` select with `selectAll`, a row with no `tooltip` shows the default "select only this" (Alt/⌥-click) hint; set it to override, or `''` to suppress. |
|
|
781
|
+
| `className` | `string` | CSS class on the rendered menu row. |
|
|
782
|
+
| `style` | `React.CSSProperties` | Inline styles on the rendered menu row. |
|
|
783
|
+
| `data-*` | `unknown` | Data attributes on the rendered menu row. `data-menu-*` is reserved for Select's selection and keyboard behavior. |
|
|
779
784
|
| `[key: string]` | `unknown` | Your own data — attach anything and read it back in `renderOption`. |
|
|
780
785
|
|
|
781
786
|
**`SelectGroup`** — a heading with items rendered inline beneath it.
|
package/docs/components/text.md
CHANGED
|
@@ -45,6 +45,11 @@ truncation. Both modes use `-webkit-line-clamp` inside
|
|
|
45
45
|
prefix (Firefox 68+, Chrome, Safari, Edge). The host gets `min-width: 0`
|
|
46
46
|
so truncation works inside flex and grid containers.
|
|
47
47
|
|
|
48
|
+
JSX `Text` adds a `truncatedOnly` tooltip containing its text content. It
|
|
49
|
+
opens only when the text clips. Nest a `<Tooltip>` to replace that tooltip;
|
|
50
|
+
an empty nested tooltip suppresses it. `expandable` text has no automatic
|
|
51
|
+
tooltip because its own control reveals the content.
|
|
52
|
+
|
|
48
53
|
```tsx
|
|
49
54
|
{/* Single line */}
|
|
50
55
|
<Text truncate>{longSentence}</Text>
|
|
@@ -54,6 +59,23 @@ so truncation works inside flex and grid containers.
|
|
|
54
59
|
<Text truncate={3}>{longSentence}</Text>
|
|
55
60
|
```
|
|
56
61
|
|
|
62
|
+
### Use a tooltip with the web component
|
|
63
|
+
|
|
64
|
+
`<a-text>` does not add a tooltip. Nest `<a-tooltip truncated-only>` and pass
|
|
65
|
+
the full text as its content:
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<a-text truncate="1" style="max-width: 260px; cursor: help">
|
|
69
|
+
A long status message that is clipped until you hover it.
|
|
70
|
+
<a-tooltip truncated-only>
|
|
71
|
+
A long status message that is clipped until you hover it.
|
|
72
|
+
</a-tooltip>
|
|
73
|
+
</a-text>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
`a-text.isTruncated` is a read-only layout measurement. Read it on the UI
|
|
77
|
+
thread when you compose custom truncation behavior.
|
|
78
|
+
|
|
57
79
|
Pair `expandable` with `truncate` to let the reader reveal the full text.
|
|
58
80
|
The fade and chevron appear only when the clamped content overflows; text
|
|
59
81
|
that fits gets neither. Single-line truncation fades on the right edge,
|
|
@@ -98,9 +120,11 @@ more" and "Show less". `collapsible` takes effect only with `expandable`.
|
|
|
98
120
|
kept while lightness/chroma are pinned per priority in oklch. |
|
|
99
121
|
| `truncate?` | boolean \| number | — | Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
|
|
100
122
|
single line; any integer ≥ 2 clamps to that many lines; `0` or a
|
|
101
|
-
negative value means no truncation.
|
|
102
|
-
|
|
103
|
-
|
|
123
|
+
negative value means no truncation. A clipped, non-expandable JSX
|
|
124
|
+
`Text` shows its text content in a tooltip by default. Nest a
|
|
125
|
+
`<Tooltip>` to provide your own tooltip instead. Uses the
|
|
126
|
+
`-webkit-line-clamp` technique, supported in all major browsers
|
|
127
|
+
(Firefox 68+, Chrome, Safari, Edge). |
|
|
104
128
|
|
|
105
129
|
Use the web component directly when you are not using React or Preact and a native control does not fit.
|
|
106
130
|
|
package/docs/install-config.md
CHANGED
|
@@ -15,6 +15,7 @@ of a floating tag such as `"latest"`.
|
|
|
15
15
|
import '@antadesign/anta/tokens.css' // CSS custom properties
|
|
16
16
|
import '@antadesign/anta/reset.css' // reset and typography defaults
|
|
17
17
|
import '@antadesign/anta/elements' // registers <a-*> elements
|
|
18
|
+
import '@antadesign/anta/theme-anta.css' // optional hand-tuned reference palette
|
|
18
19
|
import { Progress } from '@antadesign/anta'
|
|
19
20
|
|
|
20
21
|
<Progress value={42} label="Uploaded" hint="3 of 7" />
|
|
@@ -36,6 +37,10 @@ recommended; the reference theme is optional.
|
|
|
36
37
|
Load `tokens.css` before element CSS. Elements read its variables; without it,
|
|
37
38
|
they render unstyled.
|
|
38
39
|
|
|
40
|
+
To use the optional reference palette, import `theme-anta.css` after the element
|
|
41
|
+
registration import. It ships in `@antadesign/anta`; omit it to keep the
|
|
42
|
+
seed-derived default palette or provide your own theme.
|
|
43
|
+
|
|
39
44
|
### Cascade layers
|
|
40
45
|
|
|
41
46
|
Anta's reset and element CSS live in `@layer anta`. `tokens.css` declares
|
package/docs/theming.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Theming
|
|
2
2
|
|
|
3
|
+
## Reference palette
|
|
4
|
+
|
|
5
|
+
`@antadesign/anta` ships an optional hand-tuned reference palette at
|
|
6
|
+
`@antadesign/anta/theme-anta.css`. Import it after the tokens, reset, and element
|
|
7
|
+
registration imports to replace the seed-derived default:
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import '@antadesign/anta/tokens.css'
|
|
11
|
+
import '@antadesign/anta/reset.css'
|
|
12
|
+
import '@antadesign/anta/elements'
|
|
13
|
+
import '@antadesign/anta/theme-anta.css'
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Omit the final import to use the default palette, or define your own theme.
|
|
17
|
+
|
|
3
18
|
Anta's palette is generative. Every color in the system derives from six tone seeds (`--anta-seed-neutral`, `--anta-seed-brand`, `--anta-seed-info`, …), and a seed contributes only its hue: the lightness and chroma of every background, text, border, and component state come from Anta's formulas, tuned per role and per theme. Reskinning a tone is one custom property, and the whole scale re-derives in both light and dark:
|
|
4
19
|
|
|
5
20
|
```css
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antadesign/anta",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.22",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"docs",
|
|
10
10
|
"NOTICES.md"
|
|
11
11
|
],
|
|
12
|
-
"packageManager": "pnpm@
|
|
12
|
+
"packageManager": "pnpm@10.11.1",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
15
|
"types": "./dist/index.d.ts",
|
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
"stop": "node scripts/dev-stop.mjs",
|
|
58
58
|
"typecheck": "tsc --noEmit -p src/tsconfig.json",
|
|
59
59
|
"lint": "node scripts/lint-getters.mjs",
|
|
60
|
+
"verify": "pnpm run lint && pnpm run typecheck && pnpm --filter anta-site run docs:api",
|
|
60
61
|
"icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
|
|
61
62
|
"clean": "rm -rf dist",
|
|
62
63
|
"prepare": "pnpm run build",
|
|
@@ -76,11 +77,5 @@
|
|
|
76
77
|
},
|
|
77
78
|
"peerDependencies": {
|
|
78
79
|
"react": "^18.0.0 || ^19.0.0"
|
|
79
|
-
},
|
|
80
|
-
"pnpm": {
|
|
81
|
-
"onlyBuiltDependencies": [
|
|
82
|
-
"esbuild",
|
|
83
|
-
"sharp"
|
|
84
|
-
]
|
|
85
80
|
}
|
|
86
81
|
}
|