@antadesign/anta 0.3.34 → 0.3.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +14 -1
- package/README.md +9 -0
- package/dist/anta_helpers.d.ts +46 -30
- package/dist/anta_helpers.js +66 -25
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +2 -1333
- package/dist/components/Banner.d.ts +25 -40
- package/dist/components/Banner.js +15 -17
- package/dist/components/Button.js +1 -0
- package/dist/components/ButtonCopy.js +3 -2
- package/dist/components/Calendar.js +13 -13
- package/dist/components/Card.d.ts +9 -17
- package/dist/components/Card.js +50 -46
- package/dist/components/Dialog.d.ts +1 -0
- package/dist/components/Dialog.js +16 -10
- package/dist/components/Expander.d.ts +6 -21
- package/dist/components/Expander.js +24 -23
- package/dist/components/Icon.d.ts +8 -14
- package/dist/components/Input.d.ts +77 -96
- package/dist/components/Input.js +23 -27
- package/dist/components/InputAutocomplete.d.ts +29 -10
- package/dist/components/InputAutocomplete.js +25 -8
- package/dist/components/InputDate.js +2 -2
- package/dist/components/InputTime.d.ts +10 -4
- package/dist/components/InputTime.js +20 -16
- package/dist/components/Loader.d.ts +2 -2
- package/dist/components/Menu.d.ts +5 -4
- package/dist/components/Menu.js +13 -8
- package/dist/components/MenuItem.js +1 -14
- package/dist/components/MenuItemCopy.js +2 -2
- package/dist/components/Panel.d.ts +3 -1
- package/dist/components/Panel.js +17 -11
- package/dist/components/Progress.d.ts +21 -23
- package/dist/components/Progress.js +13 -9
- package/dist/components/RadioGroup.js +6 -8
- package/dist/components/{select-parts.css → Select.css} +1 -1
- package/dist/components/Select.d.ts +53 -35
- package/dist/components/Select.js +53 -97
- package/dist/components/SelectFaceted.d.ts +7 -3
- package/dist/components/SelectFaceted.js +21 -9
- package/dist/components/Slider.d.ts +28 -11
- package/dist/components/Slider.js +20 -20
- package/dist/components/Steps.css +1 -1
- package/dist/components/Steps.js +1 -11
- package/dist/components/Tabs.d.ts +17 -20
- package/dist/components/Tabs.js +5 -8
- package/dist/components/Text.d.ts +55 -36
- package/dist/components/Text.js +35 -22
- package/dist/components/Title.d.ts +16 -26
- package/dist/components/Title.js +2 -1
- package/dist/components/Toaster.js +9 -2
- package/dist/components/Tooltip.d.ts +10 -15
- package/dist/components/copy-props.d.ts +14 -3
- package/dist/components/copy-props.js +14 -3
- package/dist/components/select-tree.d.ts +24 -0
- package/dist/components/select-tree.js +35 -0
- package/dist/element-base.d.ts +10 -0
- package/dist/element-base.js +15 -0
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-banner.d.ts +4 -1
- package/dist/elements/a-banner.js +22 -112
- package/dist/elements/a-button.d.ts +2 -1
- package/dist/elements/a-button.js +18 -1
- package/dist/elements/a-calendar.d.ts +14 -13
- package/dist/elements/a-calendar.js +29 -24
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-card.d.ts +0 -9
- package/dist/elements/a-card.js +0 -184
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-copy.css +1 -1
- package/dist/elements/a-copy.d.ts +1 -5
- package/dist/elements/a-copy.js +129 -108
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-dialog.d.ts +1 -1
- package/dist/elements/a-dialog.js +66 -194
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.d.ts +4 -30
- package/dist/elements/a-expander.js +85 -344
- package/dist/elements/a-icon.d.ts +5 -23
- package/dist/elements/a-icon.js +1 -2
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.d.ts +2 -1
- package/dist/elements/a-input-time.js +101 -168
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.d.ts +10 -8
- package/dist/elements/a-input.js +155 -230
- package/dist/elements/a-loader.d.ts +5 -8
- package/dist/elements/a-loader.js +1 -2
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu-item.d.ts +5 -3
- package/dist/elements/a-menu-item.js +5 -1
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-menu.d.ts +5 -7
- package/dist/elements/a-menu.js +383 -299
- package/dist/elements/a-panel.css +1 -1
- package/dist/elements/a-panel.js +19 -37
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-progress.d.ts +0 -22
- package/dist/elements/a-progress.js +0 -100
- package/dist/elements/a-radio-group.d.ts +1 -1
- package/dist/elements/a-radio-group.js +6 -4
- package/dist/elements/a-select-faceted.d.ts +1 -1
- package/dist/elements/a-select-faceted.js +1 -1
- package/dist/elements/a-select.d.ts +1 -1
- package/dist/elements/a-select.js +1 -1
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-slider.d.ts +11 -3
- package/dist/elements/a-slider.js +244 -242
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-tab.css +1 -1
- package/dist/elements/a-tabs.css +1 -1
- package/dist/elements/a-tabs.d.ts +1 -1
- package/dist/elements/a-tabs.js +6 -4
- package/dist/elements/a-tag.css +1 -1
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-text.d.ts +6 -43
- package/dist/elements/a-text.js +110 -193
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-toast.css +1 -1
- package/dist/elements/a-toast.d.ts +10 -45
- package/dist/elements/a-toast.js +80 -66
- package/dist/elements/a-toaster.css +1 -1
- package/dist/elements/a-toaster.js +9 -44
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +1 -1
- package/dist/elements/a-tooltip.js +142 -136
- package/dist/elements/copy-behavior.d.ts +1 -1
- package/dist/elements/copy-behavior.js +21 -21
- package/dist/elements/index.d.ts +3 -3
- package/dist/elements/index.js +3 -7
- package/dist/elements/input-focus-modality.d.ts +15 -0
- package/dist/elements/input-focus-modality.js +44 -0
- package/dist/elements/input-trailing-actions.d.ts +5 -0
- package/dist/elements/input-trailing-actions.js +38 -0
- package/dist/elements/shadow-aria.d.ts +2 -0
- package/dist/elements/shadow-aria.js +2 -1
- package/dist/elements/value-input.d.ts +3 -0
- package/dist/elements/value-input.js +12 -0
- package/dist/general_types.d.ts +103 -96
- package/dist/index.d.ts +1 -1
- package/dist/input-events.d.ts +4 -0
- package/dist/input-events.js +15 -0
- package/dist/jsx-runtime.d.ts +70 -23
- package/dist/jsx-runtime.js +26 -19
- package/dist/native-event-props.d.ts +2 -0
- package/dist/native-event-props.js +10 -0
- package/dist/reset.css +1 -1
- package/dist/theme-antithesis.css +10 -1
- package/dist/theme-antune.css +1 -1
- package/docs/accessibility.md +17 -3
- package/docs/changelog.md +348 -2
- package/docs/comparison.md +2 -2
- package/docs/components/avatar.md +5 -0
- package/docs/components/banner.md +117 -187
- package/docs/components/button.md +22 -0
- package/docs/components/card.md +74 -28
- package/docs/components/checkbox.md +9 -10
- package/docs/components/dialog.md +83 -32
- package/docs/components/expander.md +198 -435
- package/docs/components/icon.md +11 -17
- package/docs/components/input-autocomplete.md +152 -52
- package/docs/components/input-date.md +175 -148
- package/docs/components/input-time.md +81 -38
- package/docs/components/input.md +343 -349
- package/docs/components/loader.md +2 -1
- package/docs/components/menu.md +35 -6
- package/docs/components/panel.md +18 -0
- package/docs/components/progress.md +83 -49
- package/docs/components/radio.md +39 -43
- package/docs/components/select-faceted.md +54 -7
- package/docs/components/select.md +390 -386
- package/docs/components/slider.md +136 -19
- package/docs/components/steps.md +2 -1
- package/docs/components/switch.md +8 -9
- package/docs/components/tabs.md +110 -104
- package/docs/components/text.md +110 -86
- package/docs/components/title.md +47 -33
- package/docs/components/toaster.md +242 -84
- package/docs/components/tooltip.md +204 -113
- package/docs/install-config.md +183 -26
- package/docs/packages/plot.md +170 -148
- package/docs/theming.md +7 -0
- package/package.json +41 -3
- package/theme-antithesis-license.md +66 -0
package/dist/theme-antune.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.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: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--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{--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: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--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.theme{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{letter-spacing:.02ch}a-tag[allcaps]{letter-spacing:.08ch}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: light-dark(#635b65, #534c57);--button-bg-primary-hover: light-dark(#534c57, #635b65);--button-bg-primary-active: light-dark(#49424c, #938d96);--button-bg-secondary-rest: light-dark(#45374c12, #e4d1ef1c);--button-bg-secondary-hover: light-dark(#44374b1a, #e4d1ef24);--button-bg-secondary-active: light-dark(#44374b26, #e4d1ef2e);--button-fg-secondary-rest: light-dark(#534c57, #c1b9c1);--button-fg-secondary-hover: light-dark(#49424c, #d4ced4);--button-fg-tertiary-rest: light-dark(#635b65, #afa9b1);--button-fg-tertiary-hover: light-dark(#534c57, #afa9b1);--button-bg-tertiary-hover: light-dark(#44374b0d, #e4d1ef14);--button-bg-tertiary-active: light-dark(#44374b1a, #e4d1ef21);--button-fg-quaternary-rest: light-dark(#635b65, #afa9b1);--button-fg-quaternary-hover: light-dark(#49424c, #cac4ca)}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: light-dark(#5f4bc3, #503cb4);--button-bg-primary-hover: light-dark(#503cb4, #5f4bc3);--button-bg-primary-active: light-dark(#483493, #7460d7);--button-bg-secondary-rest: light-dark(#7460d71a, #7460d73b);--button-bg-secondary-hover: light-dark(#7460d726, #7460d747);--button-bg-secondary-active: light-dark(#7460d733, #7460d754);--button-fg-secondary-rest: light-dark(#5f4bc3, #c5baff);--button-fg-secondary-hover: light-dark(#503cb4, #d2cbf6);--button-fg-tertiary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-tertiary-hover: light-dark(#503cb4, #bcb1f1);--button-bg-tertiary-hover: light-dark(#7460d71a, #7460d73b);--button-bg-tertiary-active: light-dark(#7460d726, #7460d747);--button-fg-quaternary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-quaternary-hover: light-dark(#483493, #c7bef4)}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: light-dark(#c9302c, #b02120);--button-bg-primary-hover: light-dark(#b02120, #c9302c);--button-bg-primary-active: light-dark(#a01c1c, #de4545);--button-bg-secondary-rest: light-dark(#de45451a, #de45453b);--button-bg-secondary-hover: light-dark(#de454526, #de454547);--button-bg-secondary-active: light-dark(#de454533, #de454554);--button-fg-secondary-rest: light-dark(#c9302c, #ffabac);--button-fg-secondary-hover: light-dark(#b02120, #f4c2c2);--button-fg-tertiary-rest: light-dark(#c9302c, #e78e90);--button-fg-tertiary-hover: light-dark(#b02120, #efa4a4);--button-bg-tertiary-hover: light-dark(#de45451a, #de45453b);--button-bg-tertiary-active: light-dark(#de454526, #de454547);--button-fg-quaternary-rest: light-dark(#c9302c, #e78e90);--button-fg-quaternary-hover: light-dark(#a01c1c, #ffabac)}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: light-dark(#1f6eb2, #1a5b93);--button-bg-primary-hover: light-dark(#1a5b93, #1f6eb2);--button-bg-primary-active: light-dark(#175082, #2686d9);--button-bg-secondary-rest: light-dark(#2686d91a, #2686d93b);--button-bg-secondary-hover: light-dark(#2686d926, #2686d947);--button-bg-secondary-active: light-dark(#2686d933, #2686d954);--button-fg-secondary-rest: light-dark(#1f6eb2, #9ed2ff);--button-fg-secondary-hover: light-dark(#1a5b93, #bad6f3);--button-fg-tertiary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-tertiary-hover: light-dark(#1a5b93, #93c5ec);--button-bg-tertiary-hover: light-dark(#2686d91a, #2686d93b);--button-bg-tertiary-active: light-dark(#2686d926, #2686d947);--button-fg-quaternary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-quaternary-hover: light-dark(#175082, #a6cdef)}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: light-dark(#2a7e43, #226737);--button-bg-primary-hover: light-dark(#226737, #2a7e43);--button-bg-primary-active: light-dark(#1f5c31, #329550);--button-bg-secondary-rest: light-dark(#3295501a, #3295503b);--button-bg-secondary-hover: light-dark(#32955026, #32955047);--button-bg-secondary-active: light-dark(#32955033, #32955054);--button-fg-secondary-rest: light-dark(#2a7e43, #8ceca9);--button-fg-secondary-hover: light-dark(#226737, #b3e5c2);--button-fg-tertiary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-tertiary-hover: light-dark(#226737, #88d7a0);--button-bg-tertiary-hover: light-dark(#3295501a, #3295503b);--button-bg-tertiary-active: light-dark(#32955026, #32955047);--button-fg-quaternary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-quaternary-hover: light-dark(#1f5c31, #9ddeb1)}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: light-dark(#c37416, #7f410b);--button-bg-primary-hover: light-dark(#ae6613, #995200);--button-bg-primary-active: light-dark(#995200, #ae6613);--button-bg-secondary-rest: light-dark(#c374161a, #c374163b);--button-bg-secondary-hover: light-dark(#c3741626, #c3741647);--button-bg-secondary-active: light-dark(#c3741633, #c3741654);--button-fg-secondary-rest: light-dark(#c37416, #f7c06e);--button-fg-secondary-hover: light-dark(#ae6613, #f3cc91);--button-fg-tertiary-rest: light-dark(#c37416, #e1a452);--button-fg-tertiary-hover: light-dark(#ae6613, #edb25a);--button-bg-tertiary-hover: light-dark(#c374161a, #c374163b);--button-bg-tertiary-active: light-dark(#c3741626, #c3741647);--button-fg-quaternary-rest: light-dark(#c37416, #e1a452);--button-fg-quaternary-hover: light-dark(#995200, #f0bf75)}:is(a-checkbox,input[data-anta][type=checkbox]):not([tone]){--checkbox-border-neutral: light-dark(#d4ced4, #49424c);--checkbox-border-hover: light-dark(#c1b9c1, #635b65);--checkbox-border-active: light-dark(#938d96, #776e77);--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: light-dark(#5f4bc3, #503cb4);--checkbox-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--checkbox-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=neutral]{--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: light-dark(#1f6eb2, #1a5b93);--checkbox-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--checkbox-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: light-dark(#2a7e43, #226737);--checkbox-bg-selected-hover: light-dark(#226737, #2a7e43);--checkbox-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: light-dark(#c37416, #7f410b);--checkbox-bg-selected-hover: light-dark(#ae6613, #995200);--checkbox-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-bg-selected: light-dark(#c9302c, #b02120);--checkbox-bg-selected-hover: light-dark(#b02120, #c9302c);--checkbox-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fcfcfe, #0b0916);--checkbox-border: light-dark(#bcb1f1, #483493);--checkbox-border-hover: light-dark(#9e8eeb, #5f4bc3);--checkbox-border-active: light-dark(#9081df, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fbfcfe, #040d18);--checkbox-border: light-dark(#93c5ec, #175082);--checkbox-border-hover: light-dark(#69ace5, #1f6eb2);--checkbox-border-active: light-dark(#56a1e1, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]:not([tone-scope=selected]){--checkbox-bg: light-dark(#f7fcf9, #041008);--checkbox-border: light-dark(#88d7a0, #1f5c31);--checkbox-border-hover: light-dark(#5bc87b, #2a7e43);--checkbox-border-active: light-dark(#44c169, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbf6, #120a03);--checkbox-border: light-dark(#edb25a, #6a3b0c);--checkbox-border-hover: light-dark(#e09127, #995200);--checkbox-border-active: light-dark(#d88118, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbfb, #190405);--checkbox-border: light-dark(#efa4a4, #a01c1c);--checkbox-border-hover: light-dark(#e87f7f, #c9302c);--checkbox-border-active: light-dark(#e56c6c, #de4545)}:is(a-radio,input[data-anta][type=radio]):not([tone]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65;--radio-border-neutral: light-dark(#d4ced4, #49424c);--radio-border: var(--radio-border-neutral);--radio-border-hover: light-dark(#c1b9c1, #635b65);--radio-border-active: light-dark(#9f99a1, #776e77);--radio-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-radio,input[data-anta][type=radio])[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg-selected: light-dark(#5f4bc3, #503cb4);--radio-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--radio-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65}:is(a-radio,input[data-anta][type=radio])[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg-selected: light-dark(#1f6eb2, #1a5b93);--radio-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--radio-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg-selected: light-dark(#2a7e43, #226737);--radio-bg-selected-hover: light-dark(#226737, #2a7e43);--radio-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg-selected: light-dark(#c37416, #7f410b);--radio-bg-selected-hover: light-dark(#ae6613, #995200);--radio-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg-selected: light-dark(#c9302c, #b02120);--radio-bg-selected-hover: light-dark(#b02120, #c9302c);--radio-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-radio,input[data-anta][type=radio])[tone=brand]:not([tone-scope=selected]),a-radio-group[tone=brand]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=brand][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fcfcfe, #0b0916);--radio-border: light-dark(#bcb1f1, #483493);--radio-border-hover: light-dark(#9e8eeb, #5f4bc3);--radio-border-active: light-dark(#9081df, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=info]:not([tone-scope=selected]),a-radio-group[tone=info]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=info][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fbfcfe, #040d18);--radio-border: light-dark(#93c5ec, #175082);--radio-border-hover: light-dark(#69ace5, #1f6eb2);--radio-border-active: light-dark(#56a1e1, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success]:not([tone-scope=selected]),a-radio-group[tone=success]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=success][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#f7fcf9, #041008);--radio-border: light-dark(#88d7a0, #1f5c31);--radio-border-hover: light-dark(#5bc87b, #2a7e43);--radio-border-active: light-dark(#44c169, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning]:not([tone-scope=selected]),a-radio-group[tone=warning]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=warning][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbf6, #120a03);--radio-border: light-dark(#edb25a, #6a3b0c);--radio-border-hover: light-dark(#e09127, #995200);--radio-border-active: light-dark(#d88118, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical]:not([tone-scope=selected]),a-radio-group[tone=critical]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=critical][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbfb, #190405);--radio-border: light-dark(#efa4a4, #a01c1c);--radio-border-hover: light-dark(#e87f7f, #c9302c);--radio-border-active: light-dark(#e56c6c, #de4545)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])):not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]))[tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-border-base: color-mix(in oklch, var(--radio-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}a-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: light-dark(#44374b, #e4d1ef);--tag-bg-solid: light-dark(#776e77, #635b65);--tag-edge: var(--tag-tint);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 7%, transparent), color-mix(in oklch, var(--tag-tint) 12%, transparent));--tag-border: color-mix(in oklch, var(--tag-tint) 15%, transparent)}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: light-dark(#7460d7, #5f4bc3);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: light-dark(#2686d9, #1f6eb2);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: light-dark(#329550, #2a7e43);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: light-dark(#ae6613, #995200);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: light-dark(#de4545, #c9302c);--tag-edge: var(--text-2-critical)}a-tag:not([tone])[priority=tertiary],a-tag[tone=neutral][priority=tertiary]{--tag-border: color-mix(in oklch, var(--tag-edge) 25%, transparent)}a-tabs:is(:not([tone]),[tone=""],[tone=neutral]):not(:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral]))){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), color-mix(in oklch, #e4d1ef 7%, transparent) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), color-mix(in oklch, #e4d1ef 8%, transparent) )}a-input:not([tone]){--input-border: light-dark(var(--border-2), #49424c);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: light-dark(#fefbfb, #1f0506);--input-border: light-dark(#de4545, #c9302c);--input-hint: light-dark(#c9302c, #e25858)}a-input[status=warning]{--input-bg: light-dark(#fefbf6, #120a03);--input-border: light-dark(#ae6613, #995200);--input-hint: light-dark(#995200, #c37416)}a-input[status=success]{--input-bg: light-dark(#f7fcf9, #041008);--input-border: light-dark(#329550, var(--border-1-success));--input-hint: light-dark(#2a7e43, #3aab5c)}a-input[status=info]{--input-bg: light-dark(#fbfcfe, #040d18);--input-border: light-dark(#2686d9, #1f6eb2);--input-hint: light-dark(#175082, #3e93dd)}a-input[status=brand]{--input-bg: light-dark(#fcfcfe, #0b0916);--input-border: light-dark(#7460d7, #5f4bc3);--input-hint: light-dark(#5f4bc3, #8270db)}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: light-dark(var(--border-2), #49424c);--input-time-border-hover: light-dark(var(--border-1), #635b65);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: light-dark(#fefbfb, #1f0506);--input-time-border: light-dark(#de4545, #c9302c);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#c9302c, #e25858)}a-input-time[status=warning]{--input-time-bg: light-dark(#fefbf6, #120a03);--input-time-border: light-dark(#ae6613, #995200);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#995200, #c37416)}a-input-time[status=success]{--input-time-bg: light-dark(#f7fcf9, #041008);--input-time-border: light-dark(#329550, var(--border-1-success));--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#2a7e43, #3aab5c)}a-input-time[status=info]{--input-time-bg: light-dark(#fbfcfe, #040d18);--input-time-border: light-dark(#2686d9, #1f6eb2);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#175082, #3e93dd)}a-input-time[status=brand]{--input-time-bg: light-dark(#fcfcfe, #0b0916);--input-time-border: light-dark(#7460d7, #5f4bc3);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#5f4bc3, #8270db)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-hint: var(--text-5)}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.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: #7a737c;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--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{--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: #7c737c;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--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.theme{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{letter-spacing:.05ch}a-tooltip{--_tooltip-letter-spacing: .02ch}a-progress-label{letter-spacing:.03em}a-menu-group-label{letter-spacing:.06em}a-input{--_input-adornment-font-stretch: 88%}a-tag{letter-spacing:.02ch}a-tag[allcaps]{letter-spacing:.08ch}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: light-dark(#635b65, #534c57);--button-bg-primary-hover: light-dark(#534c57, #635b65);--button-bg-primary-active: light-dark(#49424c, #938d96);--button-bg-secondary-rest: light-dark(#45374c12, #e4d1ef1c);--button-bg-secondary-hover: light-dark(#44374b1a, #e4d1ef24);--button-bg-secondary-active: light-dark(#44374b26, #e4d1ef2e);--button-fg-secondary-rest: light-dark(#534c57, #c1b9c1);--button-fg-secondary-hover: light-dark(#49424c, #d4ced4);--button-fg-tertiary-rest: light-dark(#635b65, #afa9b1);--button-fg-tertiary-hover: light-dark(#534c57, #afa9b1);--button-bg-tertiary-hover: light-dark(#44374b0d, #e4d1ef14);--button-bg-tertiary-active: light-dark(#44374b1a, #e4d1ef21);--button-fg-quaternary-rest: light-dark(#635b65, #afa9b1);--button-fg-quaternary-hover: light-dark(#49424c, #cac4ca)}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: light-dark(#5f4bc3, #503cb4);--button-bg-primary-hover: light-dark(#503cb4, #5f4bc3);--button-bg-primary-active: light-dark(#483493, #7460d7);--button-bg-secondary-rest: light-dark(#7460d71a, #7460d73b);--button-bg-secondary-hover: light-dark(#7460d726, #7460d747);--button-bg-secondary-active: light-dark(#7460d733, #7460d754);--button-fg-secondary-rest: light-dark(#5f4bc3, #c5baff);--button-fg-secondary-hover: light-dark(#503cb4, #d2cbf6);--button-fg-tertiary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-tertiary-hover: light-dark(#503cb4, #bcb1f1);--button-bg-tertiary-hover: light-dark(#7460d71a, #7460d73b);--button-bg-tertiary-active: light-dark(#7460d726, #7460d747);--button-fg-quaternary-rest: light-dark(#5f4bc3, #ada0ee);--button-fg-quaternary-hover: light-dark(#483493, #c7bef4)}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: light-dark(#c9302c, #b02120);--button-bg-primary-hover: light-dark(#b02120, #c9302c);--button-bg-primary-active: light-dark(#a01c1c, #de4545);--button-bg-secondary-rest: light-dark(#de45451a, #de45453b);--button-bg-secondary-hover: light-dark(#de454526, #de454547);--button-bg-secondary-active: light-dark(#de454533, #de454554);--button-fg-secondary-rest: light-dark(#c9302c, #ffabac);--button-fg-secondary-hover: light-dark(#b02120, #f4c2c2);--button-fg-tertiary-rest: light-dark(#c9302c, #e78e90);--button-fg-tertiary-hover: light-dark(#b02120, #efa4a4);--button-bg-tertiary-hover: light-dark(#de45451a, #de45453b);--button-bg-tertiary-active: light-dark(#de454526, #de454547);--button-fg-quaternary-rest: light-dark(#c9302c, #e78e90);--button-fg-quaternary-hover: light-dark(#a01c1c, #ffabac)}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: light-dark(#1f6eb2, #1a5b93);--button-bg-primary-hover: light-dark(#1a5b93, #1f6eb2);--button-bg-primary-active: light-dark(#175082, #2686d9);--button-bg-secondary-rest: light-dark(#2686d91a, #2686d93b);--button-bg-secondary-hover: light-dark(#2686d926, #2686d947);--button-bg-secondary-active: light-dark(#2686d933, #2686d954);--button-fg-secondary-rest: light-dark(#1f6eb2, #9ed2ff);--button-fg-secondary-hover: light-dark(#1a5b93, #bad6f3);--button-fg-tertiary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-tertiary-hover: light-dark(#1a5b93, #93c5ec);--button-bg-tertiary-hover: light-dark(#2686d91a, #2686d93b);--button-bg-tertiary-active: light-dark(#2686d926, #2686d947);--button-fg-quaternary-rest: light-dark(#1f6eb2, #7db6e8);--button-fg-quaternary-hover: light-dark(#175082, #a6cdef)}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: light-dark(#2a7e43, #226737);--button-bg-primary-hover: light-dark(#226737, #2a7e43);--button-bg-primary-active: light-dark(#1f5c31, #329550);--button-bg-secondary-rest: light-dark(#3295501a, #3295503b);--button-bg-secondary-hover: light-dark(#32955026, #32955047);--button-bg-secondary-active: light-dark(#32955033, #32955054);--button-fg-secondary-rest: light-dark(#2a7e43, #8ceca9);--button-fg-secondary-hover: light-dark(#226737, #b3e5c2);--button-fg-tertiary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-tertiary-hover: light-dark(#226737, #88d7a0);--button-bg-tertiary-hover: light-dark(#3295501a, #3295503b);--button-bg-tertiary-active: light-dark(#32955026, #32955047);--button-fg-quaternary-rest: light-dark(#2a7e43, #74cd8e);--button-fg-quaternary-hover: light-dark(#1f5c31, #9ddeb1)}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: light-dark(#c37416, #7f410b);--button-bg-primary-hover: light-dark(#ae6613, #995200);--button-bg-primary-active: light-dark(#995200, #ae6613);--button-bg-secondary-rest: light-dark(#c374161a, #c374163b);--button-bg-secondary-hover: light-dark(#c3741626, #c3741647);--button-bg-secondary-active: light-dark(#c3741633, #c3741654);--button-fg-secondary-rest: light-dark(#c37416, #f7c06e);--button-fg-secondary-hover: light-dark(#ae6613, #f3cc91);--button-fg-tertiary-rest: light-dark(#c37416, #e1a452);--button-fg-tertiary-hover: light-dark(#ae6613, #edb25a);--button-bg-tertiary-hover: light-dark(#c374161a, #c374163b);--button-bg-tertiary-active: light-dark(#c3741626, #c3741647);--button-fg-quaternary-rest: light-dark(#c37416, #e1a452);--button-fg-quaternary-hover: light-dark(#995200, #f0bf75)}:is(a-checkbox,input[data-anta][type=checkbox]):not([tone]){--checkbox-border-neutral: light-dark(#d4ced4, #49424c);--checkbox-border-hover: light-dark(#c1b9c1, #635b65);--checkbox-border-active: light-dark(#938d96, #776e77);--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65;--checkbox-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]{--checkbox-bg-selected: light-dark(#5f4bc3, #503cb4);--checkbox-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--checkbox-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=neutral]{--checkbox-bg-selected: light-dark(#878089, #49424c);--checkbox-bg-selected-hover: light-dark(#776e77, #534c57);--checkbox-bg-selected-active: #635b65}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]{--checkbox-bg-selected: light-dark(#1f6eb2, #1a5b93);--checkbox-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--checkbox-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]{--checkbox-bg-selected: light-dark(#2a7e43, #226737);--checkbox-bg-selected-hover: light-dark(#226737, #2a7e43);--checkbox-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]{--checkbox-bg-selected: light-dark(#c37416, #7f410b);--checkbox-bg-selected-hover: light-dark(#ae6613, #995200);--checkbox-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]{--checkbox-bg-selected: light-dark(#c9302c, #b02120);--checkbox-bg-selected-hover: light-dark(#b02120, #c9302c);--checkbox-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=brand]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fcfcfe, #0b0916);--checkbox-border: light-dark(#bcb1f1, #483493);--checkbox-border-hover: light-dark(#9e8eeb, #5f4bc3);--checkbox-border-active: light-dark(#9081df, #7460d7)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=info]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fbfcfe, #040d18);--checkbox-border: light-dark(#93c5ec, #175082);--checkbox-border-hover: light-dark(#69ace5, #1f6eb2);--checkbox-border-active: light-dark(#56a1e1, #2686d9)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=success]:not([tone-scope=selected]){--checkbox-bg: light-dark(#f7fcf9, #041008);--checkbox-border: light-dark(#88d7a0, #1f5c31);--checkbox-border-hover: light-dark(#5bc87b, #2a7e43);--checkbox-border-active: light-dark(#44c169, #329550)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=warning]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbf6, #120a03);--checkbox-border: light-dark(#edb25a, #6a3b0c);--checkbox-border-hover: light-dark(#e09127, #995200);--checkbox-border-active: light-dark(#d88118, #ae6613)}:is(a-checkbox,input[data-anta][type=checkbox])[tone=critical]:not([tone-scope=selected]){--checkbox-bg: light-dark(#fefbfb, #190405);--checkbox-border: light-dark(#efa4a4, #a01c1c);--checkbox-border-hover: light-dark(#e87f7f, #c9302c);--checkbox-border-active: light-dark(#e56c6c, #de4545)}:is(a-radio,input[data-anta][type=radio]):not([tone]){--radio-border-width: 1.5px;--radio-bg: var(--bg-1);--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65;--radio-border-neutral: light-dark(#d4ced4, #49424c);--radio-border: var(--radio-border-neutral);--radio-border-hover: light-dark(#c1b9c1, #635b65);--radio-border-active: light-dark(#9f99a1, #776e77);--radio-border-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent))}:is(a-radio,input[data-anta][type=radio])[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg-selected: light-dark(#5f4bc3, #503cb4);--radio-bg-selected-hover: light-dark(#503cb4, #5f4bc3);--radio-bg-selected-active: light-dark(#483493, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-bg-selected: light-dark(#878089, #49424c);--radio-bg-selected-hover: light-dark(#776e77, #534c57);--radio-bg-selected-active: #635b65}:is(a-radio,input[data-anta][type=radio])[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg-selected: light-dark(#1f6eb2, #1a5b93);--radio-bg-selected-hover: light-dark(#1a5b93, #1f6eb2);--radio-bg-selected-active: light-dark(#175082, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg-selected: light-dark(#2a7e43, #226737);--radio-bg-selected-hover: light-dark(#226737, #2a7e43);--radio-bg-selected-active: light-dark(#1f5c31, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg-selected: light-dark(#c37416, #7f410b);--radio-bg-selected-hover: light-dark(#ae6613, #995200);--radio-bg-selected-active: light-dark(#995200, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg-selected: light-dark(#c9302c, #b02120);--radio-bg-selected-hover: light-dark(#b02120, #c9302c);--radio-bg-selected-active: light-dark(#a01c1c, #de4545)}:is(a-radio,input[data-anta][type=radio])[tone=brand]:not([tone-scope=selected]),a-radio-group[tone=brand]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=brand][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fcfcfe, #0b0916);--radio-border: light-dark(#bcb1f1, #483493);--radio-border-hover: light-dark(#9e8eeb, #5f4bc3);--radio-border-active: light-dark(#9081df, #7460d7)}:is(a-radio,input[data-anta][type=radio])[tone=info]:not([tone-scope=selected]),a-radio-group[tone=info]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=info][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fbfcfe, #040d18);--radio-border: light-dark(#93c5ec, #175082);--radio-border-hover: light-dark(#69ace5, #1f6eb2);--radio-border-active: light-dark(#56a1e1, #2686d9)}:is(a-radio,input[data-anta][type=radio])[tone=success]:not([tone-scope=selected]),a-radio-group[tone=success]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=success][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#f7fcf9, #041008);--radio-border: light-dark(#88d7a0, #1f5c31);--radio-border-hover: light-dark(#5bc87b, #2a7e43);--radio-border-active: light-dark(#44c169, #329550)}:is(a-radio,input[data-anta][type=radio])[tone=warning]:not([tone-scope=selected]),a-radio-group[tone=warning]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=warning][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbf6, #120a03);--radio-border: light-dark(#edb25a, #6a3b0c);--radio-border-hover: light-dark(#e09127, #995200);--radio-border-active: light-dark(#d88118, #ae6613)}:is(a-radio,input[data-anta][type=radio])[tone=critical]:not([tone-scope=selected]),a-radio-group[tone=critical]:not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone=critical][tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(#fefbfb, #190405);--radio-border: light-dark(#efa4a4, #a01c1c);--radio-border-hover: light-dark(#e87f7f, #c9302c);--radio-border-active: light-dark(#e56c6c, #de4545)}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .5 c h), oklch(from var(--radio-tone-source) .45 c h));--radio-bg-selected-hover: light-dark(oklch(from var(--radio-tone-source) .45 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .57 c h))}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])):not([tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]))[tone-scope=selected] a-radio[tone-scope=all]:not([tone]){--radio-bg: light-dark(oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h), oklch(from var(--radio-off-tone-source) .15 calc(c*.18) h));--_radio-border-base: color-mix(in oklch, var(--radio-bg-selected) 70%, var(--radio-border-neutral));--radio-border: light-dark(oklch(from var(--_radio-border-base) calc(l + .17) c h), var(--_radio-border-base));--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: light-dark(var(--_radio-border-base), oklch(from var(--_radio-border-base) calc(l + .17) c h))}a-tag:not([tone]),a-tag[tone=neutral]{--tag-tint: light-dark(#44374b, #e4d1ef);--tag-bg-solid: light-dark(#776e77, #635b65);--tag-edge: var(--tag-tint);--tag-bg-secondary: light-dark(color-mix(in oklch, var(--tag-tint) 7%, transparent), color-mix(in oklch, var(--tag-tint) 12%, transparent));--tag-border: color-mix(in oklch, var(--tag-tint) 15%, transparent)}a-tag[tone=brand]{--tag-tint: #7460d7;--tag-bg-solid: light-dark(#7460d7, #5f4bc3);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tint: #2686d9;--tag-bg-solid: light-dark(#2686d9, #1f6eb2);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tint: #329550;--tag-bg-solid: light-dark(#329550, #2a7e43);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tint: #c37416;--tag-bg-solid: light-dark(#ae6613, #995200);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tint: #de4545;--tag-bg-solid: light-dark(#de4545, #c9302c);--tag-edge: var(--text-2-critical)}a-tag:not([tone])[priority=tertiary],a-tag[tone=neutral][priority=tertiary]{--tag-border: color-mix(in oklch, var(--tag-edge) 25%, transparent)}a-tabs:is(:not([tone]),[tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), color-mix(in oklch, #e4d1ef 7%, transparent) )}a-tabs{--tab-secondary-neutral-bg: light-dark( oklch(from var(--anta-seed-neutral) .55 .008 h / .03), color-mix(in oklch, #e4d1ef 8%, transparent) )}a-input:not([tone]){--input-border: light-dark(var(--border-2), #49424c);--input-hint: var(--text-3)}a-input[status=critical]{--input-bg: light-dark(#fefbfb, #1f0506);--input-border: light-dark(#de4545, #c9302c);--input-hint: light-dark(#c9302c, #e25858)}a-input[status=warning]{--input-bg: light-dark(#fefbf6, #120a03);--input-border: light-dark(#ae6613, #995200);--input-hint: light-dark(#995200, #c37416)}a-input[status=success]{--input-bg: light-dark(#f7fcf9, #041008);--input-border: light-dark(#329550, var(--border-1-success));--input-hint: light-dark(#2a7e43, #3aab5c)}a-input[status=info]{--input-bg: light-dark(#fbfcfe, #040d18);--input-border: light-dark(#2686d9, #1f6eb2);--input-hint: light-dark(#175082, #3e93dd)}a-input[status=brand]{--input-bg: light-dark(#fcfcfe, #0b0916);--input-border: light-dark(#7460d7, #5f4bc3);--input-hint: light-dark(#5f4bc3, #8270db)}a-input:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[status]:disabled{--input-bg: light-dark(#44374b12, #e4d1ef0d);--input-border: light-dark(#44374b26, #e4d1ef1f);--input-hint: var(--text-5)}a-input[priority=secondary]:disabled,a-input[priority=tertiary]:disabled{--input-bg: transparent}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: light-dark(var(--border-2), #49424c);--input-time-border-hover: light-dark(var(--border-1), #635b65);--input-time-hint: var(--text-3)}a-input-time[status=critical]{--input-time-bg: light-dark(#fefbfb, #1f0506);--input-time-border: light-dark(#de4545, #c9302c);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#c9302c, #e25858)}a-input-time[status=warning]{--input-time-bg: light-dark(#fefbf6, #120a03);--input-time-border: light-dark(#ae6613, #995200);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#995200, #c37416)}a-input-time[status=success]{--input-time-bg: light-dark(#f7fcf9, #041008);--input-time-border: light-dark(#329550, var(--border-1-success));--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#2a7e43, #3aab5c)}a-input-time[status=info]{--input-time-bg: light-dark(#fbfcfe, #040d18);--input-time-border: light-dark(#2686d9, #1f6eb2);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#175082, #3e93dd)}a-input-time[status=brand]{--input-time-bg: light-dark(#fcfcfe, #0b0916);--input-time-border: light-dark(#7460d7, #5f4bc3);--input-time-border-hover: var(--input-time-border);--input-time-hint: light-dark(#5f4bc3, #8270db)}a-input-time:disabled{--input-time-bg: light-dark(#44374b12, #e4d1ef0d);--input-time-border: light-dark(#44374b26, #e4d1ef1f);--input-time-border-hover: var(--input-time-border);--input-time-hint: var(--text-5)}}
|
package/docs/accessibility.md
CHANGED
|
@@ -55,6 +55,20 @@ When `Text` is `truncated` *without* `expandable`, the hidden portion is also hi
|
|
|
55
55
|
|
|
56
56
|
## ARIA lives in JSX wrappers, not in web components
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
JSX wrappers author accessibility intent through `role`, `aria-*` declarations,
|
|
59
|
+
labels, and hints. Raw-element consumers provide the same declarations and
|
|
60
|
+
slotted content. Web components keep consumer-owned light DOM declarative.
|
|
61
|
+
|
|
62
|
+
When focus lands on a native control inside shadow DOM, the web component
|
|
63
|
+
delegates host ARIA to that control. It connects slotted labels and hints through
|
|
64
|
+
the browser's [label references](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements)
|
|
65
|
+
and [description references](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements).
|
|
66
|
+
The browser derives the accessible name and description from the referenced
|
|
67
|
+
elements' current content. Editing that text does not require copying it into
|
|
68
|
+
`aria-label` or `aria-description`; replacing an element requires updating the
|
|
69
|
+
reference. Explicit consumer-authored ARIA takes precedence.
|
|
70
|
+
|
|
71
|
+
This DOM wiring belongs in the web component, which owns the native shadow
|
|
72
|
+
control. JSX wrappers do not need DOM refs, so the same composition works with
|
|
73
|
+
React, Preact, and worker-driven renderers. The component still updates states
|
|
74
|
+
such as `aria-expanded`; element references derive names and descriptions.
|
package/docs/changelog.md
CHANGED
|
@@ -3,6 +3,352 @@
|
|
|
3
3
|
This page tracks changes that ship in `@antadesign/anta`. Documentation-only
|
|
4
4
|
changes are not listed.
|
|
5
5
|
|
|
6
|
+
## 0.3.35 — October 18, 2026
|
|
7
|
+
|
|
8
|
+
### Added
|
|
9
|
+
|
|
10
|
+
- [Panel's layout placeholder](/panel/#styling) exposes `::part(placeholder)`
|
|
11
|
+
for styling the reserved region while maximized.
|
|
12
|
+
|
|
13
|
+
- [Text's inert expansion mode](/text/#truncation-and-expansion):
|
|
14
|
+
`expandableInert` makes the folded, overflowing preview one expand target and
|
|
15
|
+
skips content interactions until expanded. Text that fits remains interactive.
|
|
16
|
+
|
|
17
|
+
- [Input button fields](/input/#styling) expose `::part(input-label)` for their
|
|
18
|
+
value or placeholder. [Select](/select/#migrate-field-styles) uses the same part.
|
|
19
|
+
|
|
20
|
+
- [Select's `dimActions` prop](/select/) controls its trigger adornments. Pass
|
|
21
|
+
`false` to keep them visible instead of dimming them until hover or focus.
|
|
22
|
+
|
|
23
|
+
- [Menu's header and footer slots](/menu/#styling) expose styling parts, and
|
|
24
|
+
[Dialog's optional regions](/dialog/#styling) expose CSS states for assigned
|
|
25
|
+
header and footer content.
|
|
26
|
+
|
|
27
|
+
- [Title typeface](/title/#typeface): `font` sets a title in `serif`, `sans-serif`,
|
|
28
|
+
or `monospace` and overrides the theme's level default.
|
|
29
|
+
|
|
30
|
+
### Breaking
|
|
31
|
+
|
|
32
|
+
- [Icon](/icon/) and [Loader](/loader/) imports load styles without registering
|
|
33
|
+
custom element classes. If an integration requires a defined tag, call the
|
|
34
|
+
existing `register_a_icon()` or `register_a_loader()` export explicitly.
|
|
35
|
+
|
|
36
|
+
- [Calendar selection](/input-date/#calendar) leaves authored input attributes
|
|
37
|
+
unchanged during uncontrolled picks, reset, and restoration. Its `.value`
|
|
38
|
+
getter now returns `null` when empty; InputDate retains its empty text value
|
|
39
|
+
(`''`).
|
|
40
|
+
|
|
41
|
+
- [Slider controlled values](/slider/#managing-the-value) change only when the
|
|
42
|
+
application updates `value`, including on form reset. Callbacks report requested
|
|
43
|
+
values; read the element's `value` for its applied result. Uncontrolled
|
|
44
|
+
interaction, reset, and restoration no longer rewrite input attributes. Remove
|
|
45
|
+
`value` to release control while retaining the applied number.
|
|
46
|
+
|
|
47
|
+
- [Browser support](/install/#browser-support) requires Chrome/Edge 135+ and
|
|
48
|
+
Firefox 136+. Safari/iOS Safari remains 17.4+. Input labels and hints use live
|
|
49
|
+
ARIA element references without a copied-text fallback.
|
|
50
|
+
|
|
51
|
+
- [Browser hydration](/install/#browser-hydration) requires
|
|
52
|
+
`configure(h, Fragment, hooks, { hydratingEvents: true })` before mounting.
|
|
53
|
+
Client-only apps and worker renderers forward handlers immediately by default,
|
|
54
|
+
without an extra render for listener setup.
|
|
55
|
+
|
|
56
|
+
- [Custom renderer configuration](/install/#preact-without-compat) replaces the
|
|
57
|
+
hooks object as a whole. Pass your runtime's hooks rather than selecting a few;
|
|
58
|
+
missing hooks report an error instead of using another renderer's hooks.
|
|
59
|
+
|
|
60
|
+
- [Panel inside an application shadow root](/panel/#styling) now requires a
|
|
61
|
+
stylesheet link to `@antadesign/anta/elements/a-panel.css` inside that root
|
|
62
|
+
for its maximized layout. Document styles cannot reach its internal parts.
|
|
63
|
+
|
|
64
|
+
- Normal part overrides for [Dialog](/dialog/#styling), [Menu](/menu/#styling),
|
|
65
|
+
[Slider](/slider/#styling), and [Panel](/panel/#styling) follow Anta's document
|
|
66
|
+
cascade layers. Move overrides from `base` to `components`, `utilities`, or
|
|
67
|
+
unlayered CSS.
|
|
68
|
+
|
|
69
|
+
- [Select single selection](/select/#managing-the-value) uses `null` for a
|
|
70
|
+
controlled empty value, and Clear reports `null` instead of `undefined`. Use
|
|
71
|
+
`V | null` for single-select state and callbacks; reset with `value={null}`.
|
|
72
|
+
Omitted or `undefined` values remain uncontrolled, and multiple selection
|
|
73
|
+
continues to use arrays with `[]` for an empty selection.
|
|
74
|
+
|
|
75
|
+
- [Select's default field](/select/#migrate-field-styles) uses `a-input[button]`,
|
|
76
|
+
which receives `className` and `style`. Replace `a-select-field > a-button`
|
|
77
|
+
selectors with `.my-select::part(field)` on your field class, and use
|
|
78
|
+
`.my-select::part(input-label)` instead of `a-button-label` for selected text.
|
|
79
|
+
Existing raw `a-select-field` compositions retain their CSS, JSX types, and
|
|
80
|
+
label and hint behavior.
|
|
81
|
+
|
|
82
|
+
- [SelectFaceted text editors](/select-faceted/#styling) use the CSS-only
|
|
83
|
+
`a-select-faceted-text` wrapper. Replace selectors such as
|
|
84
|
+
`a-menu div[data-menu-open] > a-input` with
|
|
85
|
+
`a-menu a-select-faceted-text > a-input`, and move selectors that depend on the
|
|
86
|
+
former inline `style` attribute to the region tag.
|
|
87
|
+
|
|
88
|
+
- [InputTime slot groups](/input-time/#styling) use `a-input-time-*` tags. Update
|
|
89
|
+
selectors that target their former spans; existing slot and part names remain.
|
|
90
|
+
|
|
91
|
+
- [Expander raw markup](/expander/#web-component) uses named regions instead of
|
|
92
|
+
slot attributes. Put `level` on `a-expander-summary`, select built-in artwork
|
|
93
|
+
with `a-expander-indicator shape="chevron"`, and place that region before the
|
|
94
|
+
title or after the actions to choose its position.
|
|
95
|
+
|
|
96
|
+
- [Banner raw markup](/banner/#web-component) uses light-DOM regions instead of
|
|
97
|
+
shadow slots and `::part()`. Group actions in `a-banner-actions`.
|
|
98
|
+
|
|
99
|
+
- [Progress styling](/progress/#styling) uses light-DOM selectors instead of
|
|
100
|
+
`::part()`. `AProgressElement` and `register_a_progress` are removed; raw HTML
|
|
101
|
+
supplies its own ARIA.
|
|
102
|
+
|
|
103
|
+
- Expandable [Text](/text/#expand-raw-html) requires
|
|
104
|
+
`@antadesign/anta/elements/a-button` when importing elements individually. The
|
|
105
|
+
full bundle and elements barrel include it. JSX creates the expansion control;
|
|
106
|
+
raw HTML authors supply it using the linked example.
|
|
107
|
+
|
|
108
|
+
- [Card raw markup](/card/#migrate-from-shadow-parts) uses `a-card-*` regions
|
|
109
|
+
instead of shadow slots and `::part()`. Link Cards use
|
|
110
|
+
`a[data-anta-card-link] > a-card-layout`. `ACardElement` and `register_a_card`
|
|
111
|
+
are removed.
|
|
112
|
+
|
|
113
|
+
- The [Antithesis theme](/theming/) is copyright Antithesis Operations LLC and
|
|
114
|
+
now has a separate license. Noncommercial use is free; commercial use requires
|
|
115
|
+
prior written permission. Earlier MIT-licensed copies keep their original terms.
|
|
116
|
+
Antune and the default styles remain MIT licensed.
|
|
117
|
+
|
|
118
|
+
### Changed
|
|
119
|
+
|
|
120
|
+
- Default styles for [Input](/input/#styling), [InputTime](/input-time/#styling),
|
|
121
|
+
[Menu](/menu/#styling), [Dialog](/dialog/#styling), [Tooltip](/tooltip/#styling),
|
|
122
|
+
[Copy feedback](/button/#copy-feedback), [Toaster](/toaster/#styling),
|
|
123
|
+
[Expander](/expander/#styling), [Slider](/slider/#styling), and
|
|
124
|
+
[Panel](/panel/#styling) load from external CSS under strict CSP.
|
|
125
|
+
|
|
126
|
+
- [Input's native decorations](/input/#styling) may remain visible in some
|
|
127
|
+
browsers, including number steppers in Chrome 135 and raw HTML search controls.
|
|
128
|
+
|
|
129
|
+
- [Banner](/banner/) renders its layout before registration. Dismissal leaves
|
|
130
|
+
children mounted.
|
|
131
|
+
|
|
132
|
+
- [Card](/card/) renders its layout and native link directly in HTML. Generic
|
|
133
|
+
anchor display rules preserve its media and content arrangement.
|
|
134
|
+
|
|
135
|
+
- [Progress](/progress/) renders its fill and loading animation without
|
|
136
|
+
JavaScript. Native `<progress data-anta>` remains a standalone control.
|
|
137
|
+
|
|
138
|
+
- [Text](/text/) renders and truncates in light DOM. Expansion preserves authored
|
|
139
|
+
markup, and one-way expansion hides its control instead of removing it.
|
|
140
|
+
|
|
141
|
+
- [Expander rounding](/expander/#round-and-outdent) uses a `1rem` radius when
|
|
142
|
+
`round` is `true`, independent of title level and header height. Explicit
|
|
143
|
+
radius values remain supported, and native `details[data-anta][round]` uses the
|
|
144
|
+
same default.
|
|
145
|
+
|
|
146
|
+
- [Select's shared stylesheet](/select/#styling) is named `components/Select.css`.
|
|
147
|
+
The previous `components/select.css` and `components/select-parts.css` imports
|
|
148
|
+
remain supported.
|
|
149
|
+
|
|
150
|
+
- [Tabs rounding](/tabs/#styling): a custom `round` radius applies to the tabs
|
|
151
|
+
and sliding indicator as well as the primary track.
|
|
152
|
+
|
|
153
|
+
- [Tabs sizing](/tabs/#size) in the Antithesis theme matches text buttons'
|
|
154
|
+
horizontal padding: 10px, 12px, and 14px per side for small, medium, and large.
|
|
155
|
+
|
|
156
|
+
### Fixed
|
|
157
|
+
|
|
158
|
+
#### Banner
|
|
159
|
+
|
|
160
|
+
- [Visibility and dismissal](/banner/#controlled-vs-uncontrolled) work after an
|
|
161
|
+
initially dismissed notice and after moving between documents. Nested banners
|
|
162
|
+
keep their alignment and close styling independent, and empty action regions
|
|
163
|
+
take no layout space.
|
|
164
|
+
|
|
165
|
+
#### Calendar
|
|
166
|
+
|
|
167
|
+
- [Default values](/input-date/#calendar) return `null` when `.defaultValue` is
|
|
168
|
+
unset, so writing it back preserves the absence of a default.
|
|
169
|
+
- [Property inputs](/input-date/#calendar) assigned before registration take
|
|
170
|
+
effect when the element upgrades, including while detached.
|
|
171
|
+
- [Unbounded year menus](/input-date/#calendar) center on the displayed year, including
|
|
172
|
+
dates supplied through `value` and `defaultValue`.
|
|
173
|
+
- [Controlled selection](/input-date/#calendar) keeps form values in sync in
|
|
174
|
+
React and Preact, including selecting a previous date again.
|
|
175
|
+
|
|
176
|
+
#### Copy feedback
|
|
177
|
+
|
|
178
|
+
- [Copying](/button/#copy-feedback) remains available while feedback CSS loads.
|
|
179
|
+
Disconnecting clears feedback and prevents stale clipboard results from
|
|
180
|
+
reopening it after reconnection.
|
|
181
|
+
|
|
182
|
+
#### Dialog
|
|
183
|
+
|
|
184
|
+
- [Accessible names](/dialog/) follow header text edits in place, including
|
|
185
|
+
React and Preact updates after hydration.
|
|
186
|
+
- [Named triggers](/dialog/#triggers) release their listeners on removal
|
|
187
|
+
and document adoption.
|
|
188
|
+
|
|
189
|
+
#### Expander
|
|
190
|
+
|
|
191
|
+
- [Expansion](/expander/) keeps content clipped until opening finishes, then
|
|
192
|
+
restores overflow. Reconnection preserves applied state.
|
|
193
|
+
|
|
194
|
+
#### Input
|
|
195
|
+
|
|
196
|
+
- [Clear and trailing actions](/input/#leading-trailing-and-clear) fit Anta
|
|
197
|
+
buttons to the field height while preserving padding and natural text width.
|
|
198
|
+
Icon-only Button and ButtonCopy actions are square, and raw Anta buttons can
|
|
199
|
+
opt in with `data-anta-icon-only`.
|
|
200
|
+
- [Multiline layout](/input/#multiline) applies when `rows` is set without
|
|
201
|
+
`multiline`, keeping actions aligned to the first line.
|
|
202
|
+
- [Trailing spacing](/input/#styling) honors inherited `--input-trailing-inset`
|
|
203
|
+
overrides for text and actions. Mixed content and nested buttons keep the text
|
|
204
|
+
inset by default.
|
|
205
|
+
- [Form names](/input/#forms) reflect to the host attribute, preserving named
|
|
206
|
+
form lookup and name-based selectors in React 19.
|
|
207
|
+
- [Focus rings](/input/#styling) follow the focused field, and typing in large
|
|
208
|
+
forms no longer refreshes focus across unrelated Inputs. Focus tracking releases
|
|
209
|
+
listeners when fields disconnect.
|
|
210
|
+
- [Clear actions](/input/#events) affect only their owning field, including
|
|
211
|
+
nested Inputs.
|
|
212
|
+
- [Button-backed fields](/input/) and [Select](/select/) describe the value
|
|
213
|
+
only when a separate label supplies the accessible name. Empty fields keep
|
|
214
|
+
placeholders out of the value description.
|
|
215
|
+
- [WebKit multiline sizing](/input/#multiline) uses JS autosizing to avoid crashes
|
|
216
|
+
in collapsed disclosures. Fallback measurements preserve page and textarea
|
|
217
|
+
scroll positions.
|
|
218
|
+
|
|
219
|
+
#### InputAutocomplete
|
|
220
|
+
|
|
221
|
+
- [Value ownership](/input-autocomplete/#managing-the-value) retains the latest
|
|
222
|
+
text, including `''`, when `value` is omitted or becomes `undefined`.
|
|
223
|
+
Uncontrolled editing resumes from that text; form reset still restores
|
|
224
|
+
`defaultValue`.
|
|
225
|
+
- [Field callbacks](/input-autocomplete/#events) run alongside text updates and
|
|
226
|
+
popup handling. Form reset restores the supplied default text without opening
|
|
227
|
+
suggestions or moving focus from another control.
|
|
228
|
+
- [Suggestion interaction](/input-autocomplete/#keyboard-interaction) leaves
|
|
229
|
+
composition keys with the input method and keeps rows out of Tab order.
|
|
230
|
+
Editing or result changes, including label and hint edits, clear stale active
|
|
231
|
+
suggestions.
|
|
232
|
+
- [Popup interaction](/input-autocomplete/#keyboard-interaction) keeps field focus
|
|
233
|
+
on padding clicks and preserves keyboard selection when a nested control's
|
|
234
|
+
disabled state changes. Results stay dismissed after focus leaves.
|
|
235
|
+
|
|
236
|
+
#### InputDate
|
|
237
|
+
|
|
238
|
+
- [Calendar triggers](/input-date/) ignore label and hint clicks. The underlying
|
|
239
|
+
[Menu field anchors](/menu/) respond only to clicks within their field part.
|
|
240
|
+
|
|
241
|
+
#### InputTime
|
|
242
|
+
|
|
243
|
+
- [Touch editing](/input-time/#the-field) waits for a completed tap before
|
|
244
|
+
focusing field padding. Canceled gestures no longer affect later segment
|
|
245
|
+
selection.
|
|
246
|
+
- [Editing and clearing](/input-time/) retain incomplete edits on reconnection,
|
|
247
|
+
preserve a custom tone with neutral status, and use live label and hint
|
|
248
|
+
references. Read-only fields prevent edits, and `onClearClick` can cancel clear
|
|
249
|
+
actions.
|
|
250
|
+
- [Blur commits](/input-time/#web-component) finish when a field is removed.
|
|
251
|
+
Read-only focus visits emit `change` only for a pending edit, and disabling a
|
|
252
|
+
parent fieldset clears keyboard focus state.
|
|
253
|
+
- [AM/PM labels](/input-time/) reserve space for the locale's longest label
|
|
254
|
+
without native autosizing, so switching periods keeps the field width.
|
|
255
|
+
|
|
256
|
+
#### Menu
|
|
257
|
+
|
|
258
|
+
- [Custom selection indicators](/select/#custom-indicators) use external layout
|
|
259
|
+
styles, preserving alignment and row activation under a strict CSP.
|
|
260
|
+
|
|
261
|
+
- [Trigger replacement](/menu/) preserves keyboard interaction, popup
|
|
262
|
+
relationships, and open state, including [Select custom triggers](/select/#custom-trigger).
|
|
263
|
+
Anchored popovers reposition to follow their replacement.
|
|
264
|
+
- [Positioning and dismissal](/menu/) keep RTL menus within the viewport and
|
|
265
|
+
open stacks independent between documents. Closing or removing a menu clears
|
|
266
|
+
pending navigation and positioning work.
|
|
267
|
+
- [Custom rounding](/menu/#styling) applies to the container in every theme.
|
|
268
|
+
- [Combobox cursor events](/menu/) report a cleared autocomplete cursor once,
|
|
269
|
+
including when an edit also updates the suggestion rows.
|
|
270
|
+
|
|
271
|
+
#### Panel
|
|
272
|
+
|
|
273
|
+
- [Maximization](/panel/#styling) restores normal layout and focus handling
|
|
274
|
+
if native popover opening fails or is canceled.
|
|
275
|
+
- [React hydration](/panel/#controlled) retains state-change callbacks.
|
|
276
|
+
|
|
277
|
+
#### Progress
|
|
278
|
+
|
|
279
|
+
- [Loading stripes](/progress/) match their travel distance to the bar's width
|
|
280
|
+
during playback and resizing. Their blurred edges stay outside the track,
|
|
281
|
+
preventing jumps and edge flicker when the animation repeats.
|
|
282
|
+
|
|
283
|
+
#### Select
|
|
284
|
+
|
|
285
|
+
- [Field layout and validation](/select/#styling) preserve leading content and
|
|
286
|
+
the chevron's status color in server-rendered HTML under `style-src-attr 'none'`.
|
|
287
|
+
|
|
288
|
+
#### SelectFaceted
|
|
289
|
+
|
|
290
|
+
- [Text-editor padding](/select-faceted/#styling) survives server rendering under
|
|
291
|
+
`style-src-attr 'none'`.
|
|
292
|
+
- [Searches and text drafts](/select-faceted/) keep working when React defers
|
|
293
|
+
state updates.
|
|
294
|
+
|
|
295
|
+
#### Slider
|
|
296
|
+
|
|
297
|
+
- [Dragging](/slider/#relative-dragging) honors consumer cancellation and ends
|
|
298
|
+
when disabled or disconnected. Parent updates remain applied during a drag,
|
|
299
|
+
and rebasing preserves the final commit. Ancestor propagation boundaries no
|
|
300
|
+
longer disable pointer or keyboard input.
|
|
301
|
+
- [Accessible names](/slider/#range-values) follow live label text, and scalar
|
|
302
|
+
disabled state is exposed to accessibility tools.
|
|
303
|
+
- [Inherited RTL](/slider/#relative-dragging), including CSS `direction`, aligns
|
|
304
|
+
pointer movement, thumbs, value bubbles, and markers with the rail.
|
|
305
|
+
- [Numeric bounds](/slider/#managing-the-value) contain small decimal values.
|
|
306
|
+
- [Property inputs](/slider/#managing-the-value) assigned before registration
|
|
307
|
+
take effect when the element upgrades, including while detached. A runtime
|
|
308
|
+
`value={null}` uses uncontrolled defaults and the matching scalar or range
|
|
309
|
+
presentation.
|
|
310
|
+
- [Restored ranges](/slider/#range-values) keep each thumb on its restored
|
|
311
|
+
endpoint when the application takes control.
|
|
312
|
+
|
|
313
|
+
#### RadioGroup and Tabs
|
|
314
|
+
|
|
315
|
+
- [RadioGroup](/radio/) and [Tabs](/tabs/) retain the latest applied selection
|
|
316
|
+
when the JSX `value` prop is omitted or the raw `state` attribute is removed.
|
|
317
|
+
The keyboard tab stop and active tab panel follow the retained selection.
|
|
318
|
+
- [Per-option tones](/tabs/#tone) color the selected indicator without recoloring
|
|
319
|
+
the track. An explicit neutral option resets the indicator on a toned strip.
|
|
320
|
+
|
|
321
|
+
#### Steps
|
|
322
|
+
|
|
323
|
+
- [Vertical panels](/steps/#orientation) follow the selected step using external
|
|
324
|
+
CSS, including when a Content Security Policy blocks inline style attributes.
|
|
325
|
+
|
|
326
|
+
#### Text
|
|
327
|
+
|
|
328
|
+
- [Keyboard order](/text/#truncation-and-expansion) places expansion controls
|
|
329
|
+
before content links. Raw HTML authors place the control before `a-text-content`.
|
|
330
|
+
- [Folded content](/text/#truncation-and-expansion) stays in place when a clipped
|
|
331
|
+
link receives focus and remains selectable.
|
|
332
|
+
- [Mixed imports](/text/#truncation-and-expansion) preserve expansion controls'
|
|
333
|
+
accessible names and expanded state when granular entries load before the bundle.
|
|
334
|
+
- [Control layout](/text/#truncation-and-expansion) spans the full width for
|
|
335
|
+
multiline text and the inline end for single-line text. Collapse controls leave
|
|
336
|
+
revealed links clickable without adding padding to folded text or changing its
|
|
337
|
+
width on expansion.
|
|
338
|
+
|
|
339
|
+
#### Toaster
|
|
340
|
+
|
|
341
|
+
- [Countdown progress](/toaster/) survives interrupted exits and reconnection.
|
|
342
|
+
Reattaching an already-dismissed toast emits completion for its new owner.
|
|
343
|
+
- [DOM-node content](/toaster/#web-component) clears to `null` when its prop is
|
|
344
|
+
removed. Refilled fragments can be assigned again to replace their previous
|
|
345
|
+
children.
|
|
346
|
+
|
|
347
|
+
#### Tooltip
|
|
348
|
+
|
|
349
|
+
- [Interactive content](/tooltip/) stays open during keyboard travel, and
|
|
350
|
+
reduced motion disables fades.
|
|
351
|
+
|
|
6
352
|
## 0.3.34 — October 5, 2026
|
|
7
353
|
|
|
8
354
|
### Added
|
|
@@ -68,7 +414,7 @@ changes are not listed.
|
|
|
68
414
|
|
|
69
415
|
### Added
|
|
70
416
|
|
|
71
|
-
- [Expander indicators](/expander/#
|
|
417
|
+
- [Expander indicators](/expander/#actions-and-indicators) can sit after header actions and
|
|
72
418
|
use built-in chevron, triangle, or plus visuals. Custom indicators can rotate
|
|
73
419
|
as one node or switch between closed and open nodes.
|
|
74
420
|
- [Box measurements](/box/#measurements) can include
|
|
@@ -89,7 +435,7 @@ changes are not listed.
|
|
|
89
435
|
|
|
90
436
|
### Fixed
|
|
91
437
|
|
|
92
|
-
- [Expander indicators](/expander/#
|
|
438
|
+
- [Expander indicators](/expander/#actions-and-indicators) leave the mark empty for
|
|
93
439
|
unrecognized strings and numbers instead of displaying them as text.
|
|
94
440
|
- [Menu submenus](/menu/#submenus) stay open when a nested
|
|
95
441
|
date picker closes under the pointer outside the submenu. Hover dismissal
|
package/docs/comparison.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
| System | Version | Frameworks | Styling | License | Browser baseline | Browser policy |
|
|
8
8
|
| --- | --- | --- | --- | --- | --- | --- |
|
|
9
|
-
| [Anta](https://anta.design) | @antadesign/anta 0.3.26 | Web components; React and Preact wrappers | Plain CSS + CSS-variable tokens | MIT |
|
|
9
|
+
| [Anta](https://anta.design) | @antadesign/anta 0.3.26 | Web components; React and Preact wrappers | Plain CSS + CSS-variable tokens | MIT | 2025 | Chrome / Edge 135 (2025), Safari 17.4 (2024), and Firefox 136 (2025), or later. Requires custom elements, ElementInternals, ARIA element references, custom states, Popover, and modern CSS. |
|
|
10
10
|
| [MUI (Material UI)](https://mui.com/material-ui/) | @mui/material 9.4.0 | React | CSS-in-JS (Emotion) | MIT core + paid MUI X | 2024 | Chrome 117 (2023), Edge 121 (2024), Firefox 121 (2024), and Safari 17.0 (2023), or later. |
|
|
11
11
|
| [Mantine](https://mantine.dev) | @mantine/core 9.6.0 | React | CSS Modules + CSS variables | MIT | 2022 | Tested on Chromium 108 (2022), Firefox 101 (2022), and Safari 15.4 (2022), or later. |
|
|
12
12
|
| [Astryx](https://astryx.atmeta.com) | @astryxdesign/core 0.5.3 | React | StyleX (precompiled atomic CSS) | MIT | 2024 / 2026 | Two documented tiers: functional support at Baseline 2024 and full fidelity at Baseline 2026. Older functional-tier browsers need a positioning fallback for anchored overlays. |
|
|
@@ -48,7 +48,7 @@ download costs.
|
|
|
48
48
|
| Gzipped size | ~100 KiB |
|
|
49
49
|
| Measured version | @antadesign/anta 0.3.16 |
|
|
50
50
|
| Measurement scope | Wrappers, elements, CSS, tokens, and reset. Excludes React, the branded theme, and stickers. |
|
|
51
|
-
| Browser support | Chrome / Edge
|
|
51
|
+
| Browser support | Chrome / Edge 135 (2025), Safari 17.4 (2024), and Firefox 136 (2025), or later. Requires custom elements, ElementInternals, ARIA element references, custom states, Popover, and modern CSS. |
|
|
52
52
|
|
|
53
53
|
#### Strengths
|
|
54
54
|
|
|
@@ -301,6 +301,11 @@ Reach for the props first: **`size`** sets the dimensions and **`generator`** th
|
|
|
301
301
|
generated look. Everything else is `--avatar-*` custom properties on the host and
|
|
302
302
|
`::part()` on the shadow content.
|
|
303
303
|
|
|
304
|
+
Numeric `size`, custom `round`, and literal `badge` colors serialize inline styles
|
|
305
|
+
during server rendering. If your policy uses `style-src-attr 'none'`, omit those
|
|
306
|
+
customization props and set the values through a class and an allowed stylesheet.
|
|
307
|
+
See [Content Security Policy](../install-config.md#content-security-policy).
|
|
308
|
+
|
|
304
309
|
The container is a rounded square by default; `round` makes it a circle and takes
|
|
305
310
|
a length for a custom radius, so reach for the prop before the custom property.
|
|
306
311
|
The badge is sized and placed with `--avatar-badge-ratio` (its size as a fraction
|