@antadesign/anta 0.1.1-dev.8 → 0.2.0

package/README.md

@@ -36,7 +36,7 @@ Anta exposes four independent imports. Tokens + elements + the JSX layer are the
 
 The chain matters: the per-element CSS that ships with `/elements` references variables like `var(--text-1)` and `var(--bg-2)`. Those variables are *only defined* by `tokens.css`. Skip the tokens import and the components render with whatever the surrounding cascade provides — usually nothing styled at all.
 
-`@antadesign/anta/elements` registers **all** elements — convenient, but it includes every element's code (and deps). To keep your bundle lean, import only the elements you use from their per-element entry points instead: `import '@antadesign/anta/elements/a-tooltip'` registers just `<a-tooltip>` **and loads just its CSS**. Unused elements — and their dependencies, e.g. `lottie-web` (needed only by `<a-sticker-animated>`) — then never enter your bundle. See [Registering elements](#registering-elements).
+`@antadesign/anta/elements` registers **all** elements — convenient, but it includes every element's code (and deps). To keep your bundle lean, import only the elements you use from their per-element entry points instead: `import '@antadesign/anta/elements/a-tooltip'` registers just `<a-tooltip>` **and loads just its CSS**. Unused elements — and any dependencies they pull in — then never enter your bundle. See [Registering elements](#registering-elements).
 
 ### Cascade layers
 
@@ -79,7 +79,7 @@ import '@antadesign/anta/elements/a-tooltip'  // only <a-tooltip> + its CSS
 import '@antadesign/anta/elements/a-button'   // only <a-button> + its CSS
 ```
 
-Both styles are side-effect imports (the act of importing registers the element), and both are idempotent and SSR-safe. The granular form keeps unused elements — and their dependencies, e.g. `lottie-web`, which only `<a-sticker-animated>` pulls in — out of your bundle.
+Both styles are side-effect imports (the act of importing registers the element), and both are idempotent and SSR-safe. The granular form keeps unused elements — and any dependencies they pull in — out of your bundle.
 
 The cleanest pattern is a **static, synchronous import at your app's entry file** — outside any component, outside any hook:
 

package/dist/components/Button.js

@@ -38,12 +38,13 @@ const Button = ({
   children,
   ...rest
 }) => {
-  const isCustomTone = tone != null && !NAMED_TONES.has(tone);
-  const computedStyle = isCustomTone ? { ...style, ["--button-tone-source"]: tone } : style;
+  const toneAttr = tone || void 0;
+  const isCustomTone = toneAttr != null && !NAMED_TONES.has(toneAttr);
+  const computedStyle = isCustomTone ? { ...style, ["--button-tone-source"]: toneAttr } : style;
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
     priority,
-    tone,
+    tone: toneAttr,
     underline,
     // 'medium' (and unset) is the implicit default — emit no DOM attr.
     size: size && size !== "medium" ? size : void 0,

package/dist/components/Menu.d.ts

@@ -0,0 +1,61 @@
+import type { BaseProps } from '../general_types';
+export interface MenuProps extends BaseProps {
+    /** Preferred placement relative to the trigger. The cross-axis suffix
+     *  (`-start` / `-end`) aligns the left / right edges; the menu auto-flips
+     *  vertically and clamps horizontally when there isn't room.
+     *  @defaultValue bottom-start */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** Open on right-click (the `contextmenu` event) of the trigger region
+     *  instead of a left click, positioned at the pointer. */
+    context?: boolean;
+    /** Open at the pointer coordinates rather than aligned to the trigger box.
+     *  Pairs naturally with `context`; on its own it positions a left-click
+     *  menu at the cursor. */
+    coord?: boolean;
+    /** Marks this menu as a submenu of the enclosing `MenuItem`. Set by passing
+     *  it as a `MenuItem`'s `submenu`; rarely written by hand. */
+    submenu?: boolean;
+    /** For a submenu: also open it on hover (with intent timing), not only on
+     *  click. No effect on a root menu. */
+    hover?: boolean;
+    /** Gap in pixels between the trigger and the menu.
+     *  @defaultValue 4 */
+    offset?: number;
+    /** Controlled open state. Omit for the default **uncontrolled** menu (it
+     *  opens/closes itself). Pass `'opened'` / `'closed'` to **control** it: the
+     *  menu's visibility follows this value, and user dismiss (Esc, outside-click,
+     *  select) fires `openchange` *without* self-closing — you update `state` in
+     *  response. A string (not a boolean) so there's no `"false"`-as-truthy
+     *  footgun. Submenus are always uncontrolled regardless of this. */
+    state?: 'opened' | 'closed';
+    /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
+     *  custom element. */
+    children?: React.ReactNode;
+}
+/**
+ * Menu — a dropdown / context menu that anchors to any target and "just
+ * works". Place `<Menu>` immediately after the trigger element (a button,
+ * say); it opens on click by default. For a whole-area right-click menu, put
+ * it after the region and pass `context`.
+ *
+ * Open state is uncontrolled by default — listen for the `openchange` event
+ * (`detail: { open, previousState }`) to observe it, or pass `state` to control
+ * it. You can also grab a `ref` and call `.open()` / `.close()` / `.toggle()`.
+ * Selecting a `MenuItem` closes the menu;
+ * arbitrary injected content does not. Add `data-menu-open` to any item /
+ * container to keep it open, or `data-menu-close` to a custom element to let it
+ * close.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only).
+ *
+ * @example Dropdown from a button
+ * ```tsx
+ * <a-button>Actions</a-button>
+ * <Menu>
+ *   <MenuItem icon="edit" label="Edit" kbd="⌘E" onSelect={onEdit} />
+ *   <MenuSeparator />
+ *   <MenuItem tone="critical" icon="trash" label="Delete" onSelect={onDelete} />
+ * </Menu>
+ * ```
+ */
+export declare const Menu: ({ placement, context, coord, submenu, hover, offset, state, className, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -0,0 +1,34 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const Menu = ({
+  placement,
+  context,
+  coord,
+  submenu,
+  hover,
+  offset,
+  state,
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "a-menu",
+    {
+      placement: placement && placement !== "bottom-start" ? placement : void 0,
+      context: context ? "" : void 0,
+      coord: coord ? "" : void 0,
+      submenu: submenu ? "" : void 0,
+      hover: hover ? "" : void 0,
+      offset: offset != null ? String(offset) : void 0,
+      state,
+      role: "menu",
+      "aria-orientation": "vertical",
+      class: className,
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  Menu
+};

package/dist/components/MenuGroup.d.ts

@@ -0,0 +1,24 @@
+import type { BaseProps } from '../general_types';
+export interface MenuGroupProps extends BaseProps {
+    /** The section heading shown above the grouped items (also the group's
+     *  accessible name). */
+    label?: string;
+    /** The grouped `MenuItem`s. */
+    children?: React.ReactNode;
+}
+/**
+ * MenuGroup — a titled section that organises related `MenuItem`s. Keyboard
+ * navigation flattens items across groups, skipping the heading.
+ *
+ * Add `data-menu-open` to keep the menu open after any item in the group is
+ * chosen (it forwards to the element).
+ *
+ * @example
+ * ```tsx
+ * <MenuGroup label="Edit">
+ *   <MenuItem icon="copy" label="Copy" />
+ *   <MenuItem icon="cut" label="Cut" />
+ * </MenuGroup>
+ * ```
+ */
+export declare const MenuGroup: ({ label, className, children, ...rest }: MenuGroupProps) => any;

package/dist/components/MenuGroup.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+const MenuGroup = ({ label, className, children, ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    "a-menu-group",
+    {
+      role: "group",
+      "aria-label": label,
+      class: className,
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsx("a-menu-group-label", { "aria-hidden": "true", children: label }),
+        children
+      ]
+    }
+  );
+};
+export {
+  MenuGroup
+};

package/dist/components/MenuItem.d.ts

@@ -0,0 +1,49 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+export interface MenuItemProps extends BaseProps {
+    /** Leading icon shape. */
+    icon?: IconShape;
+    /** The item's text. Omit and pass `children` for richer content. */
+    label?: string;
+    /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
+    kbd?: string;
+    /** A trailing icon (ignored when `submenu` is set — the chevron takes its
+     *  place). */
+    iconTrailing?: IconShape;
+    /** Disable the item: greyed out, not focusable for activation, no close. */
+    disabled?: boolean;
+    /** Semantic tone — colors the label, icon, and hover tint. `critical` is the
+     *  destructive action; `neutral` (the default) is the standard gray.
+     *  @defaultValue neutral */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Marks this item as a submenu parent: adds the trailing chevron and
+     *  `aria-haspopup`. Nest the flyout as a `<Menu submenu>` child. */
+    submenu?: boolean;
+    /** Convenience activation handler — fires on click / Enter / Space unless
+     *  the item is disabled. (Mapped to the underlying click.) */
+    onSelect?: (e: any) => void;
+    /** Item content. With `label` set, children are extra content — most
+     *  notably the nested `<Menu submenu>` for a submenu parent. */
+    children?: React.ReactNode;
+}
+/**
+ * MenuItem — a single selectable row inside a `Menu`. Composes a leading
+ * `icon`, a `label` (or `children`), an optional trailing `kbd` hint, and an
+ * optional trailing icon. For a submenu, set `submenu` and nest a
+ * `<Menu submenu>` as a child — a chevron is added automatically.
+ *
+ * Selecting an item closes the menu; add `data-menu-open` to keep it open
+ * (toggles / multi-select) — it forwards to the element.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem icon="copy" label="Duplicate" kbd="⌘D" onSelect={dup} />
+ * <MenuItem label="Word wrap" data-menu-open onSelect={toggleWrap} />
+ * <MenuItem label="Share" submenu>
+ *   <Menu submenu hover>
+ *     <MenuItem label="Copy link" onSelect={copyLink} />
+ *   </Menu>
+ * </MenuItem>
+ * ```
+ */
+export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, onSelect, className, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+const MenuItem = ({
+  icon,
+  label,
+  kbd,
+  iconTrailing,
+  disabled,
+  tone,
+  submenu,
+  onSelect,
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "a-menu-item",
+    {
+      role: "menuitem",
+      tabIndex: 0,
+      disabled: disabled ? "" : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      submenu: submenu ? "" : void 0,
+      "aria-haspopup": submenu ? "menu" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      onClick: disabled ? void 0 : onSelect,
+      class: className,
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+        label != null && /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+        kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+        submenu ? /* @__PURE__ */ jsx("a-icon", { shape: "chevron-right", "aria-hidden": "true" }) : iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+};
+export {
+  MenuItem
+};

package/dist/components/MenuSeparator.d.ts

@@ -0,0 +1,14 @@
+import type { BaseProps } from '../general_types';
+export interface MenuSeparatorProps extends BaseProps {
+}
+/**
+ * MenuSeparator — a thin divider between groups of `MenuItem`s.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem label="Edit" />
+ * <MenuSeparator />
+ * <MenuItem tone="critical" label="Delete" />
+ * ```
+ */
+export declare const MenuSeparator: ({ className, ...rest }: MenuSeparatorProps) => any;

package/dist/components/MenuSeparator.js

@@ -0,0 +1,7 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const MenuSeparator = ({ className, ...rest }) => {
+  return /* @__PURE__ */ jsx("a-menu-separator", { role: "separator", class: className, ...rest });
+};
+export {
+  MenuSeparator
+};

package/dist/components/Tag.d.ts

@@ -0,0 +1,55 @@
+import type { BaseProps } from "../general_types";
+import type { IconShape } from '../elements/a-icon.shapes';
+export interface TagProps extends BaseProps {
+    /** A short "key" shown before the value. When paired with `value` it
+     *  renders bold (weight 600), same color. On its own (no `value`) it's
+     *  treated as the tag's primary text and keeps the default styling. */
+    label?: string;
+    /** The tag's primary text — a status, count, version, duration, etc.
+     *  Rendered in the default color and weight, with no divider from the
+     *  label; the color + weight contrast does the separating. */
+    value?: string;
+    /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
+     *  for a one-off custom tone. Named tones map to the `--text-2-{tone}` /
+     *  `--bg-4-{tone}` palette; a custom color keeps its hue while lightness
+     *  and chroma are pinned. `'neutral'` (the default) is the gray tag —
+     *  the same as omitting `tone`.
+     *  @defaultValue neutral */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. `small` = 16px tall, `medium` = 20px, `large` = 24px
+     *  (matching `Button`). Omit the attribute or pass `'medium'` for the
+     *  default — both render identically and emit no DOM attribute.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Render in normal (mixed) case instead of the default uppercase
+     *  (keeps Anta's small body-text letter-spacing; uppercase tracks wider). */
+    nocaps?: boolean;
+    /** Leading icon shape. Sits flush before the label, scaled to the pill. */
+    icon?: IconShape;
+    /** Trailing icon shape. Renders last, after the value. */
+    iconTrailing?: IconShape;
+}
+/**
+ * Compact pill / chip for status, labels, and metadata.
+ *
+ * Renders an `<a-tag>` styled tag (no JS, no shadow DOM) — color and size
+ * come entirely from attributes. Content is composed from `icon`, `label`,
+ * `value`, and `iconTrailing` (like `<Button>`): `value` is the primary
+ * text (default styling) and `label`, when paired with a value, renders as
+ * a bold "key" before it (same color, no divider). Tabular figures are
+ * always on, so counts / versions / timers don't reflow. For an arbitrary
+ * multi-part tag, pass `children` instead — each segment after the first
+ * gets a hairline divider (the `label` + `value` pair is the no-divider
+ * exception).
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only)
+ * so the CSS ships with the page.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tag tone="success" label="Running" />
+ * <Tag tone="info" icon="hourglass" label="Build" value="2m 14s" />
+ * <Tag tone="brand" size="small" nocaps value="v2.1.0" />
+ * ```
+ */
+export declare const Tag: ({ icon, iconTrailing, label, value, tone, size, nocaps, className, style, children, ...rest }: TagProps) => any;

package/dist/components/Tag.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+const NAMED_TONES = /* @__PURE__ */ new Set(["neutral", "brand", "info", "success", "warning", "critical"]);
+const Tag = ({
+  icon,
+  iconTrailing,
+  label,
+  value,
+  tone,
+  size,
+  nocaps,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const isCustomTone = tone != null && !NAMED_TONES.has(tone);
+  const computedStyle = isCustomTone ? { ...style, ["--tag-tone-source"]: tone } : style;
+  const hasValue = value != null;
+  return /* @__PURE__ */ jsxs(
+    "a-tag",
+    {
+      tone,
+      size: size && size !== "medium" ? size : void 0,
+      nocaps: nocaps ? "" : void 0,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+        label != null && (hasValue ? /* @__PURE__ */ jsx("a-tag-label", { children: label }) : /* @__PURE__ */ jsx("a-tag-value", { children: label })),
+        hasValue && /* @__PURE__ */ jsx("a-tag-value", { children: value }),
+        children,
+        iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+export {
+  Tag
+};

package/dist/components/Text.d.ts

@@ -1,7 +1,9 @@
 import type { BaseProps } from "../general_types";
 export interface TextProps extends BaseProps {
-    /** Visual priority. Maps to text-1..text-5 (`primary` = text-1).
-     *  @defaultValue primary */
+    /** Visual priority. Maps to text-1..text-5 (`primary` = text-1, the
+     *  strongest). The default is `secondary` (text-2) — body text reads a
+     *  step softer than the strongest foreground; pass `primary` for emphasis.
+     *  @defaultValue secondary */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
     /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
     tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';

package/dist/components/Tooltip.d.ts

@@ -25,8 +25,10 @@ export interface TooltipProps extends BaseProps {
  * doesn't affect that element's layout.
  *
  * Shows on hover (after `delay`) and on keyboard focus; dismisses on mouse
- * leave, blur, Escape, or when the anchor scrolls away. Follows the cursor
- * by default — pass `static` to pin it under the anchor instead.
+ * leave, blur, Escape, or when the anchor scrolls away. On touch devices it
+ * opens on press-and-hold (a tap never surfaces it) and lingers briefly after
+ * release. Follows the cursor by default — pass `static` to pin it under the
+ * anchor instead.
  *
  * Requires `@antadesign/anta/elements` to be imported (client-side only)
  * to register the underlying custom element.

package/dist/elements/a-button.css

@@ -36,6 +36,11 @@
     --button-bg-secondary-active: #44374b26;
     --button-fg-secondary-rest: #534c57;
     --button-fg-secondary-hover: #49424c;
+    /* Darken the rest-state secondary label by this much oklch lightness so
+       it reads a touch stronger. Applied dynamically at the --button-fg
+       wiring (below), so it covers every tone — named and custom alike.
+       Light mode only; the .dark block zeroes it. */
+    --button-fg-secondary-l-shift: 0.05;
 
     --button-fg-tertiary-rest: #635b65;
     --button-fg-tertiary-hover: #534c57;
@@ -192,6 +197,8 @@
     --button-bg-secondary-active: #e4d1ef2e;
     --button-fg-secondary-rest: #c1b9c1;
     --button-fg-secondary-hover: #d4ced4;
+    /* Dark-mode secondary labels are already tuned — no rest darkening. */
+    --button-fg-secondary-l-shift: 0;
 
     --button-fg-tertiary-rest: #afa9b1;
     --button-fg-tertiary-hover: #afa9b1;
@@ -323,6 +330,10 @@
     background-color: var(--button-bg);
     border-radius: 4px;
     text-decoration: none;
+    /* Secondary is the default priority — a 1px hairline in the current
+       fg tone (at 50% alpha) gives the chip a subtle edge. Primary,
+       tertiary, and quaternary cancel it in their own blocks below. */
+    box-shadow: 0 0 1px color-mix(in oklch, currentColor, transparent 50%);
 
     font-size: 15px;
     font-family: var(--sans-serif);
@@ -413,11 +424,6 @@
       outline-offset: 1px;
     }
 
-    /* Selected gets a 0.5px inset ring in the current fg color. */
-    &[selected] {
-      box-shadow: inset 0 0 0 0.5px currentColor;
-    }
-
     /* Quaternary: instant in every direction — hover-in, press, and
        return to rest all snap with no transition. */
     &[priority="quaternary"] {
@@ -559,6 +565,7 @@
        on Chrome 133+ / Safari 18.2+. (oklch relative color: Chrome 119+,
        Safari 16.4+, Firefox 128+.) */
     &[tone]:not(
+        [tone=""],
         [tone="brand"],
         [tone="neutral"],
         [tone="critical"],
@@ -609,6 +616,7 @@
     /* Custom tone, dark mode — same formulas, re-tuned knobs: lighter fg
        and heavier tint alphas to read against a dark page. */
     .dark &[tone]:not(
+        [tone=""],
         [tone="brand"],
         [tone="neutral"],
         [tone="critical"],
@@ -636,7 +644,7 @@
        tertiary, and quaternary match an explicit `[priority="…"]` attr
        and win on specificity (primary's constant fg beats the unscoped
        :hover on source order). */
-    --button-fg: var(--button-fg-secondary-rest);
+    --button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);
     --button-bg: var(--button-bg-secondary-rest);
     /* Hover styling is gated to real-pointer devices so it doesn't stick
        after a tap on touch screens (where :hover lingers until the next
@@ -656,6 +664,8 @@
     &[priority="primary"] {
       --button-fg: var(--button-fg-primary-rest);
       --button-bg: var(--button-bg-primary-rest);
+      /* Solid fill carries its own edge — drop the secondary hairline. */
+      box-shadow: none;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
           --button-bg: var(--button-bg-primary-hover);
@@ -669,6 +679,8 @@
     &[priority="tertiary"] {
       --button-fg: var(--button-fg-tertiary-rest);
       --button-bg: transparent;
+      /* Background-less — no hairline. */
+      box-shadow: none;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
           --button-fg: var(--button-fg-tertiary-hover);
@@ -682,11 +694,14 @@
       }
     }
     &[priority="quaternary"] {
-      /* Rest fg is the quaternary tone at 82% alpha — slightly faded, so a
+      /* Rest fg is the quaternary tone at 90% alpha — slightly faded, so a
          quaternary button reads as quieter than a (full-opacity) tertiary
          one. Hover / active restore full opacity. */
-      --button-fg: color-mix(in oklch, var(--button-fg-quaternary-rest) 82%, transparent);
+      --button-fg: color-mix(in oklch, var(--button-fg-quaternary-rest) 90%, transparent);
       --button-bg: transparent;
+      /* Background-less — no hairline. */
+      box-shadow: none;
+      font-weight: 415;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
           --button-fg: var(--button-fg-quaternary-hover);
@@ -707,6 +722,14 @@
       }
     }
 
+    /* Selected gets a 1px inset ring in the current fg color. Declared
+       after the priority blocks so it overrides their `box-shadow: none`
+       cancels — every selected button keeps its ring regardless of
+       priority. */
+    &[selected] {
+      box-shadow: inset 0 0 0 1px currentColor;
+    }
+
     /* Set bg/color directly (not the vars) so inline-style
        `--button-bg` overrides can't keep a disabled button alive.
        Secondary disabled is the default; other priorities override below. */

package/dist/elements/a-icon.shapes.css

@@ -330,6 +330,10 @@
     --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18'/%3E%3C/svg%3E%0A");
   }
 
+  a-icon[shape="tag"] {
+    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='currentColor'/%3E%3C/svg%3E%0A");
+  }
+
   a-icon[shape="text-highlight"] {
     --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%0A%3C!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --%3E%0A%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'%0A	 viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'%3E%0A%3Cg id='text_highlight_1_'%3E%0A	%3Cg%3E%0A		%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9,10H2V6h7V4H1C0.45,4,0,4.45,0,5v6c0,0.55,0.45,1,1,1h8V10z M13,13h-1V3h1%0A			c0.55,0,1-0.45,1-1c0-0.55-0.45-1-1-1h-1c-0.37,0-0.7,0.11-1,0.28C10.7,1.11,10.37,1,10,1H9C8.45,1,8,1.45,8,2c0,0.55,0.45,1,1,1%0A			h1v10H9c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1h1c0.37,0,0.7-0.11,1-0.28c0.3,0.17,0.63,0.28,1,0.28h1c0.55,0,1-0.45,1-1%0A			C14,13.45,13.55,13,13,13z M15,4h-2v2h1v4h-1v2h2c0.55,0,1-0.45,1-1V5C16,4.45,15.55,4,15,4z'/%3E%0A	%3C/g%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
   }

package/dist/elements/a-icon.shapes.d.ts

@@ -1,5 +1,5 @@
 import type { IconShapes } from '@antadesign/anta';
-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", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "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", "sparkles", "sun", "swatch-book", "table-2", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
+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", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "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", "sparkles", "sun", "swatch-book", "table-2", "tag", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
 export declare const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>>;
 declare module '@antadesign/anta' {
     interface IconShapes {
@@ -85,6 +85,7 @@ declare module '@antadesign/anta' {
         'sun': true;
         'swatch-book': true;
         'table-2': true;
+        'tag': true;
         'text-highlight': true;
         'text-initial': true;
         'timer': true;

package/dist/elements/a-icon.shapes.js

@@ -81,6 +81,7 @@ const ICON_SHAPES = [
   "sun",
   "swatch-book",
   "table-2",
+  "tag",
   "text-highlight",
   "text-initial",
   "timer",
@@ -178,7 +179,8 @@ const ICON_SYNONYMS = {
   "download": ["save", "import"],
   "cloud-upload": ["save", "sync", "upload", "send", "export"],
   "link": ["url", "href", "anchor"],
-  "more": ["options", "extra"]
+  "more": ["options", "extra"],
+  "tag": ["label", "badge", "chip"]
 };
 export {
   ICON_SHAPES,

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

@@ -0,0 +1,21 @@
+@layer anta {
+  a-menu-group:not(:defined) {
+    display: none;
+  }
+
+  a-menu-group {
+    display: block;
+  }
+
+  /* Non-focusable section heading. */
+  a-menu-group-label {
+    display: block;
+    padding: 6px 8px 2px;
+    color: var(--text-5);
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    user-select: none;
+  }
+}

package/dist/elements/a-menu-group.d.ts

@@ -0,0 +1,13 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-menu-group.css';
+/**
+ * `<a-menu-group>` — a titled section grouping related menu items.
+ * No JS / no shadow DOM; styled by `a-menu-group.css`. The group's heading
+ * is a non-focusable `<a-menu-group-label>` child rendered by the
+ * `MenuGroup` JSX wrapper; `role="group"` + `aria-label` are added there too.
+ * Keyboard navigation in `<a-menu>` flattens items across group boundaries,
+ * skipping the heading.
+ */
+export declare class AMenuGroupElement extends HTMLElementBase {
+}
+export declare function register_a_menu_group(): void;

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

@@ -0,0 +1,15 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-menu-group.css";
+class AMenuGroupElement extends HTMLElementBase {
+}
+function register_a_menu_group() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-menu-group")) {
+    customElements.define("a-menu-group", AMenuGroupElement);
+  }
+}
+register_a_menu_group();
+export {
+  AMenuGroupElement,
+  register_a_menu_group
+};