prime-ui-kit 0.15.0 → 0.16.0

package/dist/chunks/{chunk-Q3BFRQHZ.js → chunk-U3Q2I3MY.js}

@@ -17,12 +17,34 @@ function useControlSize(sizeProp) {
   const host = React.useContext(ControlSizeContext);
   return sizeProp ?? host ?? "m";
 }
+function useHostTier(sizeProp) {
+  const size = useControlSize(sizeProp);
+  const provide = React.useCallback(
+    (children) => /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size, children }),
+    [size]
+  );
+  return { size, provide };
+}
 
 // src/internal/cx.ts
 function cx(...classNames) {
   return classNames.filter(Boolean).join(" ");
 }
 
+// src/internal/fieldTier.module.css
+var fieldTier_default = {
+  tier: "fieldTier_tier",
+  iconXs: "fieldTier_iconXs",
+  iconS: "fieldTier_iconS",
+  iconM: "fieldTier_iconM",
+  iconL: "fieldTier_iconL",
+  iconXl: "fieldTier_iconXl",
+  labelText: "fieldTier_labelText",
+  hintText: "fieldTier_hintText",
+  inputText: "fieldTier_inputText",
+  codeCell: "fieldTier_codeCell"
+};
+
 // src/internal/iconBox.module.css
 var iconBox_default = {
   box: "iconBox_box",
@@ -31,13 +53,24 @@ var iconBox_default = {
   m: "iconBox_m",
   l: "iconBox_l",
   xl: "iconBox_xl",
-  inherit: "iconBox_inherit"
+  inherit: "iconBox_inherit",
+  slot: "iconBox_slot",
+  tile: "iconBox_tile"
 };
 
 // src/internal/iconBox.ts
+var TIER_ICON = {
+  xs: fieldTier_default.iconXs,
+  s: fieldTier_default.iconS,
+  m: fieldTier_default.iconM,
+  l: fieldTier_default.iconL,
+  xl: fieldTier_default.iconXl
+};
 function iconBoxClass(size, tier) {
-  return cx(iconBox_default.box, iconBox_default[size ?? tier ?? "m"], size === void 0 && iconBox_default.inherit);
+  if (size !== void 0) return cx(iconBox_default.box, iconBox_default[size]);
+  return cx(iconBox_default.box, iconBox_default.inherit, TIER_ICON[tier ?? "m"]);
 }
+var iconSlotClass = iconBox_default.slot;
 
 // src/internal/palette.module.css
 var palette_default = {
@@ -72,7 +105,105 @@ var Icon_default = {
 };
 
 // src/icons/iconPlay.ts
+import * as React3 from "react";
+
+// src/hooks/usePresence.ts
 import * as React2 from "react";
+
+// src/internal/tokenDefaults.ts
+var TOKEN_DEFAULTS = {
+  "--prime-gallery-max-size": 360,
+  "--prime-message-video-note-box": 268,
+  "--prime-motion-duration-base": 380,
+  "--prime-motion-duration-fast": 230,
+  "--prime-motion-duration-slow": 570,
+  "--prime-motion-duration-xfast": 150,
+  "--prime-motion-hold-confirm": 1200,
+  "--prime-motion-stagger": 80,
+  "--prime-panel-offset": 4,
+  "--prime-space-2": 8,
+  "--prime-space-6": 24,
+  "--prime-space-8": 32,
+  "--prime-space-20": 80
+};
+
+// src/internal/motionTiming.ts
+var TIMEOUT_SLACK_MS = 50;
+function parseDurationMs(raw) {
+  const value = raw.trim();
+  if (value === "") return null;
+  const n = Number.parseFloat(value);
+  if (Number.isNaN(n)) return null;
+  if (value.endsWith("ms")) return n;
+  if (value.endsWith("s")) return n * 1e3;
+  return null;
+}
+function motionToken(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function readCssDurationMs(name) {
+  if (typeof document === "undefined") return TOKEN_DEFAULTS[name];
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name);
+  return parseDurationMs(raw) ?? TOKEN_DEFAULTS[name];
+}
+function readElementDurationMs(element, name) {
+  return parseDurationMs(getComputedStyle(element).getPropertyValue(name)) ?? 0;
+}
+function motionDurationMs(token) {
+  return readCssDurationMs(`--prime-motion-duration-${token}`);
+}
+function afterMotionMs(ms) {
+  return ms + TIMEOUT_SLACK_MS;
+}
+function exitTimeoutMs(token) {
+  return afterMotionMs(motionDurationMs(token));
+}
+var timingCache = /* @__PURE__ */ new Map();
+function motionTiming(duration, curve = "standard") {
+  const key = `${duration}|${curve}`;
+  const cached = timingCache.get(key);
+  if (cached) return { ...cached };
+  const easing = motionToken(`--prime-motion-easing-${curve}`);
+  const timing = easing ? { duration: motionDurationMs(duration), easing } : { duration: motionDurationMs(duration) };
+  if (typeof requestAnimationFrame === "function") {
+    if (timingCache.size === 0) requestAnimationFrame(() => timingCache.clear());
+    timingCache.set(key, timing);
+  }
+  return { ...timing };
+}
+
+// src/hooks/breakpoints.ts
+var COMPACT_QUERY = "(max-width: 639px)";
+var OFF_CANVAS_QUERY = "(max-width: 767px)";
+var TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
+var HOVER_QUERY = "(hover: hover)";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+// src/hooks/usePresence.ts
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function usePresence(open, options = {}) {
+  const { exitDuration = "base" } = options;
+  const [mounted, setMounted] = React2.useState(open);
+  if (open && !mounted) setMounted(true);
+  if (!open && mounted && prefersReducedMotion()) setMounted(false);
+  const openRef = React2.useRef(open);
+  openRef.current = open;
+  React2.useEffect(() => {
+    if (open || !mounted) return;
+    const id = window.setTimeout(() => setMounted(false), exitTimeoutMs(exitDuration));
+    return () => window.clearTimeout(id);
+  }, [open, mounted, exitDuration]);
+  const onExitEnd = React2.useCallback((event) => {
+    if (event.target !== event.currentTarget) return;
+    if (!openRef.current) setMounted(false);
+  }, []);
+  return { mounted: open || mounted, state: open ? "open" : "closed", onExitEnd };
+}
+
+// src/icons/iconPlay.ts
 var OWNER = [
   "a[href]",
   "button",
@@ -96,9 +227,6 @@ var ICON = "svg[data-icon-motion]";
 var DISABLED = ':disabled, [aria-disabled="true"], [data-disabled="true"], [data-loading="true"]';
 var installed = false;
 var currentOwner = null;
-function reducedMotion() {
-  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
-}
 function play(icon) {
   if (!icon.hasAttribute("data-play")) icon.setAttribute("data-play", "");
 }
@@ -106,7 +234,7 @@ function ownerOf(target) {
   return target.closest(OWNER) ?? target.closest(ICON);
 }
 function playOwner(owner) {
-  if (reducedMotion()) return;
+  if (prefersReducedMotion()) return;
   if (owner.matches(ICON)) {
     play(owner);
     return;
@@ -145,7 +273,7 @@ function install() {
   document.addEventListener("animationcancel", onAnimationEnd);
 }
 function useIconPlay(animated) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (animated) install();
   }, [animated]);
 }
@@ -159,10 +287,12 @@ function useIconRoot({
   color,
   label,
   animated = true,
+  drawn,
   motion
 }) {
   const tier = useOptionalControlSize();
-  useIconPlay(animated);
+  const plays = animated && drawn === void 0;
+  useIconPlay(plays);
   return {
     className: cx(
       Icon_default.root,
@@ -177,7 +307,8 @@ function useIconRoot({
     role: label === void 0 ? void 0 : "img",
     "aria-label": label,
     "aria-hidden": label === void 0 ? true : void 0,
-    "data-icon-motion": animated ? motion : void 0
+    "data-icon-motion": plays ? motion : void 0,
+    "data-drawn": drawn === void 0 ? void 0 : String(drawn)
   };
 }
 function defineGlyph(source, body) {
@@ -188,10 +319,20 @@ function defineGlyph(source, body) {
     color,
     label,
     animated,
+    drawn,
     strokeWidth = 1.75,
     ...rest
   }) {
-    const root = useIconRoot({ className, size, tone, color, label, animated, motion: "glyph" });
+    const root = useIconRoot({
+      className,
+      size,
+      tone,
+      color,
+      label,
+      animated,
+      drawn,
+      motion: "glyph"
+    });
     return (
       // biome-ignore lint/a11y/noSvgWithoutTitle: `root` makes it aria-hidden, or role="img" named by `label`
       /* @__PURE__ */ jsx2(
@@ -1605,8 +1746,26 @@ export {
   ControlSizeProvider,
   useOptionalControlSize,
   useControlSize,
+  useHostTier,
   cx,
+  fieldTier_default,
+  TOKEN_DEFAULTS,
+  motionToken,
+  readCssDurationMs,
+  readElementDurationMs,
+  motionDurationMs,
+  afterMotionMs,
+  exitTimeoutMs,
+  motionTiming,
+  COMPACT_QUERY,
+  OFF_CANVAS_QUERY,
+  TOUCH_QUERY,
+  HOVER_QUERY,
+  prefersReducedMotion,
+  usePresence,
+  iconBox_default,
   iconBoxClass,
+  iconSlotClass,
   textTone_default,
   palette_default,
   useIconRoot,

package/dist/color-picker.js

@@ -4,9 +4,9 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-2IKH55MI.js";
-import "./chunks/chunk-XJAVS6FH.js";
-import "./chunks/chunk-Q3BFRQHZ.js";
+} from "./chunks/chunk-HDBQICPW.js";
+import "./chunks/chunk-4PSQ64S4.js";
+import "./chunks/chunk-U3Q2I3MY.js";
 export {
   ColorField,
   ColorPicker,

package/dist/components/accordion/Accordion.d.ts

@@ -1,28 +1,60 @@
 import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 type AccordionBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
-    /** Trigger, icon and content spacing tier. Default `m`. */
+    /**
+     * Tier of trigger height, text, icon and padding. Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
-    /** `grouped` — one frame without gaps (default); `separate` — every item is its own card. */
+    /**
+     * `grouped` — one surface with hairlines between items; `separate` — every item is its own card.
+     */
     layout?: "grouped" | "separate";
     ref?: React.Ref<HTMLDivElement>;
 };
 /** One open item at a time; `value` is the open item (`""` when all are closed). */
 export type AccordionSingleProps = AccordionBaseProps & {
+    /**
+     * Any number of open items; `value` becomes a `string[]`.
+     */
     multiple?: false;
+    /**
+     * Open item (`""` — none), or the list of open items with `multiple` (controlled).
+     */
     value?: string;
+    /**
+     * Initially open item(s) (uncontrolled).
+     */
     defaultValue?: string;
+    /**
+     * Called with the new open item, or the new list with `multiple`.
+     */
     onValueChange?: (value: string) => void;
-    /** When `false`, the open item cannot be closed by clicking it. Default `true`. */
+    /**
+     * Without `multiple`: `false` keeps the open item open on a second click.
+     */
     collapsible?: boolean;
 };
 /** Any number of open items; `value` lists them. */
 export type AccordionMultipleProps = AccordionBaseProps & {
+    /**
+     * Any number of open items; `value` becomes a `string[]`.
+     */
     multiple: true;
+    /**
+     * Open item (`""` — none), or the list of open items with `multiple` (controlled).
+     */
     value?: string[];
+    /**
+     * Initially open item(s) (uncontrolled).
+     */
     defaultValue?: string[];
+    /**
+     * Called with the new open item, or the new list with `multiple`.
+     */
     onValueChange?: (value: string[]) => void;
-    /** Every item of a multiple accordion closes on its own click. */
+    /**
+     * Without `multiple`: `false` keeps the open item open on a second click.
+     */
     collapsible?: never;
 };
 export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
@@ -31,7 +63,13 @@ declare namespace AccordionRoot {
     var displayName: string;
 }
 export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Item id used in `value`.
+     */
     value: string;
+    /**
+     * The item cannot be toggled; its trigger is disabled.
+     */
     disabled?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -39,10 +77,16 @@ declare function AccordionItem({ className, value, disabled, children, ...rest }
 declare namespace AccordionItem {
     var displayName: string;
 }
+/** The level of an item's heading in the page outline. */
+export type AccordionHeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
 export type AccordionHeaderProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Heading level in the page outline: one below the heading of the section that holds the accordion.
+     */
+    as?: AccordionHeadingLevel;
     ref?: React.Ref<HTMLHeadingElement>;
 };
-declare function AccordionHeader({ className, ...rest }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionHeader({ as: Heading, className, ...rest }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionHeader {
     var displayName: string;
 }
@@ -55,6 +99,9 @@ declare namespace AccordionTrigger {
     var displayName: string;
 }
 export type AccordionIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * The icon, e.g. `<Icon name="field.calendar" />`.
+     */
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };

package/dist/components/avatar/Avatar.d.ts

@@ -4,12 +4,20 @@ import type { ControlSize, PaletteColor } from "../../internal/states";
 /** `xs` 20 · `s` 24 · `m` 32 · `l` 40 · `xl` 48 · `2xl` 64 (`--prime-avatar-*`). */
 export type AvatarSize = ControlSize | "2xl";
 export type AvatarRootProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
+    /**
+     * Diameter 20 · 24 · 32 · 40 · 48 · 64 px. Inside `Avatar.Group` the group size is used when it is not set.
+     */
     size?: AvatarSize;
-    /** Fallback color (`--prime-color-palette-<hue>-*`). Default `gray`. */
+    /**
+     * Palette hue of the fallback; derive it from a stable user id.
+     */
     color?: PaletteColor;
     ref?: React.Ref<HTMLDivElement>;
 };
+/**
+ * The person's picture. Named by `aria-label` it is one image of that name (`role="img"`), so the
+ * name holds whether the photo, the initials or an icon shows.
+ */
 declare function AvatarRoot({ size, color, className, children, ...rest }: AvatarRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarRoot {
     var displayName: string;
@@ -19,10 +27,15 @@ export type AvatarImageProps = ImageSlotImageProps;
 export type AvatarFallbackProps = ImageSlotFallbackProps;
 export type AvatarPresence = "online" | "offline" | "away" | "busy";
 export type AvatarStatusLabels = Record<AvatarPresence, string>;
+export declare const AVATAR_STATUS_LABELS: AvatarStatusLabels;
 export type AvatarStatusProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
-    /** Presence shown as a dot on the avatar's bottom-end edge. */
+    /**
+     * Presence state, told by shape and color: `online` a full green dot, `away` a warning crescent, `busy` a danger dot with a bar, `offline` a hollow gray ring.
+     */
     status: AvatarPresence;
-    /** Accessible names of the presence states (Russian defaults). */
+    /**
+     * Accessible names of the states, see Labels.
+     */
     labels?: Partial<AvatarStatusLabels>;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -32,21 +45,31 @@ declare namespace AvatarStatus {
     var displayName: string;
 }
 export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Size of every member without its own `size`. Default `m`. */
+    /**
+     * Size of every `Avatar.Root` / `Avatar.Overflow` inside without its own `size`; unset, they stay `m`.
+     */
     size?: AvatarSize;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** An overlapping row of avatars (`role="group"`); rings match the surface. */
+/**
+ * An overlapping row of avatars (`role="group"`); rings match the surface. Its `size` is the size
+ * of every member without its own (they default to `m`).
+ */
 declare function AvatarGroup({ size, className, role, ...rest }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarGroup {
     var displayName: string;
 }
 export type AvatarOverflowProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
+    /**
+     * Diameter; inside `Avatar.Group` the group size when not set.
+     */
     size?: AvatarSize;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** The «+N» cell at the end of a group, the same diameter as its avatars. */
+/**
+ * The «+N» cell at the end of a group, the same diameter as its avatars; named by `aria-label`
+ * («Ещё 3 участника») it is an image of that name.
+ */
 declare function AvatarOverflow({ size, className, ...rest }: AvatarOverflowProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarOverflow {
     var displayName: string;

package/dist/components/badge/Badge.d.ts

@@ -1,66 +1,133 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor, Variant } from "../../internal/states";
+import type { ControlSize, PaletteColor, Tone, Variant } from "../../internal/states";
 export type BadgeLabels = {
     /** Accessible name of the remove button; include the badge text, e.g. «Убрать фильтр «Москва»». */
     remove: string;
     /** Spoken when the `onRemove` promise rejects and the badge stays. */
     removeFailed: string;
 };
-export type BadgeRootProps = {
-    /** Palette hue. Default `gray`. */
+export declare const BADGE_LABELS: BadgeLabels;
+/** A status the badge states (`tone`) or a category hue it carries (`color`), never both. */
+type BadgeHueProps = {
+    /**
+     * Palette hue: a category (a team, a tag); the text carries the meaning. Not together with `tone`.
+     */
     color?: PaletteColor;
-    /** Treatment. Default `soft`. */
+    /**
+     * A status in the role colors (paid, overdue, failed); `neutral` is the gray hue. Not together with `color`.
+     */
+    tone?: never;
+} | {
+    /**
+     * A status in the role colors (paid, overdue, failed); `neutral` is the gray hue. Not together with `color`.
+     */
+    tone: Extract<Tone, "neutral" | "success" | "warning" | "danger" | "info">;
+    /**
+     * Palette hue: a category (a team, a tag); the text carries the meaning. Not together with `tone`.
+     */
+    color?: never;
+};
+export type BadgeRootProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick" | "color"> & BadgeHueProps & {
+    /**
+     * Treatment.
+     */
     variant?: Exclude<Variant, "ghost">;
-    /** Badge tier; without it the badge follows the surrounding control one tier down. */
+    /**
+     * Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the badge follows the surrounding control one tier down; outside a control it is `m`.
+     */
     size?: ControlSize;
     /**
-     * Shows the remove segment at the end (an applied filter, a selected value). Return the save's
-     * promise to remove on a server: the badge waits dimmed with a spinner in the segment; resolve —
-     * take it out of your list before resolving, it leaves with its exit; reject — it stays and
-     * `labels.removeFailed` is announced.
+     * `square` — a tile as wide as it is tall, the text centred: a file format («PDF»), a short code.
+     */
+    shape?: "chip" | "square";
+    /**
+     * Adds the full-height remove segment at the end; called on its click. Return the request's promise: the badge waits with a spinner; take it out of your list before resolving; on reject it stays.
      */
     onRemove?: () => void | Promise<void>;
     /**
-     * The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a
-     * spinner in the remove segment, which takes no press. A promise from `onRemove` does this itself.
+     * The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a spinner in the remove segment, which takes no press. A promise from `onRemove` does the same on its own.
      */
     loading?: boolean;
     /**
-     * Makes the body a button covering the whole badge (a toggle chip, a filter value). Receives the
-     * click, so Alt / Shift clicks can mean something else.
+     * A toggle chip (a filter value): the body becomes a `<button>` over the whole badge with `aria-pressed`; on takes the selected look (accent soft).
      */
-    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Toggle state of a pressable badge: `aria-pressed` and `data-pressed`. */
     pressed?: boolean;
+    /**
+     * The initial state of an uncontrolled toggle chip; a press flips it.
+     */
+    defaultPressed?: boolean;
+    /**
+     * Fires with the new state when the toggle chip is pressed.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BadgeLabels>;
+    /**
+     * Muted look for every variant, `aria-disabled`; the body button, remove and action get native `disabled`.
+     */
     disabled?: boolean;
+    /**
+     * Text, `Badge.Dot`, `Badge.Icon`, one `Badge.Action`. Only `Badge.Icon` children (no remove or action) make a square icon-only badge.
+     */
     children?: React.ReactNode;
+    /**
+     * Class on the badge.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
-} & React.HTMLAttributes<HTMLSpanElement>;
+};
 export type BadgeIconProps = {
+    /**
+     * The icon (`Icon`).
+     */
     children: React.ReactNode;
+    /**
+     * Class on the icon box.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 export type BadgeDotProps = {
+    /**
+     * A dot of its own hue (the solid step) instead of the text color: a project color, an attention mark.
+     */
+    color?: PaletteColor;
+    /**
+     * Class on the dot.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
-} & React.HTMLAttributes<HTMLSpanElement>;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "color">;
 export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "children"> & {
-    /** Accessible name and tooltip of the action («Скрыть billing»). */
+    /**
+     * Accessible name and tooltip («Скрыть billing»).
+     */
     label: string;
+    /**
+     * Runs the action.
+     */
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Keeps the action shown, not only on hover and focus (e.g. while the state it sets is on). */
+    /**
+     * Keeps the action shown, not only on hover and focus (while the state it sets is on).
+     */
     persistent?: boolean;
+    /**
+     * The action is unavailable.
+     */
     disabled?: boolean;
-    /** Toggle state of the action: `aria-pressed`. */
+    /**
+     * Toggle state of the action: `aria-pressed`; on, the segment stays shown with the pressed wash.
+     */
     pressed?: boolean;
-    /** The glyph; a minus by default. Sized to the tier icon. */
+    /**
+     * A custom glyph at the tier icon size; a minus by default.
+     */
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function BadgeRoot({ color, variant, size: sizeProp, onRemove, onPress, pressed, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeRoot({ color, tone, variant, size: sizeProp, shape, onRemove, pressed: pressedProp, defaultPressed, onPressedChange, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeRoot {
     var displayName: string;
 }
@@ -69,10 +136,11 @@ declare namespace BadgeIcon {
     var displayName: string;
 }
 /**
- * A status dot in the current text color. Inside a badge it takes the badge tier; standalone (a
- * marker on an icon, before a label) it takes the tier of the surrounding control.
+ * A status dot in the current text color, or in the solid step of a palette hue (`color`). Inside
+ * a badge it takes the badge tier; standalone (a marker on an icon, before a label) it takes the
+ * tier of the surrounding control.
  */
-declare function BadgeDot({ className, ...rest }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeDot({ color, className, ...rest }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeDot {
     var displayName: string;
 }

package/dist/components/banner/Banner.d.ts

@@ -1,31 +1,38 @@
 import * as React from "react";
-import type { ControlSize, Tone, Variant } from "../../internal/states";
+import { type ControlSize, type Tone, type Variant } from "../../internal/states";
 export type BannerLabels = {
     /** `aria-label` of the close button. */
     dismiss: string;
 };
+export declare const BANNER_LABELS: BannerLabels;
 export type BannerRootProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Treatment: `soft` tinted fill (default), `solid` saturated fill, `outline` surface with a tone ring. */
+    /**
+     * `soft` tinted fill, `solid` saturated fill for urgent messages, `outline` card fill with a tone ring.
+     */
     variant?: Exclude<Variant, "ghost">;
-    /** Semantic color. Default `info`. */
+    /**
+     * Semantic color of the message.
+     */
     tone?: Tone;
-    /** Spacing and type tier. Default `m`. */
+    /**
+     * Spacing, icon and title follow the control tier; the description is one step smaller. Without it the tier of the host.
+     */
     size?: ControlSize;
     /**
-     * `inset` (default): rounded block in the content flow or inside a card.
-     * `page`: edge-to-edge strip (no radius) at the top of a page or app shell; content follows the
-     * page content column.
+     * `inset` — rounded block in the flow or in a card; `page` — edge-to-edge strip above a page, content aligned to the page column.
      */
     placement?: "inset" | "page";
     /**
-     * Renders a close button and calls this on its click. The parent unmounts the banner; it closes
-     * up in place, and the parent moves focus somewhere sensible.
+     * Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner, which closes up in place; focus inside it moves to the next tab stop of the page.
      */
     onDismiss?: () => void;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BannerLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function BannerRoot({ variant, tone, size, placement, onDismiss, labels, className, children, ref, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerRoot({ variant, tone, size: sizeProp, placement, onDismiss, labels, className, children, ref, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerRoot {
     var displayName: string;
 }