@antadesign/anta 0.3.5 → 0.3.7

package/dist/components/Select.js

@@ -1,5 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
+import { ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
 import { Menu } from "./Menu";
@@ -8,8 +10,6 @@ import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tooltip } from "./Tooltip";
 import styles from "./Select.module.css";
-const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
-const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function optionsWithSelection(options, values) {
   const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
   const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
@@ -28,7 +28,7 @@ function optionsWithSelection(options, values) {
       const total = children.reduce((n, c) => n + c.total, 0);
       return { node: { ...g, options: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
     }
-    const o = normalize(raw);
+    const o = normalizeOpt(raw);
     const selected = set.has(o.value);
     return { node: { ...o, selected }, on: selected ? 1 : 0, total: 1 };
   });
@@ -54,7 +54,7 @@ const Select = (props) => {
     disabled,
     toneSelected,
     filter,
-    selectAll,
+    selectAll = true,
     selectAllLabel = "Select all",
     clearable,
     clearLabel = "Clear",
@@ -85,7 +85,7 @@ const Select = (props) => {
       if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
       else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
       else {
-        const o = normalize(raw);
+        const o = normalizeOpt(raw);
         out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
       }
     }
@@ -101,28 +101,11 @@ const Select = (props) => {
   const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
   const filtering = filter !== void 0 && filter !== false;
   const q = query.trim();
-  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const queryRe = filtering && typeof filter !== "function" && q ? new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i") : null;
-  const matches = (o) => typeof filter === "function" ? filter(o, q) : !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+  const queryRe = filtering && typeof filter !== "function" ? matchQueryRegex(q) : null;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : matchesQuery(o, queryRe);
   const prune = typeof filter === "function" || filtering && !!q;
   const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
   const flattening = filtering && !!q;
-  const highlight = (text) => {
-    if (!queryRe) return text;
-    const re = new RegExp(queryRe.source, "gi");
-    const out = [];
-    let last = 0;
-    let m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) out.push(text.slice(last, m.index));
-      out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
-      last = m.index + m[0].length;
-      if (m[0].length === 0) re.lastIndex++;
-    }
-    if (out.length === 0) return text;
-    if (last < text.length) out.push(text.slice(last));
-    return out;
-  };
   const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
   const isSelected = (v) => selectedValues.includes(v);
   const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
@@ -171,7 +154,7 @@ const Select = (props) => {
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
     const ariaSelectable = !multiple && mark === "none" ? { role: "menuitemradio", "aria-checked": isSelected(o.value) ? "true" : "false" } : void 0;
-    const isolateHint = multiple && selectAll && !disabled2 ? IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this" : void 0;
+    const isolateHint = multiple && selectAll && !disabled2 ? ISOLATE_HINT : void 0;
     const tip = o.tooltip ?? isolateHint;
     const hintOnly = o.tooltip == null && isolateHint != null;
     return /* @__PURE__ */ jsxs(
@@ -181,8 +164,8 @@ const Select = (props) => {
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
         indicator: customMark ?? void 0,
-        label: custom ? void 0 : queryRe ? highlight(o.label ?? o.value) : o.label ?? o.value,
-        hint: custom ? void 0 : queryRe && o.hint ? highlight(o.hint) : o.hint,
+        label: custom ? void 0 : highlight(o.label ?? o.value, queryRe),
+        hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRe) : o.hint,
         icon: custom ? void 0 : o.icon,
         tone: o.tone,
         toneSelected,
@@ -227,7 +210,7 @@ const Select = (props) => {
         if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
         return;
       }
-      const o = normalize(raw);
+      const o = normalizeOpt(raw);
       if (typeof filter === "function" && !matches(o)) return;
       out.push(renderOptionRow(o, disabled2 || !!o.disabled));
     });
@@ -271,12 +254,6 @@ const Select = (props) => {
         round,
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
-        onKeyDown: (e) => {
-          if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        },
         trailing: (
           // Chevron rotates down → up when open (spacing + rotation in the CSS
           // module, matching the Input "Select dropdown" example).

package/dist/components/SelectFaceted.d.ts

@@ -36,7 +36,9 @@ export interface SelectFacetMultiple extends FacetBase {
     options: SelectItem[];
     /** Add a search field atop this facet's flyout that filters its options. */
     filter?: FacetFilter;
-    /** Add a "Select all" row that toggles every option. */
+    /** A "Select all" row that toggles every option. On by default — set `false`
+     *  to drop it.
+     *  @defaultValue true */
     selectAll?: boolean;
     /** Label for the `selectAll` row.
      *  @defaultValue Select all */
@@ -129,6 +131,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
     priority?: 'primary' | 'secondary';
     /** Disable the whole control. */
     disabled?: boolean;
+    /** Tone applied to a selected option row in the facet flyouts (label, selected
+     *  tint, and the check / checkbox indicator). A named tone or a custom CSS
+     *  colour, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Add a single search field to the top of the root menu that flattens every
      *  `single` / `multiple` facet's options into one list and searches across them
      *  — typing "alice" surfaces it under both an Assignee and an Owner facet, each

package/dist/components/SelectFaceted.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
 import { MenuItem } from "./MenuItem";
@@ -8,8 +9,8 @@ import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tag } from "./Tag";
 import { Input } from "./Input";
+import { Tooltip } from "./Tooltip";
 import styles from "./SelectFaceted.module.css";
-const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
 const leavesOf = (items) => {
   const out = [];
   for (const it of items) {
@@ -22,13 +23,7 @@ const leavesOf = (items) => {
   return out;
 };
 const isEmpty = (v) => v == null || v === "" || Array.isArray(v) && v.length === 0;
-const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const defaultMatch = (o, query) => {
-  const q = query.trim();
-  if (!q) return true;
-  const re = new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i");
-  return [o.value, o.label, o.hint].some((v) => typeof v === "string" && re.test(v));
-};
+const defaultMatch = (o, query) => matchesQuery(o, matchQueryRegex(query));
 const SelectFaceted = (props) => {
   const {
     facets,
@@ -40,6 +35,7 @@ const SelectFaceted = (props) => {
     size,
     priority = "secondary",
     disabled,
+    toneSelected,
     searchable,
     searchPlaceholder = "Filter\u2026",
     clearable = true,
@@ -125,6 +121,7 @@ const SelectFaceted = (props) => {
       label: opt.label ?? opt.value,
       hint: opt.hint,
       tone: opt.tone,
+      toneSelected,
       disabled: opt.disabled,
       "data-menu-open": ""
     };
@@ -142,13 +139,17 @@ const SelectFaceted = (props) => {
       );
     }
     const arr = current[facet.key] ?? [];
+    const isolable = facet.selectAll !== false && !opt.disabled;
+    const tip = opt.tooltip ?? (isolable ? ISOLATE_HINT : void 0);
+    const hintOnly = opt.tooltip == null && isolable;
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
         ...shared,
         selectionIndicator: "checkbox",
         selected: arr.includes(opt.value),
-        onSelect: () => setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value])
+        onSelect: (e) => isolable && e?.altKey ? setFacet(facet, [opt.value]) : setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value]),
+        children: tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { follow: true, delay: 700 } : {}, children: tip })
       },
       `${keyPrefix}${opt.value}`
     );
@@ -161,7 +162,7 @@ const SelectFaceted = (props) => {
     const allOn = enabled.length > 0 && enabled.every((v) => arr.includes(v));
     const someOn = enabled.some((v) => arr.includes(v));
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      facet.selectAll && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      facet.selectAll !== false && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           MenuItem,
           {

package/dist/components/select-options.d.ts

@@ -0,0 +1,14 @@
+import type { SelectOption } from './Select';
+/** Coerce a bare string option to `{ value, label }`; pass an object through. */
+export declare const normalizeOpt: (o: string | SelectOption) => SelectOption;
+/** The built-in filter regex: case-insensitive, with each run of whitespace in the
+ *  query matching any gap (`\s+`). Returns null for an empty query — the signal to
+ *  match everything and to skip match-highlighting. */
+export declare function matchQueryRegex(query: string): RegExp | null;
+/** Whether an option matches the built-in query regex, testing value / label /
+ *  hint. A null regex (empty query) matches everything. */
+export declare const matchesQuery: (o: SelectOption, queryRe: RegExp | null) => boolean;
+/** Bold the matched substring(s) of `text` for display (built-in matcher only).
+ *  A null regex returns the text unchanged. The regex is re-created global so
+ *  `exec` walks every match; the zero-width guard stops an empty match looping. */
+export declare const highlight: (text: string, queryRe: RegExp | null) => React.ReactNode;

package/dist/components/select-options.js

@@ -0,0 +1,31 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function matchQueryRegex(query) {
+  const q = query.trim();
+  if (!q) return null;
+  const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(q.split(/\s+/).map(escape).join("\\s+"), "i");
+}
+const matchesQuery = (o, queryRe) => !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+const highlight = (text, queryRe) => {
+  if (!queryRe) return text;
+  const re = new RegExp(queryRe.source, "gi");
+  const out = [];
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
+    last = m.index + m[0].length;
+    if (m[0].length === 0) re.lastIndex++;
+  }
+  if (out.length === 0) return text;
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+};
+export {
+  highlight,
+  matchQueryRegex,
+  matchesQuery,
+  normalizeOpt
+};

package/dist/elements/a-card.css

@@ -0,0 +1,211 @@
+@layer anta {
+  /* Host + token definitions for <a-card>. The visible box lives here (not in the
+     shadow) so plain consumer CSS overrides it and it paints before the element
+     upgrades; the shadow <style> owns layout + region typography and only
+     REFERENCES these --card-* tokens with literal fallbacks. Named tones use
+     Anta's theme-aware role tokens, so dark mode is mostly free (same as
+     <a-expander> / <a-tag>); only the custom-tone branch needs a .dark re-tune. */
+
+  a-card {
+    /* Text roles: title = the strong foreground, text = the body (a step softer). */
+    --card-title: var(--text-1);
+    --card-text: var(--text-2);
+
+    /* Surface pairs per priority. `primary` (the default) is a clean sheet —
+       bg-1 in light, bg-4 in dark (see the `.dark` neutral rule), and
+       bg-4-{tone} for a toned card; `secondary` is a subtle fill (bg-2);
+       `tertiary` is a frosted panel (the primary surface, semi-transparent, +
+       a backdrop blur — see below). */
+    --card-bg-secondary: var(--bg-2);
+    --card-bg-primary: var(--bg-1);
+
+    /* `primary` is the default surface. */
+    --card-bg: var(--card-bg-primary);
+    /* Neutral edge hairline: text-2 at 10% (via --card-text). Toned cards override
+       this with their border-4-{tone} in the tone rules below. Flat across
+       priorities. */
+    --card-border: color-mix(in oklch, var(--card-text) 10%, transparent);
+
+    /* Selected ring (a 2px inset stroke) — the tone's strongest border. */
+    --card-selected-ring: var(--border-1);
+
+    /* Closed-surface hover lift for link cards: an oklch lightness bump that keeps
+       hue + chroma, so it works for every priority and tone in light and dark
+       (a transparent tertiary surface keeps zero alpha). Tune the amount here. */
+    --card-bg-hover-lift: 0.01;
+
+    --card-radius: 8px;
+    --card-padding: 16px;
+
+    display: block;
+    box-sizing: border-box;
+    /* Fill the container (grid cell / flex item / block) so width is always
+       definite. This is also what keeps `container-type` below from collapsing
+       the card to zero width in a shrink-to-fit context (a query container can't
+       size to its own content). Same as <a-expander>. */
+    width: 100%;
+    /* Establish the card as a query container so both the shadow layout and
+       consumer slotted content can `@container card (…)` on its width. */
+    container-type: inline-size;
+    container-name: card;
+
+    color: var(--card-text);
+    background: var(--card-bg);
+    /* The edge is a 1px OUTSET shadow ring (spread 1px, no blur), not a border:
+       it sits outside the box so full-bleed media reaches the very edge (no 1px
+       border inset) and it never adds to layout. `overflow: clip` doesn't clip an
+       element's own outset shadow, so the ring shows while the media still clips
+       to the rounded corners. */
+    box-shadow: 0 0 0 1px var(--card-border);
+    border-radius: var(--card-radius);
+    /* Clip full-bleed media to the rounded corners. */
+    overflow: clip;
+  }
+
+  a-card[priority="secondary"] {
+    --card-bg: var(--card-bg-secondary);
+  }
+
+  /* `round` re-points --card-radius, so both the host clip-radius and the shadow
+     container's ring follow. Bare `round` → 999px (fully round, clamped to the
+     box); a length (`round="16px"`, or the wrapper's `round={16}` → inline
+     --card-round) sets a custom radius. The typed attr() covers raw-HTML authors. */
+  a-card[round] {
+    --card-round: attr(round type(<length>));
+    --card-radius: var(--card-round, 999px);
+  }
+  a-card[priority="tertiary"] {
+    /* Frosted glass: the primary surface at 1% over a backdrop blur, so the card
+       reads over busy / colored / image backgrounds. It keeps the same hairline
+       ring as the other priorities (no --card-border override). The blur only
+       shows where there's detail behind it; the translucency reads everywhere. */
+    --card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  /* Neutral dark: bg-1 (primary's light surface) is pure black in dark mode, so
+     step neutral primary up to bg-4. Secondary stays bg-2 via its token, and a
+     toned card's --bg-*-{tone} tokens self-flip, so this is scoped to neutral. */
+  .dark a-card:not([tone]),
+  .dark a-card[tone="neutral"] {
+    --card-bg-primary: var(--bg-4);
+  }
+
+  /* Hover lift, link cards only — gated so it doesn't stick after a tap. */
+  @media (hover: hover) and (pointer: fine) {
+    a-card[href]:not([loading]):hover {
+      background: oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h);
+    }
+  }
+
+  /* Pre-upgrade skeleton: the host border / background / radius already paint
+     (they're defined here, not in the shadow), so only the content inset is
+     missing before the shadow's .content exists — supply it here, then the
+     shadow owns padding once :defined. */
+  a-card:not(:defined) {
+    padding: var(--card-padding);
+  }
+
+  /* A slotted heading node — <a-title> (any level) or a raw <h1>–<h6> — carries a
+     document TOP margin (Title level 4 is 20px) that would add a leading gap in the
+     header; zero it. The BOTTOM margin stays, so a heading header keeps its gap to
+     the body. (A plain-STRING header has no margin of its own, so the `<Card>`
+     wrapper wraps it in a div with the matching 8px bottom margin — CSS can't tell
+     a string from a styled node, so that split lives in the wrapper.) Specificity
+     is bumped past `a-title[level="N"]` (0,1,1) and the reset's `hN` (0,0,1);
+     `@layer anta` keeps it overridable by un-layered CSS. */
+  a-card :is(h1, h2, h3, h4, h5, h6),
+  a-card a-title[level] {
+    margin-block-start: 0;
+  }
+
+  /* Named tones — re-point the text roles + the per-priority surface pairs to the
+     matching theme tokens (which self-flip for dark mode). */
+  a-card[tone="brand"] {
+    --card-title: var(--text-1-brand);
+    --card-text: var(--text-2-brand);
+    --card-bg-secondary: var(--bg-2-brand);
+    --card-bg-primary: var(--bg-4-brand);
+    --card-border: var(--border-4-brand);
+    --card-selected-ring: var(--border-1-brand);
+  }
+  a-card[tone="info"] {
+    --card-title: var(--text-1-info);
+    --card-text: var(--text-2-info);
+    --card-bg-secondary: var(--bg-2-info);
+    --card-bg-primary: var(--bg-4-info);
+    --card-border: var(--border-4-info);
+    --card-selected-ring: var(--border-1-info);
+  }
+  a-card[tone="success"] {
+    --card-title: var(--text-1-success);
+    --card-text: var(--text-2-success);
+    --card-bg-secondary: var(--bg-2-success);
+    --card-bg-primary: var(--bg-4-success);
+    --card-border: var(--border-4-success);
+    --card-selected-ring: var(--border-1-success);
+  }
+  a-card[tone="warning"] {
+    --card-title: var(--text-1-warning);
+    --card-text: var(--text-2-warning);
+    --card-bg-secondary: var(--bg-2-warning);
+    --card-bg-primary: var(--bg-4-warning);
+    --card-border: var(--border-4-warning);
+    --card-selected-ring: var(--border-1-warning);
+  }
+  a-card[tone="critical"] {
+    --card-title: var(--text-1-critical);
+    --card-text: var(--text-2-critical);
+    --card-bg-secondary: var(--bg-2-critical);
+    --card-bg-primary: var(--bg-4-critical);
+    --card-border: var(--border-4-critical);
+    --card-selected-ring: var(--border-1-critical);
+  }
+
+  /* Custom tone — any non-named `tone` value keeps the source hue while
+     lightness/chroma are pinned per token in oklch, the <a-expander> mechanism.
+     The JSX wrapper writes --card-tone-source inline; the typed attr() fallback
+     picks up raw <a-card tone="…"> on engines that support it. */
+  a-card[tone]:not(
+      [tone="neutral"],
+      [tone="brand"],
+      [tone="info"],
+      [tone="success"],
+      [tone="warning"],
+      [tone="critical"]
+    ) {
+    --card-tone-source: attr(tone type(<color>), currentColor);
+
+    --card-text:               oklch(from var(--card-tone-source) 0.41 0.15 h);
+    --card-title:              oklch(from var(--card-tone-source) 0.33 0.15 h);
+    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.99 0.006 h);
+    --card-bg-primary:         oklch(from var(--card-tone-source) 0.955 0.02 h);
+    --card-border:             oklch(from var(--card-tone-source) 0.895 0.045 h);
+    --card-selected-ring:      oklch(from var(--card-tone-source) 0.6 0.15 h);
+  }
+
+  .dark a-card[tone]:not(
+      [tone="neutral"],
+      [tone="brand"],
+      [tone="info"],
+      [tone="success"],
+      [tone="warning"],
+      [tone="critical"]
+    ) {
+    --card-text:               oklch(from var(--card-tone-source) 0.75 0.11 h);
+    --card-title:              oklch(from var(--card-tone-source) 0.82 0.10 h);
+    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.13 0.02 h);
+    --card-bg-primary:         oklch(from var(--card-tone-source) 0.19 0.04 h);
+    --card-border:             oklch(from var(--card-tone-source) 0.26 0.07 h);
+    --card-selected-ring:      oklch(from var(--card-tone-source) 0.7 0.13 h);
+  }
+
+  /* Size — padding scale (medium is the default, set on the base rule). */
+  a-card[size="small"] {
+    --card-padding: 12px;
+  }
+  a-card[size="large"] {
+    --card-padding: 20px;
+  }
+}

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

@@ -0,0 +1,10 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-card.css';
+export declare class ACardElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function register_a_card(): void;