@ai-matrx/design-system 0.61.6 → 0.61.7

package/dist/controls.css

@@ -228,8 +228,12 @@
     min-width: 0;
     width: 100%;
     height: 100%;
-    font-size: inherit;
-    color: inherit;
+    /* Locked like every control declaration: an unlocked `inherit` loses to any
+       host's base-layer `input { font-size }` (matrx-frontend sets 17px), and
+       the field then types and shows its placeholder at 17px in a 13px capsule. */
+    font: inherit !important;
+    letter-spacing: inherit !important;
+    color: inherit !important;
     cursor: text;
   }
   .matrx-control-field > button {
@@ -416,29 +420,34 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .matrx-control-badge[data-tone="primary"] {
+  .matrx-control-badge[data-tone="primary"],
+  .matrx-control-button[data-tone="primary"] {
     border-color: hsl(var(--primary) / 0.4) !important;
     background-color: hsl(var(--primary) / 0.1) !important;
     color: hsl(var(--primary)) !important;
   }
-  .matrx-control-badge[data-tone="success"] {
+  .matrx-control-badge[data-tone="success"],
+  .matrx-control-button[data-tone="success"] {
     border-color: hsl(var(--success) / 0.4) !important;
     background-color: hsl(var(--success) / 0.1) !important;
     color: hsl(var(--success)) !important;
   }
   /* `--warning-foreground` is near-white (text ON a solid fill), so amber text
      on a light tint is unreadable: the warning badge keeps foreground ink. */
-  .matrx-control-badge[data-tone="warning"] {
+  .matrx-control-badge[data-tone="warning"],
+  .matrx-control-button[data-tone="warning"] {
     border-color: hsl(var(--warning) / 0.6) !important;
     background-color: hsl(var(--warning) / 0.15) !important;
     color: hsl(var(--foreground)) !important;
   }
-  .matrx-control-badge[data-tone="destructive"] {
+  .matrx-control-badge[data-tone="destructive"],
+  .matrx-control-button[data-tone="destructive"] {
     border-color: hsl(var(--destructive) / 0.4) !important;
     background-color: hsl(var(--destructive) / 0.1) !important;
     color: hsl(var(--destructive)) !important;
   }
-  .matrx-control-badge[data-tone="info"] {
+  .matrx-control-badge[data-tone="info"],
+  .matrx-control-button[data-tone="info"] {
     border-color: hsl(var(--info) / 0.4) !important;
     background-color: hsl(var(--info) / 0.1) !important;
     color: hsl(var(--info)) !important;
@@ -553,6 +562,12 @@
     min-width: 0;
     flex: 1 1 auto;
   }
+  /* The row's controls never yield width: the label and line truncate first.
+     (A ControlRow is `min-width: 0`, so on a phone a long line squeezed the
+     switches off their right edge — each row's at a different x, 2026-10-04.) */
+  .matrx-control-setting-row > .matrx-control-row {
+    flex-shrink: 0 !important;
+  }
   .matrx-control-setting-label {
     display: block;
     overflow: hidden;

package/dist/controls.d.cts

@@ -34,6 +34,9 @@ type ControlVariant = "primary" | "quiet" | "outline" | "danger";
 interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Tone, never size. Default `outline`. */
     variant?: ControlVariant;
+    /** A status tint from the role tokens (the Badge's), for a button that
+     *  reports a state — a drift door, an alert count. Default: none. */
+    tone?: BadgeTone;
     /** Leading 16px glyph. */
     icon?: React.ReactNode;
     /** Trailing 16px glyph (a menu chevron, an external-link mark). */

package/dist/controls.d.ts

@@ -34,6 +34,9 @@ type ControlVariant = "primary" | "quiet" | "outline" | "danger";
 interface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Tone, never size. Default `outline`. */
     variant?: ControlVariant;
+    /** A status tint from the role tokens (the Badge's), for a button that
+     *  reports a state — a drift door, an alert count. Default: none. */
+    tone?: BadgeTone;
     /** Leading 16px glyph. */
     icon?: React.ReactNode;
     /** Trailing 16px glyph (a menu chevron, an external-link mark). */

package/dist/controls.js

@@ -727,7 +727,7 @@ function glyphSlot(icon, iconEnd, label) {
   return void 0;
 }
 var Button2 = React7.forwardRef(
-  ({ className, variant = "outline", icon, iconEnd, asChild = false, children, onClick, type, ...props }, ref) => {
+  ({ className, variant = "outline", tone, icon, iconEnd, asChild = false, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? Slot2 : "button";
     const ariaDisabled = props["aria-disabled"];
     const disabledChild = asChild && Boolean(props.disabled);
@@ -740,6 +740,7 @@ var Button2 = React7.forwardRef(
         type: asChild ? void 0 : type ?? "button",
         "data-matrx-control": "button",
         "data-variant": variant,
+        "data-tone": tone && tone !== "neutral" ? tone : void 0,
         "data-glyph": glyphSlot(icon, iconEnd, label),
         className: cn("matrx-control matrx-control-button matrx-glyph-trim", className),
         ...props,