@antadesign/anta 0.3.34 → 0.3.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +14 -1
- package/README.md +9 -0
- package/dist/anta_helpers.d.ts +46 -30
- package/dist/anta_helpers.js +66 -25
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +2 -1333
- package/dist/components/Banner.d.ts +25 -40
- package/dist/components/Banner.js +15 -17
- package/dist/components/Button.js +1 -0
- package/dist/components/ButtonCopy.js +3 -2
- package/dist/components/Calendar.js +13 -13
- package/dist/components/Card.d.ts +9 -17
- package/dist/components/Card.js +50 -46
- package/dist/components/Dialog.d.ts +1 -0
- package/dist/components/Dialog.js +16 -10
- package/dist/components/Expander.d.ts +6 -21
- package/dist/components/Expander.js +24 -23
- package/dist/components/Icon.d.ts +8 -14
- package/dist/components/Input.d.ts +77 -96
- package/dist/components/Input.js +23 -27
- package/dist/components/InputAutocomplete.d.ts +29 -10
- package/dist/components/InputAutocomplete.js +25 -8
- package/dist/components/InputDate.js +2 -2
- package/dist/components/InputTime.d.ts +10 -4
- package/dist/components/InputTime.js +20 -16
- package/dist/components/Loader.d.ts +2 -2
- package/dist/components/Menu.d.ts +5 -4
- package/dist/components/Menu.js +13 -8
- package/dist/components/MenuItem.js +1 -14
- package/dist/components/MenuItemCopy.js +2 -2
- package/dist/components/Panel.d.ts +3 -1
- package/dist/components/Panel.js +17 -11
- package/dist/components/Progress.d.ts +21 -23
- package/dist/components/Progress.js +13 -9
- package/dist/components/RadioGroup.js +6 -8
- package/dist/components/{select-parts.css → Select.css} +1 -1
- package/dist/components/Select.d.ts +53 -35
- package/dist/components/Select.js +53 -97
- package/dist/components/SelectFaceted.d.ts +7 -3
- package/dist/components/SelectFaceted.js +21 -9
- package/dist/components/Slider.d.ts +28 -11
- package/dist/components/Slider.js +20 -20
- package/dist/components/Steps.css +1 -1
- package/dist/components/Steps.js +1 -11
- package/dist/components/Tabs.d.ts +17 -20
- package/dist/components/Tabs.js +5 -8
- package/dist/components/Text.d.ts +55 -36
- package/dist/components/Text.js +35 -22
- package/dist/components/Title.d.ts +16 -26
- package/dist/components/Title.js +2 -1
- package/dist/components/Toaster.js +9 -2
- package/dist/components/Tooltip.d.ts +10 -15
- package/dist/components/copy-props.d.ts +14 -3
- package/dist/components/copy-props.js +14 -3
- package/dist/components/select-tree.d.ts +24 -0
- package/dist/components/select-tree.js +35 -0
- package/dist/element-base.d.ts +10 -0
- package/dist/element-base.js +15 -0
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-banner.d.ts +4 -1
- package/dist/elements/a-banner.js +22 -112
- package/dist/elements/a-button.d.ts +2 -1
- package/dist/elements/a-button.js +18 -1
- package/dist/elements/a-calendar.d.ts +14 -13
- package/dist/elements/a-calendar.js +29 -24
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-card.d.ts +0 -9
- package/dist/elements/a-card.js +0 -184
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-copy.css +1 -1
- package/dist/elements/a-copy.d.ts +1 -5
- package/dist/elements/a-copy.js +129 -108
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-dialog.d.ts +1 -1
- package/dist/elements/a-dialog.js +66 -194
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.d.ts +4 -30
- package/dist/elements/a-expander.js +85 -344
- package/dist/elements/a-icon.d.ts +5 -23
- package/dist/elements/a-icon.js +1 -2
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.d.ts +2 -1
- package/dist/elements/a-input-time.js +101 -168
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.d.ts +10 -8
- package/dist/elements/a-input.js +155 -230
- package/dist/elements/a-loader.d.ts +5 -8
- package/dist/elements/a-loader.js +1 -2
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu-item.d.ts +5 -3
- package/dist/elements/a-menu-item.js +5 -1
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-menu.d.ts +5 -7
- package/dist/elements/a-menu.js +383 -299
- package/dist/elements/a-panel.css +1 -1
- package/dist/elements/a-panel.js +19 -37
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-progress.d.ts +0 -22
- package/dist/elements/a-progress.js +0 -100
- package/dist/elements/a-radio-group.d.ts +1 -1
- package/dist/elements/a-radio-group.js +6 -4
- package/dist/elements/a-select-faceted.d.ts +1 -1
- package/dist/elements/a-select-faceted.js +1 -1
- package/dist/elements/a-select.d.ts +1 -1
- package/dist/elements/a-select.js +1 -1
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-slider.d.ts +11 -3
- package/dist/elements/a-slider.js +244 -242
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-tab.css +1 -1
- package/dist/elements/a-tabs.css +1 -1
- package/dist/elements/a-tabs.d.ts +1 -1
- package/dist/elements/a-tabs.js +6 -4
- package/dist/elements/a-tag.css +1 -1
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-text.d.ts +6 -43
- package/dist/elements/a-text.js +110 -193
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-toast.css +1 -1
- package/dist/elements/a-toast.d.ts +10 -45
- package/dist/elements/a-toast.js +80 -66
- package/dist/elements/a-toaster.css +1 -1
- package/dist/elements/a-toaster.js +9 -44
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +1 -1
- package/dist/elements/a-tooltip.js +142 -136
- package/dist/elements/copy-behavior.d.ts +1 -1
- package/dist/elements/copy-behavior.js +21 -21
- package/dist/elements/index.d.ts +3 -3
- package/dist/elements/index.js +3 -7
- package/dist/elements/input-focus-modality.d.ts +15 -0
- package/dist/elements/input-focus-modality.js +44 -0
- package/dist/elements/input-trailing-actions.d.ts +5 -0
- package/dist/elements/input-trailing-actions.js +38 -0
- package/dist/elements/shadow-aria.d.ts +2 -0
- package/dist/elements/shadow-aria.js +2 -1
- package/dist/elements/value-input.d.ts +3 -0
- package/dist/elements/value-input.js +12 -0
- package/dist/general_types.d.ts +103 -96
- package/dist/index.d.ts +1 -1
- package/dist/input-events.d.ts +4 -0
- package/dist/input-events.js +15 -0
- package/dist/jsx-runtime.d.ts +70 -23
- package/dist/jsx-runtime.js +26 -19
- package/dist/native-event-props.d.ts +2 -0
- package/dist/native-event-props.js +10 -0
- package/dist/reset.css +1 -1
- package/dist/theme-antithesis.css +10 -1
- package/dist/theme-antune.css +1 -1
- package/docs/accessibility.md +17 -3
- package/docs/changelog.md +348 -2
- package/docs/comparison.md +2 -2
- package/docs/components/avatar.md +5 -0
- package/docs/components/banner.md +117 -187
- package/docs/components/button.md +22 -0
- package/docs/components/card.md +74 -28
- package/docs/components/checkbox.md +9 -10
- package/docs/components/dialog.md +83 -32
- package/docs/components/expander.md +198 -435
- package/docs/components/icon.md +11 -17
- package/docs/components/input-autocomplete.md +152 -52
- package/docs/components/input-date.md +175 -148
- package/docs/components/input-time.md +81 -38
- package/docs/components/input.md +343 -349
- package/docs/components/loader.md +2 -1
- package/docs/components/menu.md +35 -6
- package/docs/components/panel.md +18 -0
- package/docs/components/progress.md +83 -49
- package/docs/components/radio.md +39 -43
- package/docs/components/select-faceted.md +54 -7
- package/docs/components/select.md +390 -386
- package/docs/components/slider.md +136 -19
- package/docs/components/steps.md +2 -1
- package/docs/components/switch.md +8 -9
- package/docs/components/tabs.md +110 -104
- package/docs/components/text.md +110 -86
- package/docs/components/title.md +47 -33
- package/docs/components/toaster.md +242 -84
- package/docs/components/tooltip.md +204 -113
- package/docs/install-config.md +183 -26
- package/docs/packages/plot.md +170 -148
- package/docs/theming.md +7 -0
- package/package.json +41 -3
- package/theme-antithesis-license.md +66 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-panel{display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;overflow:auto}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-panel{display:block;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;overflow:auto}a-panel:not(:state(maximized))::part(content){display:contents}a-panel::part(content):popover-open{display:block;position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;color:inherit;background:inherit}a-panel::part(content)::backdrop{background:transparent;pointer-events:none}a-panel::part(placeholder){display:none}a-panel:state(maximized)::part(placeholder){display:block;flex:0 0 auto;max-width:100%;pointer-events:none}}
|
package/dist/elements/a-panel.js
CHANGED
|
@@ -1,34 +1,6 @@
|
|
|
1
1
|
import { HTMLElementBase } from "../anta_helpers";
|
|
2
2
|
import { activeFocus, PanelFocusScope } from "./panel-focus";
|
|
3
3
|
import "./a-panel.css";
|
|
4
|
-
const SHADOW_STYLE = `
|
|
5
|
-
slot:not([popover]) { display: contents; }
|
|
6
|
-
slot:popover-open {
|
|
7
|
-
display: block;
|
|
8
|
-
position: fixed;
|
|
9
|
-
inset: 0;
|
|
10
|
-
width: auto;
|
|
11
|
-
height: auto;
|
|
12
|
-
max-width: none;
|
|
13
|
-
max-height: none;
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 0;
|
|
16
|
-
border: 0;
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
overflow: auto;
|
|
19
|
-
overscroll-behavior: contain;
|
|
20
|
-
color: inherit;
|
|
21
|
-
background: inherit;
|
|
22
|
-
}
|
|
23
|
-
slot::backdrop { background: transparent; pointer-events: none; }
|
|
24
|
-
.placeholder { display: none; }
|
|
25
|
-
.placeholder.active {
|
|
26
|
-
display: block;
|
|
27
|
-
flex: 0 0 auto;
|
|
28
|
-
max-width: 100%;
|
|
29
|
-
pointer-events: none;
|
|
30
|
-
}
|
|
31
|
-
`;
|
|
32
4
|
const parseState = (value) => value === "maximized" ? "maximized" : "normal";
|
|
33
5
|
class APanelElement extends HTMLElementBase {
|
|
34
6
|
static observedAttributes = ["state"];
|
|
@@ -44,15 +16,13 @@ class APanelElement extends HTMLElementBase {
|
|
|
44
16
|
this.#internals = this.attachInternals();
|
|
45
17
|
const shadow = this.attachShadow({ mode: "open" });
|
|
46
18
|
const doc = this.ownerDocument;
|
|
47
|
-
const style = doc.createElement("style");
|
|
48
|
-
style.textContent = SHADOW_STYLE;
|
|
49
19
|
this.#surface = doc.createElement("slot");
|
|
50
20
|
this.#surface.setAttribute("part", "content");
|
|
51
21
|
this.#focus = new PanelFocusScope(this.#surface);
|
|
52
22
|
this.#placeholder = doc.createElement("div");
|
|
53
|
-
this.#placeholder.
|
|
23
|
+
this.#placeholder.setAttribute("part", "placeholder");
|
|
54
24
|
this.#placeholder.setAttribute("aria-hidden", "true");
|
|
55
|
-
shadow.append(
|
|
25
|
+
shadow.append(this.#placeholder, this.#surface);
|
|
56
26
|
this.#surface.addEventListener("toggle", () => {
|
|
57
27
|
if (this.#ready && this.isConnected) this.#apply();
|
|
58
28
|
});
|
|
@@ -121,24 +91,36 @@ class APanelElement extends HTMLElementBase {
|
|
|
121
91
|
const height = parseFloat(styles.height) - (borderBox ? parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom) + borderHeight : 0) - scrollbarHeight;
|
|
122
92
|
this.#placeholder.style.width = `${Math.max(0, width || 0)}px`;
|
|
123
93
|
this.#placeholder.style.height = `${Math.max(0, height || 0)}px`;
|
|
124
|
-
this.#placeholder.classList.add("active");
|
|
125
94
|
this.#surface.tabIndex = -1;
|
|
126
95
|
this.#surface.setAttribute("popover", "manual");
|
|
127
96
|
this.#focus.activate(focused);
|
|
128
|
-
|
|
129
|
-
|
|
97
|
+
try {
|
|
98
|
+
this.#surface.showPopover();
|
|
99
|
+
} catch (error) {
|
|
100
|
+
this.#abandonOpening();
|
|
101
|
+
throw error;
|
|
102
|
+
}
|
|
103
|
+
if (this.#current !== "maximized") {
|
|
104
|
+
this.#abandonOpening();
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
this.#internals.states.add("maximized");
|
|
130
108
|
this.#focus.focusInside(focused);
|
|
131
109
|
} else {
|
|
132
110
|
this.#restoreSurface();
|
|
133
111
|
}
|
|
134
112
|
}
|
|
113
|
+
// An uncontrolled Panel must not retry a failed opening on reconnect.
|
|
114
|
+
#abandonOpening() {
|
|
115
|
+
if (!this.hasAttribute("state")) this.#wanted = "normal";
|
|
116
|
+
this.#restoreSurface();
|
|
117
|
+
}
|
|
135
118
|
#restoreSurface(restoreFocus = true) {
|
|
136
119
|
const returnFocus = this.#focus.deactivate();
|
|
137
120
|
if (this.#current === "maximized") this.#surface.hidePopover();
|
|
138
121
|
this.#surface.removeAttribute("popover");
|
|
139
122
|
this.#surface.removeAttribute("tabindex");
|
|
140
|
-
this.#
|
|
141
|
-
this.#internals.states?.delete("maximized");
|
|
123
|
+
this.#internals.states.delete("maximized");
|
|
142
124
|
if (restoreFocus) returnFocus();
|
|
143
125
|
}
|
|
144
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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-
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@property --_progress-loading-distance{syntax: "<length>"; inherits: false; initial-value: 0px;}@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-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-round: 0px;--progress-fill-start: calc(100% - 90px) ;--progress-fill: linear-gradient( 90deg, var(--progress-indicator-bg) var(--progress-fill-start), var(--progress-border-color) 100% );--progress-loading-fill: 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)) );--progress-label-size: 13px;--progress-label-line-height: 16px}:where(a-progress,progress[data-anta]){display:block;position:relative;overflow:hidden;container-type:inline-size;background:var(--progress-bg);border-radius:var(--progress-round)}a-progress{--progress-value: initial;--progress-max: initial;--progress-value-resolved: var(--progress-value, 0);--progress-max-resolved: var(--progress-max, 100);isolation:isolate;padding:var(--progress-padding-block) var(--progress-padding-inline);min-height:var(--progress-min-height);border:0px solid var(--progress-border-color)}@supports (width: calc(attr(value type(<number>),0)*1%)){a-progress{--progress-value-resolved: var(--progress-value, attr(value type(<number>), 0))}a-progress[max]{--progress-max-resolved: var(--progress-max, attr(max type(<number>), 0))}}a-progress:before{content:"";position:absolute;top:0;bottom:0;left:0;width:clamp(0%,calc(max(0,var(--progress-value-resolved)) / var(--progress-max-resolved) * 100% + 0% / var(--progress-max-resolved)),100%);overflow:hidden;z-index:-1;pointer-events:none;background:var(--progress-fill);transition:width .2s ease}a-progress:not([value]):before,progress[data-anta]:not([value]):before{--_progress-loading-distance: var(--progress-loading-x-period);content:"";position:absolute;top:0;bottom:0;left:calc(-2 * var(--progress-loading-x-period));width:calc(100% + 3 * var(--progress-loading-x-period));pointer-events:none;background:var(--progress-loading-fill);filter:blur(var(--progress-loading-blur));opacity:var(--progress-loading-opacity);transition:none}@media(prefers-reduced-motion:no-preference){a-progress:not([value]):before,progress[data-anta]:not([value]):before{will-change:transform;animation:progress-loading-slide var(--progress-loading-duration) linear infinite;animation-delay:-9999s}}@keyframes progress-loading-slide{to{transform:translate(var(--_progress-loading-distance))}}: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}:where(a-progress,progress[data-anta])[round]{--progress-round: 999px}@supports (border-radius: attr(round type(<length>),999px)){:where(a-progress,progress[data-anta])[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) )}}progress[data-anta]{--anta-native-progress-height: calc( var(--progress-min-height) + var(--progress-padding-block) + var(--progress-padding-block) );--progress-fill-start: max(0%, calc(100% - 90px) );box-sizing:border-box;inline-size:100%;block-size:var(--anta-native-progress-height);margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle}progress[data-anta]::-webkit-progress-bar{border-radius:var(--progress-round);background:var(--progress-bg)}progress[data-anta]::-webkit-progress-value{border-radius:var(--progress-round);background:var(--progress-fill)}progress[data-anta]::-moz-progress-bar{border:0;border-radius:var(--progress-round);background:var(--progress-fill)}a-progress-label{display:flex;align-items:flex-start;gap:.5ch;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;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)}@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-text-color: CanvasText !important;--progress-hint-color: CanvasText !important;border:1px dotted CanvasText!important}a-progress[value]:before{box-shadow:inset -1px 0 0 light-dark(SelectedItemText,HighlightText)!important}}}a-progress>p:last-child,a-progress>:not([slot])>p:last-child{margin-block-end:0}
|
|
@@ -1,23 +1 @@
|
|
|
1
|
-
import { HTMLElementBase } from '../anta_helpers';
|
|
2
1
|
import './a-progress.css';
|
|
3
|
-
/**
|
|
4
|
-
* `<a-progress>` — progress bar element.
|
|
5
|
-
*
|
|
6
|
-
* Styling notes (`a-progress.css` ships comment-free):
|
|
7
|
-
* - `--progress-indicator-edge` is a right-edge fade from the indicator's
|
|
8
|
-
* own bg to the border color, both opaque; tone variants re-tint it
|
|
9
|
-
* automatically because both endpoint tokens are re-aliased per tone.
|
|
10
|
-
* - `border: 0px solid var(--progress-border-color)` is a per-component
|
|
11
|
-
* reset (same spirit as Tailwind preflight): style and color are declared
|
|
12
|
-
* at a known state so a consumer opts into a themed border by changing
|
|
13
|
-
* only `border-width`.
|
|
14
|
-
*/
|
|
15
|
-
export declare class AProgressElement extends HTMLElementBase {
|
|
16
|
-
static observedAttributes: string[];
|
|
17
|
-
indicator: HTMLDivElement;
|
|
18
|
-
constructor();
|
|
19
|
-
connectedCallback(): void;
|
|
20
|
-
attributeChangedCallback(): void;
|
|
21
|
-
update(): void;
|
|
22
|
-
}
|
|
23
|
-
export declare function register_a_progress(): void;
|
|
@@ -1,101 +1 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
2
1
|
import "./a-progress.css";
|
|
3
|
-
class AProgressElement extends HTMLElementBase {
|
|
4
|
-
static observedAttributes = ["value", "max", "tone"];
|
|
5
|
-
indicator;
|
|
6
|
-
constructor() {
|
|
7
|
-
super();
|
|
8
|
-
const shadow = this.attachShadow({ mode: "open" });
|
|
9
|
-
const style = document.createElement("style");
|
|
10
|
-
style.textContent = `
|
|
11
|
-
:host {
|
|
12
|
-
display: block;
|
|
13
|
-
position: relative;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
}
|
|
16
|
-
.indicator {
|
|
17
|
-
position: absolute;
|
|
18
|
-
top: 0;
|
|
19
|
-
left: 0;
|
|
20
|
-
bottom: 0;
|
|
21
|
-
width: var(--_percent, 0%);
|
|
22
|
-
background: var(--progress-indicator-bg);
|
|
23
|
-
border-radius: 0;
|
|
24
|
-
transition: width 0.2s ease;
|
|
25
|
-
}
|
|
26
|
-
.indicator::after {
|
|
27
|
-
content: '';
|
|
28
|
-
position: absolute;
|
|
29
|
-
top: 0;
|
|
30
|
-
right: 0;
|
|
31
|
-
bottom: 0;
|
|
32
|
-
width: 90px;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
background: var(--progress-indicator-edge);
|
|
35
|
-
border-right: var(--progress-indicator-edge-border, none);
|
|
36
|
-
}
|
|
37
|
-
:host(:not([value])) .indicator {
|
|
38
|
-
left: calc(0px - var(--progress-loading-x-period));
|
|
39
|
-
width: calc(100% + var(--progress-loading-x-period));
|
|
40
|
-
background: repeating-linear-gradient(
|
|
41
|
-
var(--progress-loading-angle),
|
|
42
|
-
transparent 0,
|
|
43
|
-
transparent var(--progress-loading-stripe-gap),
|
|
44
|
-
var(--progress-text-color) var(--progress-loading-stripe-gap),
|
|
45
|
-
var(--progress-text-color) calc(var(--progress-loading-stripe-gap) + var(--progress-loading-stripe))
|
|
46
|
-
);
|
|
47
|
-
filter: blur(var(--progress-loading-blur));
|
|
48
|
-
opacity: var(--progress-loading-opacity);
|
|
49
|
-
transition: none;
|
|
50
|
-
}
|
|
51
|
-
:host(:not([value])) .indicator::after { display: none; }
|
|
52
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
53
|
-
:host(:not([value])) .indicator {
|
|
54
|
-
will-change: transform;
|
|
55
|
-
animation: progress-loading-slide var(--progress-loading-duration) linear infinite;
|
|
56
|
-
animation-delay: -9999s;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
@keyframes progress-loading-slide {
|
|
60
|
-
to { transform: translateX(var(--progress-loading-x-period)); }
|
|
61
|
-
}
|
|
62
|
-
slot {
|
|
63
|
-
display: block;
|
|
64
|
-
position: relative;
|
|
65
|
-
}
|
|
66
|
-
`;
|
|
67
|
-
this.indicator = document.createElement("div");
|
|
68
|
-
this.indicator.className = "indicator";
|
|
69
|
-
this.indicator.setAttribute("part", "indicator");
|
|
70
|
-
const slot = document.createElement("slot");
|
|
71
|
-
shadow.append(style, this.indicator, slot);
|
|
72
|
-
}
|
|
73
|
-
connectedCallback() {
|
|
74
|
-
this.update();
|
|
75
|
-
}
|
|
76
|
-
attributeChangedCallback() {
|
|
77
|
-
this.update();
|
|
78
|
-
}
|
|
79
|
-
update() {
|
|
80
|
-
const valueAttr = this.getAttribute("value");
|
|
81
|
-
if (valueAttr == null) {
|
|
82
|
-
this.indicator.style.removeProperty("--_percent");
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
const value = Number(valueAttr);
|
|
86
|
-
const max = Number(this.getAttribute("max") ?? 100);
|
|
87
|
-
const percent = Number.isFinite(value) && Number.isFinite(max) && max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
|
|
88
|
-
this.indicator.style.setProperty("--_percent", `${percent}%`);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
function register_a_progress() {
|
|
92
|
-
if (typeof customElements === "undefined") return;
|
|
93
|
-
if (!customElements.get("a-progress")) {
|
|
94
|
-
customElements.define("a-progress", AProgressElement);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
register_a_progress();
|
|
98
|
-
export {
|
|
99
|
-
AProgressElement,
|
|
100
|
-
register_a_progress
|
|
101
|
-
};
|
|
@@ -10,7 +10,7 @@ export declare class ARadioGroupElement extends HTMLElementBase {
|
|
|
10
10
|
private observer?;
|
|
11
11
|
private alive;
|
|
12
12
|
private childrenReady;
|
|
13
|
-
/**
|
|
13
|
+
/** Applied option value, or `null` when empty. Read-only; supply selection through `state`. */
|
|
14
14
|
get value(): string | null;
|
|
15
15
|
constructor();
|
|
16
16
|
connectedCallback(): void;
|
|
@@ -14,7 +14,7 @@ class ARadioGroupElement extends HTMLElementBase {
|
|
|
14
14
|
// after connect) — same hazard as a-tabs' childrenReady: adopted HTML
|
|
15
15
|
// upgrades the parent first, and an eager sync() clobbers the children.
|
|
16
16
|
childrenReady = false;
|
|
17
|
-
/**
|
|
17
|
+
/** Applied option value, or `null` when empty. Read-only; supply selection through `state`. */
|
|
18
18
|
get value() {
|
|
19
19
|
return this.#currentValue;
|
|
20
20
|
}
|
|
@@ -24,7 +24,7 @@ class ARadioGroupElement extends HTMLElementBase {
|
|
|
24
24
|
}
|
|
25
25
|
connectedCallback() {
|
|
26
26
|
if (!this.seeded) {
|
|
27
|
-
this.uncontrolledValue = this.getAttribute("default-state");
|
|
27
|
+
this.uncontrolledValue = this.getAttribute("state") ?? this.getAttribute("default-state");
|
|
28
28
|
this.seeded = true;
|
|
29
29
|
}
|
|
30
30
|
this.addEventListener("click", this.onClick);
|
|
@@ -49,8 +49,10 @@ class ARadioGroupElement extends HTMLElementBase {
|
|
|
49
49
|
this.observer?.disconnect();
|
|
50
50
|
}
|
|
51
51
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
52
|
+
const previous = oldValue ?? this.uncontrolledValue;
|
|
53
|
+
if (name === "state") this.uncontrolledValue = newValue ?? oldValue;
|
|
52
54
|
this.sync();
|
|
53
|
-
if (name === "state" && this.alive &&
|
|
55
|
+
if (name === "state" && this.alive && this.#currentValue !== previous) this.emitChange();
|
|
54
56
|
}
|
|
55
57
|
formDisabledCallback(disabled) {
|
|
56
58
|
if (disabled) this.internals?.states?.add("disabled");
|
|
@@ -104,7 +106,7 @@ class ARadioGroupElement extends HTMLElementBase {
|
|
|
104
106
|
}
|
|
105
107
|
}
|
|
106
108
|
// Native `change`, fired *after* a selection applies (user pick or a controlled
|
|
107
|
-
// `
|
|
109
|
+
// `value` update) — the post-apply counterpart to the cancelable, pre-apply
|
|
108
110
|
// `statechange`. Bubbles like a native radio group.
|
|
109
111
|
emitChange() {
|
|
110
112
|
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '../components/
|
|
1
|
+
import '../components/Select.css';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import "../components/
|
|
1
|
+
import "../components/Select.css";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '../components/
|
|
1
|
+
import '../components/Select.css';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import "../components/
|
|
1
|
+
import "../components/Select.css";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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)}}a-slider{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;outline:none}a-slider::part(header){display:flex;align-items:baseline;gap:1px;min-width:0}a-slider::part(label){display:block;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::part(inline-value),a-slider::part(end-value){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)}a-slider::part(value-affix){color:var(--slider-value-affix)}a-slider::part(value-separator),a-slider::part(inline-value){display:none}a-slider::part(inline-value){margin-inline-start:.5ch}a-slider::part(end-value){display:block;flex:0 0 auto;margin-inline-start:auto;padding-inline-start:1ch}a-slider[value-display=inline]::part(value-separator),a-slider[value-display=inline]::part(inline-value){display:block}a-slider[value-display=inline]::part(end-value),a-slider[value-display=thumb]::part(end-value),a-slider[value-display=none]::part(end-value){display:none}a-slider::part(control){position:relative;block-size:var(--anta-slider-control-size);border-radius:4px;cursor:grab;touch-action:none;user-select:none}a-slider[track-click=jump]::part(control){cursor:pointer}a-slider:state(dragging)::part(control){cursor:grabbing}a-slider:state(dragging):state(thumb-1-active)::part(thumb-1),a-slider:state(dragging):state(thumb-2-active)::part(thumb-2){background:var(--slider-thumb-active)}a-slider:focus-visible:not(:state(pointer-focus))::part(control){outline:1px solid var(--focus-ring);outline-offset:0}a-slider::part(rail-area){display:grid;position:absolute;inset-block-start:50%;inset-inline:calc(var(--anta-slider-thumb-size) / 2);block-size:var(--anta-slider-track-size);transform:translateY(-50%)}a-slider::part(track),a-slider::part(fill){position:absolute;inset:0;border-radius:var(--slider-track-radius);transition:background-color 75ms ease-out}a-slider::part(track){inset-inline:calc(var(--slider-track-inset) - var(--anta-slider-thumb-size) / 2);background:var(--slider-track)}a-slider::part(fill){inset-inline-start:calc(var(--_fill-start, 0%) + var(--_fill-start-edge, 0px));inset-inline-end:auto;inline-size:calc(var(--_fill-end, 0%) - var(--_fill-start, 0%) + var(--_fill-end-edge, 0px) - var(--_fill-start-edge, 0px));background:var(--slider-fill)}a-slider::part(thumb){position:absolute;inset-block-start:50%;inset-inline-start:var(--_percent, 0%);margin-inline-start:calc(var(--anta-slider-thumb-size) / -2);box-sizing:border-box;inline-size:var(--anta-slider-thumb-size);block-size:var(--anta-slider-thumb-size);border:var(--anta-slider-thumb-border-width) solid var(--slider-thumb-border);border-radius:var(--slider-thumb-radius);background:var(--slider-thumb);transition:background-color 75ms ease-out,border-color 75ms ease-out;transform:translateY(-50%)}a-slider:state(thumb-1-active)::part(thumb-1),a-slider:state(thumb-2-active)::part(thumb-2){z-index:1}a-slider::part(thumb):focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px;z-index:2}a-slider::part(thumb-value){display:none;position:absolute;inset-inline-start:var(--_percent, 0%);inset-inline-end:calc(100% - var(--_percent, 0%));justify-self:center;inset-block-start:50%;min-inline-size:max-content;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:6px;background:var(--bg-2);border:1px solid var(--border-3);border-radius:4px;text-align:center;transform:translateY(calc(-50% - var(--anta-slider-control-size) / 2 - 1px - var(--slider-value-line-height) / 2))}a-slider[value-display=thumb]::part(thumb-value){display:block}a-slider::part(markers){display:block;position:relative;min-block-size:var(--slider-marker-line-height)}a-slider>[slot=markers]{position:absolute;inset-inline-start:var(--slider-marker-position);inset-inline-end:calc(100% - var(--slider-marker-position));justify-self:center;max-inline-size:min(12rem,50vw);color:var(--slider-marker);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;white-space:nowrap}a-slider>[slot=markers][data-slider-marker-start]{text-align:start;justify-self:start}a-slider>[slot=markers][data-slider-marker-end]{text-align:end;justify-self:end}a-slider::part(extras){display:block}a-slider[disabled]::part(control),a-slider:disabled::part(control){cursor:not-allowed}@media(forced-colors:active){a-slider::part(track){background:Canvas;border:1px solid CanvasText}a-slider::part(fill){background:Highlight}a-slider::part(thumb){background:Canvas;border-color:CanvasText}a-slider:focus-visible::part(control){outline:2px solid Highlight}a-slider::part(thumb):focus-visible{outline:2px solid Highlight}}@media(prefers-reduced-motion:reduce){a-slider::part(track),a-slider::part(fill),a-slider::part(thumb){transition:none}}a-slider:defined>[slot=label]{display:contents}a-slider:not(:state(has-header))::part(header),a-slider:not(:state(has-markers))::part(markers),a-slider:not(:state(has-extras))::part(extras),a-slider:not(:state(has-fill))::part(fill-start),a-slider:not(:state(has-fill-end))::part(fill-end),a-slider:not(:state(range))::part(thumb-2),a-slider:not(:state(has-thumb-value))::part(thumb-value-1),a-slider:not(:state(has-thumb-value-end))::part(thumb-value-2){display:none}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:calc(var(--slider-marker-position) - 50%);inset-inline-end:auto;justify-self:center;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;white-space:nowrap}a-slider:not(:defined)>[slot=markers][data-slider-marker-start]{text-align:start;justify-self:start;inset-inline-start:0}a-slider:not(:defined)>[slot=markers][data-slider-marker-end]{text-align:end;justify-self:end;inset-inline-start:0}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}}}
|
|
@@ -6,6 +6,12 @@ type SliderValue = number | [number, number];
|
|
|
6
6
|
* dragging by default: pressing any point captures the pointer, while only the
|
|
7
7
|
* subsequent horizontal movement changes the value. Set `track-click="jump"`
|
|
8
8
|
* for the conventional position-based track click.
|
|
9
|
+
*
|
|
10
|
+
* The `value` attribute is the controlled input; `defaultvalue` seeds uncontrolled
|
|
11
|
+
* state. Consumer property assignments reflect these inputs; interaction never
|
|
12
|
+
* rewrites them. Reading the `value` property returns the applied result.
|
|
13
|
+
* Input/change event details contain numeric request snapshots, including rejected controlled requests. Defaults require external
|
|
14
|
+
* Slider CSS in the same document or consumer shadow root as the host.
|
|
9
15
|
*/
|
|
10
16
|
export declare class ASliderElement extends HTMLElementBase {
|
|
11
17
|
#private;
|
|
@@ -13,12 +19,14 @@ export declare class ASliderElement extends HTMLElementBase {
|
|
|
13
19
|
static observedAttributes: string[];
|
|
14
20
|
private internals?;
|
|
15
21
|
get value(): SliderValue;
|
|
16
|
-
set value(value: SliderValue | string);
|
|
22
|
+
set value(value: SliderValue | string | null | undefined);
|
|
17
23
|
get defaultValue(): SliderValue;
|
|
18
|
-
set defaultValue(value: SliderValue | string);
|
|
24
|
+
set defaultValue(value: SliderValue | string | null | undefined);
|
|
19
25
|
constructor();
|
|
20
26
|
connectedCallback(): void;
|
|
21
|
-
|
|
27
|
+
disconnectedCallback(): void;
|
|
28
|
+
adoptedCallback(): void;
|
|
29
|
+
attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
|
|
22
30
|
formResetCallback(): void;
|
|
23
31
|
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
24
32
|
formDisabledCallback(): void;
|