@dereekb/dbx-components-mcp 13.13.0 → 13.15.0

package/generated/dereekb-dbx-web.css-utilities.mcp.generated.json

@@ -403,7 +403,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 144,
+      "line": 177,
       "declarations": [
         {
           "property": "display",
@@ -470,6 +470,28 @@
         "--mat-button-tonal-container-height"
       ]
     },
+    {
+      "slug": "button-icon-tile",
+      "selector": ".dbx-button-icon-tile",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/button/_button.scss",
+      "line": 106,
+      "declarations": [],
+      "role": "layout",
+      "intent": "turn a `<dbx-button>` that wraps a `<dbx-icon-tile>` into a clickable tile — strips the button's padding/min-width so it hugs the tile, adopts the tile's `--dbx-icon-tile-border-radius`, and lifts a neutralized (`--mat-sys-on-surface`) state layer above the tile so hover/press/ripple reads on every color variant (including opaque full-color and primary-tonal tiles)",
+      "seeAlso": [
+        "icon-tile",
+        "button-neutral-interaction-color"
+      ],
+      "antiUse": "don't apply to a `<dbx-button>` with no inner `<dbx-icon-tile>` — there is no tile surface to shape the button to or to overlay",
+      "tokensRead": [
+        "--dbx-icon-tile-border-radius",
+        "--mat-button-text-container-shape",
+        "--mat-sys-corner-full",
+        "--mat-sys-on-surface"
+      ]
+    },
     {
       "slug": "button-neutral-interaction-color",
       "selector": ".dbx-button-neutral-interaction-color",
@@ -490,7 +512,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 132,
+      "line": 165,
       "declarations": [
         {
           "property": "padding-right",
@@ -553,6 +575,50 @@
         "--dbx-padding-3"
       ]
     },
+    {
+      "slug": "card-select",
+      "selector": ".dbx-card-select",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/card/_card.scss",
+      "line": 48,
+      "declarations": [
+        {
+          "property": "position",
+          "value": "relative"
+        },
+        {
+          "property": "cursor",
+          "value": "pointer"
+        },
+        {
+          "property": "text-align",
+          "value": "center"
+        },
+        {
+          "property": "height",
+          "value": "100%"
+        }
+      ],
+      "role": "layout",
+      "intent": "selectable \"choice\" `<mat-card appearance=\"outlined\">` whose content is centered in a column (large `<mat-icon>`, title, subtitle). Pair with `[dbxColor]` + `[dbxColorTone]` and toggle the `.dbx-card-selected` modifier to paint the selected border to match the tonal wash. Put the large glyph in a `.dbx-card-select-icon` `<mat-icon>` and an optional round selected checkmark in a `.dbx-card-select-check` `<dbx-icon-tile [round]>` (absolutely positioned top-right). Fills its parent's height (`height: 100%`) so a row of cards laid out with `dbxFlexGroup` + `[dbxFlexSize]` stays equal-height as it shrinks and wraps.",
+      "seeAlso": [
+        "color",
+        "color-tonal",
+        "icon-tile",
+        "card-banner",
+        "flex-group",
+        "flex-size"
+      ],
+      "tokensRead": [
+        "--dbx-bg-color-current",
+        "--dbx-card-select-icon-size",
+        "--dbx-padding-2",
+        "--dbx-padding-3",
+        "--mat-sys-on-surface",
+        "--mat-sys-surface"
+      ]
+    },
     {
       "slug": "chip",
       "selector": ".dbx-chip",
@@ -1315,7 +1381,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 120,
+      "line": 153,
       "declarations": [
         {
           "property": "width",

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

@@ -41,6 +41,29 @@
         }
       ]
     },
+    {
+      "slug": "card-feedback-selection",
+      "category": "card",
+      "summary": "Single-select row of centered `.dbx-card-select` choice cards laid out with `dbxFlexGroup` + equal-width `[dbxFlexSize]` columns (equal-size as the screen shrinks, stacking below the `small` breakpoint). The selected `<mat-card appearance=\"outlined\">` gets a tonal `[dbxColor]` wash, a matching themed border, and a round `<dbx-icon-tile [round]>` checkmark badge in the top-right; unselected cards stay neutral. Large glyphs are plain `<mat-icon>` that inherit the card's flipped text color.",
+      "header": "Feedback Selection Cards",
+      "className": "DocFeedbackSelectionCardExampleComponent",
+      "selector": "doc-feedback-selection-card-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "Single-select row of equal-size centered choice cards (dbxFlexGroup) — the selected card gets a tonal [dbxColor] wash, a matching themed border, and a round checkmark badge.",
+      "relatedSlugs": [
+        "mat-card",
+        "dbx-card-select",
+        "dbx-icon-tile",
+        "dbx-color",
+        "dbx-chip",
+        "dbx-flex-group",
+        "dbx-flex-size"
+      ],
+      "info": "<p>\n  A \"selection\" / \"choice\" card lets the user pick exactly one option from a small set, with the chosen card emphasised. Each option is a stock\n  <code>&lt;mat-card appearance=\"outlined\"&gt;</code>\n  carrying the\n  <code>.dbx-card-select</code>\n  utility, which centers the card body in a column (a large\n  <code>&lt;mat-icon&gt;</code>\n  , a title, and a subtitle) and exposes a top-right slot for a checkmark badge via a\n  <code>.dbx-card-select-check</code>\n  child.\n</p>\n<p>\n  Selection is a single-select\n  <code>signal</code>\n  . The selected card receives\n  <code>[dbxColor]</code>\n  +\n  <code>[dbxColorTone]=\"16\"</code>\n  , so the existing\n  <code>mat-card.dbx-color</code>\n  /\n  <code>.dbx-color-tonal</code>\n  rules paint the tonal background wash and flip the card text to the vibrant theme color — which the centered\n  <code>&lt;mat-icon&gt;</code>\n  (rendered in\n  <code>currentColor</code>\n  ) and the title inherit for free. The\n  <code>.dbx-card-selected</code>\n  modifier repaints the outlined-card border to that same\n  <code>--dbx-bg-color-current</code>\n  value, so the border matches the wash without any hard-coded colour.\n</p>\n<p>\n  The round checkmark is a\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  carrying its own\n  <code>[dbxColor]</code>\n  (no tone), so it renders as a solid vibrant circle with a contrast-colour check. The unselected card omits\n  <code>[dbxColor]</code>\n  entirely, so it keeps the neutral outline + on-surface text. Each choice carries its own semantic\n  <code>color</code>\n  (a positive\n  <code>'primary'</code>\n  , a destructive\n  <code>'warn'</code>\n  , and a\n  <code>'notice'</code>\n  review), so the emphasis colour follows the meaning of the option.\n</p>\n<p>\n  The options sit in a\n  <code>dbxFlexGroup</code>\n  row, each an equal-width\n  <code>[dbxFlexSize]=\"2\"</code>\n  column, so the cards stay the same size and shrink in unison as the viewport narrows — and\n  <code>.dbx-card-select</code>\n  fills its column height (\n  <code>height: 100%</code>\n  ) so they stay equal-height even if one subtitle wraps. Below the\n  <code>small</code>\n  breakpoint,\n  <code>[breakToColumn]</code>\n  stacks them into a single column.\n</p>",
+      "snippet": "<div class=\"dbx-flex-bar dbx-mb3\">\n  <span class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide dbx-icon-spacer\">Feedback</span>\n  <dbx-chip [small]=\"true\" color=\"notice\">Required</dbx-chip>\n</div>\n<div dbxFlexGroup breakpoint=\"small\" [breakToColumn]=\"true\">\n  @for (choice of choices; track choice.key) {\n    <div [dbxFlexSize]=\"2\">\n      <mat-card appearance=\"outlined\" class=\"dbx-card-select\" role=\"button\" [class.dbx-card-selected]=\"isSelected(choice.key)\" [attr.aria-pressed]=\"isSelected(choice.key)\" [dbxColor]=\"isSelected(choice.key) ? choice.color : null\" [dbxColorTone]=\"isSelected(choice.key) ? 16 : null\" (click)=\"select(choice.key)\">\n        <mat-card-content>\n          @if (isSelected(choice.key)) {\n            <dbx-icon-tile class=\"dbx-card-select-check\" icon=\"check\" [round]=\"true\" [dbxColor]=\"choice.color\"></dbx-icon-tile>\n          }\n          <mat-icon class=\"dbx-card-select-icon\">{{ choice.icon }}</mat-icon>\n          <div class=\"dbx-text-title-medium\">{{ choice.title }}</div>\n          <div class=\"dbx-note\">{{ choice.subtitle }}</div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  }\n</div>",
+      "uses": []
+    },
     {
       "slug": "card-hero-onboarding-progress",
       "category": "card",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "13.13.0",
+  "version": "13.15.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.13.0",
-    "@dereekb/util": "13.13.0"
+    "@dereekb/dbx-cli": "13.15.0",
+    "@dereekb/util": "13.15.0"
   }
 }