@teamblind-chorus/ui 1.0.1 → 1.2.0

package/dist/index.js

@@ -106,13 +106,13 @@ function formatCount(value) {
   return String(Math.floor(value));
 }
 function sizingStyle(spec, size) {
-  const s = spec.sizes[size] ?? spec.sizes.medium;
+  const s2 = spec.sizes[size] ?? spec.sizes.medium;
   return {
-    "--badge-min-height": tokenToCss(s.minHeight),
-    "--badge-min-width": tokenToCss(s.minWidth),
-    "--badge-padding-block": tokenToCss(s.paddingBlock),
-    "--badge-padding-inline": tokenToCss(s.paddingInline),
-    ...s.labelTypo ? typoStyles(s.labelTypo) : null
+    "--badge-min-height": tokenToCss(s2.minHeight),
+    "--badge-min-width": tokenToCss(s2.minWidth),
+    "--badge-padding-block": tokenToCss(s2.paddingBlock),
+    "--badge-padding-inline": tokenToCss(s2.paddingInline),
+    ...s2.labelTypo ? typoStyles(s2.labelTypo) : null
   };
 }
 function appearanceStyle(spec) {
@@ -235,9 +235,14 @@ function useFullBleedGuard(ref, name) {
 }
 function Banner({
   appearance = "default",
+  outlined = false,
+  neutralBody = false,
+  title,
   icon,
   thumbnail,
   action,
+  trailingAction,
+  trailingIcon,
   children,
   className,
   ...rest
@@ -248,13 +253,20 @@ function Banner({
     "div",
     {
       ref,
-      className: joinClasses("chorus-banner", `chorus-banner--${appearance}`, className),
+      className: joinClasses(
+        "chorus-banner",
+        `chorus-banner--${appearance}`,
+        outlined && "chorus-banner--outlined",
+        neutralBody && "chorus-banner--neutral-body",
+        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 +277,8 @@ function Banner({
               children: action.label
             }
           ) : null
-        ] })
+        ] }),
+        trailingAction ? /* @__PURE__ */ jsx("span", { className: "chorus-banner__trailing-action", children: trailingAction }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "chorus-banner__trailing-icon", "aria-hidden": "true", children: trailingIcon }) : null
       ]
     }
   );
@@ -362,16 +375,16 @@ var standard_spec_default = {
       insetColor: "sys.color.focusInset"
     }}};
 function sizeStyle(size) {
-  const s = standard_spec_default.sizes[size] ?? standard_spec_default.sizes[standard_spec_default.props.size.default];
+  const s2 = standard_spec_default.sizes[size] ?? standard_spec_default.sizes[standard_spec_default.props.size.default];
   return {
-    "--button-standard-padding-block": tokenToCss(s.paddingBlock),
-    "--button-standard-padding-inline": tokenToCss(s.paddingInline),
-    "--button-standard-gap": tokenToCss(s.gap),
-    "--button-standard-min-height": tokenToCss(s.minHeight),
-    "--button-standard-min-width": tokenToCss(s.minWidth),
-    "--button-standard-radius": tokenToCss(s.radius),
-    "--button-standard-icon-size": tokenToCss(s.iconSize),
-    ...typoStyles(s.labelTypo)
+    "--button-standard-padding-block": tokenToCss(s2.paddingBlock),
+    "--button-standard-padding-inline": tokenToCss(s2.paddingInline),
+    "--button-standard-gap": tokenToCss(s2.gap),
+    "--button-standard-min-height": tokenToCss(s2.minHeight),
+    "--button-standard-min-width": tokenToCss(s2.minWidth),
+    "--button-standard-radius": tokenToCss(s2.radius),
+    "--button-standard-icon-size": tokenToCss(s2.iconSize),
+    ...typoStyles(s2.labelTypo)
   };
 }
 function appearanceStyle2(appearance) {
@@ -478,8 +491,7 @@ var fab_spec_default = {
       overlay: {
         opacity: "sys.state.pressed"
       }
-    }
-  },
+    }},
   focusIndicator: {
     overlay: {
       opacity: "sys.state.focus"
@@ -1579,6 +1591,25 @@ var filter_spec_default = {
         opacity: "sys.state.pressed"
       }
     },
+    focused: {
+      overlay: {
+        color: "label",
+        opacity: "sys.state.focus"
+      },
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: {
+          width: "sys.borderWidth.hairline",
+          color: "sys.color.focusInset"
+        },
+        outerRing: {
+          width: "sys.borderWidth.thin",
+          color: "sys.color.focus"
+        }
+      },
+      note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the chip is in; never via plain mouse click."
+    },
     disabled: {
       overlay: null,
       containerOpacity: "sys.state.disabled",
@@ -1686,6 +1717,25 @@ var tag_spec_default = {
         opacity: "sys.state.pressed"
       }
     },
+    focused: {
+      overlay: {
+        color: "label",
+        opacity: "sys.state.focus"
+      },
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: {
+          width: "sys.borderWidth.hairline",
+          color: "sys.color.focusInset"
+        },
+        outerRing: {
+          width: "sys.borderWidth.thin",
+          color: "sys.color.focus"
+        }
+      },
+      note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the chip is in; never via plain mouse click."
+    },
     disabled: {
       overlay: null,
       containerOpacity: "sys.state.disabled",
@@ -1811,6 +1861,25 @@ var toggle_spec_default = {
         opacity: "sys.state.pressed"
       }
     },
+    focused: {
+      overlay: {
+        color: "label",
+        opacity: "sys.state.focus"
+      },
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: {
+          width: "sys.borderWidth.hairline",
+          color: "sys.color.focusInset"
+        },
+        outerRing: {
+          width: "sys.borderWidth.thin",
+          color: "sys.color.focus"
+        }
+      },
+      note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the button is in; never via plain mouse click."
+    },
     disabled: {
       overlay: null,
       containerOpacity: "sys.state.disabled",
@@ -1845,7 +1914,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,16 +2056,56 @@ 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;
   return /* @__PURE__ */ jsx(Impl, { ref, ...rest });
 });
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useFocusTrap(ref, active) {
+  useEffect(() => {
+    if (!active) return void 0;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const container = ref.current;
+      if (!container) return;
+      const focusable = Array.from(
+        container.querySelectorAll(FOCUSABLE_SELECTOR)
+      ).filter((el) => !el.disabled && el.offsetParent !== null);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        container.focus({ preventScroll: true });
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeEl = document.activeElement;
+      if (e.shiftKey) {
+        if (activeEl === first || !container.contains(activeEl)) {
+          e.preventDefault();
+          last.focus({ preventScroll: true });
+        }
+      } else if (activeEl === last || !container.contains(activeEl)) {
+        e.preventDefault();
+        first.focus({ preventScroll: true });
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [ref, active]);
+}
 function useBodyScrollLock(locked) {
   useEffect(() => {
     if (!locked) return void 0;
@@ -2036,6 +2145,7 @@ function BottomSheet({
   const lastFocusedRef = useRef(null);
   const [overflowing, setOverflowing] = useState(false);
   useBodyScrollLock(open && !inline);
+  useFocusTrap(cardRef, open && !inline);
   useEffect(() => {
     if (!open || inline) return void 0;
     const vv = typeof window !== "undefined" ? window.visualViewport : null;
@@ -2099,6 +2209,7 @@ function BottomSheet({
           className: "chorus-bottom-sheet__card",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           "aria-label": ariaLabel ?? title,
           onClick: (e) => e.stopPropagation(),
           ...rest,
@@ -2153,6 +2264,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 +2453,7 @@ function EntryRow({
       "span",
       {
         className: "chorus-entry-row__trailing",
+        "data-nested-action": "",
         onClick: (e) => e.stopPropagation(),
         onKeyDown: (e) => e.stopPropagation(),
         children: trailing
@@ -2387,6 +2528,26 @@ function List({
           if (isRadio) onChange == null ? void 0 : onChange(item.value);
           (_a = item.onClick) == null ? void 0 : _a.call(item);
         };
+        const rowMain = isEntry ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isRadio ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading", children: /* @__PURE__ */ jsx(RadioIndicator, { selected }) }) : item.thumbnail ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading chorus-list__leading--image", children: /* @__PURE__ */ jsx(Thumbnail, { size: 40, ...item.thumbnail }) }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading chorus-list__leading--icon", "aria-hidden": "true", children: item.icon }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "chorus-list__label-col", children: [
+            /* @__PURE__ */ jsxs("span", { className: "chorus-list__primary-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "chorus-list__label", children: item.label }),
+              item.count != null ? /* @__PURE__ */ jsx("span", { className: "chorus-list__count", children: item.count }) : null
+            ] }),
+            item.supportingText ? /* @__PURE__ */ jsx("span", { className: "chorus-list__supporting", children: item.supportingText }) : null
+          ] }),
+          item.nav && !item.trailingIcon ? /* @__PURE__ */ jsx("span", { className: "chorus-list__trailing chorus-list__nav-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) }) : item.trailingIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "chorus-list__trailing",
+              "data-nested-action": "",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: item.trailingIcon
+            }
+          ) : null
+        ] });
         return /* @__PURE__ */ jsx(
           "div",
           {
@@ -2421,25 +2582,26 @@ function List({
                 description: item.description,
                 trailing: item.trailingIcon
               }
-            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              isRadio ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading", children: /* @__PURE__ */ jsx(RadioIndicator, { selected }) }) : item.thumbnail ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading chorus-list__leading--image", children: /* @__PURE__ */ jsx(Thumbnail, { size: 40, ...item.thumbnail }) }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "chorus-list__leading chorus-list__leading--icon", "aria-hidden": "true", children: item.icon }) : null,
-              /* @__PURE__ */ jsxs("span", { className: "chorus-list__label-col", children: [
-                /* @__PURE__ */ jsxs("span", { className: "chorus-list__primary-row", children: [
-                  /* @__PURE__ */ jsx("span", { className: "chorus-list__label", children: item.label }),
-                  item.count != null ? /* @__PURE__ */ jsx("span", { className: "chorus-list__count", children: item.count }) : null
-                ] }),
-                item.supportingText ? /* @__PURE__ */ jsx("span", { className: "chorus-list__supporting", children: item.supportingText }) : null
-              ] }),
-              item.nav && !item.trailingIcon ? /* @__PURE__ */ jsx("span", { className: "chorus-list__trailing chorus-list__nav-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 }) }) : item.trailingIcon ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "chorus-list__trailing",
-                  onClick: (e) => e.stopPropagation(),
-                  onKeyDown: (e) => e.stopPropagation(),
-                  children: item.trailingIcon
-                }
-              ) : null
-            ] })
+            ) : item.banner ? (
+              // Embedded-Banner row — the text group stacks over a Banner
+              // that spans the row's full content width, 8px (stack.xs)
+              // below. The Banner is a nested action region: its own
+              // controls never commit the row, and the row's hover/press
+              // overlay is suppressed over it (see styles.css).
+              /* @__PURE__ */ jsxs("span", { className: "chorus-list__stack", children: [
+                /* @__PURE__ */ jsx("span", { className: "chorus-list__row-main", children: rowMain }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "chorus-list__banner",
+                    "data-nested-action": "",
+                    onClick: (e) => e.stopPropagation(),
+                    onKeyDown: (e) => e.stopPropagation(),
+                    children: item.banner
+                  }
+                )
+              ] })
+            ) : rowMain
           },
           item.value ?? idx
         );
@@ -2699,6 +2861,7 @@ function Dialog({
   const cardRef = useRef(null);
   const lastFocusedRef = useRef(null);
   useBodyScrollLock(open && !inline);
+  useFocusTrap(cardRef, open && !inline);
   useEffect(() => {
     var _a;
     if (!open) return void 0;
@@ -2744,6 +2907,7 @@ function Dialog({
           className: joinClasses("chorus-dialog__card", image && "chorus-dialog__card--with-image"),
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           "aria-label": ariaLabel ?? title,
           onClick: (e) => e.stopPropagation(),
           ...rest,
@@ -2777,6 +2941,80 @@ function Divider({
     }
   );
 }
+
+// ../../schema/components/empty-state/empty-state.spec.json
+var empty_state_spec_default = {
+  sizing: {
+    illustrationSize: "ref.space.600",
+    illustrationColor: "sys.color.onSurfaceVariant",
+    illustrationGap: "sys.layout.stack.sm",
+    headlineTypo: "sys.typo.heading.sm",
+    headlineColor: "sys.color.onSurface",
+    bodyTypo: "sys.typo.body.sm",
+    bodyColor: "sys.color.onSurfaceVariant",
+    bodyGap: "sys.layout.stack.2xs",
+    actionGap: "sys.layout.stack.md"
+  }};
+var s = empty_state_spec_default.sizing;
+var CONTAINER_STYLE = {
+  "--empty-state-illustration-gap": tokenToCss(s.illustrationGap),
+  "--empty-state-body-gap": tokenToCss(s.bodyGap),
+  "--empty-state-action-gap": tokenToCss(s.actionGap)
+};
+var ILLUSTRATION_STYLE = {
+  "--empty-state-illustration-size": tokenToCss(s.illustrationSize),
+  "--empty-state-illustration-color": tokenToCss(s.illustrationColor)
+};
+var HEADLINE_STYLE = {
+  "--empty-state-headline-color": tokenToCss(s.headlineColor),
+  ...typoStyles(s.headlineTypo)
+};
+var BODY_STYLE = {
+  "--empty-state-body-color": tokenToCss(s.bodyColor),
+  ...typoStyles(s.bodyTypo)
+};
+function EmptyState({
+  illustration,
+  headline,
+  body,
+  action,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: joinClasses("chorus-empty-state", className),
+      style: { ...CONTAINER_STYLE, ...style },
+      ...rest,
+      children: [
+        illustration ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "chorus-empty-state__illustration",
+            "aria-hidden": "true",
+            style: ILLUSTRATION_STYLE,
+            children: illustration
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("p", { className: "chorus-empty-state__headline", style: HEADLINE_STYLE, children: headline }),
+        body ? /* @__PURE__ */ jsx("p", { className: "chorus-empty-state__body", style: BODY_STYLE, children: body }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "chorus-empty-state__action", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "primary",
+            onClick: action.onClick ?? (action.href ? () => {
+              window.location.assign(action.href);
+            } : void 0),
+            children: action.label
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
 var TabsContext = createContext({
   variant: "underline",
   value: null,
@@ -2899,19 +3137,19 @@ function TabsUnderline({ className, style, children, ...rest }) {
   useScrollOverflow(ref);
   useSlidingIndicator(ref, indicatorRef, value);
   useFullBleedGuard(ref, "Tabs");
-  const s = underline_spec_default.sizing;
+  const s2 = underline_spec_default.sizing;
   const composedStyle = {
-    "--tabs-container-padding-inline": tokenToCss(s.containerPaddingInline),
-    "--tabs-tab-min-height": tokenToCss(s.minHeight),
-    "--tabs-tab-padding-block": tokenToCss(s.paddingBlock),
-    "--tabs-tab-padding-inline": tokenToCss(s.paddingInline),
-    "--tabs-inter-tab-gap": tokenToCss(s.interTabGap),
-    "--tabs-slot-gap": tokenToCss(s.slotGap),
-    "--tabs-icon-size": tokenToCss(s.iconSize),
-    "--tabs-indicator-height": tokenToCss(s.indicatorHeight),
-    "--tabs-divider-width": tokenToCss(s.dividerWidth),
-    "--tabs-divider-color": tokenToCss(s.dividerColor),
-    "--tabs-fade-width": tokenToCss(s.fadeWidth),
+    "--tabs-container-padding-inline": tokenToCss(s2.containerPaddingInline),
+    "--tabs-tab-min-height": tokenToCss(s2.minHeight),
+    "--tabs-tab-padding-block": tokenToCss(s2.paddingBlock),
+    "--tabs-tab-padding-inline": tokenToCss(s2.paddingInline),
+    "--tabs-inter-tab-gap": tokenToCss(s2.interTabGap),
+    "--tabs-slot-gap": tokenToCss(s2.slotGap),
+    "--tabs-icon-size": tokenToCss(s2.iconSize),
+    "--tabs-indicator-height": tokenToCss(s2.indicatorHeight),
+    "--tabs-divider-width": tokenToCss(s2.dividerWidth),
+    "--tabs-divider-color": tokenToCss(s2.dividerColor),
+    "--tabs-fade-width": tokenToCss(s2.fadeWidth),
     "--tabs-label-unselected": tokenToCss(underline_spec_default.selectionStates.unselected.label),
     "--tabs-label-selected": tokenToCss(underline_spec_default.selectionStates.selected.label),
     "--tabs-indicator-color": tokenToCss(underline_spec_default.selectionStates.selected.indicator),
@@ -2923,7 +3161,7 @@ function TabsUnderline({ className, style, children, ...rest }) {
     "--tabs-focus-outer-color": tokenToCss(underline_spec_default.focusIndicator.ring.outerColor),
     "--tabs-focus-inset-width": tokenToCss(underline_spec_default.focusIndicator.ring.insetWidth),
     "--tabs-focus-inset-color": tokenToCss(underline_spec_default.focusIndicator.ring.insetColor),
-    ...typoStyles(s.labelTypo),
+    ...typoStyles(s2.labelTypo),
     ...style
   };
   return /* @__PURE__ */ jsxs(
@@ -2985,12 +3223,12 @@ function TabsSegmented({ className, style, children, ...rest }) {
   const ref = useRef(null);
   useScrollOverflow(ref);
   useFullBleedGuard(ref, "Tabs");
-  const s = segmented_spec_default.sizing;
+  const s2 = segmented_spec_default.sizing;
   const composedStyle = {
-    "--tabs-container-padding-block": tokenToCss(s.containerPaddingBlock),
-    "--tabs-container-padding-inline": tokenToCss(s.containerPaddingInline),
-    "--tabs-inter-segment-gap": tokenToCss(s.interSegmentGap),
-    "--tabs-fade-width": tokenToCss(s.fadeWidth),
+    "--tabs-container-padding-block": tokenToCss(s2.containerPaddingBlock),
+    "--tabs-container-padding-inline": tokenToCss(s2.containerPaddingInline),
+    "--tabs-inter-segment-gap": tokenToCss(s2.interSegmentGap),
+    "--tabs-fade-width": tokenToCss(s2.fadeWidth),
     ...style
   };
   return /* @__PURE__ */ jsx(
@@ -3187,13 +3425,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 +3722,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 +3809,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 +3960,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,15 +4564,23 @@ 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: {
+      isFocusState: true,
       overlay: null,
       border: "borderActive",
       strokeWeight: "activeStrokeWeight",
       caret: "visible",
       showsClearWhenValue: true,
-      note: "The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+      },
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
     },
     disabled: {
       overlay: null,
@@ -4503,14 +4758,22 @@ 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: {
+      isFocusState: true,
       overlay: null,
       border: "borderActive",
       strokeWeight: "activeStrokeWeight",
       caret: "visible",
-      note: "Stroke steps from `hairline` (1px) to `activeStrokeWeight` (2px) as an inset box-shadow \u2014 same pixel-stable contract as input."
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+      },
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. Stroke steps from `hairline` (1px) to `activeStrokeWeight` (2px) as an inset box-shadow \u2014 same pixel-stable contract as input."
     },
     disabled: {
       overlay: null,
@@ -4640,15 +4903,23 @@ 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: {
+      isFocusState: true,
       overlay: null,
       border: "borderActive",
       strokeWeight: "activeStrokeWeight",
       caret: "visible",
       showsClearWhenValue: true,
-      note: "The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+      },
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
     },
     disabled: {
       overlay: null,
@@ -4835,9 +5106,17 @@ var select_spec_default = {
       }
     },
     active: {
+      isFocusState: true,
       overlay: null,
       border: "borderActive",
-      strokeWeight: "activeStrokeWeight"
+      strokeWeight: "activeStrokeWeight",
+      focusRing: {
+        composition: "outward",
+        layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+      },
+      note: "This IS the trigger's keyboard-focus / open state \u2014 `:focus-visible` and the engaged (open) state coincide for the select trigger, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke re-tones to `borderActive` at `activeStrokeWeight` (2px) as an inset box-shadow, pixel-stable (no reflow)."
     },
     disabled: {
       overlay: null,
@@ -5011,6 +5290,7 @@ function FormFieldBox({
           {
             type: "button",
             className: "chorus-field__clear",
+            "data-nested-action": "",
             "aria-label": "Clear",
             onClick: handleClear,
             children: /* @__PURE__ */ jsx(XCircleFillIcon, {})
@@ -5105,7 +5385,7 @@ var FormFieldSelect = Select;
 var VARIANTS3 = {
   input: FormFieldInput,
   textarea: FormFieldTextarea,
-  "search": FormFieldSearchBar,
+  search: FormFieldSearchBar,
   select: FormFieldSelect
 };
 function FormField({ variant = "input", ...rest }) {
@@ -5457,6 +5737,58 @@ function SkeletonGroup({
     }
   );
 }
+
+// ../../schema/components/spinner/spinner.spec.json
+var spinner_spec_default = {
+  sizes: {
+    medium: {
+      diameter: "sys.icon.lg",
+      labelTypo: "sys.typo.body.sm",
+      gap: "sys.layout.inline.sm"
+    },
+    small: {
+      diameter: "sys.icon.md",
+      labelTypo: "sys.typo.body.sm",
+      gap: "sys.layout.inline.sm"
+    }
+  }};
+function sizingStyle4(spec, size) {
+  const s2 = spec.sizes[size] ?? spec.sizes.medium;
+  return {
+    "--spinner-diameter": tokenToCss(s2.diameter),
+    "--spinner-gap": tokenToCss(s2.gap)
+  };
+}
+function Spinner({
+  size = "medium",
+  label,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  var _a;
+  const labelTypo = ((_a = spinner_spec_default.sizes[size]) == null ? void 0 : _a.labelTypo) ?? spinner_spec_default.sizes.medium.labelTypo;
+  const a11yLabel = label != null ? void 0 : ariaLabel ?? "Loading";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": a11yLabel,
+      className: joinClasses(
+        "chorus-spinner",
+        `chorus-spinner--${size}`,
+        className
+      ),
+      style: { ...sizingStyle4(spinner_spec_default, size), ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "chorus-spinner__arc", "aria-hidden": "true" }),
+        label != null ? /* @__PURE__ */ jsx("span", { className: "chorus-spinner__label", style: typoStyles(labelTypo), children: label }) : null
+      ]
+    }
+  );
+}
 function StatusTag({
   appearance = "neutral",
   children,
@@ -5842,6 +6174,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, EmptyState, 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, Spinner, StatusTag, SubHeader, SuggestionList, Switch, Tab, TabBar, Tabs, Textarea, Thumbnail, Toast, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map