@antadesign/anta 0.3.26 → 0.3.28
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/README.md +26 -28
- package/dist/anta_helpers.d.ts +8 -0
- package/dist/anta_helpers.js +18 -0
- package/dist/box-types.d.ts +1 -1
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +36 -42
- package/dist/capture-types.d.ts +156 -0
- package/dist/components/Banner.js +2 -2
- package/dist/components/Box.d.ts +15 -0
- package/dist/components/Box.js +3 -11
- package/dist/components/Button.js +2 -2
- package/dist/components/Capture.d.ts +39 -0
- package/dist/components/Capture.js +36 -0
- package/dist/components/Card.js +2 -2
- package/dist/components/Checkbox.d.ts +10 -11
- package/dist/components/Checkbox.js +5 -13
- package/dist/components/Expander.js +2 -2
- package/dist/components/Input.js +2 -2
- package/dist/components/InputTime.js +2 -2
- package/dist/components/Loader.js +2 -1
- package/dist/components/MenuItem.d.ts +7 -8
- package/dist/components/MenuItem.js +4 -4
- package/dist/components/Progress.js +2 -2
- package/dist/components/RadioGroup.d.ts +12 -13
- package/dist/components/RadioGroup.js +7 -23
- package/dist/components/Select.d.ts +12 -7
- package/dist/components/Select.js +4 -3
- package/dist/components/SelectFaceted.d.ts +7 -5
- package/dist/components/SelectFaceted.js +4 -3
- package/dist/components/Slider.js +3 -3
- package/dist/components/Steps.css +1 -1
- package/dist/components/Switch.d.ts +7 -8
- package/dist/components/Switch.js +3 -11
- package/dist/components/Tabs.js +2 -2
- package/dist/components/Tag.d.ts +7 -9
- package/dist/components/Tag.js +2 -2
- package/dist/components/Text.js +2 -2
- package/dist/components/Title.js +2 -2
- package/dist/components/capture-props.d.ts +30 -0
- package/dist/components/capture-props.js +44 -0
- package/dist/elements/a-avatar.css +1 -1
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-box.d.ts +1 -1
- package/dist/elements/a-box.js +11 -3
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-button.d.ts +7 -9
- package/dist/elements/a-calendar.css +1 -1
- package/dist/elements/a-capture.css +1 -0
- package/dist/elements/a-capture.d.ts +10 -0
- package/dist/elements/a-capture.js +24 -0
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-checkbox.js +4 -4
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.js +1 -0
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.js +5 -7
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.js +4 -6
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-radio.css +1 -1
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-slider.js +6 -9
- 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-tag.css +1 -1
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-text.js +1 -0
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +3 -4
- package/dist/elements/a-tooltip.js +0 -1
- package/dist/elements/capture-input.d.ts +5 -0
- package/dist/elements/capture-input.js +609 -0
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +3 -0
- package/dist/general_types.d.ts +56 -23
- package/dist/index.d.ts +4 -1
- package/dist/index.js +2 -0
- package/dist/jsx-runtime.d.ts +2 -1
- package/dist/reset.css +1 -1
- package/dist/theme-antithesis.css +1 -0
- package/dist/theme-antune.css +1 -0
- package/dist/tokens.css +1 -1
- package/docs/accessibility.md +24 -0
- package/docs/changelog.md +79 -0
- package/docs/colors.md +141 -0
- package/docs/comparison.md +463 -28
- package/docs/components/avatar.md +13 -17
- package/docs/components/banner.md +13 -27
- package/docs/components/box.md +226 -154
- package/docs/components/breadcrumbs.md +49 -12
- package/docs/components/button.md +48 -37
- package/docs/components/capture.md +345 -0
- package/docs/components/card.md +17 -38
- package/docs/components/checkbox.md +27 -50
- package/docs/components/dialog.md +14 -36
- package/docs/components/expander.md +15 -40
- package/docs/components/icon.md +111 -9
- package/docs/components/input-autocomplete.md +9 -11
- package/docs/components/input-date.md +33 -23
- package/docs/components/input-time.md +15 -23
- package/docs/components/input.md +27 -76
- package/docs/components/loader.md +7 -5
- package/docs/components/menu.md +75 -80
- package/docs/components/progress.md +10 -14
- package/docs/components/radio.md +28 -46
- package/docs/components/select-faceted.md +8 -25
- package/docs/components/select.md +33 -105
- package/docs/components/slider.md +16 -21
- package/docs/components/steps.md +38 -8
- package/docs/components/switch.md +16 -19
- package/docs/components/tabs.md +52 -40
- package/docs/components/tag.md +15 -24
- package/docs/components/text.md +10 -23
- package/docs/components/title.md +7 -8
- package/docs/components/toaster.md +6 -3
- package/docs/components/tooltip.md +13 -23
- package/docs/index.md +3 -1
- package/docs/install-config.md +42 -8
- package/docs/normalization.md +48 -3
- package/docs/packages/stickers.md +56 -0
- package/docs/theming.md +362 -14
- package/package.json +7 -4
- package/dist/components/InputDate.module.css +0 -1
- package/dist/components/Select.module.css +0 -1
- package/dist/components/SelectFaceted.module.css +0 -1
- package/dist/theme-anta.css +0 -1
- /package/dist/{search-index.json → capture-types.js} +0 -0
package/dist/elements/a-menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: color-mix(in oklch, var(--bg-1) 90%, transparent);--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: attr(round type(<length>), 20px)}}.dark a-menu{--menu-
|
|
1
|
+
@layer anta.components{a-menu:not(:defined){display:none}a-menu{--menu-bg: light-dark( color-mix(in oklch, var(--bg-1) 90%, transparent), color-mix(in oklch, var(--bg-1) 78%, transparent) );--menu-radius: var(--radius-md, 8px);--menu-border: 1px solid var(--border-3);--menu-shadow: 0 2px 6px color-mix(in oklch, var(--text-1) 8%, transparent), 0 8px 24px color-mix(in oklch, var(--text-1) 10%, transparent);--menu-padding: 4px;--menu-min-width: 88px;--menu-backdrop-filter: blur(20px);--menu-width-duration: .16s}@media(prefers-reduced-motion:reduce){a-menu{--menu-width-duration: 0}}a-menu[round]{--menu-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--menu-radius: attr(round type(<length>), 20px)}}.dark a-menu{--menu-shadow: 0 2px 8px color-mix(in oklch, black 50%, transparent), 0 12px 32px color-mix(in oklch, black 40%, transparent), inset 0 0 0 1px color-mix(in oklch, white 8%, transparent)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{:where(a-progress,progress[data-anta]){--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);--progress-loading-angle: 125deg;--progress-loading-x-period: calc(40px + 5cqi) ;--progress-loading-period: calc( var(--progress-loading-x-period) * cos(var(--progress-loading-angle) - 90deg) );--progress-loading-stripe: calc(var(--progress-loading-period) * 2 / 5);--progress-loading-stripe-gap: calc(var(--progress-loading-period) * 3 / 5);--progress-loading-opacity: .15;--progress-loading-blur: clamp(8px, 2cqi, 16px);--progress-loading-duration: .5s;--progress-padding-block: 4px;--progress-padding-inline: 8px;--progress-min-height: 8px;--progress-label-size: 13px;--progress-label-line-height: 16px}a-progress{display:block;container-type:inline-size;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}:where(a-progress,progress[data-anta])[size=small]{--progress-padding-block: 2px;--progress-padding-inline: 6px;--progress-label-size: 12px;--progress-label-line-height: 14px}:where(a-progress,progress[data-anta])[size=large]{--progress-padding-block: 6px;--progress-padding-inline: 10px;--progress-label-size: 15px;--progress-label-line-height: 20px}a-progress[round]{--progress-round: 999px;border-radius:var(--progress-round)}@supports (border-radius: attr(round type(<length>),999px)){a-progress[round]{--progress-round: attr(round type(<length>), 999px)}}:where(a-progress,progress[data-anta])[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}:where(a-progress,progress[data-anta])[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}:where(a-progress,progress[data-anta])[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}:where(a-progress,progress[data-anta])[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}:where(a-progress,progress[data-anta])[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}@supports (color: attr(tone type(<color>),transparent)){:where(a-progress,progress[data-anta])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: oklch(from var(--progress-tone-source) .955 .02 h)
|
|
1
|
+
@layer anta.components{:where(a-progress,progress[data-anta]){--progress-bg: var(--bg-4);--progress-border-color: var(--border-4);--progress-indicator-bg: var(--bg-5);--progress-indicator-edge: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-border-color) 100% );--progress-text-color: var(--text-2);--progress-hint-color: var(--text-3);--progress-loading-angle: 125deg;--progress-loading-x-period: calc(40px + 5cqi) ;--progress-loading-period: calc( var(--progress-loading-x-period) * cos(var(--progress-loading-angle) - 90deg) );--progress-loading-stripe: calc(var(--progress-loading-period) * 2 / 5);--progress-loading-stripe-gap: calc(var(--progress-loading-period) * 3 / 5);--progress-loading-opacity: .15;--progress-loading-blur: clamp(8px, 2cqi, 16px);--progress-loading-duration: .5s;--progress-padding-block: 4px;--progress-padding-inline: 8px;--progress-min-height: 8px;--progress-label-size: 13px;--progress-label-line-height: 16px}a-progress{display:block;container-type:inline-size;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);background:var(--progress-bg);border:0px solid var(--progress-border-color);border-radius:0}:where(a-progress,progress[data-anta])[size=small]{--progress-padding-block: 2px;--progress-padding-inline: 6px;--progress-label-size: 12px;--progress-label-line-height: 14px}:where(a-progress,progress[data-anta])[size=large]{--progress-padding-block: 6px;--progress-padding-inline: 10px;--progress-label-size: 15px;--progress-label-line-height: 20px}a-progress[round]{--progress-round: 999px;border-radius:var(--progress-round)}@supports (border-radius: attr(round type(<length>),999px)){a-progress[round]{--progress-round: attr(round type(<length>), 999px)}}:where(a-progress,progress[data-anta])[tone=brand]{--progress-bg: var(--bg-4-brand);--progress-border-color: var(--border-4-brand);--progress-indicator-bg: var(--bg-5-brand);--progress-text-color: var(--text-2-brand);--progress-hint-color: var(--text-3-brand)}:where(a-progress,progress[data-anta])[tone=info]{--progress-bg: var(--bg-4-info);--progress-border-color: var(--border-4-info);--progress-indicator-bg: var(--bg-5-info);--progress-text-color: var(--text-2-info);--progress-hint-color: var(--text-3-info)}:where(a-progress,progress[data-anta])[tone=success]{--progress-bg: var(--bg-4-success);--progress-border-color: var(--border-4-success);--progress-indicator-bg: var(--bg-5-success);--progress-text-color: var(--text-2-success);--progress-hint-color: var(--text-3-success)}:where(a-progress,progress[data-anta])[tone=warning]{--progress-bg: var(--bg-4-warning);--progress-border-color: var(--border-4-warning);--progress-indicator-bg: var(--bg-5-warning);--progress-text-color: var(--text-2-warning);--progress-hint-color: var(--text-3-warning)}:where(a-progress,progress[data-anta])[tone=critical]{--progress-bg: var(--bg-4-critical);--progress-border-color: var(--border-4-critical);--progress-indicator-bg: var(--bg-5-critical);--progress-text-color: var(--text-2-critical);--progress-hint-color: var(--text-3-critical)}@supports (color: attr(tone type(<color>),transparent)){:where(a-progress,progress[data-anta])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--progress-tone-source: attr(tone type(<color>), transparent);--progress-bg: light-dark(oklch(from var(--progress-tone-source) .955 .02 h), oklch(from var(--progress-tone-source) .185 .05 h));--progress-border-color: light-dark(oklch(from var(--progress-tone-source) .9 .04 h), oklch(from var(--progress-tone-source) .26 .06 h));--progress-indicator-bg: light-dark(oklch(from var(--progress-tone-source) .935 .03 h), oklch(from var(--progress-tone-source) .205 .055 h));--progress-text-color: light-dark(oklch(from var(--progress-tone-source) .43 .15 h), oklch(from var(--progress-tone-source) .77 .11 h));--progress-hint-color: light-dark( color-mix(in oklch, var(--progress-text-color) 82%, transparent), color-mix(in oklch, var(--progress-text-color) 80%, transparent) )}}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em;font-size:var(--progress-label-size);line-height:var(--progress-label-line-height)}a-progress-number{flex-shrink:0;color:var(--progress-text-color)}a-progress-text{flex:1 1 auto;min-width:0;color:var(--progress-text-color)}a-progress-hint{flex-shrink:0;margin-left:auto;color:var(--progress-hint-color)}progress[data-anta]{--anta-native-progress-height: calc( var(--progress-min-height) + var(--progress-padding-block) + var(--progress-padding-block) );--anta-native-progress-radius: 0px;--anta-native-progress-fill: linear-gradient( 90deg, var(--progress-indicator-bg) 0%, var(--progress-indicator-bg) calc(100% - 90px) , var(--progress-border-color) 100% );box-sizing:border-box;display:block;position:relative;container-type:inline-size;inline-size:100%;block-size:var(--anta-native-progress-height);margin:0;padding:0;border:0;border-radius:var(--anta-native-progress-radius);appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--progress-bg);overflow:hidden;vertical-align:middle}progress[data-anta][round]{--anta-native-progress-radius: 999px}@supports (border-radius: attr(round type(<length>),999px)){progress[data-anta][round]{--anta-native-progress-radius: attr(round type(<length>), 999px)}}progress[data-anta]::-webkit-progress-bar{border-radius:var(--anta-native-progress-radius);background:var(--progress-bg)}progress[data-anta]::-webkit-progress-value{border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]::-moz-progress-bar{border:0;border-radius:var(--anta-native-progress-radius);background:var(--anta-native-progress-fill)}progress[data-anta]:not([value]):before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--progress-loading-x-period));width:calc(100% + var(--progress-loading-x-period));pointer-events:none;background:repeating-linear-gradient(var(--progress-loading-angle),transparent 0,transparent var(--progress-loading-stripe-gap),var(--progress-text-color) var(--progress-loading-stripe-gap),var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe)));filter:blur(var(--progress-loading-blur));opacity:var(--progress-loading-opacity);will-change:transform}@media(prefers-reduced-motion:no-preference){progress[data-anta]:not([value]):before{animation:progress-native-loading-slide var(--progress-loading-duration) linear infinite;animation-delay:-9999s}}@keyframes progress-native-loading-slide{to{transform:translate(var(--progress-loading-x-period))}}@media(forced-colors:active){:where(a-progress,progress[data-anta]){forced-color-adjust:none;--progress-bg: Canvas !important;--progress-border-color: CanvasText !important;--progress-indicator-bg: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge: light-dark(SelectedItem, Highlight) !important;--progress-indicator-edge-border: 1px solid light-dark(SelectedItemText, HighlightText) !important;--progress-text-color: CanvasText !important;--progress-hint-color: CanvasText !important;border:1px dotted CanvasText!important}}}a-progress>p:last-child,a-progress>:not([slot])>p:last-child{margin-block-end:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--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-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-off-bg-selected: oklch(from var(--radio-off-tone-source) var(--_tone-l-rest) c 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]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}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-tone-source: inherit;--radio-off-tone-source: inherit}a-radio[tone-selected=brand],a-radio-group[tone-selected=brand] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-brand)}a-radio[tone-selected=info],a-radio-group[tone-selected=info] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-info)}a-radio[tone-selected=success],a-radio-group[tone-selected=success] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-success)}a-radio[tone-selected=warning],a-radio-group[tone-selected=warning] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-warning)}a-radio[tone-selected=critical],a-radio-group[tone-selected=critical] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-critical)}a-radio[tone-selected=neutral],a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}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]){--radio-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone-selected type(<color>), transparent)}}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]){--radio-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone-selected type(<color>), transparent)}}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-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: var(--border-3);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio[tone-selected]:not([tone-selected=""],[tone-selected=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]),.dark a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=neutral]) a-radio:not([tone],[tone-selected]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-radio[tone]:not([tone=""],[tone=neutral]),.dark a-radio-group[tone]:not([tone=""],[tone=neutral]) a-radio:not([tone],[tone-selected]){--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=neutral],.dark a-radio-group[tone-selected=neutral] a-radio:not([tone],[tone-selected]){--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=radio]{--radio-control-size: 16px;--radio-dot-core: 3px;--radio-dot-edge: 3.5px;--radio-bg: var(--bg-1);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--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-dot: #f6f4f6;box-sizing:border-box;flex:0 0 var(--radio-control-size);inline-size:var(--radio-control-size);block-size:var(--radio-control-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--radio-border);border-radius:50%;background-color:var(--radio-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--radio-control-size: 14px;--radio-dot-core: 2.5px;--radio-dot-edge: 3px}input[data-anta][type=radio][size=large]{--radio-control-size: 18px;--radio-dot-core: 3.5px;--radio-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}input[data-anta][type=radio][tone=brand]{--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--radio-bg: oklch(from var(--radio-off-tone-source) .99 calc(c*.03) h);--_radio-off-bg-selected: oklch(from var(--radio-off-tone-source) var(--_tone-l-rest) c 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)}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--radio-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}input[data-anta][type=radio][tone-selected=brand]{--radio-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone-selected=info]{--radio-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone-selected=success]{--radio-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone-selected=warning]{--radio-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone-selected=critical]{--radio-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone-selected=neutral]{--radio-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--radio-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--radio-bg-selected-hover);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-hover) var(--radio-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--radio-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--radio-bg-selected-active);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-active) var(--radio-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--radio-bg-selected);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected) var(--radio-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--radio-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--radio-dot-edge))}.dark input[data-anta][type=radio]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5;--radio-dot: #ece9ec}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=radio][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--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 input[data-anta][type=radio][tone-selected=neutral]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}
|
|
1
|
+
@layer anta.components{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-dot: light-dark(#f6f4f6, #ece9ec);--radio-dot-disabled: light-dark(#c1b9c1, #534c57);--radio-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--radio-border-disabled: var(--radio-bg-disabled);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-label-lh);&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);box-shadow:0 0 1px 1px light-dark(transparent,color-mix(in oklch,black 40%,transparent));transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-bg-selected-hover);border-color:var(--radio-bg-selected-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-bg-selected-active);border-color:var(--radio-bg-selected-active)}&:state(selected){&:before{background:var(--radio-bg-selected);border-color:var(--radio-bg-selected)}&:after{transform:scale(1)}}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone]:not([tone=""],[tone=neutral]),a-radio-group[tone]:not([tone=""],[tone=neutral]) 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[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}a-radio[tone=neutral],a-radio-group[tone=neutral] a-radio:not([tone]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}a-radio[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]) a-radio:not([tone],[tone-scope=selected]),a-radio-group[tone]:not([tone=""],[tone=neutral])[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-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-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-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: transparent;--radio-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), transparent);--radio-off-tone-source: attr(tone type(<color>), transparent)}}a-radio-group[tone]:where(:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical])) a-radio:not([tone]){--radio-tone-source: inherit;--radio-off-tone-source: inherit}.dark a-radio{--_radio-dot-adjust: 1px}label:has(>input[data-anta][type=radio]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-size:15px;line-height:20px}input[data-anta][type=radio]{--radio-control-size: 16px;--radio-dot-core: 3px;--radio-dot-edge: 3.5px;--radio-bg: var(--bg-1);--radio-border-neutral: var(--border-3);--radio-border: var(--radio-border-neutral);--radio-border-hover: var(--border-2);--radio-border-active: var(--border-1);--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);--radio-bg-selected: light-dark(oklch(from var(--radio-tone-source) .6 c h), oklch(from var(--radio-tone-source) .42 c h));--radio-bg-selected-hover: oklch(from var(--radio-tone-source) .45 c h);--radio-bg-selected-active: light-dark(oklch(from var(--radio-tone-source) .4 c h), oklch(from var(--radio-tone-source) .5 c h));--radio-dot: light-dark(#f6f4f6, #ece9ec);box-sizing:border-box;flex:0 0 var(--radio-control-size);inline-size:var(--radio-control-size);block-size:var(--radio-control-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--radio-border);border-radius:50%;background-color:var(--radio-bg);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=radio][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=radio][size=large]){font-size:17px;line-height:22px}input[data-anta][type=radio][size=small]{--radio-control-size: 14px;--radio-dot-core: 2.5px;--radio-dot-edge: 3px}input[data-anta][type=radio][size=large]{--radio-control-size: 18px;--radio-dot-core: 3.5px;--radio-dot-edge: 4px}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral]){--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))}input[data-anta][type=radio][tone=brand]{--radio-tone-source: var(--anta-seed-brand);--radio-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=radio][tone=info]{--radio-tone-source: var(--anta-seed-info);--radio-off-tone-source: var(--anta-seed-info)}input[data-anta][type=radio][tone=success]{--radio-tone-source: var(--anta-seed-success);--radio-off-tone-source: var(--anta-seed-success)}input[data-anta][type=radio][tone=warning]{--radio-tone-source: var(--anta-seed-warning);--radio-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=radio][tone=critical]{--radio-tone-source: var(--anta-seed-critical);--radio-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=radio][tone=neutral]{--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=radio][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--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-off-bg-selected: var(--radio-bg-selected);--_radio-border-base: color-mix(in oklch, var(--_radio-off-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))}input[data-anta][type=radio][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: var(--anta-seed-neutral);--radio-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--radio-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--radio-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=radio]:not(:disabled):hover{border-color:var(--radio-border-hover)}input[data-anta][type=radio]:not(:disabled):hover:checked{border-color:var(--radio-bg-selected-hover);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-hover) var(--radio-dot-edge))}}input[data-anta][type=radio]:not(:disabled):active{border-color:var(--radio-border-active)}input[data-anta][type=radio]:not(:disabled):active:checked{border-color:var(--radio-bg-selected-active);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected-active) var(--radio-dot-edge))}input[data-anta][type=radio]:checked{border-color:var(--radio-bg-selected);background:radial-gradient(circle,var(--radio-dot) 0 var(--radio-dot-core),var(--radio-bg-selected) var(--radio-dot-edge))}input[data-anta][type=radio]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=radio]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=radio]:disabled:checked{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background:radial-gradient(circle,var(--text-4) 0 var(--radio-dot-core),color-mix(in oklch,var(--text-1) 10%,transparent) var(--radio-dot-edge))}@media(forced-colors:active){a-radio:state(selected):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-radio:state(selected):after{forced-color-adjust:none;background-color:HighlightText;box-shadow:none}a-radio[disabled]:before{background-color:Canvas;border-color:GrayText}a-radio[disabled]:state(selected):after{background-color:GrayText}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{:where(a-slider,input[data-anta][type=range]){--anta-slider-control-size: 28px;--anta-slider-track-size: 2px;--anta-slider-thumb-size: 16px;--anta-slider-thumb-border-width: 1.5px}:where(a-slider,input[data-anta][type=range])[size=small]{--anta-slider-control-size: 24px;--anta-slider-thumb-size: 12px}:where(a-slider,input[data-anta][type=range])[size=large]{--anta-slider-control-size: 32px;--anta-slider-thumb-size: 20px}:where(a-slider,input[data-anta][type=range])[track-size]{--anta-slider-track-size: 2px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-track-size: attr(track-size type(<length>), 2px)}}:where(a-slider,input[data-anta][type=range])[thumb-size]{--anta-slider-thumb-size: 16px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-thumb-size: attr(thumb-size type(<length>), 16px)}}a-slider{--slider-track-inset: 1px;--slider-track-radius: 999px;--slider-thumb-radius: 50%;--slider-track: var(--border-4);--slider-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-fill: var(--slider-interactive-rest);--slider-fill-hover: var(--border-1);--slider-thumb: var(--bg-1);--slider-thumb-active: var(--bg-3);--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-thumb-border: var(--slider-thumb-interactive-rest);--slider-thumb-border-active: var(--border-1);--slider-label: var(--text-3);--slider-value: var(--text-1);--slider-value-affix: var(--text-3);--slider-marker: var(--text-3);--slider-label-size: 15px;--slider-label-line-height: 20px;--slider-value-size: 15px;--slider-value-line-height: 20px;--slider-marker-size: 13px;--slider-marker-line-height: 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;width:100%}a-slider[size=small]{--slider-label-size: 13px;--slider-label-line-height: 16px;--slider-value-size: 13px;--slider-value-line-height: 16px;--slider-marker-size: 12px;--slider-marker-line-height: 14px}a-slider[size=large]{--slider-label-size: 17px;--slider-label-line-height: 22px;--slider-value-size: 17px;--slider-value-line-height: 22px;--slider-marker-size: 15px;--slider-marker-line-height: 19px}a-slider[round]{--slider-track-radius: var(--slider-round, 999px);--slider-thumb-radius: var(--slider-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--slider-track-radius: var(--slider-round, attr(round type(<length>), 999px));--slider-thumb-radius: var(--slider-round, attr(round type(<length>), 999px))}}a-slider[tone=brand]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-fill-hover: var(--border-1-brand)}a-slider[tone=info]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-fill-hover: var(--border-1-info)}a-slider[tone=success]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-fill-hover: var(--border-1-success)}a-slider[tone=warning]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-fill-hover: var(--border-1-warning)}a-slider[tone=critical]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-fill-hover: var(--border-1-critical)}a-slider[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--slider-tone-source: transparent;--slider-interactive-rest: color-mix(in oklch, var(--slider-tone-source) 65%, var(--border-2));--slider-fill-hover: color-mix(in oklch, var(--slider-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-tone-source: attr(tone type(<color>), transparent)}}a-slider[thumb-tone=brand]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-thumb-border-active: var(--border-1-brand)}a-slider[thumb-tone=info]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-thumb-border-active: var(--border-1-info)}a-slider[thumb-tone=success]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-thumb-border-active: var(--border-1-success)}a-slider[thumb-tone=warning]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-thumb-border-active: var(--border-1-warning)}a-slider[thumb-tone=critical]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-thumb-border-active: var(--border-1-critical)}a-slider[thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--slider-thumb-tone-source: transparent;--slider-thumb-interactive-rest: color-mix(in oklch, var(--slider-thumb-tone-source) 65%, var(--border-2));--slider-thumb-border-active: color-mix(in oklch, var(--slider-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}a-slider[thumb-fill]{--slider-thumb: var(--slider-thumb-border);--slider-thumb-active: var(--slider-thumb-border-active)}a-slider[track-click=jump]{cursor:pointer}a-slider[disabled],a-slider:disabled{--slider-track: color-mix(in oklch, var(--border-4) 55%, transparent);--slider-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--slider-thumb: var(--bg-2);--slider-thumb-border: var(--border-3);--slider-label: var(--text-4);--slider-value: var(--text-4);--slider-value-affix: var(--text-4);--slider-marker: var(--text-5);cursor:not-allowed}a-slider:not([disabled]):not(:disabled):focus-visible{outline:none;--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}@media(hover:hover)and (pointer:fine){a-slider:not([disabled]):not(:disabled):hover{--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}}input[data-anta][type=range]{--anta-native-range-control-size: var(--anta-slider-control-size);--anta-native-range-track-size: var(--anta-slider-track-size);--anta-native-range-track-radius: 999px;--anta-native-range-thumb-size: var(--anta-slider-thumb-size);--anta-native-range-thumb-border-width: var(--anta-slider-thumb-border-width);--anta-native-range-thumb-radius: 50%;--anta-native-range-fill-clip-edge: 2px;--anta-native-range-track: var(--border-4);--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-fill: var(--anta-native-range-interactive-rest);--anta-native-range-fill-hover: var(--border-1);--anta-native-range-thumb: var(--bg-1);--anta-native-range-thumb-active: var(--bg-3);--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-thumb-border: var(--anta-native-range-thumb-interactive-rest);--anta-native-range-thumb-border-active: var(--border-1);box-sizing:border-box;display:block;inline-size:100%;block-size:var(--anta-native-range-control-size);margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;cursor:pointer;overflow:hidden;vertical-align:middle;box-shadow:none}input[data-anta][type=range][tone=brand]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-fill-hover: var(--border-1-brand)}input[data-anta][type=range][tone=info]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-fill-hover: var(--border-1-info)}input[data-anta][type=range][tone=success]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-fill-hover: var(--border-1-success)}input[data-anta][type=range][tone=warning]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-fill-hover: var(--border-1-warning)}input[data-anta][type=range][tone=critical]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-fill-hover: var(--border-1-critical)}input[data-anta][type=range][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--anta-native-range-tone-source: transparent;--anta-native-range-interactive-rest: color-mix(in oklch, var(--anta-native-range-tone-source) 65%, var(--border-2));--anta-native-range-fill-hover: color-mix(in oklch, var(--anta-native-range-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-tone-source: attr(tone type(<color>), transparent)}}input[data-anta][type=range][thumb-tone=brand]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-thumb-border-active: var(--border-1-brand)}input[data-anta][type=range][thumb-tone=info]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-thumb-border-active: var(--border-1-info)}input[data-anta][type=range][thumb-tone=success]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-thumb-border-active: var(--border-1-success)}input[data-anta][type=range][thumb-tone=warning]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-thumb-border-active: var(--border-1-warning)}input[data-anta][type=range][thumb-tone=critical]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-thumb-border-active: var(--border-1-critical)}input[data-anta][type=range][thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--anta-native-range-thumb-tone-source: transparent;--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 65%, var(--border-2));--anta-native-range-thumb-border-active: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}input[data-anta][type=range][thumb-fill]{--anta-native-range-thumb: var(--anta-native-range-thumb-border);--anta-native-range-thumb-active: var(--anta-native-range-thumb-border-active)}input[data-anta][type=range][round]{--anta-native-range-track-radius: 999px;--anta-native-range-thumb-radius: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-native-range-track-radius: attr(round type(<length>), 999px);--anta-native-range-thumb-radius: attr(round type(<length>), 999px)}}input[data-anta][type=range][round]:not([round=""]){--anta-native-range-fill-clip-edge: 0px}input[data-anta][type=range]::-webkit-slider-container{block-size:var(--anta-native-range-control-size);overflow:hidden}input[data-anta][type=range]::-webkit-slider-runnable-track{position:relative;box-sizing:border-box;block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-track-radius);appearance:none;-webkit-appearance:none;background:linear-gradient(var(--anta-native-range-track) 0 0) center / 100% var(--anta-native-range-track-size) no-repeat;transition:background-color 75ms ease-out}input[data-anta][type=range]::-webkit-slider-thumb{--anta-native-range-fill-clip-top: calc((var(--anta-native-range-thumb-size) - var(--anta-native-range-track-size)) / 2);--anta-native-range-fill-clip-bottom: calc(100% - var(--anta-native-range-fill-clip-top));position:relative;box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);margin-block-start:0;border:0;border-radius:var(--anta-native-range-thumb-radius);appearance:none;-webkit-appearance:none;background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border),calc(-100vmax - var(--anta-native-range-thumb-size)) 0 0 100vmax var(--anta-native-range-fill);clip-path:polygon(100% -1px,var(--anta-native-range-fill-clip-edge) -1px,0 var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-bottom),0 var(--anta-native-range-fill-clip-bottom),var(--anta-native-range-fill-clip-edge) 100%,calc(100% + 1px) calc(100% + 1px));transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]::-moz-range-track{box-sizing:border-box;block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-track);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-progress{block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-fill);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-thumb{box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-thumb-radius);background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border);transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:0;--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}@media(hover:hover)and (pointer:fine){input[data-anta][type=range]:not(:disabled):hover{--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}}input[data-anta][type=range]:not(:disabled):active{cursor:grabbing;--anta-native-range-thumb: var(--anta-native-range-thumb-active)}input[data-anta][type=range]:disabled{--anta-native-range-track: color-mix(in oklch, var(--border-4) 55%, transparent);--anta-native-range-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--anta-native-range-thumb: var(--bg-2);--anta-native-range-thumb-border: var(--border-3);cursor:not-allowed}@media(forced-colors:active){input[data-anta][type=range]{forced-color-adjust:none;--anta-native-range-track: CanvasText;--anta-native-range-fill: Highlight;--anta-native-range-thumb: Canvas;--anta-native-range-thumb-border: CanvasText}input[data-anta][type=range]:focus-visible{outline:2px solid Highlight}}@media(prefers-reduced-motion:reduce){input[data-anta][type=range]::-webkit-slider-runnable-track,input[data-anta][type=range]::-webkit-slider-thumb,input[data-anta][type=range]::-moz-range-track,input[data-anta][type=range]::-moz-range-progress,input[data-anta][type=range]::-moz-range-thumb{transition:none}}a-slider:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1px;row-gap:1px;opacity:.5;transition:opacity .28s ease-out 40ms}a-slider:not(:defined)>[slot=label]{display:block!important;grid-column:1;grid-row:1;min-width:0;color:var(--slider-label);font-family:var(--sans-serif);font-size:var(--slider-label-size);font-weight:500;line-height:var(--slider-label-line-height)}a-slider:not(:defined):before{grid-column:1 / -1;grid-row:2;content:"";block-size:var(--anta-slider-control-size);border-radius:4px;background:linear-gradient(to right,transparent var(--slider-track-inset),var(--slider-track) var(--slider-track-inset) calc(100% - var(--slider-track-inset)),transparent calc(100% - var(--slider-track-inset))) center / 100% var(--anta-slider-track-size) no-repeat}a-slider:not(:defined):after{grid-column:2;grid-row:1;content:attr(value-prefix) attr(min) attr(value-suffix);color:var(--slider-value);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-value-size);font-variant-numeric:tabular-nums;line-height:var(--slider-value-line-height);padding-inline-start:1ch}a-slider[defaultvalue]:not([value]):not(:defined):after{content:attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value]:not(:defined):after{content:attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=thumb]:not(:defined):after,a-slider[value-display=none]:not(:defined):after{display:none}a-slider[value-display=inline]:not(:defined):after{content:": " attr(value-prefix) attr(min) attr(value-suffix);display:block;white-space:nowrap}a-slider[value-display=inline][defaultvalue]:not([value]):not(:defined):after{content:": " attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value-display=inline][value]:not(:defined):after{content:": " attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=none]:not(:defined):not(:has(>[slot=label])):before{grid-row:1}a-slider:not(:defined)>[slot=markers]{grid-column:1 / -1;grid-row:3;position:relative;inset-inline-start:var(--slider-marker-position);max-inline-size:min(12rem,50vw);color:var(--slider-marker, var(--text-4));font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:var(--slider-marker-size);font-variant-numeric:tabular-nums;line-height:var(--slider-marker-line-height);text-align:center;transform:translate(-50%);white-space:nowrap}a-slider:not(:defined)>[slot=markers][data-slider-marker-start]{text-align:start;transform:translate(0)}a-slider:not(:defined)>[slot=markers][data-slider-marker-end]{text-align:end;transform:translate(-100%)}a-slider:not(:defined)>:not([slot]){grid-column:1 / -1;grid-row:3}a-slider:defined{opacity:1;transition:opacity .28s ease-out 40ms}@media(prefers-reduced-motion:reduce){a-slider,a-slider:not(:defined),a-slider:defined{transition:none}}}
|
|
1
|
+
@layer anta.components{:where(a-slider,input[data-anta][type=range]){--anta-slider-control-size: 28px;--anta-slider-track-size: 2px;--anta-slider-thumb-size: 16px;--anta-slider-thumb-border-width: 1.5px}:where(a-slider,input[data-anta][type=range])[size=small]{--anta-slider-control-size: 24px;--anta-slider-thumb-size: 12px}:where(a-slider,input[data-anta][type=range])[size=large]{--anta-slider-control-size: 32px;--anta-slider-thumb-size: 20px}:where(a-slider,input[data-anta][type=range])[track-size]{--anta-slider-track-size: 2px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-track-size: attr(track-size type(<length>), 2px)}}:where(a-slider,input[data-anta][type=range])[thumb-size]{--anta-slider-thumb-size: 16px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-slider-thumb-size: attr(thumb-size type(<length>), 16px)}}a-slider{--slider-track-inset: 1px;--slider-track-radius: 999px;--slider-thumb-radius: 50%;--slider-track: var(--border-4);--slider-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-fill: var(--slider-interactive-rest);--slider-fill-hover: var(--border-1);--slider-thumb: var(--bg-1);--slider-thumb-active: var(--bg-3);--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--slider-thumb-border: var(--slider-thumb-interactive-rest);--slider-thumb-border-active: var(--border-1);--slider-label: var(--text-3);--slider-value: var(--text-1);--slider-value-affix: var(--text-3);--slider-marker: var(--text-3);--slider-label-size: 15px;--slider-label-line-height: 20px;--slider-value-size: 15px;--slider-value-line-height: 20px;--slider-marker-size: 13px;--slider-marker-line-height: 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;width:100%}a-slider[size=small]{--slider-label-size: 13px;--slider-label-line-height: 16px;--slider-value-size: 13px;--slider-value-line-height: 16px;--slider-marker-size: 12px;--slider-marker-line-height: 14px}a-slider[size=large]{--slider-label-size: 17px;--slider-label-line-height: 22px;--slider-value-size: 17px;--slider-value-line-height: 22px;--slider-marker-size: 15px;--slider-marker-line-height: 19px}a-slider[round]{--slider-track-radius: var(--slider-round, 999px);--slider-thumb-radius: var(--slider-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--slider-track-radius: var(--slider-round, attr(round type(<length>), 999px));--slider-thumb-radius: var(--slider-round, attr(round type(<length>), 999px))}}a-slider[tone=brand]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-fill-hover: var(--border-1-brand)}a-slider[tone=info]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-fill-hover: var(--border-1-info)}a-slider[tone=success]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-fill-hover: var(--border-1-success)}a-slider[tone=warning]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-fill-hover: var(--border-1-warning)}a-slider[tone=critical]{--slider-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-fill-hover: var(--border-1-critical)}a-slider[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--slider-tone-source: transparent;--slider-interactive-rest: color-mix(in oklch, var(--slider-tone-source) 65%, var(--border-2));--slider-fill-hover: color-mix(in oklch, var(--slider-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-tone-source: attr(tone type(<color>), transparent)}}a-slider[thumb-tone=brand]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--slider-thumb-border-active: var(--border-1-brand)}a-slider[thumb-tone=info]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--slider-thumb-border-active: var(--border-1-info)}a-slider[thumb-tone=success]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--slider-thumb-border-active: var(--border-1-success)}a-slider[thumb-tone=warning]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--slider-thumb-border-active: var(--border-1-warning)}a-slider[thumb-tone=critical]{--slider-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--slider-thumb-border-active: var(--border-1-critical)}a-slider[thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--slider-thumb-tone-source: transparent;--slider-thumb-interactive-rest: color-mix(in oklch, var(--slider-thumb-tone-source) 65%, var(--border-2));--slider-thumb-border-active: color-mix(in oklch, var(--slider-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--slider-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}a-slider[thumb-fill]{--slider-thumb: var(--slider-thumb-border);--slider-thumb-active: var(--slider-thumb-border-active)}a-slider[track-click=jump]{cursor:pointer}a-slider[disabled],a-slider:disabled{--slider-track: color-mix(in oklch, var(--border-4) 55%, transparent);--slider-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--slider-thumb: var(--bg-2);--slider-thumb-border: var(--border-3);--slider-label: var(--text-4);--slider-value: var(--text-4);--slider-value-affix: var(--text-4);--slider-marker: var(--text-5);cursor:not-allowed}a-slider:not([disabled]):not(:disabled):focus-visible{outline:none;--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}@media(hover:hover)and (pointer:fine){a-slider:not([disabled]):not(:disabled):hover{--slider-thumb-border: var(--slider-thumb-border-active);--slider-fill: var(--slider-fill-hover)}}input[data-anta][type=range]{--anta-native-range-control-size: var(--anta-slider-control-size);--anta-native-range-track-size: var(--anta-slider-track-size);--anta-native-range-track-radius: 999px;--anta-native-range-thumb-size: var(--anta-slider-thumb-size);--anta-native-range-thumb-border-width: var(--anta-slider-thumb-border-width);--anta-native-range-thumb-radius: 50%;--anta-native-range-fill-clip-edge: 2px;--anta-native-range-track: var(--border-4);--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-fill: var(--anta-native-range-interactive-rest);--anta-native-range-fill-hover: var(--border-1);--anta-native-range-thumb: var(--bg-1);--anta-native-range-thumb-active: var(--bg-3);--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2) 50%, var(--border-1));--anta-native-range-thumb-border: var(--anta-native-range-thumb-interactive-rest);--anta-native-range-thumb-border-active: var(--border-1);box-sizing:border-box;display:block;inline-size:100%;block-size:var(--anta-native-range-control-size);margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;cursor:pointer;overflow:hidden;vertical-align:middle;box-shadow:none}input[data-anta][type=range][tone=brand]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-fill-hover: var(--border-1-brand)}input[data-anta][type=range][tone=info]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-fill-hover: var(--border-1-info)}input[data-anta][type=range][tone=success]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-fill-hover: var(--border-1-success)}input[data-anta][type=range][tone=warning]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-fill-hover: var(--border-1-warning)}input[data-anta][type=range][tone=critical]{--anta-native-range-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-fill-hover: var(--border-1-critical)}input[data-anta][type=range][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--anta-native-range-tone-source: transparent;--anta-native-range-interactive-rest: color-mix(in oklch, var(--anta-native-range-tone-source) 65%, var(--border-2));--anta-native-range-fill-hover: color-mix(in oklch, var(--anta-native-range-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-tone-source: attr(tone type(<color>), transparent)}}input[data-anta][type=range][thumb-tone=brand]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-brand) 50%, var(--border-1-brand));--anta-native-range-thumb-border-active: var(--border-1-brand)}input[data-anta][type=range][thumb-tone=info]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-info) 50%, var(--border-1-info));--anta-native-range-thumb-border-active: var(--border-1-info)}input[data-anta][type=range][thumb-tone=success]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-success) 50%, var(--border-1-success));--anta-native-range-thumb-border-active: var(--border-1-success)}input[data-anta][type=range][thumb-tone=warning]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-warning) 50%, var(--border-1-warning));--anta-native-range-thumb-border-active: var(--border-1-warning)}input[data-anta][type=range][thumb-tone=critical]{--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--border-2-critical) 50%, var(--border-1-critical));--anta-native-range-thumb-border-active: var(--border-1-critical)}input[data-anta][type=range][thumb-tone]:not([thumb-tone=""],[thumb-tone=neutral],[thumb-tone=brand],[thumb-tone=info],[thumb-tone=success],[thumb-tone=warning],[thumb-tone=critical]){--anta-native-range-thumb-tone-source: transparent;--anta-native-range-thumb-interactive-rest: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 65%, var(--border-2));--anta-native-range-thumb-border-active: color-mix(in oklch, var(--anta-native-range-thumb-tone-source) 80%, var(--border-1));@supports (color: attr(probe type(<color>),red)){--anta-native-range-thumb-tone-source: attr(thumb-tone type(<color>), transparent)}}input[data-anta][type=range][thumb-fill]{--anta-native-range-thumb: var(--anta-native-range-thumb-border);--anta-native-range-thumb-active: var(--anta-native-range-thumb-border-active)}input[data-anta][type=range][round]{--anta-native-range-track-radius: 999px;--anta-native-range-thumb-radius: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--anta-native-range-track-radius: attr(round type(<length>), 999px);--anta-native-range-thumb-radius: attr(round type(<length>), 999px)}}input[data-anta][type=range][round]:not([round=""]){--anta-native-range-fill-clip-edge: 0px}input[data-anta][type=range]::-webkit-slider-container{block-size:var(--anta-native-range-control-size);overflow:hidden}input[data-anta][type=range]::-webkit-slider-runnable-track{position:relative;box-sizing:border-box;block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-track-radius);appearance:none;-webkit-appearance:none;background:linear-gradient(var(--anta-native-range-track) 0 0) center / 100% var(--anta-native-range-track-size) no-repeat;transition:background-color 75ms ease-out}input[data-anta][type=range]::-webkit-slider-thumb{--anta-native-range-fill-clip-top: calc((var(--anta-native-range-thumb-size) - var(--anta-native-range-track-size)) / 2);--anta-native-range-fill-clip-bottom: calc(100% - var(--anta-native-range-fill-clip-top));position:relative;box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);margin-block-start:0;border:0;border-radius:var(--anta-native-range-thumb-radius);appearance:none;-webkit-appearance:none;background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border),calc(-100vmax - var(--anta-native-range-thumb-size)) 0 0 100vmax var(--anta-native-range-fill);clip-path:polygon(100% -1px,var(--anta-native-range-fill-clip-edge) -1px,0 var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-top),-100vmax var(--anta-native-range-fill-clip-bottom),0 var(--anta-native-range-fill-clip-bottom),var(--anta-native-range-fill-clip-edge) 100%,calc(100% + 1px) calc(100% + 1px));transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]::-moz-range-track{box-sizing:border-box;block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-track);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-progress{block-size:var(--anta-native-range-track-size);border:0;border-radius:var(--anta-native-range-track-radius);background:var(--anta-native-range-fill);transition:background-color 75ms ease-out}input[data-anta][type=range]::-moz-range-thumb{box-sizing:border-box;inline-size:var(--anta-native-range-thumb-size);block-size:var(--anta-native-range-thumb-size);border:0;border-radius:var(--anta-native-range-thumb-radius);background:var(--anta-native-range-thumb);box-shadow:inset 0 0 0 var(--anta-native-range-thumb-border-width) var(--anta-native-range-thumb-border);transition:background-color 75ms ease-out,box-shadow 75ms ease-out}input[data-anta][type=range]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:0;--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}@media(hover:hover)and (pointer:fine){input[data-anta][type=range]:not(:disabled):hover{--anta-native-range-fill: var(--anta-native-range-fill-hover);--anta-native-range-thumb-border: var(--anta-native-range-thumb-border-active)}}input[data-anta][type=range]:not(:disabled):active{cursor:grabbing;--anta-native-range-thumb: var(--anta-native-range-thumb-active)}input[data-anta][type=range]:disabled{--anta-native-range-track: color-mix(in oklch, var(--border-4) 55%, transparent);--anta-native-range-fill: color-mix(in oklch, var(--border-2) 45%, transparent);--anta-native-range-thumb: var(--bg-2);--anta-native-range-thumb-border: var(--border-3);cursor:not-allowed}@media(forced-colors:active){input[data-anta][type=range]{forced-color-adjust:none;--anta-native-range-track: CanvasText;--anta-native-range-fill: Highlight;--anta-native-range-thumb: Canvas;--anta-native-range-thumb-border: CanvasText}input[data-anta][type=range]:focus-visible{outline:2px solid Highlight}}@media(prefers-reduced-motion:reduce){input[data-anta][type=range]::-webkit-slider-runnable-track,input[data-anta][type=range]::-webkit-slider-thumb,input[data-anta][type=range]::-moz-range-track,input[data-anta][type=range]::-moz-range-progress,input[data-anta][type=range]::-moz-range-thumb{transition:none}}a-slider:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1px;row-gap:1px;opacity:.5;transition:opacity .28s ease-out 40ms}a-slider:not(:defined)>[slot=label]{display:block!important;grid-column:1;grid-row:1;min-width:0;color:var(--slider-label);font-family:var(--sans-serif);font-size:var(--slider-label-size);font-weight:500;line-height:var(--slider-label-line-height)}a-slider:not(:defined):before{grid-column:1 / -1;grid-row:2;content:"";block-size:var(--anta-slider-control-size);border-radius:4px;background:linear-gradient(to right,transparent var(--slider-track-inset),var(--slider-track) var(--slider-track-inset) calc(100% - var(--slider-track-inset)),transparent calc(100% - var(--slider-track-inset))) center / 100% var(--anta-slider-track-size) no-repeat}a-slider:not(:defined):after{grid-column:2;grid-row:1;content:attr(value-prefix) attr(min) attr(value-suffix);color:var(--slider-value);font-family:var(--sans-serif);font-size:var(--slider-value-size);font-variant-numeric:tabular-nums;line-height:var(--slider-value-line-height);padding-inline-start:1ch}a-slider[defaultvalue]:not([value]):not(:defined):after{content:attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value]:not(:defined):after{content:attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=thumb]:not(:defined):after,a-slider[value-display=none]:not(:defined):after{display:none}a-slider[value-display=inline]:not(:defined):after{content:": " attr(value-prefix) attr(min) attr(value-suffix);display:block;white-space:nowrap}a-slider[value-display=inline][defaultvalue]:not([value]):not(:defined):after{content:": " attr(value-prefix) attr(defaultvalue) attr(value-suffix)}a-slider[value-display=inline][value]:not(:defined):after{content:": " attr(value-prefix) attr(value) attr(value-suffix)}a-slider[value-display=none]:not(:defined):not(:has(>[slot=label])):before{grid-row:1}a-slider:not(:defined)>[slot=markers]{grid-column:1 / -1;grid-row:3;position:relative;inset-inline-start:var(--slider-marker-position);max-inline-size:min(12rem,50vw);color:var(--slider-marker, var(--text-4));font-family:var(--sans-serif);font-size:var(--slider-marker-size);font-variant-numeric:tabular-nums;line-height:var(--slider-marker-line-height);text-align:center;transform:translate(-50%);white-space:nowrap}a-slider:not(:defined)>[slot=markers][data-slider-marker-start]{text-align:start;transform:translate(0)}a-slider:not(:defined)>[slot=markers][data-slider-marker-end]{text-align:end;transform:translate(-100%)}a-slider:not(:defined)>:not([slot]){grid-column:1 / -1;grid-row:3}a-slider:defined{opacity:1;transition:opacity .28s ease-out 40ms}@media(prefers-reduced-motion:reduce){a-slider,a-slider:not(:defined),a-slider:defined{transition:none}}}
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { finiteNumber, HTMLElementBase } from "../anta_helpers";
|
|
2
2
|
import "./a-slider.css";
|
|
3
|
-
const finiteNumber = (value, fallback) => {
|
|
4
|
-
if (value == null || value === "") return fallback;
|
|
5
|
-
const number = Number(value);
|
|
6
|
-
return Number.isFinite(number) ? number : fallback;
|
|
7
|
-
};
|
|
8
3
|
const precisionOf = (value) => {
|
|
9
4
|
const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
|
|
10
5
|
return Math.max(0, (exponent?.[1]?.length ?? 0) - Number(exponent?.[2] ?? 0));
|
|
@@ -89,7 +84,6 @@ class ASliderElement extends HTMLElementBase {
|
|
|
89
84
|
.end-value {
|
|
90
85
|
color: var(--slider-value);
|
|
91
86
|
font-family: var(--sans-serif);
|
|
92
|
-
font-feature-settings: 'ss02', 'ss05', 'tnum';
|
|
93
87
|
font-size: var(--slider-value-size);
|
|
94
88
|
font-variant-numeric: tabular-nums;
|
|
95
89
|
line-height: var(--slider-value-line-height);
|
|
@@ -169,7 +163,6 @@ class ASliderElement extends HTMLElementBase {
|
|
|
169
163
|
min-inline-size: max-content;
|
|
170
164
|
color: var(--slider-value);
|
|
171
165
|
font-family: var(--sans-serif);
|
|
172
|
-
font-feature-settings: 'ss02', 'ss05', 'tnum';
|
|
173
166
|
font-size: var(--slider-value-size);
|
|
174
167
|
font-variant-numeric: tabular-nums;
|
|
175
168
|
line-height: var(--slider-value-line-height);
|
|
@@ -194,7 +187,6 @@ class ASliderElement extends HTMLElementBase {
|
|
|
194
187
|
max-inline-size: min(12rem, 50vw);
|
|
195
188
|
color: var(--slider-marker);
|
|
196
189
|
font-family: var(--sans-serif);
|
|
197
|
-
font-feature-settings: 'ss02', 'ss05', 'tnum';
|
|
198
190
|
font-size: var(--slider-marker-size);
|
|
199
191
|
font-variant-numeric: tabular-nums;
|
|
200
192
|
line-height: var(--slider-marker-line-height);
|
|
@@ -281,6 +273,7 @@ class ASliderElement extends HTMLElementBase {
|
|
|
281
273
|
this.#control.addEventListener("pointermove", (event) => this.#moveDrag(event));
|
|
282
274
|
this.#control.addEventListener("pointerup", (event) => this.#finishDrag(event));
|
|
283
275
|
this.#control.addEventListener("pointercancel", (event) => this.#finishDrag(event));
|
|
276
|
+
this.#control.addEventListener("lostpointercapture", (event) => this.#finishDrag(event));
|
|
284
277
|
this.addEventListener("keydown", (event) => this.#handleKeydown(event));
|
|
285
278
|
this.addEventListener("blur", () => delete this.#control.dataset.pointerFocus);
|
|
286
279
|
shadow.append(style, this.#header, this.#control, this.#markers, this.#extras);
|
|
@@ -423,6 +416,10 @@ class ASliderElement extends HTMLElementBase {
|
|
|
423
416
|
#moveDrag(event) {
|
|
424
417
|
const drag = this.#drag;
|
|
425
418
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
419
|
+
if (!(event.buttons & 1)) {
|
|
420
|
+
this.#finishDrag(event);
|
|
421
|
+
return;
|
|
422
|
+
}
|
|
426
423
|
const next = this.getAttribute("track-click") === "jump" ? this.#valueAt(event.clientX) : drag.startValue + (event.clientX - drag.startX) / this.#railArea.getBoundingClientRect().width * (this.#max - this.#min);
|
|
427
424
|
this.#setValue(next);
|
|
428
425
|
event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: color-mix(in oklch, #44374b 10%, transparent);--switch-thumb: var(--bg-1);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--
|
|
1
|
+
@layer anta.components{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: light-dark( color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent) );--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand);--switch-track-on: light-dark( oklch(from var(--switch-tone-source) .56 c h), oklch(from var(--switch-tone-source) .47 c h) );--switch-track-on-hover: light-dark( oklch(from var(--switch-tone-source) .48 c h), oklch(from var(--switch-tone-source) .53 c h) );--switch-track-on-active: light-dark( oklch(from var(--switch-tone-source) .42 c h), oklch(from var(--switch-tone-source) .58 c h) );--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, 999px);--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px));@supports (border-radius: attr(probe type(<length>),1px)){--switch-track-round: var(--switch-round, attr(round type(<length>), 999px))}}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:0 1px 2px color-mix(in oklch,#44374b 25%,transparent)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):not(:state(checked)):hover:before{border-color:var(--switch-track-off-stroke-hover)}&:not(:disabled):hover:state(checked):before{background:var(--switch-track-on-hover)}}&:not(:disabled):not(:state(checked)):active:before{border-color:var(--switch-track-off-stroke-active)}&:not(:disabled):active:state(checked):before{background:var(--switch-track-on-active)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--switch-label-color-disabled);&:before{background:var(--switch-track-disabled);border-color:var(--switch-track-disabled);transition:none}&:after{box-shadow:none;transition:none}&:state(checked){&:before{background:color-mix(in oklch,var(--switch-track-on) 50%,transparent);border-color:transparent}&:after{background:color-mix(in oklch,var(--switch-thumb) 50%,transparent);box-shadow:0 1px 2px color-mix(in oklch,#44374b 12.5%,transparent)}}a-switch-hint{color:var(--switch-label-color-disabled)}}&[size=small]{--switch-gap: 6px;--switch-track-inline-size: 26px;--switch-track-block-size: 16px;--switch-thumb-size: 10px;--switch-thumb-size-off: 8px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 11px;--switch-label-fs: 13px;--switch-label-lh: 16px;--switch-hint-fs: 12px;--switch-hint-lh: 14px}&[size=large]{--switch-track-inline-size: 34px;--switch-track-block-size: 20px;--switch-thumb-size: 14px;--switch-thumb-size-off: 11px;--switch-thumb-inset-off: 5px;--switch-thumb-travel: 15px;--switch-label-fs: 17px;--switch-label-lh: 22px;--switch-hint-fs: 15px;--switch-hint-lh: 19px}}a-switch-label,a-switch-hint{display:block;grid-column:2;min-inline-size:0}a-switch-hint{color:var(--switch-hint-color);font-size:var(--switch-hint-fs);line-height:var(--switch-hint-lh);margin-block-start:2px}a-switch[tone=brand]{--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand)}a-switch[tone=neutral]{--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral)}a-switch[tone=info]{--switch-tone-source: var(--anta-seed-info);--switch-off-tone-source: var(--anta-seed-info)}a-switch[tone=success]{--switch-tone-source: var(--anta-seed-success);--switch-off-tone-source: var(--anta-seed-success)}a-switch[tone=warning]{--switch-tone-source: var(--anta-seed-warning);--switch-off-tone-source: var(--anta-seed-warning)}a-switch[tone=critical]{--switch-tone-source: var(--anta-seed-critical);--switch-off-tone-source: var(--anta-seed-critical)}a-switch:not([tone],[tone-scope=selected]),a-switch[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--_switch-off-track: light-dark( oklch(from var(--switch-off-tone-source) .56 c h), oklch(from var(--switch-off-tone-source) .47 c h) );--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: light-dark( oklch(from var(--_switch-off-chrome) calc(l + .17) c h), var(--_switch-off-chrome) );--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: light-dark( var(--_switch-off-chrome), oklch(from var(--_switch-off-chrome) calc(l + .17) c h) );--switch-thumb-off: var(--_switch-off-chrome)}a-switch[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--switch-tone-source: transparent;--switch-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--switch-tone-source: attr(tone type(<color>), transparent);--switch-off-tone-source: attr(tone type(<color>), transparent)}}@media(forced-colors:active){a-switch:before,a-switch:after{forced-color-adjust:none}a-switch:before{background-color:Canvas;border-color:CanvasText}a-switch:after{background-color:CanvasText;box-shadow:none}a-switch:state(checked):before{background-color:CanvasText;border-color:CanvasText}a-switch:state(checked):after{background-color:Canvas}a-switch:disabled:before{background-color:Canvas;border-color:GrayText}a-switch:disabled:after{background-color:GrayText}a-switch:disabled:state(checked):before{background-color:GrayText;border-color:GrayText}a-switch:disabled:state(checked):after{background-color:Canvas}}}
|
package/dist/elements/a-tab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-
|
|
1
|
+
@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.05ch;white-space:nowrap;text-wrap:nowrap;min-height:var(--tab-height);padding-block:calc((8px - var(--_pb)) / 2);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}
|
package/dist/elements/a-tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--_track-l: .55;--_track-c: .008;--_track-a: .06;--_sec-a: .03;--tabs-track-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_track-a));--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: oklch(from var(--tabs-tone-source) var(--_track-l) var(--_track-c) h / var(--_sec-a));display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2);--_track-c: .008}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .14}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .14}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: #635b65;--tab-selected-text: oklch(from var(--tabs-tone-source) .38 .13 h);--tab-text-2: oklch(from var(--tabs-tone-source) .45 .13 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .45 .13 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .9 .045 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .8 .09 h);@supports (color: attr(probe type(<color>),red)){--tabs-tone-source: attr(tone type(<color>), #635b65)}}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--tabs-round: attr(round type(<length>), 999px)}}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}.dark a-tabs{--_track-l: .8;--_track-a: .07;--_sec-a: .08}.dark a-tabs[tone]:not([tone=""],[tone=neutral]),.dark a-tab[tone]:not([tone=""],[tone=neutral]){--_track-c: .12}.dark a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--_track-c: .12}.dark a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),.dark a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tab-selected-text: oklch(from var(--tabs-tone-source) .83 .1 h);--tab-text-2: oklch(from var(--tabs-tone-source) .76 .11 h);--tab-rest-tone: oklch(from var(--tabs-tone-source) .76 .11 h / .8);--tabs-track-border: oklch(from var(--tabs-tone-source) .26 .055 h);--tab-selected-border: oklch(from var(--tabs-tone-source) .4 .11 h)}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
|
|
1
|
+
@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), oklch(from var(--tabs-tone-source) .8 .008 h / .07) );--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) );display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: #635b65;--tab-selected-text: light-dark(oklch(from var(--tabs-tone-source) .38 .13 h), oklch(from var(--tabs-tone-source) .83 .1 h));--tab-text-2: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h), oklch(from var(--tabs-tone-source) .76 .11 h));--tab-rest-tone: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h / .8), oklch(from var(--tabs-tone-source) .76 .11 h / .8));--tabs-track-border: light-dark(oklch(from var(--tabs-tone-source) .9 .045 h), oklch(from var(--tabs-tone-source) .26 .055 h));--tab-selected-border: light-dark(oklch(from var(--tabs-tone-source) .8 .09 h), oklch(from var(--tabs-tone-source) .4 .11 h));@supports (color: attr(probe type(<color>),red)){--tabs-tone-source: attr(tone type(<color>), #635b65)}}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--tabs-round: attr(round type(<length>), 999px)}}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
|
package/dist/elements/a-tag.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--
|
|
1
|
+
@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--tag-tint: light-dark(oklch(from var(--tag-tone-source) .55 .03 h), oklch(from var(--tag-tone-source) .63 .04 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .55 .015 h), oklch(from var(--tag-tone-source) .48 .015 h));--tag-text: var(--text-3);--tag-edge: var(--text-2);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-border: light-dark(color-mix(in oklch, var(--tag-tint) 15%, transparent), color-mix(in oklch, var(--tag-tint) 25%, transparent));--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;max-width:100%;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.1ch;font-variant-numeric:lining-nums tabular-nums}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone]:not([tone=""],[tone=neutral]){--tag-tint: light-dark(oklch(from var(--tag-tone-source) .57 .16 h), oklch(from var(--tag-tone-source) .63 .17 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .58 .175 h), oklch(from var(--tag-tone-source) .46 .165 h))}a-tag[tone=brand]{--tag-tone-source: var(--anta-seed-brand);--tag-text: var(--text-3-brand);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tone-source: var(--anta-seed-info);--tag-text: var(--text-3-info);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tone-source: var(--anta-seed-success);--tag-text: var(--text-3-success);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tone-source: var(--anta-seed-warning);--tag-text: var(--text-3-warning);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tone-source: var(--anta-seed-critical);--tag-text: var(--text-3-critical);--tag-edge: var(--text-2-critical)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: light-dark( color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent), color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent) );--tag-edge: light-dark(oklch(from var(--tag-tone-source) .43 .15 h), oklch(from var(--tag-tone-source) .77 .11 h));@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}a-tag[priority=primary]{--tag-bg: var(--tag-bg-solid);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: light-dark( color-mix(in oklch, var(--tag-edge) 20%, transparent), color-mix(in oklch, var(--tag-edge) 30%, transparent) )}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}@media(forced-colors:active){a-tag{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:1px solid CanvasText}a-tag[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-tag[priority=primary]{forced-color-adjust:none}a-tag[priority=tertiary]{border-style:dashed}}}
|
package/dist/elements/a-text.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty
|
|
1
|
+
@layer anta.components{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: currentColor;--_text-tone: light-dark(oklch(from var(--text-tone-source) .41 .15 h), oklch(from var(--text-tone-source) .75 .11 h));--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--text-tone-source: attr(tone type(<color>), currentColor)}}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h))}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
|
package/dist/elements/a-text.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance
|
|
1
|
+
@layer anta.components{a-title{display:block;font-family:var(--sans-serif);color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px}a-title[level="2"]{font-size:24px;line-height:28px}a-title[level="3"]{font-size:20px;line-height:24px}a-title[level="4"]{font-size:17px;line-height:20px}a-title[level="5"]{font-size:15px;line-height:20px}a-title[level="6"]{font-size:13px;line-height:16px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: currentColor;--_title-tone: light-dark(oklch(from var(--title-tone-source) .41 .15 h), oklch(from var(--title-tone-source) .75 .11 h));color:light-dark(oklch(from var(--title-tone-source) .33 .15 h),oklch(from var(--title-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--title-tone-source: attr(tone type(<color>), currentColor)}}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--tooltip-radius: attr(round type(<length>), 20px)}}.dark a-tooltip{--tooltip-
|
|
1
|
+
@layer anta.components{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: light-dark( color-mix(in oklch, var(--bg-1) 80%, transparent), color-mix(in oklch, var(--bg-1) 70%, transparent) );--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: 20px;@supports (border-radius: attr(probe type(<length>),1px)){--tooltip-radius: attr(round type(<length>), 20px)}}.dark a-tooltip{--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}@media(forced-colors:active){a-tooltip{--tooltip-border: 1px dotted CanvasText}}}a-tooltip>p:last-child,a-tooltip>:not([slot])>p:last-child{margin-block-end:0}
|
|
@@ -15,10 +15,9 @@ import './a-tooltip.css';
|
|
|
15
15
|
* light DOM — its font/color/size are already styleable from the page and
|
|
16
16
|
* are intentionally NOT tokens.
|
|
17
17
|
* - The frost: `--tooltip-bg` is a mostly-opaque mix of `--bg-1` that, with
|
|
18
|
-
* the container's backdrop blur, reads as a frosted bubble.
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* the edge stays crisp on dark content). There's no real border by
|
|
18
|
+
* the container's backdrop blur, reads as a frosted bubble. `light-dark()`
|
|
19
|
+
* lowers the dark alpha and adds an inset white ring so the edge stays crisp
|
|
20
|
+
* on dark content. There's no real border by
|
|
22
21
|
* default — the hairline edge comes from `--tooltip-shadow`; set
|
|
23
22
|
* `--tooltip-border` for an actual one.
|
|
24
23
|
* - On coarse/no-hover pointers, an anchor that owns a tooltip
|
|
@@ -169,7 +169,6 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
169
169
|
font-weight: 400;
|
|
170
170
|
font-style: normal;
|
|
171
171
|
font-stretch: normal;
|
|
172
|
-
font-variation-settings: "wdth" 100, "slnt" 0, "ital" 0;
|
|
173
172
|
line-height: 1.5;
|
|
174
173
|
letter-spacing: 0.02ch;
|
|
175
174
|
word-spacing: normal;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { CaptureInputCancelReason } from '../capture-types';
|
|
2
|
+
export declare const CAPTURE_INPUT_ATTRIBUTES: string[];
|
|
3
|
+
/** Read declarative attributes, allocating input resources only for enabled capabilities. */
|
|
4
|
+
export declare function syncCaptureInput(surface: HTMLElement, attribute?: string): void;
|
|
5
|
+
export declare function disconnectCaptureInput(surface: HTMLElement, reason?: CaptureInputCancelReason): void;
|