@dereekb/dbx-components-mcp 13.17.0 → 13.18.0

package/generated/dereekb-dbx-web.ui-components.mcp.generated.json

@@ -384,13 +384,6 @@
           "description": "",
           "required": false
         },
-        {
-          "name": "color",
-          "type": "ThemePalette | DbxColorInput",
-          "description": "",
-          "required": false,
-          "default": "'primary'"
-        },
         {
           "name": "text",
           "type": "Maybe<string>",
@@ -433,7 +426,7 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<dbx-basic-loading [loading]=\"true\" color=\"accent\" text=\"Loading data...\">\n  <p>Content appears here when loading is false.</p>\n</dbx-basic-loading>",
+      "example": "<dbx-basic-loading [loading]=\"true\" dbxColor=\"accent\" text=\"Loading data...\">\n  <p>Content appears here when loading is false.</p>\n</dbx-basic-loading>",
       "minimalExample": "<dbx-basic-loading [loading]=\"true\"><p>Content</p></dbx-basic-loading>"
     },
     {
@@ -443,7 +436,7 @@
       "selector": "dbx-loading-progress",
       "className": "DbxLoadingProgressComponent",
       "module": "@dereekb/dbx-web",
-      "description": "Renders a Material progress spinner or progress bar to indicate loading.\n\nSupports both linear (bar) and circular (spinner) modes with configurable\ndiameter, color, and optional hint text below the indicator.",
+      "description": "Renders a Material progress spinner or progress bar to indicate loading.\n\nSupports both linear (bar) and circular (spinner) modes with configurable\ndiameter and optional hint text below the indicator. To color the indicator,\napply `[dbxColor]` directly on the host — its `dbx-loading-progress.dbx-color`\nSCSS maps the indicator color to the supplied token. Without `[dbxColor]` the\nindicator uses the Material default color.",
       "inputs": [
         {
           "name": "diameter",
@@ -471,13 +464,6 @@
           "required": false,
           "default": "'indeterminate'"
         },
-        {
-          "name": "color",
-          "type": "ThemePalette | DbxColorInput",
-          "description": "",
-          "required": false,
-          "default": "'primary'"
-        },
         {
           "name": "value",
           "type": "Maybe<number>",
@@ -499,7 +485,7 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<dbx-loading-progress mode=\"bar\"></dbx-loading-progress>",
+      "example": "<dbx-loading-progress mode=\"bar\" dbxColor=\"accent\"></dbx-loading-progress>",
       "minimalExample": "<dbx-loading-progress></dbx-loading-progress>"
     },
     {
@@ -556,13 +542,6 @@
           "description": "",
           "required": false
         },
-        {
-          "name": "color",
-          "type": "ThemePalette | DbxColorInput",
-          "description": "",
-          "required": false,
-          "default": "'primary'"
-        },
         {
           "name": "diameter",
           "type": "Maybe<number>",
@@ -1008,15 +987,8 @@
       "selector": "dbx-bar,[dbxBar]",
       "className": "DbxBarDirective",
       "module": "@dereekb/dbx-web",
-      "description": "Renders a horizontal bar with a themed background color, used to visually group or separate content.",
-      "inputs": [
-        {
-          "name": "color",
-          "type": "Maybe<DbxColorInput>",
-          "description": "",
-          "required": false
-        }
-      ],
+      "description": "Renders a horizontal bar used to visually group or separate content.\n\nTo give the bar a themed background apply `[dbxColor]` (optionally with `[dbxColorTone]`) directly on the host —\nthe bar paints itself from the supplied color tokens via its `.dbx-bar.dbx-color` SCSS. The directive itself only\napplies the `.dbx-bar` layout class.",
+      "inputs": [],
       "outputs": [],
       "relatedSlugs": [
         "bar-header",
@@ -1026,7 +998,7 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<dbx-bar>\n  <dbx-button text=\"Save\" raised color=\"primary\"></dbx-button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <dbx-button text=\"Cancel\" stroked></dbx-button>\n</dbx-bar>",
+      "example": "<dbx-bar dbxColor=\"primary\">\n  <dbx-button text=\"Save\" raised></dbx-button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <dbx-button text=\"Cancel\" stroked></dbx-button>\n</dbx-bar>",
       "minimalExample": "<dbx-bar><button>A</button><button>B</button></dbx-bar>"
     },
     {
@@ -1036,7 +1008,7 @@
       "selector": "dbx-bar-header",
       "className": "DbxBarHeaderComponent",
       "module": "@dereekb/dbx-web",
-      "description": "A themed header bar displaying an optional icon and text label, useful as a section divider.",
+      "description": "A header bar displaying an optional icon and text label, useful as a section divider.\n\nTo give it a themed background apply `[dbxColor]` directly on the host — the inner `<dbx-bar>` paints from the\ninherited tokens via the `dbx-bar-header.dbx-color .dbx-bar` SCSS.",
       "inputs": [
         {
           "name": "text",
@@ -1049,12 +1021,6 @@
           "type": "Maybe<string>",
           "description": "",
           "required": false
-        },
-        {
-          "name": "color",
-          "type": "Maybe<DbxColorInput>",
-          "description": "",
-          "required": false
         }
       ],
       "outputs": [],
@@ -1066,7 +1032,7 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<dbx-bar-header header=\"Members\" icon=\"group\">\n  <button mat-icon-button><mat-icon>add</mat-icon></button>\n</dbx-bar-header>",
+      "example": "<dbx-bar-header header=\"Members\" icon=\"group\" dbxColor=\"primary\">\n  <button mat-icon-button><mat-icon>add</mat-icon></button>\n</dbx-bar-header>",
       "minimalExample": "<dbx-bar-header header=\"Title\"></dbx-bar-header>"
     },
     {
@@ -1076,15 +1042,8 @@
       "selector": "dbx-pagebar",
       "className": "DbxPagebarComponent",
       "module": "@dereekb/dbx-web",
-      "description": "A page-level toolbar with left and right content slots, built on Angular Material's mat-toolbar.",
-      "inputs": [
-        {
-          "name": "color",
-          "type": "Maybe<DbxBarColor>",
-          "description": "",
-          "required": false
-        }
-      ],
+      "description": "A page-level toolbar with left and right content slots, built on Angular Material's mat-toolbar.\n\nTo give it a themed background apply `[dbxColor]` directly on the host — the inner `mat-toolbar` maps its\n`--mat-toolbar-*` colors to the inherited tokens via the `dbx-pagebar.dbx-color mat-toolbar` SCSS.",
+      "inputs": [],
       "outputs": [],
       "contentProjection": "<ng-content select=\"[left]\"></ng-content>; <ng-content select=\"[right]\"></ng-content>",
       "relatedSlugs": [
@@ -1095,7 +1054,7 @@
         "dbx__ref__dbx-ui-building-blocks",
         "dbx__ref__dbx-app-structure"
       ],
-      "example": "<dbx-pagebar>\n  <h2>Settings</h2>\n  <span class=\"spacer\"></span>\n  <button mat-stroked-button>Save</button>\n</dbx-pagebar>",
+      "example": "<dbx-pagebar dbxColor=\"primary\">\n  <h2>Settings</h2>\n  <span class=\"spacer\"></span>\n  <button mat-stroked-button>Save</button>\n</dbx-pagebar>",
       "minimalExample": "<dbx-pagebar>Title</dbx-pagebar>"
     },
     {
@@ -1306,7 +1265,7 @@
       "selector": "dbx-content-pit, [dbxContentPit]",
       "className": "DbxContentPitDirective",
       "module": "@dereekb/dbx-web",
-      "description": "Wraps content in a recessed \"pit\" container with optional scrollable overflow and rounded corners.\nUseful for displaying bounded content areas such as lists or previews with a constrained height.",
+      "description": "Wraps content in a recessed \"pit\" container with optional scrollable overflow and rounded corners.\nUseful for displaying bounded content areas such as lists or previews with a constrained height.\n\nPits round their corners by default. Pass `[rounded]=\"false\"` to square the pit — this applies the\ncommon `.dbx-corners-none` opt-out utility rather than a pit-specific class.",
       "inputs": [
         {
           "name": "scrollable",
@@ -1319,7 +1278,7 @@
           "type": "boolean",
           "description": "",
           "required": false,
-          "default": "false"
+          "default": "true"
         }
       ],
       "outputs": [],
@@ -1935,7 +1894,7 @@
       "selector": "[dbxStyleBody]",
       "className": "DbxStyleBodyDirective",
       "module": "@dereekb/dbx-web",
-      "description": "Applies the current application style class from {@link DbxStyleService} to the document `<body>` element.\n\nPlace this directive on a root-level element so that the body tag receives the active style class.",
+      "description": "Applies the current {@link DbxStyleService} body application — the active style class, any supplement classes, and\nsupplement inline styles (CSS custom properties) — to the document `<body>` element.\n\nPlace this directive on a root-level element so that the body tag receives the active style.",
       "inputs": [],
       "outputs": [],
       "relatedSlugs": [
@@ -1953,14 +1912,8 @@
       "selector": "[dbxColor]",
       "className": "DbxColorDirective",
       "module": "@dereekb/dbx-web",
-      "description": "Applies a themed background color to the host element.\n\nAccepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'success'`) or a {@link DbxColorConfig}\nobject carrying arbitrary CSS color values (any hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc.).\n\nOptionally set {@link dbxColorTone} (0-100) to control background opacity for a tonal/muted appearance.\nWhen tonal mode is active, the `dbx-color-tonal` CSS class is added and a CSS rule overrides the text\ncolor to the vibrant color (via `--dbx-bg-color-current`).\n\nThe standalone `[dbxColorTone]` input wins over `config.tone` when both are set; the same precedence\napplies to tonal mode.",
+      "description": "Provides themed color *tokens* to the host element — it never paints a background itself.\n\nAccepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'success'`) or a {@link DbxColorConfig}\nobject carrying arbitrary CSS color values (any hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc.).\nThe directive sets the `--dbx-bg-color-current` / `--dbx-color-current` (and tone) custom properties and adds the\n`.dbx-color` marker class, leaving the actual painting to either the explicit `.dbx-color-bg` utility on the same\nelement or a colored-surface component's own `.dbx-color`-scoped SCSS (e.g. `<dbx-bar>`, `<dbx-button>`, `<dbx-loading>`,\n`<dbx-icon-tile>`, `<mat-card>`) that reads the inherited tokens.\n\nOptionally set {@link dbxColorTone} (0-100) to control background opacity for a tonal/muted appearance.\nWhen tonal mode is active, the `dbx-color-tonal` CSS class is added and a CSS rule overrides the text\ncolor to the vibrant color (via `--dbx-bg-color-current`).\n\nThe standalone `[dbxColorTone]` input wins over `config.tone` when both are set; the same precedence\napplies to tonal mode.",
       "inputs": [
-        {
-          "name": "dbxColor",
-          "type": "Maybe<DbxColorInput>",
-          "description": "",
-          "required": false
-        },
         {
           "name": "dbxColorTone",
           "type": "Maybe<DbxColorTone>",
@@ -1973,8 +1926,8 @@
         "text-color",
         "color-service"
       ],
-      "example": "<div [dbxColor]=\"'primary'\">Themed background</div>\n<div [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\">Tonal themed</div>\n<div [dbxColor]=\"{ color: '#ff0066', contrast: 'white' }\">Custom hex</div>\n<div [dbxColor]=\"{ color: 'var(--mat-sys-tertiary)', contrast: 'var(--mat-sys-on-tertiary)', tone: 18 }\">Custom tonal</div>",
-      "minimalExample": "<div [dbxColor]=\"'primary'\"></div>"
+      "example": "<!-- pair with .dbx-color-bg to paint a plain element -->\n<div dbxColor=\"primary\" class=\"dbx-color-bg\">Themed background</div>\n<div dbxColor=\"primary\" [dbxColorTone]=\"18\" class=\"dbx-color-bg\">Tonal themed</div>\n<div [dbxColor]=\"{ color: '#ff0066', contrast: 'white' }\" class=\"dbx-color-bg\">Custom hex</div>\n\n<!-- a colored-surface component paints itself from the tokens; no .dbx-color-bg needed -->\n<dbx-bar dbxColor=\"primary\">Bar paints itself</dbx-bar>\n<dbx-button color=\"warn\" raised text=\"Delete\"></dbx-button>",
+      "minimalExample": "<div dbxColor=\"primary\" class=\"dbx-color-bg\"></div>"
     },
     {
       "slug": "color-service",
@@ -2242,8 +2195,8 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<dbx-icon-tile [icon]=\"'check'\" [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n\n<dbx-icon-tile [icon]=\"'star'\" [round]=\"true\" [dbxColor]=\"'accent'\"></dbx-icon-tile>\n\n<dbx-icon-tile [dbxColor]=\"'accent'\">\n  <my-custom-glyph></my-custom-glyph>\n</dbx-icon-tile>",
-      "minimalExample": "<dbx-icon-tile [icon]=\"'verified'\" [dbxColor]=\"'success'\"></dbx-icon-tile>"
+      "example": "<dbx-icon-tile [icon]=\"'check'\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n\n<dbx-icon-tile [icon]=\"'star'\" [round]=\"true\" dbxColor=\"accent\"></dbx-icon-tile>\n\n<dbx-icon-tile dbxColor=\"accent\">\n  <my-custom-glyph></my-custom-glyph>\n</dbx-icon-tile>",
+      "minimalExample": "<dbx-icon-tile [icon]=\"'verified'\" dbxColor=\"success\"></dbx-icon-tile>"
     },
     {
       "slug": "icon-tile-host",
@@ -2271,8 +2224,8 @@
       "skillRefs": [
         "dbx__ref__dbx-ui-building-blocks"
       ],
-      "example": "<div class=\"dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n  <div class=\"item-icon\" dbxIconTile [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\">\n    <mat-icon>check_circle</mat-icon>\n  </div>\n  <div class=\"item-left\">\n    <span class=\"item-title\">Title</span>\n    <span class=\"item-details\">Details</span>\n  </div>\n</div>",
-      "minimalExample": "<div dbxIconTile [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\">\n<mat-icon>star</mat-icon>\n</div>"
+      "example": "<div class=\"dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n  <div class=\"item-icon\" dbxIconTile dbxColor=\"primary\" [dbxColorTone]=\"18\">\n    <mat-icon>check_circle</mat-icon>\n  </div>\n  <div class=\"item-left\">\n    <span class=\"item-title\">Title</span>\n    <span class=\"item-details\">Details</span>\n  </div>\n</div>",
+      "minimalExample": "<div dbxIconTile dbxColor=\"primary\" [dbxColorTone]=\"18\">\n<mat-icon>star</mat-icon>\n</div>"
     },
     {
       "slug": "label-block",
@@ -2308,7 +2261,7 @@
       "selector": "dbx-chip",
       "className": "DbxChipDirective",
       "module": "@dereekb/dbx-web",
-      "description": "Renders a styled chip element with optional small, block, and color modes.",
+      "description": "Renders a styled chip element with optional small, block, and color modes.\n\nHosts a {@link DbxColorDirective} that provides the color tokens + `.dbx-color` marker the chip's\n`.dbx-chip.dbx-color` SCSS paints from. The color can be supplied either through the {@link color}/{@link display}\ninputs (pushed into the host directive) or by binding `[dbxColor]` directly; the chip's tone handling (default\n{@link DEFAULT_DBX_CHIP_TONE} → tonal text) applies to both.",
       "inputs": [
         {
           "name": "small",
@@ -2325,7 +2278,7 @@
         {
           "name": "color",
           "type": "Maybe<DbxColorInput>",
-          "description": "Theme color or {@link DbxColorConfig} applied to the chip background via {@link dbxColorBackground}.\n\nWhen {@link display} is also set, its color is used as a fallback.",
+          "description": "Theme color or {@link DbxColorConfig} applied to the chip, pushed into the host {@link DbxColorDirective}.\n\nWhen {@link display} is also set, its color is used as a fallback.",
           "required": false
         },
         {
@@ -2708,13 +2661,6 @@
       "module": "@dereekb/dbx-web",
       "description": "Responsive side navigation component that adapts its display mode based on screen width.\n\nRenders a Material sidenav with an anchor list and automatically transitions between mobile overlay, icon rail, and full sidebar modes.\nCloses automatically on route transitions in mobile mode.",
       "inputs": [
-        {
-          "name": "color",
-          "type": "ThemePalette | DbxColorInput",
-          "description": "",
-          "required": false,
-          "default": "undefined"
-        },
         {
           "name": "position",
           "type": "DbxSidenavPosition",
@@ -2764,12 +2710,6 @@
       "module": "@dereekb/dbx-web",
       "description": "Page layout component designed for use inside a {@link DbxSidenavComponent}. Includes a sidenav-aware pagebar and a content area.\n\nWhen `mobileOnly` is true, the pagebar is hidden on non-mobile screen sizes.",
       "inputs": [
-        {
-          "name": "color",
-          "type": "Maybe<DbxBarColor>",
-          "description": "",
-          "required": false
-        },
         {
           "name": "sidenavMenuIcon",
           "type": "Maybe<string>",

package/generated/dereekb-demo.dbx-docs-ui-examples.mcp.generated.json

@@ -41,6 +41,117 @@
         }
       ]
     },
+    {
+      "slug": "layout-bot-status",
+      "category": "layout",
+      "summary": "Bot status page — success color-accented status card, mat-table send history with tonal dbx-chip pills, and a hover-free manual-actions list card with a dashed generate box.",
+      "header": "Bot Status Layout",
+      "className": "DocBotStatusLayoutExampleComponent",
+      "selector": "doc-bot-status-layout-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "success color-accented status card, a mat-table send history with tonal dbx-chip pills, and a hover-free manual-actions card with a dashed generate box.",
+      "relatedSlugs": [
+        "mat-card",
+        "dbx-card-color-accent",
+        "dbx-color",
+        "dbx-chip",
+        "dbx-dot",
+        "dbx-list-two-line-item",
+        "dbx-list-auto-height",
+        "dbx-content-border",
+        "dbx-text-color",
+        "dbx-section",
+        "dbx-anchor"
+      ],
+      "info": "<p>\n  Composes a \"bot status\" page (lorem ipsum copy) out of a\n  <code>&lt;dbx-section&gt;</code>\n  wrapping three\n  <code>&lt;mat-card&gt;</code>\n  s — a full-width status card, a \"Send history\" card, and a \"Manual actions\" card — entirely from dbx-web utilities, with no component styles of its own.\n</p>\n<p>\n  The top status card carries both\n  <code>.dbx-card-color-accent</code>\n  and\n  <code>dbxColor=\"success\"</code>\n  . The new\n  <code>.dbx-card-color-accent</code>\n  utility paints only the card's left edge from the bound color's\n  <code>--dbx-bg-color-current</code>\n  token, while the card body keeps its normal unpainted surface — the\n  <code>mat-card.dbx-color</code>\n  surface paint excludes this class through a zero-specificity\n  <code>:where(:not(...))</code>\n  guard, so binding\n  <code>[dbxColor]</code>\n  here colors the edge without washing the whole card. The green status dot is the\n  <code>.dbx-dot</code>\n  utility (a\n  <code>currentColor</code>\n  circle) tinted with\n  <code>[dbxTextColor]=\"'success'\"</code>\n  , and the warn \"Pause Lorem Bot\" button is a raised\n  <code>&lt;dbx-button color=\"warn\"&gt;</code>\n  .\n</p>\n<p>\n  The \"Send history\" card uses a plain Angular Material\n  <code>&lt;table mat-table&gt;</code>\n  (the demo app's first\n  <code>MatTableModule</code>\n  use) styled purely with dbx typography utilities: uppercase, tracked, dim\n  <code>.dbx-text-label-medium</code>\n  header cells; a\n  <code>.dbx-text-title-small</code>\n  date over a dim\n  <code>.dbx-text-body-small</code>\n  time; a tonal\n  <code>&lt;dbx-chip [small]&gt;</code>\n  trigger pill (amber\n  <code>notice</code>\n  for manual sends, neutral\n  <code>grey</code>\n  for scheduled); a\n  <code>[dbxTextColor]=\"'primary'\"</code>\n  remaining-count with a green\n  <code>[dbxTextColor]=\"'success'\"</code>\n  delta (or a dim baseline hint); and a \"Sent\"\n  <code>&lt;dbx-chip color=\"success\"&gt;</code>\n  that projects a leading\n  <code>.dbx-dot</code>\n  .\n</p>\n<p>\n  The \"Manual actions\" card reuses the hover-free\n  <code>.dbx-list-two-line-item</code>\n  list pattern: rows stay non-clickable and only the trailing button is interactive (raised + primary for the emphasized \"Refresh\" action, stroked otherwise). Because a dashed\n  <code>.dbx-content-border</code>\n  \"Generate lorem content\" box flows below the list, the list wrapper host carries\n  <code>dbx-list-auto-height</code>\n  so the\n  <code>.dbx-list</code>\n  sizes to its rows instead of filling the stretched card with its default\n  <code>height: 100%</code>\n  . Layout is responsive via Angular Flex Layout's CSS-Grid directives —\n  <code>gdColumns=\"5fr 4fr\"</code>\n  with\n  <code>gdColumns.lt-lg=\"1fr\"</code>\n  stacks the history and actions cards as the viewport narrows — and every button/link carries a\n  <code>ClickableAnchor</code>\n  whose\n  <code>onClick</code>\n  opens a\n  <code>MatSnackBar</code>\n  .\n</p>",
+      "snippet": "<dbx-section header=\"Lorem Bot\" [h]=\"2\" hint=\"Automated dolor reminders for Ipsum Amet\">\n  <mat-card appearance=\"outlined\" class=\"dbx-card-color-accent\" dbxColor=\"success\">\n    <mat-card-content>\n      <div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start center\">\n        <div class=\"dbx-flex-fill\">\n          <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1 dbx-hint\">Lorem Bot · Ipsum Amet</div>\n          <div class=\"dbx-flex-bar\">\n            <span class=\"dbx-dot dbx-icon-spacer\" [dbxTextColor]=\"'success'\"></span>\n            <h3 class=\"dbx-text-title-large\">Enabled · Running on schedule</h3>\n          </div>\n          <p class=\"dbx-hint no-margin dbx-pt1\">\n            Next send to Ipsum:\n            <b>Thu, May 28, 2026 · 12:36 AM PT</b>\n            · Last send:\n            <b>2 days ago</b>\n            · Ipsum has\n            <b>3</b>\n            incomplete items\n          </p>\n        </div>\n        <dbx-anchor [anchor]=\"pauseAnchor\">\n          <dbx-button [raised]=\"true\" color=\"warn\" text=\"Pause Lorem Bot\"></dbx-button>\n        </dbx-anchor>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div class=\"dbx-pt3\" gdColumns=\"5fr 4fr\" gdColumns.lt-lg=\"1fr\" gdGap=\"var(--dbx-padding-3)\">\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1\">Send history</div>\n        <p class=\"dbx-hint dbx-mb2\">Recent sends and how Ipsum's remaining items changed.</p>\n        <table mat-table [dataSource]=\"sendHistoryRows\" class=\"dbx-w100\">\n          <ng-container matColumnDef=\"sentAt\">\n            <th mat-header-cell *matHeaderCellDef class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-hint\">Sent at</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"dbx-text-title-small\">{{ row.sentAtDate }}</div>\n              <div class=\"dbx-text-body-small dbx-hint\">{{ row.sentAtTime }}</div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"trigger\">\n            <th mat-header-cell *matHeaderCellDef class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-hint\">Trigger</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <dbx-chip [small]=\"true\" [color]=\"row.trigger === 'Manual' ? 'notice' : 'grey'\">{{ row.trigger }}</dbx-chip>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"itemsRemaining\">\n            <th mat-header-cell *matHeaderCellDef class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-hint\">Items remaining</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <span class=\"dbx-text-title-small\" [dbxTextColor]=\"'primary'\">{{ row.itemsRemaining }}</span>\n              @if (row.delta) {\n                <span class=\"dbx-pl1 dbx-text-body-small\" [dbxTextColor]=\"'success'\">{{ row.delta }}</span>\n              } @else {\n                <span class=\"dbx-pl1 dbx-text-body-small dbx-hint\">{{ row.deltaHint }}</span>\n              }\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"status\">\n            <th mat-header-cell *matHeaderCellDef class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-hint\">Status</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"dbx-flex-bar\">\n                <dbx-chip [small]=\"true\" color=\"success\">\n                  <span class=\"dbx-dot dbx-chip-spacer\" [dbxTextColor]=\"'success'\"></span>\n                  Sent\n                </dbx-chip>\n              </div>\n            </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"sendHistoryColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: sendHistoryColumns\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card appearance=\"outlined\">\n      <mat-card-content>\n        <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1\">Manual actions</div>\n        <p class=\"dbx-hint dbx-mb2\">Run the bot by hand or change when it next sends.</p>\n        <doc-manual-actions-item-list [state]=\"manualActionsState$\"></doc-manual-actions-item-list>\n        <div class=\"dbx-pt3\">\n          <div class=\"dbx-content-border\">\n            <div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start center\">\n              <div class=\"dbx-flex-fill\">\n                <div class=\"dbx-text-title-medium dbx-pb1\">Generate lorem content</div>\n                <p class=\"dbx-hint no-margin\">Draft a personalized lorem for Ipsum's incomplete items.</p>\n              </div>\n              <dbx-anchor [anchor]=\"generateAnchor\">\n                <dbx-button [stroked]=\"true\" icon=\"auto_awesome\" text=\"Generate\"></dbx-button>\n              </dbx-anchor>\n            </div>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</dbx-section>",
+      "uses": [
+        {
+          "kind": "component",
+          "className": "DocManualActionsItemListComponent",
+          "role": "list",
+          "selector": "doc-manual-actions-item-list",
+          "classSource": "@Component({\n  selector: 'doc-manual-actions-item-list',\n  template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxListWrapperComponentImportsModule],\n  host: {\n    class: 'dbx-list-auto-height dbx-list-no-hover-effects dbx-list-no-item-padding'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocManualActionsItemListComponent extends AbstractDbxSelectionListWrapperDirective<ManualActionItemValue> {\n  constructor() {\n    super({\n      componentClass: DocManualActionsItemListViewComponent,\n      defaultSelectionMode: 'view'\n    });\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocManualActionsItemListViewComponent",
+          "role": "view",
+          "selector": "doc-manual-actions-item-list-view",
+          "classSource": "@Component({\n  selector: 'doc-manual-actions-item-list-view',\n  template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxSelectionValueListViewComponentImportsModule],\n  providers: provideDbxListView(DocManualActionsItemListViewComponent),\n  host: {\n    class: 'dbx-list-item-p0'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocManualActionsItemListViewComponent extends AbstractDbxSelectionListViewDirective<ManualActionItemValue> {\n  // Drop `icon` (rows render no tile) and `anchor` (button owns it; row stays non-clickable).\n  readonly config: DbxSelectionValueListViewConfig<ManualActionItemValueWithSelection> = {\n    componentClass: DocManualActionsItemListViewItemComponent,\n    mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, itemValue: value, icon: undefined, anchor: undefined })))\n  };\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocManualActionsItemListViewItemComponent",
+          "role": "item",
+          "selector": "doc-manual-actions-item-list-view-item",
+          "classSource": "@Component({\n  selector: 'doc-manual-actions-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded dbx-list-two-line-item\">\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium\">{{ title }}</span>\n        <span class=\"item-details\">{{ detail }}</span>\n      </div>\n      <div class=\"item-right\">\n        <dbx-anchor [anchor]=\"anchor\">\n          @if (buttonRaised) {\n            <dbx-button [raised]=\"true\" color=\"primary\" class=\"dbx-nowrap\" [text]=\"buttonText\"></dbx-button>\n          } @else {\n            <dbx-button [stroked]=\"true\" class=\"dbx-nowrap\" [text]=\"buttonText\"></dbx-button>\n          }\n        </dbx-anchor>\n      </div>\n    </div>\n  `,\n  imports: [MatButtonModule, DbxButtonComponent, DbxAnchorComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocManualActionsItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<ManualActionItemValue> {\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get detail(): string {\n    return this.itemValue.detail;\n  }\n\n  get buttonText(): string {\n    return this.itemValue.buttonText;\n  }\n\n  get buttonRaised(): Maybe<boolean> {\n    return this.itemValue.buttonRaised;\n  }\n\n  get anchor(): Maybe<ClickableAnchor> {\n    return this.itemValue.anchor;\n  }\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "ManualActionItemValue",
+          "role": "data",
+          "classSource": "export interface ManualActionItemValue {\n  readonly key: string;\n  readonly title: string;\n  readonly detail: string;\n  /**\n   * Trailing action button label.\n   */\n  readonly buttonText: string;\n  /**\n   * When set the trailing button renders raised + primary (the emphasized action); otherwise it renders stroked.\n   */\n  readonly buttonRaised?: Maybe<boolean>;\n  readonly anchor?: Maybe<ClickableAnchor>;\n}"
+        }
+      ]
+    },
+    {
+      "slug": "layout-dashboard-overview",
+      "category": "layout",
+      "summary": "Dashboard overview page — dbx-section header with action buttons, dark inverse hero card with dbx-color-border stat pits, an accent-edged hover-free list card, and a responsive auto-fit row of stat cards.",
+      "header": "Dashboard Overview Layout",
+      "className": "DocDashboardOverviewLayoutExampleComponent",
+      "selector": "doc-dashboard-overview-layout-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "dbx-section header with actions, dark inverse hero card with dbx-color-border stat pits, accent list card, and a responsive stat-card row.",
+      "relatedSlugs": [
+        "dbx-section",
+        "dbx-color",
+        "dbx-color-border",
+        "dbx-color-text-dim",
+        "dbx-content-pit",
+        "mat-card",
+        "dbx-card-accent",
+        "dbx-list-two-line-item",
+        "dbx-icon-tile",
+        "dbx-anchor",
+        "dbx-text-color",
+        "button-spacer"
+      ],
+      "info": "<p>\n  Composes a dashboard \"Overview\" page out of a\n  <code>&lt;dbx-section&gt;</code>\n  whose\n  <code>[sectionHeader]</code>\n  slot projects the page-level action buttons to the right of the title, a dark hero\n  <code>&lt;mat-card&gt;</code>\n  , a \"Worth knowing\"\n  <code>&lt;mat-card&gt;</code>\n  with a hover-free list, and a responsive row of outlined stat cards.\n</p>\n<p>\n  The hero card is painted by the app-registered\n  <code>demo-inverse</code>\n  color template —\n  <code>[dbxColor]=\"&#123; template: 'demo-inverse' &#125;\"</code>\n  resolves to\n  <code>--mat-sys-inverse-surface</code>\n  /\n  <code>--mat-sys-inverse-on-surface</code>\n  via the\n  <code>DbxColorService</code>\n  , so the card flips correctly between light and dark themes without hard-coded colors. Its three stat boxes are\n  <code>&lt;dbx-content-pit&gt;</code>\n  blocks composed with the\n  <code>.dbx-color-border</code>\n  utility, which mixes a subtle 1px border from the inherited\n  <code>--dbx-color-current</code>\n  contrast color (override\n  <code>--dbx-color-border-tone</code>\n  /\n  <code>--dbx-color-border-width</code>\n  to tune it). Pits inside a\n  <code>[dbxColor]</code>\n  -painted surface automatically swap their default\n  <code>--mat-sys-surface-container</code>\n  background for a low wash of the same contrast variable (tune with\n  <code>--dbx-content-pit-color-tone</code>\n  ), secondary text uses the\n  <code>.dbx-color-text-dim</code>\n  utility, and the stat numbers use\n  <code>[dbxTextColor]</code>\n  configs (\n  <code>--mat-sys-inverse-primary</code>\n  for the filled count) that stay legible on the inverse surface. The component declares no styles of its own — the card content fills the stretched card height via\n  <code>mat-card-content.dbx-flex-column</code>\n  +\n  <code>.dbx-flex-fill</code>\n  .\n</p>\n<p>\n  The \"Worth knowing\" card reuses the\n  <code>.dbx-list-two-line-item</code>\n  anchor-button list pattern: the list wrapper host applies\n  <code>dbx-list-no-hover-effects</code>\n  so rows render with no background or hover state,\n  <code>mapValuesToItemValues</code>\n  strips each row's anchor so the row itself stays non-clickable, and only the optional trailing\n  <code>&lt;dbx-anchor&gt;</code>\n  -wrapped stroked button is interactive. The card's blue left edge is the\n  <code>.dbx-card-accent</code>\n  utility (override\n  <code>--dbx-card-accent-color</code>\n  /\n  <code>--dbx-card-accent-border-width</code>\n  ).\n</p>\n<p>\n  Layout is responsive via Angular Flex Layout's CSS-Grid directives:\n  <code>gdColumns=\"2fr 1fr\"</code>\n  with\n  <code>gdColumns.lt-md=\"1fr\"</code>\n  stacks the hero and list cards below tablet width, and the bottom row's\n  <code>gdColumns=\"repeat(auto-fit, minmax(220px, 1fr))\"</code>\n  reflows the four stat cards 4 → 2 → 1 as the viewport narrows. Every button and link carries a\n  <code>ClickableAnchor</code>\n  whose\n  <code>onClick</code>\n  opens a\n  <code>MatSnackBar</code>\n  so each action surface is demonstrably wired.\n</p>",
+      "snippet": "<dbx-section header=\"Overview\" [h]=\"2\" hint=\"Lorem Ipsum Consectetur · Wed, Apr 22, 2026\">\n  <div sectionHeader class=\"dbx-flex-bar\">\n    <dbx-anchor [anchor]=\"last30DaysAnchor\">\n      <dbx-button [stroked]=\"true\" icon=\"calendar_today\" text=\"Last 30 days\"></dbx-button>\n    </dbx-anchor>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-anchor [anchor]=\"viewLoremsAnchor\">\n      <dbx-button [stroked]=\"true\" icon=\"arrow_forward\" text=\"View Lorems\"></dbx-button>\n    </dbx-anchor>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-anchor [anchor]=\"createLoremAnchor\">\n      <dbx-button [stroked]=\"true\" icon=\"add\" text=\"Create Lorem\"></dbx-button>\n    </dbx-anchor>\n  </div>\n\n  <div class=\"dbx-pt3\" gdColumns=\"2fr 1fr\" gdColumns.lt-lg=\"1fr\" gdGap=\"var(--dbx-padding-3)\">\n    <mat-card appearance=\"filled\" [dbxColor]=\"{ template: 'demo-inverse' }\">\n      <mat-card-content class=\"dbx-p4 dbx-flex-column dbx-flex-fill\">\n        <div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start start\">\n          <div class=\"dbx-flex-fill\">\n            <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1 dbx-color-text-dim\">Today · Lorem days</div>\n            <h3 class=\"dbx-text-title-large dbx-mb1\">2 lorems on the schedule</h3>\n            <p class=\"dbx-color-text-dim\">Summary for Apr 22, 2026 · all filled</p>\n          </div>\n          <dbx-anchor [anchor]=\"todaysLoremsAnchor\">\n            <button mat-stroked-button>\n              View today's lorems\n              <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n            </button>\n          </dbx-anchor>\n        </div>\n        <div class=\"dbx-pt3 dbx-flex-fill\" gdColumns=\"repeat(3, 1fr)\" gdColumns.lt-sm=\"1fr\" gdGap=\"var(--dbx-padding-2)\">\n          @for (stat of heroStats; track stat.label) {\n            <dbx-content-pit class=\"dbx-color-border\">\n              <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1 dbx-color-text-dim\">{{ stat.label }}</div>\n              <div class=\"dbx-text-display-small\" [dbxTextColor]=\"stat.textColor\">{{ stat.value }}</div>\n            </dbx-content-pit>\n          }\n        </div>\n      </mat-card-content>\n    </mat-card>\n\n    <mat-card appearance=\"outlined\" class=\"dbx-card-accent\">\n      <mat-card-content>\n        <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1\">Worth knowing</div>\n        <p class=\"dbx-hint dbx-mb2\">Milestones, streaks, and things that need your attention.</p>\n        <doc-worth-knowing-item-list [state]=\"worthKnowingState$\"></doc-worth-knowing-item-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <div class=\"dbx-pt3\" gdColumns=\"repeat(auto-fit, minmax(220px, 1fr))\" gdGap=\"var(--dbx-padding-3)\">\n    @for (card of statCards; track card.label) {\n      <mat-card appearance=\"outlined\">\n        <mat-card-content>\n          <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1\">{{ card.label }}</div>\n          @if (card.linkText) {\n            <div class=\"dbx-text-headline-medium\">\n              <dbx-anchor [dbxTextColor]=\"'primary'\" [anchor]=\"postLoremAnchor\">\n                <span class=\"dbx-link-hover\">{{ card.linkText }} →</span>\n              </dbx-anchor>\n            </div>\n          } @else {\n            <div class=\"dbx-text-headline-large\" [dbxTextColor]=\"card.valueColor\">{{ card.value }}</div>\n          }\n          @if (card.delta || card.hint) {\n            <div class=\"dbx-text-body-small dbx-pt1\">\n              @if (card.delta) {\n                <span class=\"dbx-pr1\" [dbxTextColor]=\"'success'\">\n                  <strong>▲ {{ card.delta }}</strong>\n                </span>\n              }\n              @if (card.hint) {\n                <span class=\"dbx-hint\">{{ card.hint }}</span>\n              }\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n</dbx-section>",
+      "uses": [
+        {
+          "kind": "component",
+          "className": "DocWorthKnowingItemListComponent",
+          "role": "list",
+          "selector": "doc-worth-knowing-item-list",
+          "classSource": "@Component({\n  selector: 'doc-worth-knowing-item-list',\n  template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxListWrapperComponentImportsModule],\n  host: {\n    class: 'dbx-list-no-hover-effects dbx-list-no-item-padding'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocWorthKnowingItemListComponent extends AbstractDbxSelectionListWrapperDirective<WorthKnowingItemValue> {\n  constructor() {\n    super({\n      componentClass: DocWorthKnowingItemListViewComponent,\n      defaultSelectionMode: 'view'\n    });\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocWorthKnowingItemListViewComponent",
+          "role": "view",
+          "selector": "doc-worth-knowing-item-list-view",
+          "classSource": "@Component({\n  selector: 'doc-worth-knowing-item-list-view',\n  template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxSelectionValueListViewComponentImportsModule],\n  providers: provideDbxListView(DocWorthKnowingItemListViewComponent),\n  host: {\n    class: 'dbx-list-item-p0'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocWorthKnowingItemListViewComponent extends AbstractDbxSelectionListViewDirective<WorthKnowingItemValue> {\n  // Drop `icon` (template paints its own tile) and `anchor` (button owns it; row stays non-clickable).\n  readonly config: DbxSelectionValueListViewConfig<WorthKnowingItemValueWithSelection> = {\n    componentClass: DocWorthKnowingItemListViewItemComponent,\n    mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, itemValue: value, icon: undefined, anchor: undefined })))\n  };\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocWorthKnowingItemListViewItemComponent",
+          "role": "item",
+          "selector": "doc-worth-knowing-item-list-view-item",
+          "classSource": "@Component({\n  selector: 'doc-worth-knowing-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium\">{{ title }}</span>\n        <span class=\"item-details\">{{ detail }}</span>\n      </div>\n      @if (buttonText) {\n        <div class=\"item-right\">\n          <dbx-anchor [anchor]=\"anchor\">\n            <dbx-button [stroked]=\"true\" class=\"dbx-nowrap\" [text]=\"buttonText\"></dbx-button>\n          </dbx-anchor>\n        </div>\n      }\n    </div>\n  `,\n  imports: [MatButtonModule, DbxColorDirective, DbxIconTileComponent, DbxButtonComponent, DbxAnchorComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocWorthKnowingItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<WorthKnowingItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get detail(): string {\n    return this.itemValue.detail;\n  }\n\n  get buttonText(): Maybe<string> {\n    return this.itemValue.buttonText;\n  }\n\n  get anchor(): Maybe<ClickableAnchor> {\n    return this.itemValue.anchor;\n  }\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "WorthKnowingItemValue",
+          "role": "data",
+          "classSource": "export interface WorthKnowingItemValue {\n  readonly key: string;\n  readonly icon: string;\n  readonly title: string;\n  readonly detail: string;\n  /**\n   * Optional trailing action button label. Items without a label render with no trailing action.\n   */\n  readonly buttonText?: Maybe<string>;\n  readonly anchor?: Maybe<ClickableAnchor>;\n}"
+        }
+      ]
+    },
     {
       "slug": "card-feedback-selection",
       "category": "card",
@@ -83,6 +194,28 @@
       "snippet": "<mat-card appearance=\"filled\">\n  <mat-card-content class=\"dbx-p4 doc-hero-card-content\" fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"var(--dbx-padding-3)\">\n    <div class=\"dbx-flex-fill doc-hero-card-main\">\n      <div class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-pb1\">YOUR ONBOARDING PROGRESS</div>\n      <h3 class=\"dbx-text-title-large dbx-mb1\">{{ remaining }} requirements to go</h3>\n      <p class=\"dbx-mb3\">\n        <strong>{{ completed }} of {{ total }}</strong>\n        requirements completed\n      </p>\n      <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\" class=\"dbx-mb3\"></mat-progress-bar>\n      <button mat-stroked-button class=\"doc-hero-action\">\n        View all requirements\n        <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n      </button>\n    </div>\n    <div class=\"dbx-text-headline-large\" aria-hidden=\"true\">{{ progressPercent }}%</div>\n  </mat-card-content>\n</mat-card>",
       "uses": []
     },
+    {
+      "slug": "card-horizontal-week",
+      "category": "card",
+      "summary": "Horizontally scrolling `.dbx-card-horizontal` row of fixed-width, equal-height outlined mat-cards — full-bleed `[dbxColor]` status header bars, an absolutely positioned `.dbx-card-horizontal-tab` \"TODAY\" chip (with scroll-clip-safe headroom), `.dbx-card-horizontal-detail` icon rows, `.dbx-card-horizontal-mini` recommendation rows, and bottom-anchored full-width footer CTAs — demonstrated as a week view of job day cards.",
+      "header": "Horizontal Card Row",
+      "className": "DocHorizontalCardExampleComponent",
+      "selector": "doc-horizontal-card-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "Fixed-width, equal-height outlined mat-cards in a .dbx-card-horizontal row that scrolls on the x-axis, with full-bleed [dbxColor] status headers and bottom-anchored footer CTAs.",
+      "relatedSlugs": [
+        "mat-card",
+        "dbx-card-select",
+        "dbx-chip",
+        "dbx-icon-tile",
+        "dbx-color",
+        "dbx-text-color"
+      ],
+      "info": "<p>\n  A\n  <code>.dbx-card-horizontal</code>\n  wrapper lays out\n  <code>&lt;mat-card appearance=\"outlined\" class=\"dbx-card-horizontal-item\"&gt;</code>\n  cards as a fixed-width (\n  <code>--dbx-card-horizontal-item-width</code>\n  , 300px default), equal-height row that scrolls horizontally instead of wrapping. Each card's CTA lives in\n  <code>&lt;mat-card-footer&gt;</code>\n  , which the item utility anchors to the card bottom with\n  <code>margin-top: auto</code>\n  — so the buttons stay on one line even though the cards carry different amounts of content.\n</p>\n<p>\n  The status bar is a plain\n  <code>&lt;div class=\"dbx-card-horizontal-header\"&gt;</code>\n  placed before\n  <code>&lt;mat-card-content&gt;</code>\n  : mat-card children stack in a padding-less flex column, so the bar spans the card edge-to-edge with no negative margins, and its top corners inherit the card radius. It is painted entirely by\n  <code>[dbxColor]</code>\n  — solid\n  <code>'primary'</code>\n  for ASSIGNED (the check icon follows\n  <code>currentColor</code>\n  ), tonal\n  <code>'notice'</code>\n  +\n  <code>[dbxColorTone]</code>\n  for OPEN, whose\n  <code>.dbx-card-horizontal-header-dot</code>\n  also rides\n  <code>currentColor</code>\n  .\n</p>\n<p>\n  The \"TODAY\" tab is a\n  <code>&lt;dbx-chip [tone]=\"100\" [small]=\"true\"&gt;</code>\n  with the\n  <code>.dbx-card-horizontal-tab</code>\n  utility, absolutely positioned to poke above the card by\n  <code>--dbx-card-horizontal-tab-overlap</code>\n  . Because the row's\n  <code>overflow-x: auto</code>\n  scroll-clips anything outside its padding box, the row reserves that same overlap as top padding — one token drives both, so the tab can never be clipped. The today card also toggles\n  <code>.dbx-card-horizontal-item-highlight</code>\n  , repainting the outlined-card border via\n  <code>--mat-outlined-card-outline-color</code>\n  (the same pattern as\n  <code>.dbx-card-select</code>\n  ).\n</p>\n<p>\n  Body content is composed from existing utilities:\n  <code>.dbx-card-horizontal-detail</code>\n  icon rows,\n  <code>.dbx-card-horizontal-divider</code>\n  hairlines,\n  <code>.dbx-card-horizontal-mini</code>\n  recommendation rows, eyebrow labels from\n  <code>.dbx-text-label-small .dbx-uppercase .dbx-tracked-wide</code>\n  , themed text from\n  <code>[dbxTextColor]</code>\n  , and a\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  +\n  <code>&lt;dbx-chip&gt;</code>\n  empty state.\n</p>",
+      "snippet": "<div class=\"dbx-card-horizontal\">\n  @for (day of days; track day.dateLabel) {\n    <mat-card appearance=\"outlined\" class=\"dbx-card-horizontal-item\" [class.dbx-card-horizontal-item-highlight]=\"day.today\">\n      @if (day.today) {\n        <dbx-chip class=\"dbx-card-horizontal-tab\" color=\"primary\" [tone]=\"100\" [small]=\"true\">TODAY</dbx-chip>\n      }\n      @if (day.type === 'assigned') {\n        <div class=\"dbx-card-horizontal-header\" dbxColor=\"primary\">\n          <mat-icon inline>check_circle</mat-icon>\n          <span class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide\">Assigned</span>\n        </div>\n      } @else {\n        <div class=\"dbx-card-horizontal-header\" dbxColor=\"notice\" [dbxColorTone]=\"18\">\n          <span class=\"dbx-card-horizontal-header-dot\"></span>\n          <span class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide\">Open</span>\n        </div>\n      }\n      <mat-card-content>\n        <div class=\"dbx-text-label-small dbx-uppercase dbx-tracked-wide dbx-hint\">{{ day.dayLabel }}</div>\n        <h3 class=\"dbx-text-headline-small dbx-m0\" [dbxTextColor]=\"day.type === 'assigned' ? 'primary' : undefined\">{{ day.dateLabel }}</h3>\n        <div class=\"dbx-card-horizontal-divider\"></div>\n        @switch (day.type) {\n          @case ('assigned') {\n            <div class=\"dbx-text-title-medium dbx-mb1\">{{ day.jobTitle }}</div>\n            <div class=\"dbx-card-horizontal-detail\">\n              <mat-icon>home</mat-icon>\n              <span>{{ day.locationName }}</span>\n            </div>\n            <div class=\"dbx-card-horizontal-detail\">\n              <mat-icon>calendar_today</mat-icon>\n              <span>{{ day.dateRange }}</span>\n            </div>\n            <div class=\"dbx-card-horizontal-detail\">\n              <mat-icon>schedule</mat-icon>\n              <span>{{ day.timeRange }}</span>\n            </div>\n            <div class=\"dbx-card-horizontal-divider\"></div>\n            <div class=\"dbx-card-horizontal-detail\">\n              <span class=\"dbx-text-label-small dbx-uppercase dbx-tracked-wide\">Pay</span>\n              <span class=\"dbx-spacer\"></span>\n              <span class=\"dbx-text-title-medium\" dbxTextColor=\"primary\">{{ day.pay }}</span>\n            </div>\n          }\n          @case ('open') {\n            <div class=\"dbx-text-title-small dbx-text-center dbx-mb2\">Lorem ipsum dolor</div>\n            @for (job of day.recommendations; track job.name) {\n              <div class=\"dbx-card-horizontal-mini\">\n                <div>\n                  <div class=\"dbx-text-label-large\">{{ job.name }}</div>\n                  <div class=\"dbx-text-label-small dbx-hint\">{{ job.detail }}</div>\n                </div>\n                <div class=\"dbx-text-title-medium\" dbxTextColor=\"primary\">{{ job.pay }}</div>\n              </div>\n            }\n            <div class=\"dbx-text-center dbx-mt2\">\n              <button mat-button (click)=\"notify(day.moreJobsLabel)\">\n                {{ day.moreJobsLabel }}\n                <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n              </button>\n            </div>\n          }\n          @case ('empty') {\n            <div class=\"dbx-flex-column dbx-flex-center dbx-text-center\">\n              <dbx-icon-tile class=\"dbx-mb2\" icon=\"search\" [round]=\"true\" dbxColor=\"notice\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n              <div class=\"dbx-text-title-medium\">{{ day.title }}</div>\n              <div class=\"dbx-hint dbx-mb2\">{{ day.hint }}</div>\n              <dbx-chip color=\"primary\" [small]=\"true\">{{ day.chipLabel }}</dbx-chip>\n            </div>\n          }\n        }\n      </mat-card-content>\n      <mat-card-footer>\n        @switch (day.type) {\n          @case ('assigned') {\n            <button mat-stroked-button (click)=\"notify('Lorem ipsum')\">\n              Lorem ipsum\n              <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n            </button>\n          }\n          @case ('open') {\n            <button mat-flat-button (click)=\"notify('Dolor sit amet')\">\n              Dolor sit amet\n              <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n            </button>\n          }\n          @case ('empty') {\n            <button mat-flat-button (click)=\"notify('Consectetur elit')\">\n              Consectetur elit\n              <mat-icon iconPositionEnd>arrow_forward</mat-icon>\n            </button>\n          }\n        }\n      </mat-card-footer>\n    </mat-card>\n  }\n</div>",
+      "uses": []
+    },
     {
       "slug": "list-anchor-button",
       "category": "list",
@@ -122,7 +255,7 @@
           "className": "DocAnchorButtonItemListViewItemComponent",
           "role": "item",
           "selector": "doc-anchor-button-item-list-view-item",
-          "classSource": "@Component({\n  selector: 'doc-anchor-button-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <dbx-anchor [anchor]=\"anchor\">\n          <button mat-flat-button>{{ buttonText }}</button>\n        </dbx-anchor>\n      </div>\n    </div>\n  `,\n  imports: [MatButtonModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent, DbxAnchorComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocAnchorButtonItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<AnchorButtonItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get buttonText(): string {\n    return this.itemValue.buttonText;\n  }\n\n  get anchor(): ClickableAnchor {\n    return this.itemValue.anchor;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
+          "classSource": "@Component({\n  selector: 'doc-anchor-button-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <dbx-anchor [anchor]=\"anchor\">\n          <button mat-flat-button>{{ buttonText }}</button>\n        </dbx-anchor>\n      </div>\n    </div>\n  `,\n  imports: [MatButtonModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent, DbxAnchorComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocAnchorButtonItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<AnchorButtonItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get buttonText(): string {\n    return this.itemValue.buttonText;\n  }\n\n  get anchor(): ClickableAnchor {\n    return this.itemValue.anchor;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
         },
         {
           "kind": "interface",
@@ -172,7 +305,7 @@
           "className": "DocAnchorRowItemListViewItemComponent",
           "role": "item",
           "selector": "doc-anchor-row-item-list-view-item",
-          "classSource": "@Component({\n  selector: 'doc-anchor-row-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n    </div>\n  `,\n  imports: [MatIconModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocAnchorRowItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<AnchorRowItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
+          "classSource": "@Component({\n  selector: 'doc-anchor-row-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n    </div>\n  `,\n  imports: [MatIconModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocAnchorRowItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<AnchorRowItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
         },
         {
           "kind": "interface",
@@ -220,7 +353,7 @@
           "className": "DocProgressItemListViewItemComponent",
           "role": "item",
           "selector": "doc-progress-item-list-view-item",
-          "classSource": "@Component({\n  selector: 'doc-progress-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon doc-progress-item\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <button mat-flat-button>View requirements</button>\n      </div>\n    </div>\n  `,\n  imports: [MatButtonModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocProgressItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<ProgressItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
+          "classSource": "@Component({\n  selector: 'doc-progress-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-item-padded-thick dbx-list-two-line-item dbx-list-two-line-item-with-icon doc-progress-item\">\n      <dbx-icon-tile class=\"item-icon\" [icon]=\"icon\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-left\">\n        <span class=\"dbx-text-title-medium dbx-pb1\">{{ title }}</span>\n        <span class=\"item-details dbx-pb2\">{{ progress }} of {{ total }} complete</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"progressPercent\"></mat-progress-bar>\n      </div>\n      <div class=\"item-right\">\n        <button mat-flat-button>View requirements</button>\n      </div>\n    </div>\n  `,\n  imports: [MatButtonModule, MatProgressBar, DbxColorDirective, DbxIconTileComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DocProgressItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<ProgressItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get progress(): number {\n    return this.itemValue.progress;\n  }\n\n  get total(): number {\n    return this.itemValue.total;\n  }\n\n  get progressPercent(): number {\n    return this.total > 0 ? Math.min(100, Math.round((this.progress / this.total) * 100)) : 0;\n  }\n}"
         },
         {
           "kind": "interface",
@@ -295,7 +428,7 @@
         "dbx-button"
       ],
       "info": "<p>\n  Reimplements the \"you're already in a chat\" / \"your chat is wrapping up\" status banner from a downstream support page using stock Material card slots plus dbx-web color theming. The host is\n  <code>&lt;mat-card class=\"dbx-card-banner\" appearance=\"outlined\" [dbxColor]=\"view.color\" [dbxColorTone]=\"18\"&gt;</code>\n  . The dbx-web card stylesheet contributes two pieces here: a generic\n  <code>mat-card.dbx-color</code>\n  rule that re-emits the dbx-color background paint at higher specificity than MDC's\n  <code>.mat-mdc-card</code>\n  background-color (so the tonal wash actually shows through every appearance variant), and the\n  <code>.dbx-card-banner</code>\n  utility that centers an\n  <code>&lt;mat-icon mat-card-avatar&gt;</code>\n  and turns\n  <code>&lt;mat-card-footer&gt;</code>\n  into a wrapping action row.\n</p>\n<p>\n  <code>&lt;mat-card-header&gt;</code>\n  is dropped on purpose — its default padding made the banner feel tall. Instead a\n  <code>&lt;dbx-icon-tile&gt;</code>\n  +\n  <code>&lt;mat-card-title&gt;</code>\n  row lives inside\n  <code>&lt;mat-card-content&gt;</code>\n  via a\n  <code>.dbx-card-banner-header</code>\n  child (centered flex row, gap from\n  <code>--dbx-padding-3</code>\n  ), the body paragraph follows directly underneath, and the action buttons live in\n  <code>&lt;mat-card-footer&gt;</code>\n  . The icon tile passes\n  <code>[dbxColor]=\"view.color\"</code>\n  with\n  <code>[round]=\"true\"</code>\n  so it renders as a solid circular avatar in the vibrant theme color, popping out of the tonal banner without any per-component CSS. The\n  <code>.dbx-card-banner</code>\n  utility supplies the header-row flex and the footer wrap-row spacing + padding. The toggle controls at the top reuse the existing\n  <code>.dbx-button-wrap-group</code>\n  utility.\n</p>\n<p>\n  The \"Open chat\" action passes\n  <code>[color]=\"view.color\"</code>\n  so its label tracks the banner's vibrant color while keeping a transparent background that lets the tonal wash show through; \"Dismiss\" stays as a basic\n  <code>&lt;dbx-button&gt;</code>\n  . Action clicks pop a\n  <code>MatSnackBar</code>\n  so the demo proves the wiring without depending on routing or chat infrastructure.\n</p>\n<p>\n  The\n  <code>kindSignal</code>\n  swaps the entire view between the two presets without re-templating, modelling the real-world pattern where the banner is driven by a derived store selector.\n</p>",
-      "snippet": "<div class=\"dbx-button-wrap-group dbx-mb3\">\n  <button mat-stroked-button (click)=\"setKind('activeChat')\" [disabled]=\"kindSignal() === 'activeChat'\">Show active chat</button>\n  <button mat-stroked-button (click)=\"setKind('endedChat')\" [disabled]=\"kindSignal() === 'endedChat'\">Show ending chat</button>\n</div>\n@if (viewSignal(); as view) {\n  <mat-card class=\"dbx-card-banner\" appearance=\"outlined\" role=\"status\" [dbxColor]=\"view.color\" [dbxColorTone]=\"18\">\n    <mat-card-content>\n      <div class=\"dbx-card-banner-header\">\n        <dbx-icon-tile [icon]=\"view.icon\" [round]=\"true\" [dbxColor]=\"view.color\"></dbx-icon-tile>\n        <mat-card-title>{{ view.title }}</mat-card-title>\n      </div>\n      <p>{{ view.text }}</p>\n    </mat-card-content>\n    <mat-card-footer>\n      <dbx-button [color]=\"view.color\" text=\"Open chat\" icon=\"chat_bubble\" (buttonClick)=\"resumeChat()\"></dbx-button>\n      <dbx-button text=\"Dismiss\" (buttonClick)=\"dismissBanner()\"></dbx-button>\n    </mat-card-footer>\n  </mat-card>\n}",
+      "snippet": "<div class=\"dbx-button-wrap-group dbx-mb3\">\n  <button mat-stroked-button (click)=\"setKind('activeChat')\" [disabled]=\"kindSignal() === 'activeChat'\">Show active chat</button>\n  <button mat-stroked-button (click)=\"setKind('endedChat')\" [disabled]=\"kindSignal() === 'endedChat'\">Show ending chat</button>\n</div>\n@if (viewSignal(); as view) {\n  <mat-card [dbxColor]=\"view.color\" [dbxColorTone]=\"18\" class=\"dbx-card-banner\" appearance=\"outlined\" role=\"status\">\n    <mat-card-content>\n      <div class=\"dbx-card-banner-header\">\n        <dbx-icon-tile [icon]=\"view.icon\" [round]=\"true\"></dbx-icon-tile>\n        <mat-card-title>{{ view.title }}</mat-card-title>\n      </div>\n      <p>{{ view.text }}</p>\n    </mat-card-content>\n    <mat-card-footer>\n      <dbx-button text=\"Open chat\" icon=\"chat_bubble\" (buttonClick)=\"resumeChat()\"></dbx-button>\n      <dbx-button text=\"Dismiss\" (buttonClick)=\"dismissBanner()\"></dbx-button>\n    </mat-card-footer>\n  </mat-card>\n}",
       "uses": []
     },
     {
@@ -318,7 +451,7 @@
         "dbx-link",
         "dbx-link-hover"
       ],
-      "info": "<p>\n  Composes a marketing-style support page out of Angular Material cards plus dbx-web's\n  <code>&lt;dbx-button&gt;</code>\n  ,\n  <code>&lt;dbx-anchor&gt;</code>\n  , and\n  <code>&lt;dbx-icon-tile&gt;</code>\n  : an outlined hero\n  <code>&lt;mat-card&gt;</code>\n  for the search/CTA row and a responsive grid of outlined topic\n  <code>&lt;mat-card&gt;</code>\n  boxes whose rows are individual\n  <code>&lt;dbx-anchor [anchor]&gt;</code>\n  click targets.\n</p>\n<p>\n  The topic grid uses Angular Flex Layout's CSS-Grid directives —\n  <code>gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\"</code>\n  +\n  <code>gdGap</code>\n  — so the cards auto-collapse 3 → 2 → 1 columns as the viewport narrows, with no breakpoint media queries or wrapping\n  <code>fxFlex</code>\n  shells needed. The hero CTA + search row uses\n  <code>fxLayout=\"row\"</code>\n  with\n  <code>fxLayout.lt-md=\"column\"</code>\n  so it stacks below the tablet breakpoint. The CTA itself composes the\n  <code>.dbx-grow-button</code>\n  +\n  <code>.dbx-button-big</code>\n  utilities (full-width, taller mat-button) instead of hand-rolled\n  <code>::ng-deep</code>\n  width / height overrides.\n</p>\n<p>\n  Topic-card avatars are\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  with\n  <code>[dbxColor]=\"'primary'\"</code>\n  +\n  <code>[dbxColorTone]=\"18\"</code>\n  for the tonal swatch. Each card body is a plain\n  <code>&lt;ul&gt;</code>\n  /\n  <code>&lt;li&gt;</code>\n  so the browser's default disc marker supplies the bullet, and topic links use\n  <code>[dbxTextColor]=\"'primary'\"</code>\n  for the link color plus a\n  <code>&lt;span class=\"dbx-link-hover\"&gt;</code>\n  wrapper around the projected label for the hover-only-underline affordance. The\n  <code>.dbx-link-hover</code>\n  /\n  <code>.dbx-link</code>\n  utilities pair with\n  <code>.dbx-u</code>\n  —\n  <code>.dbx-link</code>\n  is always underlined,\n  <code>.dbx-link-hover</code>\n  underlines on hover, both keep a pointer cursor. The class lives on the projected\n  <code>&lt;span&gt;</code>\n  rather than the\n  <code>&lt;dbx-anchor&gt;</code>\n  host because\n  <code>dbx-anchor</code>\n  's internal\n  <code>&lt;a class=\"dbx-anchor-a\"&gt;</code>\n  bakes in\n  <code>text-decoration: none</code>\n  and would strip a host-level\n  <code>.dbx-link</code>\n  .\n</p>\n<p>\n  Each topic row supplies a\n  <code>ClickableAnchor</code>\n  with an\n  <code>onClick</code>\n  callback to\n  <code>dbx-anchor</code>\n  ; the callback opens a\n  <code>MatSnackBar</code>\n  with a \"Dismiss\" action so every link demonstrably triggers a button-bearing popup. Swap the\n  <code>onClick</code>\n  for a\n  <code>ref</code>\n  /\n  <code>url</code>\n  to route or open externally instead.\n</p>",
+      "info": "<p>\n  Composes a marketing-style support page out of Angular Material cards plus dbx-web's\n  <code>&lt;dbx-button&gt;</code>\n  ,\n  <code>&lt;dbx-anchor&gt;</code>\n  , and\n  <code>&lt;dbx-icon-tile&gt;</code>\n  : an outlined hero\n  <code>&lt;mat-card&gt;</code>\n  for the search/CTA row and a responsive grid of outlined topic\n  <code>&lt;mat-card&gt;</code>\n  boxes whose rows are individual\n  <code>&lt;dbx-anchor [anchor]&gt;</code>\n  click targets.\n</p>\n<p>\n  The topic grid uses Angular Flex Layout's CSS-Grid directives —\n  <code>gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\"</code>\n  +\n  <code>gdGap</code>\n  — so the cards auto-collapse 3 → 2 → 1 columns as the viewport narrows, with no breakpoint media queries or wrapping\n  <code>fxFlex</code>\n  shells needed. The hero CTA + search row uses\n  <code>fxLayout=\"row\"</code>\n  with\n  <code>fxLayout.lt-md=\"column\"</code>\n  so it stacks below the tablet breakpoint. The CTA itself composes the\n  <code>.dbx-grow-button</code>\n  +\n  <code>.dbx-button-big</code>\n  utilities (full-width, taller mat-button) instead of hand-rolled\n  <code>::ng-deep</code>\n  width / height overrides.\n</p>\n<p>\n  Topic-card avatars are\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  with\n  <code>dbxColor=\"primary\"</code>\n  +\n  <code>[dbxColorTone]=\"18\"</code>\n  for the tonal swatch. Each card body is a plain\n  <code>&lt;ul&gt;</code>\n  /\n  <code>&lt;li&gt;</code>\n  so the browser's default disc marker supplies the bullet, and topic links use\n  <code>[dbxTextColor]=\"'primary'\"</code>\n  for the link color plus a\n  <code>&lt;span class=\"dbx-link-hover\"&gt;</code>\n  wrapper around the projected label for the hover-only-underline affordance. The\n  <code>.dbx-link-hover</code>\n  /\n  <code>.dbx-link</code>\n  utilities pair with\n  <code>.dbx-u</code>\n  —\n  <code>.dbx-link</code>\n  is always underlined,\n  <code>.dbx-link-hover</code>\n  underlines on hover, both keep a pointer cursor. The class lives on the projected\n  <code>&lt;span&gt;</code>\n  rather than the\n  <code>&lt;dbx-anchor&gt;</code>\n  host because\n  <code>dbx-anchor</code>\n  's internal\n  <code>&lt;a class=\"dbx-anchor-a\"&gt;</code>\n  bakes in\n  <code>text-decoration: none</code>\n  and would strip a host-level\n  <code>.dbx-link</code>\n  .\n</p>\n<p>\n  Each topic row supplies a\n  <code>ClickableAnchor</code>\n  with an\n  <code>onClick</code>\n  callback to\n  <code>dbx-anchor</code>\n  ; the callback opens a\n  <code>MatSnackBar</code>\n  with a \"Dismiss\" action so every link demonstrably triggers a button-bearing popup. Swap the\n  <code>onClick</code>\n  for a\n  <code>ref</code>\n  /\n  <code>url</code>\n  to route or open externally instead.\n</p>",
       "snippet": "<div class=\"dbx-p4 doc-support-page\">\n  <h1 class=\"dbx-text-headline-large dbx-mb1\">Lorem Ipsum Support</h1>\n  <p class=\"dbx-text-body-large dbx-mb4\">Dolor sit amet — we're here to help you succeed!</p>\n\n  <mat-card appearance=\"outlined\" class=\"dbx-mb4\">\n    <mat-card-content>\n      <h3 class=\"dbx-text-title-medium dbx-mb3\">Need help? We're here.</h3>\n      <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start stretch\">\n        <dbx-button class=\"dbx-grow-button dbx-button-form-field-height\" fxFlex=\"1 1 50%\" flat icon=\"help_outline\" text=\"Chat with Support\" customButtonColor=\"var(--mat-sys-inverse-surface)\" customTextColor=\"var(--mat-sys-inverse-on-surface)\" (buttonClick)=\"onChatClick()\"></dbx-button>\n        <mat-form-field class=\"dbx-p0\" appearance=\"outline\" fxFlex=\"1 1 50%\" subscriptSizing=\"dynamic\">\n          <input matInput placeholder=\"Search for a topic or question…\" />\n        </mat-form-field>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\" gdGap=\"var(--dbx-padding-5)\">\n    @for (group of topics; track group.title) {\n      <mat-card appearance=\"outlined\">\n        <mat-card-content>\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"var(--dbx-padding-2)\" class=\"dbx-mb3\">\n            <dbx-icon-tile class=\"doc-support-topic-avatar\" [icon]=\"group.icon\" [round]=\"true\"></dbx-icon-tile>\n            <span class=\"dbx-text-title-medium\">{{ group.title }}</span>\n          </div>\n          <ul class=\"doc-support-topic-links\">\n            @for (link of group.links; track link.label) {\n              <li class=\"dbx-pb2\">\n                <dbx-anchor [dbxTextColor]=\"'primary'\" [anchor]=\"anchorFor(link)\">\n                  <span class=\"dbx-link-hover\">{{ link.label }}</span>\n                </dbx-anchor>\n              </li>\n            }\n          </ul>\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n</div>",
       "uses": []
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "13.17.0",
+  "version": "13.18.0",
   "type": "module",
   "bin": {
     "dbx-components-mcp": "dbx-components-mcp.js"
@@ -11,7 +11,7 @@
     "ts-morph": "^21.0.0"
   },
   "peerDependencies": {
-    "@dereekb/dbx-cli": "13.17.0",
-    "@dereekb/util": "13.17.0"
+    "@dereekb/dbx-cli": "13.18.0",
+    "@dereekb/util": "13.18.0"
   }
 }