@dereekb/dbx-components-mcp 13.11.5 → 13.11.6

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

@@ -392,7 +392,7 @@
       "line": 17,
       "declarations": [],
       "role": "layout",
-      "intent": "enlarge the inner `mat-mdc-button` height to 46px (33% taller than default)",
+      "intent": "enlarge the inner `mat-mdc-button` height to 46px (33% taller than default) by setting Material's `--mat-button-*-container-height` tokens",
       "seeAlso": [
         "button-wide"
       ]
@@ -403,7 +403,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 130,
+      "line": 144,
       "declarations": [
         {
           "property": "display",
@@ -425,13 +425,58 @@
         "dbx-flex-column"
       ]
     },
+    {
+      "slug": "button-form-field-height",
+      "selector": ".dbx-button-form-field-height",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/button/_button.scss",
+      "line": 30,
+      "declarations": [
+        {
+          "property": "--mat-button-text-container-height",
+          "value": "var(--mat-form-field-container-height)"
+        },
+        {
+          "property": "--mat-button-filled-container-height",
+          "value": "var(--mat-form-field-container-height)"
+        },
+        {
+          "property": "--mat-button-protected-container-height",
+          "value": "var(--mat-form-field-container-height)"
+        },
+        {
+          "property": "--mat-button-outlined-container-height",
+          "value": "var(--mat-form-field-container-height)"
+        },
+        {
+          "property": "--mat-button-tonal-container-height",
+          "value": "var(--mat-form-field-container-height)"
+        }
+      ],
+      "role": "layout",
+      "intent": "match the inner `mat-mdc-button` height to `--mat-form-field-container-height` so a button aligns vertically with an adjacent form field",
+      "seeAlso": [
+        "button-big"
+      ],
+      "tokensRead": [
+        "--mat-form-field-container-height"
+      ],
+      "tokensSet": [
+        "--mat-button-filled-container-height",
+        "--mat-button-outlined-container-height",
+        "--mat-button-protected-container-height",
+        "--mat-button-text-container-height",
+        "--mat-button-tonal-container-height"
+      ]
+    },
     {
       "slug": "button-neutral-interaction-color",
       "selector": ".dbx-button-neutral-interaction-color",
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 29,
+      "line": 43,
       "declarations": [],
       "role": "state",
       "intent": "neutralize Material's hover/pressed/focus/ripple state layer to `--mat-sys-on-surface` — use on buttons with a custom background where the primary-tinted state-layer would clash",
@@ -445,7 +490,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 118,
+      "line": 132,
       "declarations": [
         {
           "property": "padding-right",
@@ -465,7 +510,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 55,
+      "line": 69,
       "declarations": [],
       "role": "layout",
       "intent": "stretch the inner `.dbx-button` to a 120px minimum width (still capped by parent)",
@@ -479,7 +524,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 66,
+      "line": 80,
       "declarations": [],
       "role": "layout",
       "intent": "group of buttons that wrap onto multiple rows — adds 6px right + bottom spacing between `<dbx-button>` / `<dbx-anchor>` / `<button>` / `<dbx-icon-button>` siblings",
@@ -565,6 +610,26 @@
         "icon-spacer"
       ]
     },
+    {
+      "slug": "color-bg",
+      "selector": ".dbx-color-bg",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/style/_style.scss",
+      "line": 175,
+      "declarations": [],
+      "intent": "generic themed-background class — pair with `[dbxColor]=\"config\"` to drive `--dbx-bg-color-current` / `--dbx-color-current` from arbitrary CSS color values"
+    },
+    {
+      "slug": "color-text",
+      "selector": ".dbx-color-text",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/style/_style.scss",
+      "line": 182,
+      "declarations": [],
+      "intent": "generic themed-text class — pair with `[dbxTextColor]=\"config\"` to drive `--dbx-color-current` from an arbitrary CSS color value"
+    },
     {
       "slug": "color-tonal",
       "selector": ".dbx-color-tonal",
@@ -1158,7 +1223,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/button/_button.scss",
-      "line": 106,
+      "line": 120,
       "declarations": [
         {
           "property": "width",

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

@@ -98,7 +98,7 @@
         },
         {
           "name": "color",
-          "type": "Maybe<ThemePalette | DbxThemeColor>",
+          "type": "Maybe<ThemePalette | DbxColorInput>",
           "description": "",
           "required": false
         },
@@ -386,7 +386,7 @@
         },
         {
           "name": "color",
-          "type": "ThemePalette | DbxThemeColor",
+          "type": "ThemePalette | DbxColorInput",
           "description": "",
           "required": false,
           "default": "'primary'"
@@ -473,7 +473,7 @@
         },
         {
           "name": "color",
-          "type": "ThemePalette | DbxThemeColor",
+          "type": "ThemePalette | DbxColorInput",
           "description": "",
           "required": false,
           "default": "'primary'"
@@ -558,7 +558,7 @@
         },
         {
           "name": "color",
-          "type": "ThemePalette | DbxThemeColor",
+          "type": "ThemePalette | DbxColorInput",
           "description": "",
           "required": false,
           "default": "'primary'"
@@ -1012,7 +1012,7 @@
       "inputs": [
         {
           "name": "color",
-          "type": "Maybe<DbxBarColor>",
+          "type": "Maybe<DbxColorInput>",
           "description": "",
           "required": false
         }
@@ -1052,7 +1052,7 @@
         },
         {
           "name": "color",
-          "type": "Maybe<DbxBarColor>",
+          "type": "Maybe<DbxColorInput>",
           "description": "",
           "required": false
         }
@@ -2160,8 +2160,8 @@
         },
         {
           "name": "color",
-          "type": "Maybe<DbxThemeColor>",
-          "description": "Theme color applied to the chip background via {@link dbxColorBackground}.\n\nWhen {@link display} is also set, its color is used as a fallback.",
+          "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.",
           "required": false
         },
         {
@@ -2546,7 +2546,7 @@
       "inputs": [
         {
           "name": "color",
-          "type": "ThemePalette | DbxThemeColor",
+          "type": "ThemePalette | DbxColorInput",
           "description": "",
           "required": false,
           "default": "undefined"

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

@@ -5,6 +5,42 @@
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "generator": "@dereekb/dbx-components-mcp/scripts/generate-manifests.mjs",
   "entries": [
+    {
+      "slug": "action-form-with-secondary",
+      "category": "action",
+      "summary": "Form-driven primary action (dbxActionForm + Approve) plus a nested ng-container dbxAction with dbxActionValue for a void Deny / Cancel button.",
+      "header": "Form Action With Secondary Button",
+      "className": "DocActionFormWithSecondaryExampleComponent",
+      "selector": "doc-action-form-with-secondary-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "dbxActionForm + Approve, plus a nested dbxAction context for Deny.",
+      "relatedSlugs": [
+        "dbxActionForm",
+        "dbxActionValue",
+        "ng-container",
+        "dbxAction",
+        "dbxActionButton",
+        "dbxActionSnackbarError"
+      ],
+      "info": "<p>\n  The\n  <strong>outer</strong>\n  <code>[dbxAction]</code>\n  hosts the primary work. A child component carries the\n  <code>dbxActionForm</code>\n  directive so the form's value (and validity / modified state) drives the\n  <code>Approve</code>\n  button.\n</p>\n<p>\n  The\n  <strong>secondary</strong>\n  button (\n  <code>Deny</code>\n  ) lives inside a nested\n  <code>&lt;ng-container dbxAction&gt;</code>\n  . Angular DI looks up the nearest ancestor\n  <code>dbxAction</code>\n  for each\n  <code>dbxActionButton</code>\n  , so the inner button picks up the inner context, not the outer.\n  <code>dbxActionValue</code>\n  with no input supplies the empty payload that lets the button fire a void handler immediately.\n</p>\n<p>\n  Each context has its own\n  <code>dbxActionSnackbarError</code>\n  , so Approve / Deny feedback is independent.\n</p>",
+      "snippet": "<div dbxAction dbxActionSnackbarError [dbxActionHandler]=\"approveHandler\">\n  <doc-action-form-with-secondary-form dbxActionForm></doc-action-form-with-secondary-form>\n  <div class=\"dbx-pt3\">\n    <dbx-button dbxActionButton text=\"Approve\" [raised]=\"true\" color=\"primary\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-container dbxAction dbxActionSnackbarError dbxActionValue [dbxActionHandler]=\"denyHandler\">\n      <dbx-button dbxActionButton text=\"Deny\" [flat]=\"true\" color=\"warn\"></dbx-button>\n    </ng-container>\n  </div>\n</div>\n@let decision = lastDecisionSignal();\n@if (decision) {\n  <div class=\"dbx-pt3\">\n    @if (decision.outcome === 'approved') {\n      <span>\n        Approved with reason:\n        <strong>{{ decision.value.reason }}</strong>\n      </span>\n    } @else {\n      <span>Denied.</span>\n    }\n  </div>\n}",
+      "uses": [
+        {
+          "kind": "component",
+          "className": "DocActionFormWithSecondaryFormComponent",
+          "role": "form",
+          "selector": "doc-action-form-with-secondary-form",
+          "classSource": "@Component({\n  template: DBX_FORGE_FORM_COMPONENT_TEMPLATE,\n  selector: 'doc-action-form-with-secondary-form',\n  providers: dbxForgeFormComponentProviders(),\n  standalone: true,\n  imports: [DbxForgeFormComponentImportsModule],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DocActionFormWithSecondaryFormComponent extends AbstractSyncForgeFormDirective<DocActionFormWithSecondaryFormValue> {\n  readonly formConfig: FormConfig = {\n    fields: [\n      dbxForgeTextField({\n        key: 'reason',\n        label: 'Reason',\n        required: true,\n        description: 'The Approve handler receives this value via dbxActionForm. Type something to enable Approve.'\n      })\n    ]\n  } as FormConfig;\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "DocActionFormWithSecondaryFormValue",
+          "role": "formValue",
+          "classSource": "export interface DocActionFormWithSecondaryFormValue {\n  reason: string;\n}"
+        }
+      ]
+    },
     {
       "slug": "card-hero-onboarding-progress",
       "category": "card",
@@ -217,6 +253,28 @@
           "classSource": "export interface TwoLineItemValue {\n  readonly key: string;\n  readonly icon?: Maybe<string>;\n  readonly title: string;\n  readonly details?: Maybe<string>;\n  readonly footnote?: Maybe<string>;\n  readonly status?: Maybe<'active' | 'pending' | 'archived'>;\n}"
         }
       ]
+    },
+    {
+      "slug": "layout-support-page",
+      "category": "layout",
+      "summary": "Static support landing page — outlined hero card with a dbx-button CTA and search input plus a responsive 3-column grid of topic mat-cards whose rows are dbx-anchor onClick handlers that pop a snackbar.",
+      "header": "Support Landing Page Layout",
+      "className": "DocSupportPageLayoutExampleComponent",
+      "selector": "doc-support-page-layout-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "Page header + hero CTA/search card + responsive 3-column grid of topic cards.",
+      "relatedSlugs": [
+        "mat-card",
+        "dbx-button",
+        "dbx-anchor",
+        "dbx-icon-tile",
+        "mat-form-field",
+        "mat-snack-bar"
+      ],
+      "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  (the\n  <code>&lt;a&gt;</code>\n  inside\n  <code>dbx-anchor</code>\n  already inherits color and is text-decoration-none by default).\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)\">{{ link.label }}</dbx-anchor>\n              </li>\n            }\n          </ul>\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n</div>",
+      "uses": []
     }
   ]
 }

package/generated/rule-catalog.generated.json

@@ -473,6 +473,16 @@
     "whenItDoesNotApply": "When the rename was intentional (rare — usually a copy-paste).",
     "canonicalFix": "Update the getter body to return the matching identity constant."
   },
+  {
+    "code": "MODEL_FIELD_LONG_NAME_EQUALS_NAME",
+    "source": "dbx_model_validate",
+    "severity": "warning",
+    "title": "A persisted field's `@dbxModelVariable <longName>` tag value matches the field's short name verbatim, defeating the tag's purpose (the long name should be the field's unabbreviated camelCase variable name)",
+    "whatItFlags": "A persisted field's `@dbxModelVariable <longName>` tag value matches the field's short name verbatim, defeating the tag's purpose (the long name should be the field's unabbreviated camelCase variable name).",
+    "whenItApplies": "Every field on a `@dbxModel` interface where `@dbxModelVariable` is present and its value equals the field's name (e.g. field `h` tagged `@dbxModelVariable h`, field `ub` tagged `@dbxModelVariable ub`). The tag must always carry the unabbreviated form so the catalog and decoder surface a meaningful long name.",
+    "whenItDoesNotApply": "Fields whose name is already the unabbreviated camelCase form (e.g. `name`, `email`, `id`, `at`) — add those to `dbx-mcp.config.json` `modelValidate.ignoredFieldNames` to silence the warning workspace-wide.",
+    "canonicalFix": "Replace the tag value with the field's unabbreviated camelCase variable name (e.g. `@dbxModelVariable h` → `@dbxModelVariable hours`, `@dbxModelVariable ub` → `@dbxModelVariable usedBudget`). To exempt fields whose long name legitimately equals the short name, add them to `modelValidate.ignoredFieldNames`."
+  },
   {
     "code": "MODEL_FIELD_MISSING_JSDOC",
     "source": "dbx_model_validate",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "13.11.5",
+  "version": "13.11.6",
   "type": "module",
   "bin": {
     "dbx-components-mcp": "dbx-components-mcp.js"
@@ -15,19 +15,19 @@
     "@angular/core": "21.2.11",
     "@angular/forms": "21.2.11",
     "@angular/material": "^21.2.9",
-    "@dereekb/dbx-cli": "13.11.5",
-    "@dereekb/dbx-core": "13.11.5",
-    "@dereekb/dbx-firebase": "13.11.5",
-    "@dereekb/dbx-form": "13.11.5",
-    "@dereekb/dbx-web": "13.11.5",
-    "@dereekb/firebase": "13.11.5",
-    "@dereekb/firebase-server": "13.11.5",
-    "@dereekb/rxjs": "13.11.5",
-    "@dereekb/util": "13.11.5",
+    "@dereekb/dbx-cli": "13.11.6",
+    "@dereekb/dbx-core": "13.11.6",
+    "@dereekb/dbx-firebase": "13.11.6",
+    "@dereekb/dbx-form": "13.11.6",
+    "@dereekb/dbx-web": "13.11.6",
+    "@dereekb/firebase": "13.11.6",
+    "@dereekb/firebase-server": "13.11.6",
+    "@dereekb/rxjs": "13.11.6",
+    "@dereekb/util": "13.11.6",
     "@uirouter/angular": "21.0.0",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@dereekb/model": "13.11.5"
+    "@dereekb/model": "13.11.6"
   }
 }