@teamblind-chorus/ui 1.0.1 → 1.1.0

package/dist/index.d.cts

@@ -32,8 +32,14 @@ export type BadgeProps =
 // ── Banner (banner/banner) ──
 interface BannerPropsOwn {
   appearance?: "default" | "accent" | "destructive";
+  /** Paints a `sys.borderWidth.hairline` (1) inset stroke around the container, toned to the appearance's color family and kept deliberately faint so it reads as a soft edge of the same tint, not a frame — the subtle gray hairline (`sys.color.outlineVariant`) on `default`'s gray-tinted fill, `primary` at 40% (`color-mix(sys.color.primary, 40%)`) on `accent`'s blue-tinted fill, `error` at 40% on `destructive`. Rendered as an inset box-shadow, never a real border, so toggling it cannot change the banner's footprint (see DESIGN.md → Border & Stroke). Reach for it when the tinted fill alone doesn't separate the banner from its host surface. */
+  outlined?: boolean;
+  /** Optional heading line above the body. label.md (14 / Semibold 600) in the container's foreground, separated from the body by `sys.layout.stack.2xs` (4). Reach for it when the aside needs a scannable lead-in; omit for single-thought asides where the body carries itself. */
+  title?: React.ReactNode;
   /** A 16 × 16 (`sys.icon.md`) glyph at the container's leading edge. Inherits the banner's foreground (`currentColor`) so the mark reads as part of the body copy. The slot occupies the body.sm line-box height so the glyph centers on the **first line** of the body — multi-line bodies keep the icon anchored to the first-line cap, not the block center. Ignored when `thumbnail` is also passed. */
   icon?: React.ReactNode;
+  /** A 16 × 16 (`sys.icon.md`) glyph at the container's trailing edge, vertically centered against the whole block (`align-self: center`). Paints in `currentColor`. Reach for it when the banner leads somewhere — a forward affordance such as `ForwardCircleFillIcon` signaling the whole aside opens a destination. */
+  trailingIcon?: React.ReactNode;
   /** A leading visual rendered by [Thumbnail](../thumbnail/thumbnail.md) — used when the aside is anchored to a channel, author, or sub-brand image rather than to a glyph. Takes precedence over `icon`. */
   thumbnail?: React.ReactNode;
   /** { label, href? , onClick? } — a follow-through link rendered as a block child below the body. */
@@ -152,6 +158,14 @@ export type ButtonProps =
   | ButtonToggleProps
   | ButtonToolbarProps;
 
+// ── ButtonGroup (button/group) ──
+interface ButtonGroupPropsOwn {
+  variant?: "inline" | "docked";
+  orientation?: "horizontal" | "vertical";
+  label?: React.ReactNode;
+}
+export interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof ButtonGroupPropsOwn>, ButtonGroupPropsOwn {}
+
 // ── Fab (button/fab) ──
 interface FabPropsOwn {
   variant?: "fab";
@@ -491,9 +505,11 @@ export interface MetadataStandardProps extends Omit<React.HTMLAttributes<HTMLDiv
 
 interface MetadataCompactPropsOwn {
   variant: "compact";
+  /** Leading [Thumbnail](../thumbnail/thumbnail.md) at `size={32}` — same prop and rung as the [Standard](standard.md) head. Forwards every Thumbnail prop verbatim (`{ src, alt }`). When omitted, the Thumbnail renders its image-area fallback over `surfaceContainerHigh`. */
+  avatar?: Record<string, unknown>;
   /** Array of independently-linked identity items — canonical fill is `[company name, nickname]`, the nickname canonically last, displayed bare (no @ prefix). Each entry is either a string (renders as a stub-href link) or a `{ label, href, badge }` object — `badge` is an optional SINGLE presentational mark node rendered AFTER the item's link, outside the <a> (canonical fill: Badge variant="role" on the trailing nickname item). Items separate by middot. Same grammar as the standard sub's `meta`; here it is the whole cluster, so it is required. */
   meta: React.ReactNode;
-  /** Posting time at the line's trailing edge — plain text (never a link), preceded by a middot, in `label.sm` / `sys.color.outline` so it recedes behind the identity links. Required: the timestamp is what distinguishes a compact attribution from a bare identity row. */
+  /** Posting time at the line's trailing edge — plain text (never a link), in `label.sm` / `sys.color.outline` so it recedes behind the identity links. NOT preceded by a middot: the time is separated from the identity cluster by an `inline.md` (8) gap so it reads as a distinct trailing element rather than another identity item (mirrors the Standard head's name↔time treatment). Required: the timestamp is what distinguishes a compact attribution from a bare identity row. */
   timestamp: string;
 }
 export interface MetadataCompactProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof MetadataCompactPropsOwn>, MetadataCompactPropsOwn {}
@@ -594,6 +610,15 @@ export type NavigationBarProps =
   | NavigationBarSubProps
   | NavigationBarSearchProps;
 
+// ── Pagination (pagination/pagination) ──
+interface PaginationPropsOwn {
+  /** Total number of pages — one dot renders per page. Below 2 the component renders nothing. */
+  count?: number;
+  /** Zero-based index of the active page. Clamped to `0..count-1`. Owned by the host pager (e.g. updated from an IntersectionObserver on its scroll-snap targets). */
+  activeIndex?: number;
+}
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof PaginationPropsOwn>, PaginationPropsOwn {}
+
 // ── ProfileHeader (profile-header/profile-header) ──
 interface ProfileHeaderPropsOwn {
   /** Entity name — channel topic, person, or company. Renders as the page-level `<h1>` at `sys.typo.heading.lg` / Semibold / `onSurface`. Single line; truncates with ellipsis at narrow widths. */
@@ -825,6 +850,7 @@ export const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttr
 export const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 export const Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
 export const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 export const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;
 export const SuggestionList: React.ForwardRefExoticComponent<SuggestionListProps & React.RefAttributes<HTMLDivElement>>;
 export const AvatarRail: React.ForwardRefExoticComponent<AvatarRailProps & React.RefAttributes<HTMLDivElement>>;
@@ -842,6 +868,7 @@ export const Metadata: React.ForwardRefExoticComponent<MetadataProps & React.Ref
 export const NavCard: React.ForwardRefExoticComponent<NavCardProps & React.RefAttributes<HTMLButtonElement>>;
 export const NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLElement>>;
 export const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLElement>>;
+export const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLSpanElement>>;
 export const ProfileHeader: React.ForwardRefExoticComponent<ProfileHeaderProps & React.RefAttributes<HTMLElement>>;
 export const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export const PostCarousel: React.ForwardRefExoticComponent<PostCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -32,8 +32,14 @@ export type BadgeProps =
 // ── Banner (banner/banner) ──
 interface BannerPropsOwn {
   appearance?: "default" | "accent" | "destructive";
+  /** Paints a `sys.borderWidth.hairline` (1) inset stroke around the container, toned to the appearance's color family and kept deliberately faint so it reads as a soft edge of the same tint, not a frame — the subtle gray hairline (`sys.color.outlineVariant`) on `default`'s gray-tinted fill, `primary` at 40% (`color-mix(sys.color.primary, 40%)`) on `accent`'s blue-tinted fill, `error` at 40% on `destructive`. Rendered as an inset box-shadow, never a real border, so toggling it cannot change the banner's footprint (see DESIGN.md → Border & Stroke). Reach for it when the tinted fill alone doesn't separate the banner from its host surface. */
+  outlined?: boolean;
+  /** Optional heading line above the body. label.md (14 / Semibold 600) in the container's foreground, separated from the body by `sys.layout.stack.2xs` (4). Reach for it when the aside needs a scannable lead-in; omit for single-thought asides where the body carries itself. */
+  title?: React.ReactNode;
   /** A 16 × 16 (`sys.icon.md`) glyph at the container's leading edge. Inherits the banner's foreground (`currentColor`) so the mark reads as part of the body copy. The slot occupies the body.sm line-box height so the glyph centers on the **first line** of the body — multi-line bodies keep the icon anchored to the first-line cap, not the block center. Ignored when `thumbnail` is also passed. */
   icon?: React.ReactNode;
+  /** A 16 × 16 (`sys.icon.md`) glyph at the container's trailing edge, vertically centered against the whole block (`align-self: center`). Paints in `currentColor`. Reach for it when the banner leads somewhere — a forward affordance such as `ForwardCircleFillIcon` signaling the whole aside opens a destination. */
+  trailingIcon?: React.ReactNode;
   /** A leading visual rendered by [Thumbnail](../thumbnail/thumbnail.md) — used when the aside is anchored to a channel, author, or sub-brand image rather than to a glyph. Takes precedence over `icon`. */
   thumbnail?: React.ReactNode;
   /** { label, href? , onClick? } — a follow-through link rendered as a block child below the body. */
@@ -152,6 +158,14 @@ export type ButtonProps =
   | ButtonToggleProps
   | ButtonToolbarProps;
 
+// ── ButtonGroup (button/group) ──
+interface ButtonGroupPropsOwn {
+  variant?: "inline" | "docked";
+  orientation?: "horizontal" | "vertical";
+  label?: React.ReactNode;
+}
+export interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof ButtonGroupPropsOwn>, ButtonGroupPropsOwn {}
+
 // ── Fab (button/fab) ──
 interface FabPropsOwn {
   variant?: "fab";
@@ -491,9 +505,11 @@ export interface MetadataStandardProps extends Omit<React.HTMLAttributes<HTMLDiv
 
 interface MetadataCompactPropsOwn {
   variant: "compact";
+  /** Leading [Thumbnail](../thumbnail/thumbnail.md) at `size={32}` — same prop and rung as the [Standard](standard.md) head. Forwards every Thumbnail prop verbatim (`{ src, alt }`). When omitted, the Thumbnail renders its image-area fallback over `surfaceContainerHigh`. */
+  avatar?: Record<string, unknown>;
   /** Array of independently-linked identity items — canonical fill is `[company name, nickname]`, the nickname canonically last, displayed bare (no @ prefix). Each entry is either a string (renders as a stub-href link) or a `{ label, href, badge }` object — `badge` is an optional SINGLE presentational mark node rendered AFTER the item's link, outside the <a> (canonical fill: Badge variant="role" on the trailing nickname item). Items separate by middot. Same grammar as the standard sub's `meta`; here it is the whole cluster, so it is required. */
   meta: React.ReactNode;
-  /** Posting time at the line's trailing edge — plain text (never a link), preceded by a middot, in `label.sm` / `sys.color.outline` so it recedes behind the identity links. Required: the timestamp is what distinguishes a compact attribution from a bare identity row. */
+  /** Posting time at the line's trailing edge — plain text (never a link), in `label.sm` / `sys.color.outline` so it recedes behind the identity links. NOT preceded by a middot: the time is separated from the identity cluster by an `inline.md` (8) gap so it reads as a distinct trailing element rather than another identity item (mirrors the Standard head's name↔time treatment). Required: the timestamp is what distinguishes a compact attribution from a bare identity row. */
   timestamp: string;
 }
 export interface MetadataCompactProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof MetadataCompactPropsOwn>, MetadataCompactPropsOwn {}
@@ -594,6 +610,15 @@ export type NavigationBarProps =
   | NavigationBarSubProps
   | NavigationBarSearchProps;
 
+// ── Pagination (pagination/pagination) ──
+interface PaginationPropsOwn {
+  /** Total number of pages — one dot renders per page. Below 2 the component renders nothing. */
+  count?: number;
+  /** Zero-based index of the active page. Clamped to `0..count-1`. Owned by the host pager (e.g. updated from an IntersectionObserver on its scroll-snap targets). */
+  activeIndex?: number;
+}
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof PaginationPropsOwn>, PaginationPropsOwn {}
+
 // ── ProfileHeader (profile-header/profile-header) ──
 interface ProfileHeaderPropsOwn {
   /** Entity name — channel topic, person, or company. Renders as the page-level `<h1>` at `sys.typo.heading.lg` / Semibold / `onSurface`. Single line; truncates with ellipsis at narrow widths. */
@@ -825,6 +850,7 @@ export const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttr
 export const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 export const Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
 export const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 export const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;
 export const SuggestionList: React.ForwardRefExoticComponent<SuggestionListProps & React.RefAttributes<HTMLDivElement>>;
 export const AvatarRail: React.ForwardRefExoticComponent<AvatarRailProps & React.RefAttributes<HTMLDivElement>>;
@@ -842,6 +868,7 @@ export const Metadata: React.ForwardRefExoticComponent<MetadataProps & React.Ref
 export const NavCard: React.ForwardRefExoticComponent<NavCardProps & React.RefAttributes<HTMLButtonElement>>;
 export const NavList: React.ForwardRefExoticComponent<NavListProps & React.RefAttributes<HTMLElement>>;
 export const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLElement>>;
+export const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLSpanElement>>;
 export const ProfileHeader: React.ForwardRefExoticComponent<ProfileHeaderProps & React.RefAttributes<HTMLElement>>;
 export const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export const PostCarousel: React.ForwardRefExoticComponent<PostCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -235,9 +235,12 @@ function useFullBleedGuard(ref, name) {
 }
 function Banner({
   appearance = "default",
+  outlined = false,
+  title,
   icon,
   thumbnail,
   action,
+  trailingIcon,
   children,
   className,
   ...rest
@@ -248,13 +251,19 @@ function Banner({
     "div",
     {
       ref,
-      className: joinClasses("chorus-banner", `chorus-banner--${appearance}`, className),
+      className: joinClasses(
+        "chorus-banner",
+        `chorus-banner--${appearance}`,
+        outlined && "chorus-banner--outlined",
+        className
+      ),
       role: "note",
       ...rest,
       children: [
         thumbnail ? /* @__PURE__ */ jsx("span", { className: "chorus-banner__thumbnail", "aria-hidden": "true", children: thumbnail }) : null,
         !thumbnail && icon ? /* @__PURE__ */ jsx("span", { className: "chorus-banner__icon", "aria-hidden": "true", children: icon }) : null,
         /* @__PURE__ */ jsxs("div", { className: "chorus-banner__content", children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "chorus-banner__title", children: title }) : null,
           children ? /* @__PURE__ */ jsx("p", { className: "chorus-banner__body", children }) : null,
           action ? /* @__PURE__ */ jsx(
             "a",
@@ -265,7 +274,8 @@ function Banner({
               children: action.label
             }
           ) : null
-        ] })
+        ] }),
+        trailingIcon ? /* @__PURE__ */ jsx("span", { className: "chorus-banner__trailing-icon", "aria-hidden": "true", children: trailingIcon }) : null
       ]
     }
   );
@@ -1845,7 +1855,7 @@ var FORCEABLE_STATES3 = /* @__PURE__ */ new Set(["hovered", "pressed", "focused"
 var SPECS = {
   filter: filter_spec_default,
   tag: tag_spec_default,
-  "toggle": toggle_spec_default
+  toggle: toggle_spec_default
 };
 function pickAppearance(spec, appearance) {
   const appearances = spec.appearances || {};
@@ -1987,11 +1997,11 @@ function ButtonToggle({ active = false, ...rest }) {
 }
 var VARIANTS = {
   fab: ButtonFab,
-  "icon": ButtonIcon,
-  "text": ButtonText,
-  "check": ButtonCheck,
-  "toolbar": ButtonToolbar,
-  "toggle": ButtonToggle
+  icon: ButtonIcon,
+  text: ButtonText,
+  check: ButtonCheck,
+  toolbar: ButtonToolbar,
+  toggle: ButtonToggle
 };
 var Button = forwardRef(function Button2({ variant, ...rest }, ref) {
   const Impl = variant && VARIANTS[variant] || ButtonStandard;
@@ -2153,6 +2163,35 @@ function Bubble({
     }
   );
 }
+function ButtonGroup({
+  variant = "inline",
+  orientation = "horizontal",
+  label,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const docked = variant === "docked";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClasses(
+        "chorus-button-group",
+        docked && "chorus-button-group--docked",
+        orientation === "vertical" && "chorus-button-group--vertical",
+        className
+      ),
+      role: "group",
+      "aria-label": ariaLabel,
+      ...rest,
+      children: [
+        label != null ? /* @__PURE__ */ jsx("div", { className: "chorus-button-group__label", children: label }) : null,
+        /* @__PURE__ */ jsx("div", { className: "chorus-button-group__row", children })
+      ]
+    }
+  );
+}
 
 // ../../schema/components/header/main.spec.json
 var main_spec_default = {
@@ -2313,6 +2352,7 @@ function EntryRow({
       "span",
       {
         className: "chorus-entry-row__trailing",
+        "data-nested-action": "",
         onClick: (e) => e.stopPropagation(),
         onKeyDown: (e) => e.stopPropagation(),
         children: trailing
@@ -2434,6 +2474,7 @@ function List({
                 "span",
                 {
                   className: "chorus-list__trailing",
+                  "data-nested-action": "",
                   onClick: (e) => e.stopPropagation(),
                   onKeyDown: (e) => e.stopPropagation(),
                   children: item.trailingIcon
@@ -3187,13 +3228,13 @@ function Metadata({
   const hasMeta = Array.isArray(meta) && meta.length > 0;
   const hasSubtitle = !hasMeta && subtitle != null && subtitle !== "";
   if (variant === "compact") {
-    return /* @__PURE__ */ jsx("div", { className: joinClasses("chorus-metadata", "chorus-metadata--compact", className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: "chorus-metadata__meta", children: [
-      hasMeta ? metaParts(meta) : null,
-      timestamp ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "chorus-metadata__dot", "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsx("span", { className: "chorus-metadata__timestamp", children: timestamp })
-      ] }) : null
-    ] }) });
+    return /* @__PURE__ */ jsxs("div", { className: joinClasses("chorus-metadata", "chorus-metadata--compact", className), ...rest, children: [
+      avatar ? /* @__PURE__ */ jsx(Thumbnail, { size: 32, ...avatar }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "chorus-metadata__meta", children: [
+        hasMeta ? metaParts(meta) : null,
+        timestamp ? /* @__PURE__ */ jsx("span", { className: "chorus-metadata__timestamp", children: timestamp }) : null
+      ] })
+    ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: joinClasses("chorus-metadata", className), ...rest, children: [
     /* @__PURE__ */ jsx(Thumbnail, { size: 32, ...avatar ?? { alt: typeof name === "string" ? name : "" } }),
@@ -3484,6 +3525,33 @@ function FeedAd({
     ) : null
   ] });
 }
+function Pagination({
+  count = 0,
+  activeIndex = 0,
+  className,
+  ...rest
+}) {
+  if (count < 2) return null;
+  const active = Math.max(0, Math.min(count - 1, activeIndex));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: joinClasses("chorus-pagination", className),
+      "aria-hidden": "true",
+      ...rest,
+      children: Array.from({ length: count }, (_, idx) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: joinClasses(
+            "chorus-pagination__dot",
+            idx === active && "chorus-pagination__dot--active"
+          )
+        },
+        idx
+      ))
+    }
+  );
+}
 var MAX_CARDS = 5;
 function PostCarousel({
   items = [],
@@ -3544,16 +3612,7 @@ function PostCarousel({
             ))
           }
         ),
-        cards.length > 1 ? /* @__PURE__ */ jsx("div", { className: "chorus-post-carousel__pagination", "aria-hidden": "true", children: cards.map((_, idx) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: joinClasses(
-              "chorus-post-carousel__dot",
-              idx === activeIndex && "chorus-post-carousel__dot--active"
-            )
-          },
-          idx
-        )) }) : null
+        /* @__PURE__ */ jsx(Pagination, { count: cards.length, activeIndex })
       ]
     }
   );
@@ -3704,16 +3763,7 @@ function ProfileCarousel({
             ))
           }
         ),
-        cards.length > 1 ? /* @__PURE__ */ jsx("div", { className: "chorus-profile-carousel__pagination", "aria-hidden": "true", children: cards.map((_, idx) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: joinClasses(
-              "chorus-profile-carousel__dot",
-              idx === activeIndex && "chorus-profile-carousel__dot--active"
-            )
-          },
-          idx
-        )) }) : null
+        /* @__PURE__ */ jsx(Pagination, { count: cards.length, activeIndex })
       ]
     }
   );
@@ -4317,7 +4367,8 @@ var input_spec_default = {
       overlay: {
         color: "text",
         opacity: "sys.state.pressed"
-      }
+      },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -4503,7 +4554,8 @@ var textarea_spec_default = {
     hovered: { overlay: null, border: "borderHover" },
     pressed: {
       border: "borderHover",
-      overlay: { color: "text", opacity: "sys.state.pressed" }
+      overlay: { color: "text", opacity: "sys.state.pressed" },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -4640,7 +4692,8 @@ var search_spec_default = {
       overlay: {
         color: "text",
         opacity: "sys.state.pressed"
-      }
+      },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -5011,6 +5064,7 @@ function FormFieldBox({
           {
             type: "button",
             className: "chorus-field__clear",
+            "data-nested-action": "",
             "aria-label": "Clear",
             onClick: handleClear,
             children: /* @__PURE__ */ jsx(XCircleFillIcon, {})
@@ -5105,7 +5159,7 @@ var FormFieldSelect = Select;
 var VARIANTS3 = {
   input: FormFieldInput,
   textarea: FormFieldTextarea,
-  "search": FormFieldSearchBar,
+  search: FormFieldSearchBar,
   select: FormFieldSelect
 };
 function FormField({ variant = "input", ...rest }) {
@@ -5842,6 +5896,6 @@ function Tooltip({
   );
 }
 
-export { Accordion, Banner as Alert, NavigationBar as AppBar, Thumbnail as Avatar, AvatarRail, Badge, Banner, TabBar as BottomNav, BottomSheet, Bubble, Button, Carousel, SuggestionList as ChannelList, AvatarRail as ChannelRail, Chip, Dialog, DirectoryList, Divider, BottomSheet as Drawer, Feed, FeedAd, FeedGroup, FormField, FormFieldGroup, Header, Input, List, Metadata, NavCard, NavCardGroup, NavList, NavigationBar, PageShell, PostCarousel, ProfileCarousel, ProfileHeader, Progress, SearchBar2 as SearchBar, Carousel as Section, Select, BottomSheet as Sheet, SideSheet as SideDrawer, SideSheet, SideSheetGroup, Skeleton, SkeletonGroup, StatusTag, SubHeader, SuggestionList, Switch, Tab, TabBar, Tabs, Textarea, Thumbnail, Toast, Tooltip };
+export { Accordion, Banner as Alert, NavigationBar as AppBar, Thumbnail as Avatar, AvatarRail, Badge, Banner, TabBar as BottomNav, BottomSheet, Bubble, Button, ButtonGroup, Carousel, SuggestionList as ChannelList, AvatarRail as ChannelRail, Chip, Dialog, DirectoryList, Divider, BottomSheet as Drawer, Feed, FeedAd, FeedGroup, FormField, FormFieldGroup, Header, Input, List, Metadata, NavCard, NavCardGroup, NavList, NavigationBar, PageShell, Pagination, PostCarousel, ProfileCarousel, ProfileHeader, Progress, SearchBar2 as SearchBar, Carousel as Section, Select, BottomSheet as Sheet, SideSheet as SideDrawer, SideSheet, SideSheetGroup, Skeleton, SkeletonGroup, StatusTag, SubHeader, SuggestionList, Switch, Tab, TabBar, Tabs, Textarea, Thumbnail, Toast, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map