@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.
Files changed (46) hide show
  1. package/dist/anta_helpers.d.ts +4 -0
  2. package/dist/anta_helpers.js +11 -1
  3. package/dist/bundle.css +1 -1
  4. package/dist/bundle.js +39 -30
  5. package/dist/components/Breadcrumbs.d.ts +1 -1
  6. package/dist/components/Button.d.ts +3 -3
  7. package/dist/components/ButtonCopy.d.ts +1 -1
  8. package/dist/components/InputDate.js +2 -0
  9. package/dist/components/MenuItem.d.ts +9 -7
  10. package/dist/components/MenuItem.js +21 -2
  11. package/dist/components/Text.js +2 -3
  12. package/dist/components/Title.d.ts +8 -2
  13. package/dist/components/Title.js +17 -6
  14. package/dist/elements/a-box.js +2 -0
  15. package/dist/elements/a-button.css +1 -1
  16. package/dist/elements/a-button.d.ts +5 -2
  17. package/dist/elements/a-calendar.js +3 -1
  18. package/dist/elements/a-copy.js +23 -3
  19. package/dist/elements/a-icon.shapes.d.ts +1 -1
  20. package/dist/elements/a-input-time.js +4 -3
  21. package/dist/elements/a-input.js +2 -2
  22. package/dist/elements/a-menu-item.css +1 -1
  23. package/dist/elements/a-menu.js +3 -0
  24. package/dist/elements/a-panel.css +1 -1
  25. package/dist/elements/a-panel.js +1 -1
  26. package/dist/elements/a-radio-group.js +2 -2
  27. package/dist/elements/a-slider.js +2 -2
  28. package/dist/elements/a-tabs.js +2 -2
  29. package/dist/elements/a-title.css +1 -1
  30. package/dist/elements/a-tooltip.js +1 -1
  31. package/dist/elements/shadow-aria.d.ts +1 -1
  32. package/dist/general_types.d.ts +4 -0
  33. package/dist/jsx-runtime.d.ts +10 -0
  34. package/dist/jsx-runtime.js +12 -0
  35. package/dist/theme-antune.css +1 -1
  36. package/dist/toaster.d.ts +1 -1
  37. package/docs/changelog.md +37 -0
  38. package/docs/comparison.md +1 -1
  39. package/docs/components/button.md +127 -381
  40. package/docs/components/menu.md +37 -15
  41. package/docs/components/panel.md +5 -6
  42. package/docs/components/title.md +19 -0
  43. package/docs/credits.md +3 -0
  44. package/docs/index.md +1 -0
  45. package/docs/packages/plot.md +3771 -0
  46. 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, "aria-label": ariaLabel, ...rest }: BreadcrumbsProps) => any;
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, "aria-label": ariaLabel, ...rest }: ButtonCopyProps) => any;
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 leading `checkbox` / `radio`
32
- * indicator and the row's `aria-checked`. */
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, and hover/selected tint (and the
35
- * `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal
36
- * CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose
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 checkbox/radio indicator stay
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)
@@ -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 n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
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 tone.
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;
@@ -1,19 +1,30 @@
1
- import { jsx } from "@antadesign/anta/jsx-runtime";
2
- import { neutralToneAttr, toneStyle } from "../anta_helpers";
3
- const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
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
- return /* @__PURE__ */ jsx(
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: toneStyle(toneAttr, "--title-tone-source", 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
  };
@@ -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), and a large negative
56
- * `animation-delay` desyncs instances so a row doesn't pulse in lockstep.
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;
@@ -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
- transform: translate(var(--_feedback-x), calc(-100% - 10px));
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), calc(-100% - 10px)); }
93
- to { opacity: 0; transform: translate(var(--_feedback-x), calc(-100% - 1.5em)); }
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 ["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"];
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;
@@ -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}}
@@ -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:scroll}}
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}}
@@ -15,7 +15,7 @@ const SHADOW_STYLE = `
15
15
  padding: 0;
16
16
  border: 0;
17
17
  box-sizing: border-box;
18
- overflow: scroll;
18
+ overflow: auto;
19
19
  overscroll-behavior: contain;
20
20
  color: inherit;
21
21
  background: inherit;
@@ -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;
@@ -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 `<Text truncate>` emits an empty marked tooltip. It takes its content
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 ["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"];
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;