@antadesign/anta 0.3.29 → 0.3.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/anta_helpers.d.ts +4 -0
- package/dist/anta_helpers.js +11 -1
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +39 -30
- package/dist/components/Breadcrumbs.d.ts +1 -1
- package/dist/components/Button.d.ts +3 -3
- package/dist/components/ButtonCopy.d.ts +1 -1
- package/dist/components/InputDate.js +2 -0
- package/dist/components/MenuItem.d.ts +9 -7
- package/dist/components/MenuItem.js +21 -2
- package/dist/components/Text.js +2 -3
- package/dist/components/Title.d.ts +8 -2
- package/dist/components/Title.js +17 -6
- package/dist/elements/a-box.js +2 -0
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-button.d.ts +5 -2
- package/dist/elements/a-calendar.js +3 -1
- package/dist/elements/a-copy.js +23 -3
- package/dist/elements/a-icon.shapes.d.ts +1 -1
- package/dist/elements/a-input-time.js +4 -3
- package/dist/elements/a-input.js +2 -2
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu.js +3 -0
- package/dist/elements/a-panel.css +1 -1
- package/dist/elements/a-panel.js +1 -1
- package/dist/elements/a-radio-group.js +2 -2
- package/dist/elements/a-slider.js +2 -2
- package/dist/elements/a-tabs.js +2 -2
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-tooltip.js +1 -1
- package/dist/elements/shadow-aria.d.ts +1 -1
- package/dist/general_types.d.ts +4 -0
- package/dist/jsx-runtime.d.ts +10 -0
- package/dist/jsx-runtime.js +12 -0
- package/dist/theme-antune.css +1 -1
- package/dist/toaster.d.ts +1 -1
- package/docs/changelog.md +37 -0
- package/docs/comparison.md +1 -1
- package/docs/components/button.md +127 -381
- package/docs/components/menu.md +37 -15
- package/docs/components/panel.md +5 -6
- package/docs/components/title.md +19 -0
- package/docs/credits.md +3 -0
- package/docs/index.md +1 -0
- package/docs/packages/plot.md +3771 -0
- package/package.json +15 -11
|
@@ -123,5 +123,5 @@ export type BreadcrumbsProps = BaseProps & {
|
|
|
123
123
|
* />
|
|
124
124
|
* ```
|
|
125
125
|
*/
|
|
126
|
-
export declare const Breadcrumbs: ({ items, priority, size, separator, maxItems, itemsBeforeCollapse, moreLabel, underline, underlineOnHover, paddingless, className, style,
|
|
126
|
+
export declare const Breadcrumbs: ({ items, priority, size, separator, maxItems, itemsBeforeCollapse, moreLabel, underline, underlineOnHover, paddingless, className, style, 'aria-label': ariaLabel, ...rest }: BreadcrumbsProps) => any;
|
|
127
127
|
export {};
|
|
@@ -113,14 +113,14 @@ export type PriorityMode = {
|
|
|
113
113
|
underline?: never;
|
|
114
114
|
underlineOnHover?: never;
|
|
115
115
|
paddingless?: never;
|
|
116
|
-
} | UnderlineMode & {
|
|
116
|
+
} | (UnderlineMode & {
|
|
117
117
|
priority: 'tertiary';
|
|
118
118
|
paddingless?: never;
|
|
119
|
-
} | UnderlineMode & {
|
|
119
|
+
}) | (UnderlineMode & {
|
|
120
120
|
priority: 'quaternary';
|
|
121
121
|
/** Drops outer padding to zero. */
|
|
122
122
|
paddingless?: boolean;
|
|
123
|
-
};
|
|
123
|
+
});
|
|
124
124
|
export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitMode & BaseProps;
|
|
125
125
|
/**
|
|
126
126
|
* Action button.
|
|
@@ -56,4 +56,4 @@ export type ButtonCopyProps = ButtonProps & {
|
|
|
56
56
|
* <ButtonCopy copyUrl label="Copy link" /> // copies location.href
|
|
57
57
|
* ```
|
|
58
58
|
*/
|
|
59
|
-
export declare const ButtonCopy: ({ icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children,
|
|
59
|
+
export declare const ButtonCopy: ({ icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children, 'aria-label': ariaLabel, ...rest }: ButtonCopyProps) => any;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
|
|
2
2
|
import { useMemo, useState } from "../jsx-runtime";
|
|
3
|
+
import { isModifiedNavigationKey } from "../anta_helpers";
|
|
3
4
|
import { Temporal } from "temporal-polyfill";
|
|
4
5
|
import {
|
|
5
6
|
parseISODate,
|
|
@@ -138,6 +139,7 @@ const InputDate = ({
|
|
|
138
139
|
},
|
|
139
140
|
onChange: (e) => resolve(e.currentTarget.value),
|
|
140
141
|
onKeyDown: (e) => {
|
|
142
|
+
if (isModifiedNavigationKey(e)) return;
|
|
141
143
|
if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !disabled) {
|
|
142
144
|
e.preventDefault();
|
|
143
145
|
setFocusNonce((n) => n + 1);
|
|
@@ -28,19 +28,19 @@ export interface MenuItemCommonProps extends BaseProps {
|
|
|
28
28
|
/** Mark the item as selected. On a plain row (no `selectionIndicator`) this is
|
|
29
29
|
* a persistent background tint, the same resting fill a pressed row shows —
|
|
30
30
|
* also the way to flag the current page on a link item. On a checkable row
|
|
31
|
-
* (`selectionIndicator` set) it instead drives the
|
|
32
|
-
*
|
|
31
|
+
* (`selectionIndicator` set) it instead drives the indicator and the row's
|
|
32
|
+
* `aria-checked`. */
|
|
33
33
|
selected?: boolean;
|
|
34
|
-
/** Semantic tone — colors the label, icon,
|
|
35
|
-
*
|
|
36
|
-
*
|
|
34
|
+
/** Semantic tone — colors the label, icon, hover/selected tint, and selection
|
|
35
|
+
* indicator. A named tone, or any literal CSS color (`'#ff1493'`,
|
|
36
|
+
* `'rebeccapurple'`) for a one-off custom tone whose
|
|
37
37
|
* hue + chroma are kept while the lightness is pinned to match the brand text.
|
|
38
38
|
* `critical` is the destructive action; `neutral` (the default) is the standard
|
|
39
39
|
* gray.
|
|
40
40
|
* @defaultValue neutral */
|
|
41
41
|
tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
|
|
42
42
|
/** Apply `tone` to every row state, or only while the row is selected. In
|
|
43
|
-
* `selected` scope, an unselected row and its
|
|
43
|
+
* `selected` scope, an unselected row and its indicator stay
|
|
44
44
|
* neutral.
|
|
45
45
|
* @defaultValue 'all' */
|
|
46
46
|
toneScope?: ToneScope;
|
|
@@ -103,8 +103,10 @@ export type MenuItemActionMode = {
|
|
|
103
103
|
* - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
|
|
104
104
|
* - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
|
|
105
105
|
* row *and* the background tint (the canonical single-select look).
|
|
106
|
+
* - `'switch'` → `role="menuitemcheckbox"`, a trailing passive `<a-switch>`;
|
|
107
|
+
* selecting the row keeps its menu open.
|
|
106
108
|
* Omit for a plain row (the default). */
|
|
107
|
-
selectionIndicator?: 'checkbox' | 'radio' | 'check';
|
|
109
|
+
selectionIndicator?: 'checkbox' | 'radio' | 'check' | 'switch';
|
|
108
110
|
/** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
|
|
109
111
|
* mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
|
|
110
112
|
* not all of its options are selected. */
|
|
@@ -93,12 +93,13 @@ const MenuItem = ({
|
|
|
93
93
|
...rest
|
|
94
94
|
}) => {
|
|
95
95
|
const leadingIcon = icon;
|
|
96
|
-
const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check";
|
|
97
|
-
const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
|
|
96
|
+
const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check" || selectionIndicator === "switch";
|
|
97
|
+
const role = selectionIndicator === "checkbox" || selectionIndicator === "switch" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
|
|
98
98
|
const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
|
|
99
99
|
const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
|
|
100
100
|
const effectiveTone = toneScope === "selected" && !selected ? void 0 : tone;
|
|
101
101
|
const toneAttr = neutralToneAttr(effectiveTone);
|
|
102
|
+
const switchBehavior = selectionIndicator === "switch" ? { "data-menu-open": "" } : {};
|
|
102
103
|
const declaredShortcuts = rest["aria-keyshortcuts"];
|
|
103
104
|
const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
|
|
104
105
|
const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;
|
|
@@ -149,6 +150,7 @@ const MenuItem = ({
|
|
|
149
150
|
onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
|
|
150
151
|
class: className,
|
|
151
152
|
...rest,
|
|
153
|
+
...switchBehavior,
|
|
152
154
|
children: [
|
|
153
155
|
indicator != null ? (
|
|
154
156
|
// `min-height: 1lh` makes the wrapper one text line tall and centers the node
|
|
@@ -191,6 +193,23 @@ const MenuItem = ({
|
|
|
191
193
|
labelNode,
|
|
192
194
|
children,
|
|
193
195
|
kbdNode,
|
|
196
|
+
selectionIndicator === "switch" && indicator == null && /* @__PURE__ */ jsx(
|
|
197
|
+
"a-switch",
|
|
198
|
+
{
|
|
199
|
+
"data-menu-item-switch": "",
|
|
200
|
+
"aria-hidden": "true",
|
|
201
|
+
tabIndex: -1,
|
|
202
|
+
state: selected ? "checked" : "unchecked",
|
|
203
|
+
disabled: disabled ? "" : void 0,
|
|
204
|
+
size: "small",
|
|
205
|
+
tone: toneAttr,
|
|
206
|
+
style: toneStyle(
|
|
207
|
+
effectiveTone,
|
|
208
|
+
"--switch-tone-source",
|
|
209
|
+
toneStyle(effectiveTone, "--switch-off-tone-source")
|
|
210
|
+
)
|
|
211
|
+
}
|
|
212
|
+
),
|
|
194
213
|
(() => {
|
|
195
214
|
let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
|
|
196
215
|
if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)
|
package/dist/components/Text.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
|
|
2
|
-
import { neutralToneAttr, toneStyle } from "../anta_helpers";
|
|
2
|
+
import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
|
|
3
3
|
import { Tooltip } from "./Tooltip";
|
|
4
4
|
const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
|
|
5
|
-
const
|
|
6
|
-
const lineCount = n != null && n >= 1 ? n : null;
|
|
5
|
+
const lineCount = lineClamp(truncate);
|
|
7
6
|
const toneAttr = neutralToneAttr(tone);
|
|
8
7
|
const computedStyle = toneStyle(
|
|
9
8
|
toneAttr,
|
|
@@ -14,9 +14,15 @@ export interface TitleProps extends BaseProps {
|
|
|
14
14
|
* kept while lightness/chroma are pinned per priority in oklch.
|
|
15
15
|
* @defaultValue neutral */
|
|
16
16
|
tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
|
|
17
|
+
/** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
|
|
18
|
+
* single line; any integer ≥ 2 clamps to that many lines; `0` or a
|
|
19
|
+
* negative value means no truncation. A clipped JSX `Title` shows its
|
|
20
|
+
* text content in a tooltip by default. Nest a `<Tooltip>` to provide
|
|
21
|
+
* your own tooltip instead. */
|
|
22
|
+
truncate?: boolean | number;
|
|
17
23
|
}
|
|
18
24
|
/**
|
|
19
|
-
* Block-level heading with level 1-6, priority, and
|
|
25
|
+
* Block-level heading with level 1-6, priority, tone, and optional truncation.
|
|
20
26
|
*
|
|
21
27
|
* Renders an `<a-title>` styled tag (no JS, no shadow DOM) with
|
|
22
28
|
* `role="heading"` and `aria-level={level}` set by this wrapper for
|
|
@@ -57,4 +63,4 @@ export interface TitleProps extends BaseProps {
|
|
|
57
63
|
* </Title>
|
|
58
64
|
* ```
|
|
59
65
|
*/
|
|
60
|
-
export declare const Title: ({ level, priority, tone, className, style, children, ...rest }: TitleProps) => any;
|
|
66
|
+
export declare const Title: ({ level, priority, tone, truncate, className, style, children, ...rest }: TitleProps) => any;
|
package/dist/components/Title.js
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
|
-
import { jsx } from "@antadesign/anta/jsx-runtime";
|
|
2
|
-
import { neutralToneAttr, toneStyle } from "../anta_helpers";
|
|
3
|
-
|
|
1
|
+
import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
|
|
2
|
+
import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
|
|
3
|
+
import { Tooltip } from "./Tooltip";
|
|
4
|
+
const Title = ({ level = 2, priority, tone, truncate, className, style, children, ...rest }) => {
|
|
5
|
+
const lineCount = lineClamp(truncate);
|
|
4
6
|
const toneAttr = neutralToneAttr(tone);
|
|
5
|
-
|
|
7
|
+
const computedStyle = toneStyle(
|
|
8
|
+
toneAttr,
|
|
9
|
+
"--title-tone-source",
|
|
10
|
+
lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
|
|
11
|
+
);
|
|
12
|
+
return /* @__PURE__ */ jsxs(
|
|
6
13
|
"a-title",
|
|
7
14
|
{
|
|
8
15
|
level: String(level),
|
|
9
16
|
priority,
|
|
10
17
|
tone: toneAttr,
|
|
18
|
+
truncate: lineCount != null ? String(lineCount) : void 0,
|
|
11
19
|
role: "heading",
|
|
12
20
|
"aria-level": level,
|
|
13
21
|
class: className,
|
|
14
|
-
style:
|
|
22
|
+
style: computedStyle,
|
|
15
23
|
...rest,
|
|
16
|
-
children
|
|
24
|
+
children: [
|
|
25
|
+
children,
|
|
26
|
+
lineCount != null && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
|
|
27
|
+
]
|
|
17
28
|
}
|
|
18
29
|
);
|
|
19
30
|
};
|
package/dist/elements/a-box.js
CHANGED
|
@@ -19,6 +19,8 @@ class BoxWindowStore {
|
|
|
19
19
|
this.#queries = [this.#dark, this.#finePointer, this.#coarsePointer, this.#hover, this.#reducedMotion];
|
|
20
20
|
this.#device = deviceSnapshot(view.navigator);
|
|
21
21
|
}
|
|
22
|
+
view;
|
|
23
|
+
doc;
|
|
22
24
|
#contextBoxes = /* @__PURE__ */ new Set();
|
|
23
25
|
#observedBoxes = /* @__PURE__ */ new Set();
|
|
24
26
|
#dark;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;inset:0;pointer-events:none;clip-path:inset(0 round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));background-position-x:calc(0px - var(--button-loading-x-period));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:background-position;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{background-position-x:0}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: light-dark(#ece9ec, #272329);--bg-secondary-disabled: light-dark(#f6f4f6, #1d1a1e);--fg-disabled-primary: light-dark(#afa9b1, #776e77);--fg-disabled: light-dark(#afa9b1, #635b65);--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--button-bg-primary-rest: light-dark(oklch(from var(--_src) .5 .02 h), oklch(from var(--_src) .4 .015 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .45 .02 h), oklch(from var(--_src) .44 .015 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .4 .02 h), oklch(from var(--_src) .48 .015 h));--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .008 h), oklch(from var(--_src) .86 .015 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .008 h / .85), oklch(from var(--_src) .86 .015 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .008 h), oklch(from var(--_src) .9 .015 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .03 h / .1), oklch(from var(--_src) .44 .01 h / .24));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .03 h / .15), oklch(from var(--_src) .44 .01 h / .34));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .03 h / .2), oklch(from var(--_src) .44 .01 h / .44));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--button-bg-primary-rest: light-dark(oklch(from var(--_src) .51 .17 h), oklch(from var(--_src) .4 .16 h));--button-bg-primary-hover: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .44 .16 h));--button-bg-primary-active: light-dark(oklch(from var(--_src) .41 .17 h), oklch(from var(--_src) .48 .16 h));--button-fg-secondary-rest: light-dark(oklch(from var(--_src) .46 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-secondary-hover: light-dark(oklch(from var(--_src) .4 .17 h), oklch(from var(--_src) .86 .13 h));--button-fg-tertiary-rest: var(--button-fg-secondary-rest);--button-fg-tertiary-hover: var(--button-fg-secondary-hover);--button-bg-tertiary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-tertiary-active: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-fg-quaternary-rest: light-dark(oklch(from var(--_src) .46 .17 h / .85), oklch(from var(--_src) .86 .13 h / .85));--button-fg-quaternary-hover: light-dark(oklch(from var(--_src) .38 .17 h), oklch(from var(--_src) .9 .13 h));--button-bg-secondary-rest: light-dark(oklch(from var(--_src) .54 .17 h / .1), oklch(from var(--_src) .58 .16 h / .215));--button-bg-secondary-hover: light-dark(oklch(from var(--_src) .54 .17 h / .15), oklch(from var(--_src) .58 .16 h / .29));--button-bg-secondary-active: light-dark(oklch(from var(--_src) .54 .17 h / .2), oklch(from var(--_src) .58 .16 h / .34))}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));width:calc(100% + var(--button-loading-x-period));pointer-events:none;clip-path:inset(0 0 0 var(--button-loading-x-period) round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform,clip-path;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: light-dark( oklch(from var(--button-fg-secondary-rest) calc(l - .05) c h), var(--button-fg-secondary-rest) );--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period));clip-path:inset(0 var(--button-loading-x-period) 0 0 round var(--_radius))}}
|
|
@@ -52,8 +52,11 @@ declare global {
|
|
|
52
52
|
* prose-link rule in `<Text>`.
|
|
53
53
|
* - **Loading** paints a blurred diagonal stripe overlay; the x-period is
|
|
54
54
|
* the diagonal period projected onto x so the slide loops seamlessly
|
|
55
|
-
* (overshooting left by one period)
|
|
56
|
-
*
|
|
55
|
+
* (overshooting left by one period). The overlay translates by exactly that
|
|
56
|
+
* period while its clip insets trade sides, keeping the rounded clipping
|
|
57
|
+
* window fixed without clipping the button host. A large negative
|
|
58
|
+
* `animation-delay` starts concurrently created instances at the same advanced
|
|
59
|
+
* phase so their waves stay in sync.
|
|
57
60
|
* - **Disabled** sets `background-color`/`color` directly (not the vars) so
|
|
58
61
|
* an inline `--button-bg` override can't keep a disabled button alive, and
|
|
59
62
|
* skips transitions — a color-mode toggle would flash the tone hue
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
|
|
2
2
|
import { Temporal } from "temporal-polyfill";
|
|
3
3
|
import "./a-calendar.css";
|
|
4
4
|
class ACalendarElement extends HTMLElementBase {
|
|
@@ -83,6 +83,8 @@ class ACalendarElement extends HTMLElementBase {
|
|
|
83
83
|
}
|
|
84
84
|
onKeydown = (e) => {
|
|
85
85
|
if (this.hasAttribute("disabled")) return;
|
|
86
|
+
const yearNavigation = e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "PageUp" || e.key === "PageDown");
|
|
87
|
+
if (isModifiedNavigationKey(e) && !yearNavigation) return;
|
|
86
88
|
const cells = this.#dayCells;
|
|
87
89
|
if (cells.length === 0) return;
|
|
88
90
|
const focused = e.target?.closest('[data-part="day-cell"]') ?? cells.find((c) => c.tabIndex === 0) ?? null;
|
package/dist/elements/a-copy.js
CHANGED
|
@@ -84,13 +84,22 @@ const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() =>
|
|
|
84
84
|
line-height: 16px;
|
|
85
85
|
font-weight: 500;
|
|
86
86
|
white-space: nowrap;
|
|
87
|
-
|
|
87
|
+
--_feedback-y-from: calc(-100% - 10px);
|
|
88
|
+
--_feedback-y-to: calc(-100% - 1.5em);
|
|
89
|
+
transform: translate(var(--_feedback-x), var(--_feedback-y-from));
|
|
90
|
+
}
|
|
91
|
+
.feedback[data-placement="below"] {
|
|
92
|
+
--_feedback-y-from: 10px;
|
|
93
|
+
--_feedback-y-to: 1.5em;
|
|
94
|
+
}
|
|
95
|
+
.feedback[data-measure-end] {
|
|
96
|
+
transform: translate(var(--_feedback-x), var(--_feedback-y-to));
|
|
88
97
|
}
|
|
89
98
|
.feedback:not(:popover-open) { display: none; }
|
|
90
99
|
.feedback[data-show] { animation: a-copy-feedback-rise ${FEEDBACK_MS}ms ease-out forwards; }
|
|
91
100
|
@keyframes a-copy-feedback-rise {
|
|
92
|
-
from { opacity: 1; transform: translate(var(--_feedback-x),
|
|
93
|
-
to { opacity: 0; transform: translate(var(--_feedback-x),
|
|
101
|
+
from { opacity: 1; transform: translate(var(--_feedback-x), var(--_feedback-y-from)); }
|
|
102
|
+
to { opacity: 0; transform: translate(var(--_feedback-x), var(--_feedback-y-to)); }
|
|
94
103
|
}
|
|
95
104
|
`;
|
|
96
105
|
const feedback = document.createElement("div");
|
|
@@ -141,21 +150,32 @@ class ACopyElement extends HTMLElementBase {
|
|
|
141
150
|
const label = this.#feedbackLabel;
|
|
142
151
|
if (!feedback || !label) return;
|
|
143
152
|
label.textContent = this.getAttribute("copied-label") ?? "Copied";
|
|
153
|
+
let belowTop;
|
|
144
154
|
if (origin) {
|
|
145
155
|
feedback.style.left = `${origin.x}px`;
|
|
146
156
|
feedback.style.top = `${origin.y}px`;
|
|
147
157
|
feedback.style.setProperty("--_feedback-x", "8px");
|
|
158
|
+
belowTop = origin.y;
|
|
148
159
|
} else {
|
|
149
160
|
const rect = host.getBoundingClientRect();
|
|
150
161
|
const rtl = this.view.getComputedStyle(host).direction === "rtl";
|
|
151
162
|
feedback.style.left = `${rtl ? rect.right - 12 : rect.left + 12}px`;
|
|
152
163
|
feedback.style.top = `${rect.top}px`;
|
|
153
164
|
feedback.style.setProperty("--_feedback-x", rtl ? "-100%" : "0");
|
|
165
|
+
belowTop = rect.bottom;
|
|
154
166
|
}
|
|
155
167
|
clearTimeout(this.#feedbackTimer);
|
|
156
168
|
feedback.removeAttribute("data-show");
|
|
169
|
+
feedback.removeAttribute("data-placement");
|
|
157
170
|
if (feedback.matches(":popover-open")) feedback.hidePopover();
|
|
158
171
|
feedback.showPopover();
|
|
172
|
+
feedback.setAttribute("data-measure-end", "");
|
|
173
|
+
const crossesTopEdge = feedback.getBoundingClientRect().top < 0;
|
|
174
|
+
feedback.removeAttribute("data-measure-end");
|
|
175
|
+
if (crossesTopEdge) {
|
|
176
|
+
feedback.setAttribute("data-placement", "below");
|
|
177
|
+
feedback.style.top = `${belowTop}px`;
|
|
178
|
+
}
|
|
159
179
|
void feedback.offsetWidth;
|
|
160
180
|
feedback.setAttribute("data-show", "");
|
|
161
181
|
this.#feedbackTimer = setTimeout(() => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IconShapes } from '@antadesign/anta';
|
|
2
|
-
export declare const ICON_SHAPES: readonly [
|
|
2
|
+
export declare const ICON_SHAPES: readonly ['arrow-left-to-line', 'arrow-left', 'arrow-narrow-down', 'arrow-narrow-up-down', 'arrow-narrow-up', 'arrow-right', 'arrow-top-right', 'asterisk', 'blank', 'book-open', 'braces', 'bug', 'calendar-days', 'calendar', 'case-sensitive', 'chat', 'check', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'chevrons-right', 'circle-check', 'circle-dot', 'circle-large', 'circle-small-solid', 'circle-user', 'circle', 'click', 'clock', 'cloud-upload', 'columns-3-cog', 'copy', 'corner-down-right', 'cube', 'dollar-sign', 'dots-vertical', 'download', 'edit', 'external-link', 'eye-closed', 'eye', 'file-down', 'file', 'filter-x', 'filter', 'folder-close', 'folder-open', 'folder-tree', 'hat-glasses', 'heart-handshake', 'heart', 'history-tree', 'history', 'home', 'hourglass', 'info', 'link', 'list-collapse', 'maximize', 'megaphone', 'menu', 'minimize', 'minus', 'moon', 'more', 'move-horizontal', 'not-equal', 'play', 'plus', 'pointer', 'presentation', 'refresh-ccw-dot', 'refresh', 'regex', 'repeat', 'rotate-ccw', 'rss', 'runs-history', 'scroll-text', 'search-check', 'search', 'send', 'settings', 'share', 'sparkles', 'square-check-big', 'square-menu', 'sun', 'swatch-book', 'table-2', 'tag', 'text-cursor-input', 'text-initial', 'timer', 'toggle-right', 'trash', 'view', 'warning-diamond', 'warning-triangle', 'webhook', 'workflow', 'x'];
|
|
3
3
|
export declare const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>>;
|
|
4
4
|
declare module '@antadesign/anta' {
|
|
5
5
|
interface IconShapes {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
|
|
2
2
|
import { applyShadowAria, ariaAttributeProperty } from "./shadow-aria";
|
|
3
3
|
import "./a-input-time.css";
|
|
4
4
|
const INPUT_TIME_ARIA = [
|
|
@@ -10,8 +10,8 @@ const INPUT_TIME_ARIA = [
|
|
|
10
10
|
"aria-errormessage"
|
|
11
11
|
];
|
|
12
12
|
const INPUT_TIME_ARIA_SET = new Set(INPUT_TIME_ARIA);
|
|
13
|
-
const READ_DELEGATED_ARIA = Symbol("readDelegatedAria");
|
|
14
|
-
const WRITE_DELEGATED_ARIA = Symbol("writeDelegatedAria");
|
|
13
|
+
const READ_DELEGATED_ARIA = /* @__PURE__ */ Symbol("readDelegatedAria");
|
|
14
|
+
const WRITE_DELEGATED_ARIA = /* @__PURE__ */ Symbol("writeDelegatedAria");
|
|
15
15
|
const CLEAR_TRIGGER = "clearrequest";
|
|
16
16
|
const CLEAR_INPUT_EVENT = "clearinput";
|
|
17
17
|
const pad2 = (n) => String(n).padStart(2, "0");
|
|
@@ -496,6 +496,7 @@ class AInputTimeElement extends HTMLElementBase {
|
|
|
496
496
|
});
|
|
497
497
|
};
|
|
498
498
|
#onKeyDown = (e) => {
|
|
499
|
+
if (isModifiedNavigationKey(e)) return;
|
|
499
500
|
const seg = this.#segFromTarget(e.target);
|
|
500
501
|
if (!seg) return;
|
|
501
502
|
const { el } = seg;
|
package/dist/elements/a-input.js
CHANGED
|
@@ -184,8 +184,8 @@ const SHADOW_STYLE = `
|
|
|
184
184
|
line-height: calc(var(--_lh) - 2px);
|
|
185
185
|
}
|
|
186
186
|
`;
|
|
187
|
-
const READ_DELEGATED_ARIA = Symbol("readDelegatedAria");
|
|
188
|
-
const WRITE_DELEGATED_ARIA = Symbol("writeDelegatedAria");
|
|
187
|
+
const READ_DELEGATED_ARIA = /* @__PURE__ */ Symbol("readDelegatedAria");
|
|
188
|
+
const WRITE_DELEGATED_ARIA = /* @__PURE__ */ Symbol("writeDelegatedAria");
|
|
189
189
|
class AInputElement extends HTMLElementBase {
|
|
190
190
|
static formAssociated = true;
|
|
191
191
|
static observedAttributes = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-item:not(:defined){display:none}a[data-anta-menu-item]{text-decoration:none}a-menu-item,a[data-anta-menu-item]{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover-bg: light-dark( color-mix(in oklch, currentColor 5%, transparent), color-mix(in oklch, currentColor 10%, transparent) );--menu-item-active-bg: light-dark( color-mix(in oklch, currentColor 8%, transparent), color-mix(in oklch, currentColor 14%, transparent) );--menu-item-selected-bg: var(--menu-item-active-bg);--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-variation-settings:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item,a-menu[round] a[data-anta-menu-item]{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a[data-anta-menu-item]:hover,a[data-anta-menu-item]:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:var(--menu-item-hover-bg);transition:background-color var(--menu-item-timing-in)}a-menu-item:active,a[data-anta-menu-item]:active{background:var(--menu-item-active-bg);transition:none}a-menu-item[selected],a[data-anta-menu-item][aria-current=true]{background:var(--menu-item-selected-bg)}a-menu-item:focus-visible,a[data-anta-menu-item]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-label,a[data-anta-menu-item]>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text),a[data-anta-menu-item]:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon,a[data-anta-menu-item]>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item>a-checkbox:before,a-menu-item>a-checkbox:after,a-menu-item>a-radio:before{margin-block-start:0}a-menu-item>a-radio:after{margin-block-start:calc((var(--radio-control-size) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2)}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)),a[data-anta-menu-item]:has(>:is(a-icon,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)),a[data-anta-menu-item]:has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd,a[data-anta-menu-item]>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-variation-settings:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child),a[data-anta-menu-item]>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical],a[data-anta-menu-item][tone=brand],a[data-anta-menu-item][tone=info],a[data-anta-menu-item][tone=success],a[data-anta-menu-item][tone=warning],a[data-anta-menu-item][tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand],a[data-anta-menu-item][tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info],a[data-anta-menu-item][tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success],a[data-anta-menu-item][tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning],a[data-anta-menu-item][tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical],a[data-anta-menu-item][tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[data-anta-menu-item][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: var(--text-2);--menu-item-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h), oklch(from var(--menu-item-tone-source) .78 c h) );--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h / .8), oklch(from var(--menu-item-tone-source) .78 c h / .8) );@supports (color: attr(probe type(<color>),red)){--menu-item-tone-source: attr(tone type(<color>), var(--text-2))}}a-menu-item[disabled],a[data-anta-menu-item][aria-disabled=true]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-menu-item:not(:defined){display:none}a[data-anta-menu-item]{text-decoration:none}a-menu-item,a[data-anta-menu-item]{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover-bg: light-dark( color-mix(in oklch, currentColor 5%, transparent), color-mix(in oklch, currentColor 10%, transparent) );--menu-item-active-bg: light-dark( color-mix(in oklch, currentColor 8%, transparent), color-mix(in oklch, currentColor 14%, transparent) );--menu-item-selected-bg: var(--menu-item-active-bg);--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-variation-settings:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item,a-menu[round] a[data-anta-menu-item]{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a[data-anta-menu-item]:hover,a[data-anta-menu-item]:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:var(--menu-item-hover-bg);transition:background-color var(--menu-item-timing-in)}a-menu-item:active,a[data-anta-menu-item]:active{background:var(--menu-item-active-bg);transition:none}a-menu-item[selected],a[data-anta-menu-item][aria-current=true]{background:var(--menu-item-selected-bg)}a-menu-item:focus-visible,a[data-anta-menu-item]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-label,a[data-anta-menu-item]>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text,a[data-anta-menu-item]>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text),a[data-anta-menu-item]:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon,a[data-anta-menu-item]>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item>a-switch[data-menu-item-switch]{flex:none;margin-inline-start:auto;--switch-gap: 0;pointer-events:none}a-menu-item>kbd+a-switch[data-menu-item-switch]{margin-inline-start:0}a-menu-item>a-checkbox:before,a-menu-item>a-checkbox:after,a-menu-item>a-radio:before{margin-block-start:0}a-menu-item>a-radio:after{margin-block-start:calc((var(--radio-control-size) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2)}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)),a[data-anta-menu-item]:has(>:is(a-icon,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)),a[data-anta-menu-item]:has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd,a[data-anta-menu-item]>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-variation-settings:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child),a[data-anta-menu-item]>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical],a[data-anta-menu-item][tone=brand],a[data-anta-menu-item][tone=info],a[data-anta-menu-item][tone=success],a[data-anta-menu-item][tone=warning],a[data-anta-menu-item][tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand],a[data-anta-menu-item][tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info],a[data-anta-menu-item][tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success],a[data-anta-menu-item][tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning],a[data-anta-menu-item][tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical],a[data-anta-menu-item][tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[data-anta-menu-item][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: var(--text-2);--menu-item-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h), oklch(from var(--menu-item-tone-source) .78 c h) );--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: light-dark( oklch(from var(--menu-item-tone-source) .45 c h / .8), oklch(from var(--menu-item-tone-source) .78 c h / .8) );@supports (color: attr(probe type(<color>),red)){--menu-item-tone-source: attr(tone type(<color>), var(--text-2))}}a-menu-item[disabled],a[data-anta-menu-item][aria-disabled=true]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}}
|
package/dist/elements/a-menu.js
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
SYNC_POPUP_ARIA,
|
|
4
4
|
anchorRect,
|
|
5
5
|
isPopupAriaReceiver,
|
|
6
|
+
isModifiedNavigationKey,
|
|
6
7
|
setMenuPresence
|
|
7
8
|
} from "../anta_helpers";
|
|
8
9
|
import { AMenuItemElement, MENU_ITEM_SELECTOR, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
|
|
@@ -1130,6 +1131,7 @@ class AMenuElement extends HTMLElementBase {
|
|
|
1130
1131
|
* (synthesizes a click → routed through onSurfaceClick). Combobox Enter (focus
|
|
1131
1132
|
* in the filter field) is handled here via handleComboKey / handleKeyUp. */
|
|
1132
1133
|
handleKey(e) {
|
|
1134
|
+
if (isModifiedNavigationKey(e)) return;
|
|
1133
1135
|
const active = this.doc.activeElement;
|
|
1134
1136
|
if (e.key === "Escape") {
|
|
1135
1137
|
e.preventDefault();
|
|
@@ -1279,6 +1281,7 @@ class AMenuElement extends HTMLElementBase {
|
|
|
1279
1281
|
else this.requestOpen({ coord, viaKeyboard, originEvent: e });
|
|
1280
1282
|
};
|
|
1281
1283
|
const onKey = (e) => {
|
|
1284
|
+
if (isModifiedNavigationKey(e)) return;
|
|
1282
1285
|
if (this._shown) return;
|
|
1283
1286
|
if (anchor.hasAttribute("disabled") || anchor.hasAttribute("loading")) return;
|
|
1284
1287
|
const arrow = e.key === "ArrowDown" || e.key === "ArrowUp";
|
|
@@ -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:
|
|
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}}
|
package/dist/elements/a-panel.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
|
|
2
2
|
import "./a-radio-group.css";
|
|
3
3
|
class ARadioGroupElement extends HTMLElementBase {
|
|
4
4
|
static formAssociated = true;
|
|
@@ -132,7 +132,7 @@ class ARadioGroupElement extends HTMLElementBase {
|
|
|
132
132
|
this.requestSelect(radio.value);
|
|
133
133
|
};
|
|
134
134
|
onKeyDown = (e) => {
|
|
135
|
-
if (this.#isDisabled) return;
|
|
135
|
+
if (this.#isDisabled || isModifiedNavigationKey(e)) return;
|
|
136
136
|
const enabled = this.#radios.filter((r) => !r.hasAttribute("disabled"));
|
|
137
137
|
if (enabled.length === 0) return;
|
|
138
138
|
const focused = e.target?.closest(
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { finiteNumber, HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { finiteNumber, HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
|
|
2
2
|
import "./a-slider.css";
|
|
3
3
|
const precisionOf = (value) => {
|
|
4
4
|
const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
|
|
@@ -433,7 +433,7 @@ class ASliderElement extends HTMLElementBase {
|
|
|
433
433
|
if (this.#value !== drag.startValue) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
|
|
434
434
|
}
|
|
435
435
|
#handleKeydown(event) {
|
|
436
|
-
if (event.target !== this || this.#isDisabled) return;
|
|
436
|
+
if (event.target !== this || this.#isDisabled || isModifiedNavigationKey(event)) return;
|
|
437
437
|
delete this.#control.dataset.pointerFocus;
|
|
438
438
|
const page = Math.max(this.#step, (this.#max - this.#min) / 10);
|
|
439
439
|
let next;
|
package/dist/elements/a-tabs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLElementBase } from "../anta_helpers";
|
|
1
|
+
import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
|
|
2
2
|
import "./a-tabs.css";
|
|
3
3
|
class ATabsElement extends HTMLElementBase {
|
|
4
4
|
static observedAttributes = ["state", "disabled", "orientation", "noslide"];
|
|
@@ -183,7 +183,7 @@ class ATabsElement extends HTMLElementBase {
|
|
|
183
183
|
this.requestSelect(tab.value);
|
|
184
184
|
};
|
|
185
185
|
onKeyDown = (e) => {
|
|
186
|
-
if (this.#isDisabled) return;
|
|
186
|
+
if (this.#isDisabled || isModifiedNavigationKey(e)) return;
|
|
187
187
|
const enabled = this.#tabs.filter((t) => !t.hasAttribute("disabled"));
|
|
188
188
|
if (enabled.length === 0) return;
|
|
189
189
|
const focused = e.target?.closest("a-tab");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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[truncate]{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}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)}}
|
|
@@ -272,7 +272,7 @@ class ATooltipElement extends HTMLElementBase {
|
|
|
272
272
|
get #truncatedOnly() {
|
|
273
273
|
return this.hasAttribute("truncated-only");
|
|
274
274
|
}
|
|
275
|
-
/** JSX
|
|
275
|
+
/** JSX truncation wrappers emit an empty marked tooltip. It takes its content
|
|
276
276
|
* from the anchor, while a consumer-provided sibling tooltip takes precedence
|
|
277
277
|
* even when that sibling is empty. */
|
|
278
278
|
get #isAutomaticTextTooltip() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** Standard semantic attributes that a shadow-hosted control may consume from
|
|
2
2
|
* its custom-element host. Keeping the public spelling standard lets raw HTML,
|
|
3
3
|
* React, Preact, and custom JSX runtimes use the same API. */
|
|
4
|
-
export declare const SHADOW_ARIA_ATTRIBUTES: readonly [
|
|
4
|
+
export declare const SHADOW_ARIA_ATTRIBUTES: readonly ['role', 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-braillelabel', 'aria-brailleroledescription', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-description', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext'];
|
|
5
5
|
export type ShadowAriaAttribute = (typeof SHADOW_ARIA_ATTRIBUTES)[number];
|
|
6
6
|
export declare const SHADOW_ARIA_ATTRIBUTE_SET: Set<string>;
|
|
7
7
|
export declare function ariaAttributeProperty(name: ShadowAriaAttribute): string;
|