@antadesign/anta 0.3.30 → 0.3.31

package/dist/components/InputDate.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useMemo, useState } from "../jsx-runtime";
+import { isModifiedNavigationKey } from "../anta_helpers";
 import { Temporal } from "temporal-polyfill";
 import {
   parseISODate,
@@ -138,6 +139,7 @@ const InputDate = ({
         },
         onChange: (e) => resolve(e.currentTarget.value),
         onKeyDown: (e) => {
+          if (isModifiedNavigationKey(e)) return;
           if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !disabled) {
             e.preventDefault();
             setFocusNonce((n) => n + 1);

package/dist/components/MenuItem.d.ts

@@ -28,19 +28,19 @@ export interface MenuItemCommonProps extends BaseProps {
     /** Mark the item as selected. On a plain row (no `selectionIndicator`) this is
      *  a persistent background tint, the same resting fill a pressed row shows —
      *  also the way to flag the current page on a link item. On a checkable row
-     *  (`selectionIndicator` set) it instead drives the leading `checkbox` / `radio`
-     *  indicator and the row's `aria-checked`. */
+     *  (`selectionIndicator` set) it instead drives the indicator and the row's
+     *  `aria-checked`. */
     selected?: boolean;
-    /** Semantic tone — colors the label, icon, and hover/selected tint (and the
-     *  `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal
-     *  CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose
+    /** Semantic tone — colors the label, icon, hover/selected tint, and selection
+     *  indicator. A named tone, or any literal CSS color (`'#ff1493'`,
+     *  `'rebeccapurple'`) for a one-off custom tone whose
      *  hue + chroma are kept while the lightness is pinned to match the brand text.
      *  `critical` is the destructive action; `neutral` (the default) is the standard
      *  gray.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Apply `tone` to every row state, or only while the row is selected. In
-     *  `selected` scope, an unselected row and its checkbox/radio indicator stay
+     *  `selected` scope, an unselected row and its indicator stay
      *  neutral.
      *  @defaultValue 'all' */
     toneScope?: ToneScope;
@@ -103,8 +103,10 @@ export type MenuItemActionMode = {
      *  - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
      *  - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
      *    row *and* the background tint (the canonical single-select look).
+     *  - `'switch'` → `role="menuitemcheckbox"`, a trailing passive `<a-switch>`;
+     *    selecting the row keeps its menu open.
      *  Omit for a plain row (the default). */
-    selectionIndicator?: 'checkbox' | 'radio' | 'check';
+    selectionIndicator?: 'checkbox' | 'radio' | 'check' | 'switch';
     /** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
      *  mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
      *  not all of its options are selected. */

package/dist/components/MenuItem.js

@@ -93,12 +93,13 @@ const MenuItem = ({
   ...rest
 }) => {
   const leadingIcon = icon;
-  const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check";
-  const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
+  const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check" || selectionIndicator === "switch";
+  const role = selectionIndicator === "checkbox" || selectionIndicator === "switch" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
   const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
   const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
   const effectiveTone = toneScope === "selected" && !selected ? void 0 : tone;
   const toneAttr = neutralToneAttr(effectiveTone);
+  const switchBehavior = selectionIndicator === "switch" ? { "data-menu-open": "" } : {};
   const declaredShortcuts = rest["aria-keyshortcuts"];
   const keyShortcuts = kbd ? shortcutLabel(kbd) : void 0;
   const kbdNode = kbd ? /* @__PURE__ */ jsx("kbd", { "aria-hidden": declaredShortcuts ?? keyShortcuts ? "true" : void 0, children: kbd }) : null;
@@ -149,6 +150,7 @@ const MenuItem = ({
       onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
       class: className,
       ...rest,
+      ...switchBehavior,
       children: [
         indicator != null ? (
           // `min-height: 1lh` makes the wrapper one text line tall and centers the node
@@ -191,6 +193,23 @@ const MenuItem = ({
         labelNode,
         children,
         kbdNode,
+        selectionIndicator === "switch" && indicator == null && /* @__PURE__ */ jsx(
+          "a-switch",
+          {
+            "data-menu-item-switch": "",
+            "aria-hidden": "true",
+            tabIndex: -1,
+            state: selected ? "checked" : "unchecked",
+            disabled: disabled ? "" : void 0,
+            size: "small",
+            tone: toneAttr,
+            style: toneStyle(
+              effectiveTone,
+              "--switch-tone-source",
+              toneStyle(effectiveTone, "--switch-off-tone-source")
+            )
+          }
+        ),
         (() => {
           let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
           if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)

package/dist/components/Text.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { neutralToneAttr, toneStyle } from "../anta_helpers";
+import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
-  const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
-  const lineCount = n != null && n >= 1 ? n : null;
+  const lineCount = lineClamp(truncate);
   const toneAttr = neutralToneAttr(tone);
   const computedStyle = toneStyle(
     toneAttr,

package/dist/components/Title.d.ts

@@ -14,9 +14,15 @@ export interface TitleProps extends BaseProps {
      *  kept while lightness/chroma are pinned per priority in oklch.
      *  @defaultValue neutral */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
+     *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
+     *  negative value means no truncation. A clipped JSX `Title` shows its
+     *  text content in a tooltip by default. Nest a `<Tooltip>` to provide
+     *  your own tooltip instead. */
+    truncate?: boolean | number;
 }
 /**
- * Block-level heading with level 1-6, priority, and tone.
+ * Block-level heading with level 1-6, priority, tone, and optional truncation.
  *
  * Renders an `<a-title>` styled tag (no JS, no shadow DOM) with
  * `role="heading"` and `aria-level={level}` set by this wrapper for
@@ -57,4 +63,4 @@ export interface TitleProps extends BaseProps {
  * </Title>
  * ```
  */
-export declare const Title: ({ level, priority, tone, className, style, children, ...rest }: TitleProps) => any;
+export declare const Title: ({ level, priority, tone, truncate, className, style, children, ...rest }: TitleProps) => any;

package/dist/components/Title.js

@@ -1,19 +1,30 @@
-import { jsx } from "@antadesign/anta/jsx-runtime";
-import { neutralToneAttr, toneStyle } from "../anta_helpers";
-const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { lineClamp, neutralToneAttr, toneStyle } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
+const Title = ({ level = 2, priority, tone, truncate, className, style, children, ...rest }) => {
+  const lineCount = lineClamp(truncate);
   const toneAttr = neutralToneAttr(tone);
-  return /* @__PURE__ */ jsx(
+  const computedStyle = toneStyle(
+    toneAttr,
+    "--title-tone-source",
+    lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
+  );
+  return /* @__PURE__ */ jsxs(
     "a-title",
     {
       level: String(level),
       priority,
       tone: toneAttr,
+      truncate: lineCount != null ? String(lineCount) : void 0,
       role: "heading",
       "aria-level": level,
       class: className,
-      style: toneStyle(toneAttr, "--title-tone-source", style),
+      style: computedStyle,
       ...rest,
-      children
+      children: [
+        children,
+        lineCount != null && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
+      ]
     }
   );
 };

package/dist/elements/a-button.css

@@ -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}}
+@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))}}

package/dist/elements/a-button.d.ts

@@ -52,8 +52,11 @@ declare global {
  *   prose-link rule in `<Text>`.
  * - **Loading** paints a blurred diagonal stripe overlay; the x-period is
  *   the diagonal period projected onto x so the slide loops seamlessly
- *   (overshooting left by one period), and a large negative
- *   `animation-delay` desyncs instances so a row doesn't pulse in lockstep.
+ *   (overshooting left by one period). The overlay translates by exactly that
+ *   period while its clip insets trade sides, keeping the rounded clipping
+ *   window fixed without clipping the button host. A large negative
+ *   `animation-delay` starts concurrently created instances at the same advanced
+ *   phase so their waves stay in sync.
  * - **Disabled** sets `background-color`/`color` directly (not the vars) so
  *   an inline `--button-bg` override can't keep a disabled button alive, and
  *   skips transitions — a color-mode toggle would flash the tone hue

package/dist/elements/a-calendar.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import { Temporal } from "temporal-polyfill";
 import "./a-calendar.css";
 class ACalendarElement extends HTMLElementBase {
@@ -83,6 +83,8 @@ class ACalendarElement extends HTMLElementBase {
   }
   onKeydown = (e) => {
     if (this.hasAttribute("disabled")) return;
+    const yearNavigation = e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "PageUp" || e.key === "PageDown");
+    if (isModifiedNavigationKey(e) && !yearNavigation) return;
     const cells = this.#dayCells;
     if (cells.length === 0) return;
     const focused = e.target?.closest('[data-part="day-cell"]') ?? cells.find((c) => c.tabIndex === 0) ?? null;

package/dist/elements/a-copy.js

@@ -84,13 +84,22 @@ const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() =>
       line-height: 16px;
       font-weight: 500;
       white-space: nowrap;
-      transform: translate(var(--_feedback-x), calc(-100% - 10px));
+      --_feedback-y-from: calc(-100% - 10px);
+      --_feedback-y-to: calc(-100% - 1.5em);
+      transform: translate(var(--_feedback-x), var(--_feedback-y-from));
+    }
+    .feedback[data-placement="below"] {
+      --_feedback-y-from: 10px;
+      --_feedback-y-to: 1.5em;
+    }
+    .feedback[data-measure-end] {
+      transform: translate(var(--_feedback-x), var(--_feedback-y-to));
     }
     .feedback:not(:popover-open) { display: none; }
     .feedback[data-show] { animation: a-copy-feedback-rise ${FEEDBACK_MS}ms ease-out forwards; }
     @keyframes a-copy-feedback-rise {
-      from { opacity: 1; transform: translate(var(--_feedback-x), calc(-100% - 10px)); }
-      to { opacity: 0; transform: translate(var(--_feedback-x), calc(-100% - 1.5em)); }
+      from { opacity: 1; transform: translate(var(--_feedback-x), var(--_feedback-y-from)); }
+      to { opacity: 0; transform: translate(var(--_feedback-x), var(--_feedback-y-to)); }
     }
   `;
   const feedback = document.createElement("div");
@@ -141,21 +150,32 @@ class ACopyElement extends HTMLElementBase {
     const label = this.#feedbackLabel;
     if (!feedback || !label) return;
     label.textContent = this.getAttribute("copied-label") ?? "Copied";
+    let belowTop;
     if (origin) {
       feedback.style.left = `${origin.x}px`;
       feedback.style.top = `${origin.y}px`;
       feedback.style.setProperty("--_feedback-x", "8px");
+      belowTop = origin.y;
     } else {
       const rect = host.getBoundingClientRect();
       const rtl = this.view.getComputedStyle(host).direction === "rtl";
       feedback.style.left = `${rtl ? rect.right - 12 : rect.left + 12}px`;
       feedback.style.top = `${rect.top}px`;
       feedback.style.setProperty("--_feedback-x", rtl ? "-100%" : "0");
+      belowTop = rect.bottom;
     }
     clearTimeout(this.#feedbackTimer);
     feedback.removeAttribute("data-show");
+    feedback.removeAttribute("data-placement");
     if (feedback.matches(":popover-open")) feedback.hidePopover();
     feedback.showPopover();
+    feedback.setAttribute("data-measure-end", "");
+    const crossesTopEdge = feedback.getBoundingClientRect().top < 0;
+    feedback.removeAttribute("data-measure-end");
+    if (crossesTopEdge) {
+      feedback.setAttribute("data-placement", "below");
+      feedback.style.top = `${belowTop}px`;
+    }
     void feedback.offsetWidth;
     feedback.setAttribute("data-show", "");
     this.#feedbackTimer = setTimeout(() => {

package/dist/elements/a-input-time.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import { applyShadowAria, ariaAttributeProperty } from "./shadow-aria";
 import "./a-input-time.css";
 const INPUT_TIME_ARIA = [
@@ -496,6 +496,7 @@ class AInputTimeElement extends HTMLElementBase {
     });
   };
   #onKeyDown = (e) => {
+    if (isModifiedNavigationKey(e)) return;
     const seg = this.#segFromTarget(e.target);
     if (!seg) return;
     const { el } = seg;

package/dist/elements/a-menu-item.css

@@ -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}}
+@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

@@ -3,6 +3,7 @@ import {
   SYNC_POPUP_ARIA,
   anchorRect,
   isPopupAriaReceiver,
+  isModifiedNavigationKey,
   setMenuPresence
 } from "../anta_helpers";
 import { AMenuItemElement, MENU_ITEM_SELECTOR, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
@@ -1130,6 +1131,7 @@ class AMenuElement extends HTMLElementBase {
    *  (synthesizes a click → routed through onSurfaceClick). Combobox Enter (focus
    *  in the filter field) is handled here via handleComboKey / handleKeyUp. */
   handleKey(e) {
+    if (isModifiedNavigationKey(e)) return;
     const active = this.doc.activeElement;
     if (e.key === "Escape") {
       e.preventDefault();
@@ -1279,6 +1281,7 @@ class AMenuElement extends HTMLElementBase {
         else this.requestOpen({ coord, viaKeyboard, originEvent: e });
       };
       const onKey = (e) => {
+        if (isModifiedNavigationKey(e)) return;
         if (this._shown) return;
         if (anchor.hasAttribute("disabled") || anchor.hasAttribute("loading")) return;
         const arrow = e.key === "ArrowDown" || e.key === "ArrowUp";

package/dist/elements/a-panel.css

@@ -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}}
+@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

@@ -15,7 +15,7 @@ const SHADOW_STYLE = `
     padding: 0;
     border: 0;
     box-sizing: border-box;
-    overflow: scroll;
+    overflow: auto;
     overscroll-behavior: contain;
     color: inherit;
     background: inherit;

package/dist/elements/a-radio-group.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-radio-group.css";
 class ARadioGroupElement extends HTMLElementBase {
   static formAssociated = true;
@@ -132,7 +132,7 @@ class ARadioGroupElement extends HTMLElementBase {
     this.requestSelect(radio.value);
   };
   onKeyDown = (e) => {
-    if (this.#isDisabled) return;
+    if (this.#isDisabled || isModifiedNavigationKey(e)) return;
     const enabled = this.#radios.filter((r) => !r.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest(

package/dist/elements/a-slider.js

@@ -1,4 +1,4 @@
-import { finiteNumber, HTMLElementBase } from "../anta_helpers";
+import { finiteNumber, HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-slider.css";
 const precisionOf = (value) => {
   const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
@@ -433,7 +433,7 @@ class ASliderElement extends HTMLElementBase {
     if (this.#value !== drag.startValue) this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
   #handleKeydown(event) {
-    if (event.target !== this || this.#isDisabled) return;
+    if (event.target !== this || this.#isDisabled || isModifiedNavigationKey(event)) return;
     delete this.#control.dataset.pointerFocus;
     const page = Math.max(this.#step, (this.#max - this.#min) / 10);
     let next;

package/dist/elements/a-tabs.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, isModifiedNavigationKey } from "../anta_helpers";
 import "./a-tabs.css";
 class ATabsElement extends HTMLElementBase {
   static observedAttributes = ["state", "disabled", "orientation", "noslide"];
@@ -183,7 +183,7 @@ class ATabsElement extends HTMLElementBase {
     this.requestSelect(tab.value);
   };
   onKeyDown = (e) => {
-    if (this.#isDisabled) return;
+    if (this.#isDisabled || isModifiedNavigationKey(e)) return;
     const enabled = this.#tabs.filter((t) => !t.hasAttribute("disabled"));
     if (enabled.length === 0) return;
     const focused = e.target?.closest("a-tab");

package/dist/elements/a-title.css

@@ -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)}}
+@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)}}

package/dist/elements/a-tooltip.js

@@ -272,7 +272,7 @@ class ATooltipElement extends HTMLElementBase {
   get #truncatedOnly() {
     return this.hasAttribute("truncated-only");
   }
-  /** JSX `<Text truncate>` emits an empty marked tooltip. It takes its content
+  /** JSX truncation wrappers emit an empty marked tooltip. It takes its content
    * from the anchor, while a consumer-provided sibling tooltip takes precedence
    * even when that sibling is empty. */
   get #isAutomaticTextTooltip() {

package/dist/general_types.d.ts

@@ -380,6 +380,10 @@ export interface ATitleAttributes extends BaseAttributes {
      *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
      *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Truncate to N lines with a trailing ellipsis. The attribute value carries
+     *  the line count; set the same count on `--line-clamp` when using the styled
+     *  tag directly. */
+    truncate?: boolean | string | number;
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */