@ai-matrx/design-system 0.61.10 → 0.61.12

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.61.12 — the pill guard flags a pill that runs past its row or the screen
+
+- Pill guard: a capsule whose box runs past its parent's box or the viewport is outlined. Measured:
+  /education/overview at 375px, "206 Flashcard Stu…" ran off the right edge once the pills stopped
+  stretching. A pill inside a sideways scroller (an ancestor with overflow-x auto/scroll) is
+  off-screen by design and not judged. Guard case red on 0.61.11.
+
+No consumer action.
+
+## 0.61.11 — a button collapses by its container, never the viewport
+
+- `Button collapse="container"`: below 48rem of the nearest `matrx-controls` container the button
+  is its leading `icon` alone (the 28px circle); the label stays in the DOM as its accessible name
+  and becomes its `title`. No icon, or no such container, never collapses. Measured: /agents/all
+  beside the chat panel — a 540px list pane at a 1024px viewport kept full-width labelled actions,
+  because every collapse in the list header asked the viewport.
+- New exports `CONTROLS_CONTAINER_NAME` (`matrx-controls`), `CONTROLS_CONTAINER_CLASS`
+  (`.matrx-controls-container`, `container: matrx-controls / inline-size`) and
+  `CONTROLS_COLLAPSE_BELOW_REM` (48). Guard: `controls/collapse-by-container.test.tsx`.
+
+Consumer action: declare the container on the box whose width decides (a list pane: add
+`matrx-controls` to its `container-name`), then pass `collapse="container"` to its actions.
+
 ## 0.61.10 — the pill guard flags a stretched pill
 
 - Pill guard: a capsule whose content box is more than 8px wider than its own ink (text runs plus

package/dist/controls.cjs

@@ -33,6 +33,9 @@ var controls_exports = {};
 __export(controls_exports, {
   Badge: () => Badge,
   Button: () => Button2,
+  CONTROLS_COLLAPSE_BELOW_REM: () => CONTROLS_COLLAPSE_BELOW_REM,
+  CONTROLS_CONTAINER_CLASS: () => CONTROLS_CONTAINER_CLASS,
+  CONTROLS_CONTAINER_NAME: () => CONTROLS_CONTAINER_NAME,
   ConfirmDelete: () => ConfirmDelete,
   ControlRow: () => ControlRow,
   ControlScope: () => ControlScope,
@@ -773,6 +776,9 @@ var ControlScope = React7.forwardRef(
   (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, "data-matrx-controls": "", ...props })
 );
 ControlScope.displayName = "ControlScope";
+var CONTROLS_CONTAINER_NAME = "matrx-controls";
+var CONTROLS_CONTAINER_CLASS = "matrx-controls-container";
+var CONTROLS_COLLAPSE_BELOW_REM = 48;
 function glyphSlot(icon, iconEnd, label) {
   if (!label && (icon || iconEnd)) return "only";
   if (icon && iconEnd) return "both";
@@ -781,12 +787,13 @@ function glyphSlot(icon, iconEnd, label) {
   return void 0;
 }
 var Button2 = React7.forwardRef(
-  ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, children, onClick, type, ...props }, ref) => {
+  ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, collapse, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot2.Slot : "button";
     const ariaDisabled = props["aria-disabled"];
     const disabledChild = asChild && Boolean(props.disabled);
     const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
     const label = asChild && React7.isValidElement(children) ? children.props.children : children;
+    const collapses = collapse === "container" && Boolean(icon) && Boolean(label);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Component,
       {
@@ -796,7 +803,9 @@ var Button2 = React7.forwardRef(
         "data-variant": variant,
         "data-tone": tone && tone !== "neutral" ? tone : void 0,
         "data-glyph": glyphSlot(icon, iconEnd, label),
+        "data-collapse": collapses ? "container" : void 0,
         className: cn("matrx-control matrx-control-button matrx-glyph-trim", className),
+        title: collapses && typeof label === "string" && props.title === void 0 ? label : void 0,
         ...props,
         "aria-disabled": disabledChild ? true : ariaDisabled,
         tabIndex: disabledChild ? -1 : props.tabIndex,