@ai-matrx/design-system 0.86.343 → 0.86.344

package/dist/controls.css

@@ -1672,6 +1672,50 @@
     color: hsl(var(--muted-foreground));
     font-size: var(--matrx-control-secondary);
   }
+  /* layout="icon": the launcher tile of an icon grid (Can make, pinned apps, a copy palette) — the
+     glyph centered over an 11px label centered under it, two lines at most, no frame; a pick is a
+     soft tint, never an outline; `end` (a check) is a badge on the top corner. After dense, so a
+     dense icon tile keeps this geometry (a stacked 13px start-aligned card read large and sloppy
+     in a 4-up menu grid, 2026-10-23). */
+  .matrx-tile[data-layout="icon"] {
+    position: relative;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 0.25rem !important;
+    min-height: 3.5rem !important;
+    padding: 0.5rem 0.125rem 0.375rem !important;
+    border-color: transparent !important;
+    border-radius: 0.5rem !important;
+    text-align: center !important;
+  }
+  .matrx-tile[data-layout="icon"][data-selected]:not([data-selected-style]) {
+    background-color: hsl(var(--primary) / 0.1) !important;
+  }
+  .matrx-tile[data-layout="icon"][data-selected]:not([data-selected-style]) .matrx-tile-title {
+    color: hsl(var(--primary-ink)) !important;
+  }
+  .matrx-tile[data-layout="icon"] .matrx-tile-icon { justify-content: center; }
+  .matrx-tile[data-layout="icon"] .matrx-tile-text { flex: 0 0 auto; width: 100%; align-items: center; gap: 0; }
+  .matrx-tile[data-layout="icon"] .matrx-tile-title {
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    text-overflow: clip;
+    white-space: normal;
+    font-size: 0.6875rem !important;
+    font-weight: 400 !important;
+    line-height: 1.25 !important;
+  }
+  .matrx-tile[data-layout="icon"] .matrx-tile-line { display: none !important; }
+  .matrx-tile[data-layout="icon"] .matrx-tile-end {
+    position: absolute;
+    top: 0.25rem;
+    inset-inline-end: 0.25rem;
+  }
 
   /* ── Button meta: the mixed-content fact after a label (0.68.12) ───────── */
   .matrx-control-button-meta {

package/dist/controls.d.cts

@@ -601,13 +601,16 @@ interface SettingRowProps {
 }
 /** One ~36px row: 13px label, optional 12px line, controls on the right. */
 declare function SettingRow({ label, line, htmlFor, children, className }: SettingRowProps): React.JSX.Element;
-type TileLayout = "row" | "stack" | "adaptive";
+type TileLayout = "row" | "stack" | "adaptive" | "icon";
 interface TileProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
     /** `row` (default): glyph, then a 13px title over a 12px line, start-aligned, full width — a
      *  choice in a list, a quick action. `stack`: glyph on top, title and line under it — a grid
      *  tile. `adaptive`: `stack` from the `sm` breakpoint (640px) up, a compact `row` below it — a
-     *  grid of option cards that becomes a list on a phone. All are taller than a control: they
-     *  carry text, so they never take the 28px lock. */
+     *  grid of option cards that becomes a list on a phone. `icon`: the launcher tile of an icon
+     *  grid (a "Can make" grid, a sidebar's pinned apps, a copy palette) — the glyph centered over
+     *  an 11px label centered under it, up to two lines, no frame, a pick is a soft tint, `end`
+     *  is a badge on the top corner, `line` is hidden. All are taller than a control: they carry
+     *  text, so they never take the 28px lock. */
     layout?: TileLayout;
     /** `outline` (default): the bordered card skin. `quiet`: no frame until hover — a row in a
      *  menu-like list. */

package/dist/controls.d.ts

@@ -601,13 +601,16 @@ interface SettingRowProps {
 }
 /** One ~36px row: 13px label, optional 12px line, controls on the right. */
 declare function SettingRow({ label, line, htmlFor, children, className }: SettingRowProps): React.JSX.Element;
-type TileLayout = "row" | "stack" | "adaptive";
+type TileLayout = "row" | "stack" | "adaptive" | "icon";
 interface TileProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
     /** `row` (default): glyph, then a 13px title over a 12px line, start-aligned, full width — a
      *  choice in a list, a quick action. `stack`: glyph on top, title and line under it — a grid
      *  tile. `adaptive`: `stack` from the `sm` breakpoint (640px) up, a compact `row` below it — a
-     *  grid of option cards that becomes a list on a phone. All are taller than a control: they
-     *  carry text, so they never take the 28px lock. */
+     *  grid of option cards that becomes a list on a phone. `icon`: the launcher tile of an icon
+     *  grid (a "Can make" grid, a sidebar's pinned apps, a copy palette) — the glyph centered over
+     *  an 11px label centered under it, up to two lines, no frame, a pick is a soft tint, `end`
+     *  is a badge on the top corner, `line` is hidden. All are taller than a control: they carry
+     *  text, so they never take the 28px lock. */
     layout?: TileLayout;
     /** `outline` (default): the bordered card skin. `quiet`: no frame until hover — a row in a
      *  menu-like list. */

package/dist/controls.js

@@ -94,7 +94,7 @@ import {
   RowGroup,
   SettingRow,
   Tile
-} from "./chunk-B4WMMAAJ.js";
+} from "./chunk-6CDAHINE.js";
 import "./chunk-K4XCB576.js";
 import "./chunk-HKLIRHT2.js";
 import "./chunk-DRSBLHOF.js";