@dereekb/dbx-components-mcp 14.12.0 → 14.14.0

package/generated/dereekb-dbx-web.tokens.mcp.generated.json

@@ -430,6 +430,58 @@
       },
       "componentScope": "button"
     },
+    {
+      "cssVariable": "--dbx-button-floating-offset",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "button floating offset"
+      ],
+      "description": "Component-scoped override point (`button`) read in `packages/dbx-web/src/lib/button/_button.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-4)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-4)"
+      },
+      "componentScope": "button"
+    },
+    {
+      "cssVariable": "--dbx-button-floating-offset-x",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "button floating offset x"
+      ],
+      "description": "Component-scoped override point (`button`) read in `packages/dbx-web/src/lib/button/_button.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-button-floating-offset, var(--dbx-padding-4))`.",
+      "defaults": {
+        "light": "var(--dbx-button-floating-offset, var(--dbx-padding-4))"
+      },
+      "componentScope": "button"
+    },
+    {
+      "cssVariable": "--dbx-button-floating-offset-y",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "button floating offset y"
+      ],
+      "description": "Component-scoped override point (`button`) read in `packages/dbx-web/src/lib/button/_button.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-button-floating-offset, var(--dbx-padding-4))`.",
+      "defaults": {
+        "light": "var(--dbx-button-floating-offset, var(--dbx-padding-4))"
+      },
+      "componentScope": "button"
+    },
+    {
+      "cssVariable": "--dbx-button-floating-z-index",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "button floating z index"
+      ],
+      "description": "Component-scoped override point (`button`) read in `packages/dbx-web/src/lib/button/_button.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `10`.",
+      "defaults": {
+        "light": "10"
+      },
+      "componentScope": "button"
+    },
     {
       "cssVariable": "--dbx-button-icon-color",
       "source": "dbx-web",
@@ -991,6 +1043,45 @@
       },
       "componentScope": "content"
     },
+    {
+      "cssVariable": "--dbx-content-pit-border-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "content pit border color"
+      ],
+      "description": "Component-scoped override point (`content`) read in `packages/dbx-web/src/lib/layout/content/_content.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `color-mix(in srgb, color-mix(in srgb, #{theming.$dbx-bg-color} 50%, var(--mat-sys-on-surface)) var(--dbx-content-pit-border-tone, 8%), transparent)`.",
+      "defaults": {
+        "light": "color-mix(in srgb, color-mix(in srgb, #{theming.$dbx-bg-color} 50%, var(--mat-sys-on-surface)) var(--dbx-content-pit-border-tone, 8%), transparent)"
+      },
+      "componentScope": "content"
+    },
+    {
+      "cssVariable": "--dbx-content-pit-border-tone",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "content pit border tone"
+      ],
+      "description": "Component-scoped override point (`content`) read in `packages/dbx-web/src/lib/layout/content/_content.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `8%`.",
+      "defaults": {
+        "light": "8%"
+      },
+      "componentScope": "content"
+    },
+    {
+      "cssVariable": "--dbx-content-pit-border-width",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "content pit border width"
+      ],
+      "description": "Component-scoped override point (`content`) read in `packages/dbx-web/src/lib/layout/content/_content.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `1px`.",
+      "defaults": {
+        "light": "1px"
+      },
+      "componentScope": "content"
+    },
     {
       "cssVariable": "--dbx-content-pit-opacity",
       "source": "dbx-web",
@@ -1110,6 +1201,139 @@
       },
       "componentScope": "text"
     },
+    {
+      "cssVariable": "--dbx-detail-block-tile-background",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "detail block tile background"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-surface-container-high)`.",
+      "defaults": {
+        "light": "var(--mat-sys-surface-container-high)"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-gap",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "detail block tile gap",
+        "detail block tile gap spacing"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-3)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-3)"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-hint-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "detail block tile hint color"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface-variant)`.",
+      "defaults": {
+        "light": "var(--mat-sys-on-surface-variant)"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-icon-color",
+      "source": "dbx-web",
+      "role": "text-color",
+      "intents": [
+        "detail block tile icon color",
+        "detail block tile icon color text"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface-variant)`.",
+      "defaults": {
+        "light": "var(--mat-sys-on-surface-variant)"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-icon-size",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "detail block tile icon size"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `16px`.",
+      "defaults": {
+        "light": "16px"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-label-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "detail block tile label color"
+      ],
+      "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
+      "defaults": {
+        "light": "var(#{theming.$dbx-bg-color-var})"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-padding-bottom",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "detail block tile padding bottom",
+        "detail block tile padding bottom spacing"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-4)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-4)"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-shape",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "detail block tile shape"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `50%`.",
+      "defaults": {
+        "light": "50%"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-size",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "detail block tile size"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `28px`.",
+      "defaults": {
+        "light": "28px"
+      },
+      "componentScope": "text"
+    },
+    {
+      "cssVariable": "--dbx-detail-block-tile-text-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "detail block tile text color"
+      ],
+      "description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface)`.",
+      "defaults": {
+        "light": "var(--mat-sys-on-surface)"
+      },
+      "componentScope": "text"
+    },
     {
       "cssVariable": "--dbx-dialog-content-padding",
       "source": "dbx-web",
@@ -1286,7 +1510,7 @@
       ],
       "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
       "defaults": {
-        "light": "var(--dbx-step-block-badge-shape, 50%)"
+        "light": "var(--dbx-detail-block-tile-shape, 50%)"
       },
       "componentScope": "text"
     },
@@ -1299,7 +1523,7 @@
       ],
       "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
       "defaults": {
-        "light": "var(--dbx-step-block-badge-font-size, var(--mat-sys-label-large-size, 14px))"
+        "light": "var(--dbx-detail-block-tile-icon-size, 16px)"
       },
       "componentScope": "text"
     },
@@ -1325,7 +1549,7 @@
       ],
       "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
       "defaults": {
-        "light": "var(--dbx-step-block-badge-size, 32px)"
+        "light": "var(--dbx-detail-block-tile-size, 28px)"
       },
       "componentScope": "text"
     },
@@ -1352,7 +1576,7 @@
       ],
       "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
       "defaults": {
-        "light": "var(--dbx-step-block-badge-size, 32px)"
+        "light": "var(--dbx-detail-block-tile-size, 28px)"
       },
       "componentScope": "text"
     },
@@ -1379,7 +1603,7 @@
       ],
       "description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
       "defaults": {
-        "light": "var(--dbx-step-block-badge-size, 32px)"
+        "light": "var(--dbx-detail-block-tile-size, 28px)"
       },
       "componentScope": "text"
     },

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

@@ -75,7 +75,7 @@
       "selector": "dbx-button",
       "className": "DbxButtonComponent",
       "module": "@dereekb/dbx-web",
-      "description": "Feature-rich button component that supports loading indicators, multiple Material button styles,\ncustom colors, icons, and floating action button (FAB) mode. Integrates with the dbxAction system\nfor automatic working/disabled state management.",
+      "description": "Feature-rich button component that supports loading indicators, multiple Material button styles,\ncustom colors, icons, and floating action button (FAB / extended FAB) mode. Integrates with the dbxAction system\nfor automatic working/disabled state management.",
       "inputs": [
         {
           "name": "bar",
@@ -165,7 +165,7 @@
         {
           "name": "fab",
           "type": "boolean",
-          "description": "",
+          "description": "Renders a Material FAB, or an extended FAB when the button has text. Combine with {@link iconOnly} for a round icon button.",
           "required": false,
           "default": "false"
         },
@@ -203,6 +203,52 @@
       "example": "<dbx-button [text]=\"'Save'\" raised [dbxAction]=\"saveAction\">\n</dbx-button>",
       "minimalExample": "<dbx-button text=\"Save\" raised [dbxAction]=\"saveAction\"></dbx-button>"
     },
+    {
+      "slug": "button-floating",
+      "category": "button",
+      "kind": "directive",
+      "selector": "[dbxButtonFloating]",
+      "className": "DbxButtonFloatingDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Floats its host — typically a `dbx-button` with `dbxActionButton`, or a wrapper holding several buttons — over the content\nby applying the `.dbx-button-floating` utility classes.\n\nIn the default `'sticky'` mode the host stays pinned to the edge of its scroll container while its parent section is on\nscreen, which suits a Save button at the end of a long form. Place the host at the end of its section for bottom positions and\nat the start for top positions. Sticky stops working when an ancestor between the host and the scroll container sets\n`overflow`. In `'fixed'` mode the host is pinned to the viewport; fixed positioning is re-anchored to any ancestor that sets\n`transform`, `filter` or `contain`.\n\nSet `fab` on the `dbx-button` for the Material FAB presentation (an extended FAB when it has text). Pair with\n`dbxActionEnforceModified` on the action to keep a floating Save button disabled until the form has changes.",
+      "inputs": [
+        {
+          "name": "dbxButtonFloating",
+          "type": "Maybe<DbxButtonFloatingConfig | DbxButtonFloatingPosition | ''>",
+          "description": "Config for the floating button, or a {@link DbxButtonFloatingPosition} shorthand. Empty when used as a bare attribute.",
+          "required": false
+        },
+        {
+          "name": "dbxButtonFloatingMode",
+          "type": "Maybe<DbxButtonFloatingMode>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "dbxButtonFloatingPosition",
+          "type": "Maybe<DbxButtonFloatingPosition>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "dbxButtonFloatingOffset",
+          "type": "Maybe<DbxButtonFloatingOffset>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "button",
+        "button-spacer",
+        "content-pit"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "example": "<div dbxAction dbxActionEnforceModified [dbxActionHandler]=\"handleSave\">\n  <my-form dbxActionForm></my-form>\n  <dbx-button dbxButtonFloating fab color=\"primary\" icon=\"save\" text=\"Save\" dbxActionButton></dbx-button>\n</div>",
+      "minimalExample": "<dbx-button dbxButtonFloating fab color=\"primary\" icon=\"save\" text=\"Save\" dbxActionButton></dbx-button>"
+    },
     {
       "slug": "button-spacer",
       "category": "button",
@@ -757,7 +803,7 @@
       "selector": "dbx-progress-spinner-button,dbx-spinner-button",
       "className": "DbxProgressSpinnerButtonComponent",
       "module": "@dereekb/dbx-web",
-      "description": "Progress button that overlays a Material progress spinner on the button while working.\nSupports icon-only, FAB, and text button modes with automatic spinner sizing.",
+      "description": "Progress button that overlays a Material progress spinner on the button while working.\nSupports icon-only, FAB, extended FAB, and text button modes with automatic spinner sizing.\n\nA `fab` config renders a Material `mat-fab` — an extended FAB when the button has text — while `fab` + `iconOnly` renders a\nround icon button.",
       "inputs": [
         {
           "name": "config",
@@ -2277,7 +2323,7 @@
       "selector": "dbx-detail-block",
       "className": "DbxDetailBlockComponent",
       "module": "@dereekb/dbx-web",
-      "description": "A structured content block with a header row (icon + label) and a detail content area below.\n\nUse the `[header]` content slot for extra header-level content and default content for the detail area.",
+      "description": "A structured content block with a header row (icon + label) and a detail content area below.\n\nUse the `[header]` content slot for extra header-level content and default content for the detail area.\n\nThe component provides the structure only. Add the `dbx-detail-block-tile` class for the tile styling: the icon in a\nround tile beside the content, an uppercase label, and `dbx-detail-block-tile-value` / `dbx-detail-block-tile-hint`\nlines for the value and its supporting text.",
       "inputs": [
         {
           "name": "icon",

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

@@ -404,6 +404,58 @@
         }
       ]
     },
+    {
+      "slug": "list-detail-item-grouped-todo",
+      "category": "list",
+      "summary": "Grouped To Do list: .dbx-list-detail-item rows split into titled sections by dbxListTitleGroup, urgent rows set apart by a colored icon tile instead of a background, no hover effects, the built-in chevron, content-derived row keys so changed text re-renders, and an empty state.",
+      "header": ".dbx-list-detail-item Grouped To Do List",
+      "className": "DocListDetailItemGroupedTodoExampleComponent",
+      "selector": "doc-list-detail-item-grouped-todo-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "The To Do recipe split into titled sections, with urgent rows marked by their icon tile color and no hover effects.",
+      "relatedSlugs": [
+        "dbx-list",
+        "dbx-list-detail-item",
+        "dbx-list-no-hover-effects",
+        "dbx-list-title-group-header",
+        "dbx-list-empty-content",
+        "dbx-chip",
+        "dbx-icon-tile",
+        "dbx-color"
+      ],
+      "info": "<p>\n  The same row recipe as the To Do list above, grouped by\n  <code>[dbxListTitleGroup]</code>\n  . The delegate maps each item to its section with\n  <code>groupValueForItem</code>\n  , gives each section its title with\n  <code>dataForGroupValue</code>\n  , and orders the sections with\n  <code>sortGroupsByData</code>\n  . The default\n  <code>dbx-list-title-group-header</code>\n  renders each title.\n</p>\n<p>\n  The rows carry no background. An \"Action needed\" row is set apart by its tonal\n  <code>dbx-icon-tile</code>\n  alone: the expired waiver's tile is\n  <code>warn</code>\n  and the rest are\n  <code>notice</code>\n  , while the \"Suggestions\" rows keep a grey tile.\n</p>\n<p>\n  The wrapper host adds\n  <code>dbx-list-no-hover-effects</code>\n  , so hovering a row doesn't add a state layer. The whole row stays the click target, and the view's\n  <code>metaConfig</code>\n  chevron is the only trailing affordance.\n</p>\n<p>\n  The view keys each row by its content (id, title, detail and chip) instead of its id. An item component keeps the item it was created with while its key stays the same, so an id-only key would leave the old text on screen when a count changes. Use\n  <strong>Finish a course</strong>\n  to watch the \"Courses in progress\" row update, then disappear.\n</p>\n<p>\n  Last clicked:\n  <code>{{ clickedIdSignal() ?? '(none)' }}</code>\n</p>",
+      "snippet": "<div class=\"dbx-button-wrap-group dbx-mb3\">\n  <button mat-stroked-button (click)=\"finishCourse()\" [disabled]=\"coursesInProgressSignal() === 0\">Finish a course</button>\n  <button mat-stroked-button (click)=\"reset()\">Reset</button>\n  <button mat-stroked-button (click)=\"showEmptySignal.set(!showEmptySignal())\">{{ showEmptySignal() ? 'Show to dos' : 'All caught up' }}</button>\n</div>\n<mat-card appearance=\"outlined\" style=\"max-width: 560px\">\n  <mat-card-content>\n    <h3 class=\"dbx-text-headline-small dbx-m0\">To Do</h3>\n    @if (countLabelSignal(); as countLabel) {\n      <p class=\"dbx-hint dbx-mb3\">{{ countLabel }}</p>\n    }\n    <doc-todo-group-item-list [dbxListTitleGroup]=\"groupDelegate\" [state]=\"stateSignal()\">\n      <dbx-list-empty-content empty>\n        <div class=\"dbx-flex-column dbx-flex-center dbx-text-center dbx-pv4\">\n          <dbx-icon-tile class=\"dbx-mb3\" icon=\"task_alt\" [round]=\"true\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n          <div class=\"dbx-text-title-medium\">You're all caught up</div>\n          <div class=\"dbx-hint\">No action items right now. We'll let you know if something needs your attention.</div>\n        </div>\n      </dbx-list-empty-content>\n    </doc-todo-group-item-list>\n  </mat-card-content>\n</mat-card>",
+      "uses": [
+        {
+          "kind": "component",
+          "className": "DocTodoGroupItemListComponent",
+          "role": "list",
+          "selector": "doc-todo-group-item-list",
+          "classSource": "@Component({\n  selector: 'doc-todo-group-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'\n  }\n})\nexport class DocTodoGroupItemListComponent extends AbstractDbxSelectionListWrapperDirective<TodoGroupItemValue> {\n  constructor() {\n    super({\n      componentClass: DocTodoGroupItemListViewComponent,\n      defaultSelectionMode: 'view'\n    });\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocTodoGroupItemListViewComponent",
+          "role": "view",
+          "selector": "doc-todo-group-item-list-view",
+          "classSource": "@Component({\n  selector: 'doc-todo-group-item-list-view',\n  template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxSelectionValueListViewComponentImportsModule],\n  providers: provideDbxListView(DocTodoGroupItemListViewComponent),\n  host: {\n    class: 'dbx-list-item-p0'\n  }\n})\nexport class DocTodoGroupItemListViewComponent extends AbstractDbxSelectionListViewDirective<TodoGroupItemValue> {\n  // An item component keeps the item it was created with while its key stays the same, so key each row by its content:\n  // a changed detail line (e.g. the course count) then renders a fresh row. Drop `icon` (the template paints its own\n  // tile); keep `anchor` so the whole row is the click target.\n  readonly config: DbxSelectionValueListViewConfig<TodoGroupItemValueWithSelection> = {\n    componentClass: DocTodoGroupItemListViewItemComponent,\n    metaConfig: DbxListViewMetaIconComponent.metaConfig('chevron_right'),\n    mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, key: [value.id, value.title, value.detail, value.chip?.text].join('|'), itemValue: value, icon: undefined })))\n  };\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocTodoGroupItemListViewItemComponent",
+          "role": "item",
+          "selector": "doc-todo-group-item-list-view-item",
+          "classSource": "@Component({\n  selector: 'doc-todo-group-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-detail-item\">\n      <dbx-icon-tile class=\"item-leading\" [icon]=\"icon\" [round]=\"true\" [dbxColor]=\"tileColor\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-content\">\n        <span class=\"item-title\">{{ title }}</span>\n        <span class=\"item-line\">{{ detail }}</span>\n        @if (chip; as chip) {\n          <span class=\"item-line dbx-pt1\">\n            <dbx-chip [color]=\"chip.color\" [small]=\"true\">{{ chip.text }}</dbx-chip>\n          </span>\n        }\n      </div>\n    </div>\n  `,\n  imports: [DbxChipDirective, DbxColorDirective, DbxIconTileComponent]\n})\nexport class DocTodoGroupItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<TodoGroupItemValue> {\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 chip(): Maybe<TodoItemChip> {\n    return this.itemValue.chip;\n  }\n\n  /**\n   * Tile color of the row: an \"Action needed\" row's own color (notice by default), otherwise grey.\n   *\n   * @returns The row's tile color.\n   */\n  get tileColor(): DbxThemeColor {\n    return this.itemValue.group === 'action_needed' ? (this.itemValue.color ?? 'notice') : 'grey';\n  }\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "TodoGroupItemValue",
+          "role": "data",
+          "classSource": "export interface TodoGroupItemValue {\n  readonly id: string;\n  readonly group: TodoGroupItemGroup;\n  readonly icon: string;\n  readonly title: string;\n  readonly detail: string;\n  /**\n   * Tile color of an `action_needed` row. Defaults to notice.\n   */\n  readonly color?: Maybe<DbxThemeColor>;\n  readonly chip?: Maybe<TodoItemChip>;\n  /**\n   * Whole-row click target.\n   */\n  readonly anchor: ClickableAnchor;\n}"
+        }
+      ]
+    },
     {
       "slug": "list-progress-with-button",
       "category": "list",

package/generated/dereekb-util.utils.mcp.generated.json

@@ -12369,6 +12369,44 @@
         "read-website-protocol"
       ]
     },
+    {
+      "slug": "website-url-relative-path-functions",
+      "name": "websiteUrlRelativePathFunctions",
+      "kind": "factory",
+      "category": "string",
+      "module": "@dereekb/util",
+      "subpath": "string/url",
+      "signature": "websiteUrlRelativePathFunctions(config: WebsiteUrlRelativePathFunctionsConfig): WebsiteUrlRelativePathFunctions",
+      "description": "Creates {@link WebsiteUrlRelativePathFunctions} for the configured base url.\n\nInputs may be the relative path (`dereekb`), a url without a protocol (`linkedin.com/in/dereekb`), or a full url (`https://www.linkedin.com/in/dereekb/?trk=abc`).\nDomains are compared case-insensitively and a leading `www.` is ignored. Query parameters and trailing slashes are removed from the relative path.",
+      "params": [
+        {
+          "name": "config",
+          "type": "WebsiteUrlRelativePathFunctionsConfig",
+          "description": "- The base url and protocol configuration.",
+          "optional": false
+        }
+      ],
+      "returns": "Functions for reading relative paths and building full website urls.",
+      "tags": [
+        "string",
+        "url",
+        "path",
+        "relative",
+        "base",
+        "slug",
+        "username",
+        "profile",
+        "factory",
+        "website",
+        "functions",
+        "websiteurlrelativepathfunctions"
+      ],
+      "example": "const linkedIn = websiteUrlRelativePathFunctions({ baseUrl: 'https://linkedin.com/in/' });\n\nlinkedIn.toRelativePath('linkedin.com/in/dereekb'); // 'dereekb'\nlinkedIn.toWebsiteUrl('dereekb'); // 'https://linkedin.com/in/dereekb'\nlinkedIn.toWebsiteUrl('https://twitter.com/dereekb'); // undefined",
+      "relatedSlugs": [
+        "isolate-website-path-function",
+        "website-url-details"
+      ]
+    },
     {
       "slug": "expand-flatten-tree-function",
       "name": "expandFlattenTreeFunction",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "14.12.0",
+  "version": "14.14.0",
   "sideEffects": false,
   "type": "module",
   "bin": {
@@ -12,7 +12,7 @@
     "ts-morph": "^21.0.0"
   },
   "peerDependencies": {
-    "@dereekb/dbx-cli": "14.12.0",
-    "@dereekb/util": "14.12.0"
+    "@dereekb/dbx-cli": "14.14.0",
+    "@dereekb/util": "14.14.0"
   }
 }