@dereekb/dbx-components-mcp 13.10.0

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

@@ -0,0 +1,2853 @@
+{
+  "version": 1,
+  "source": "@dereekb/dbx-web",
+  "module": "@dereekb/dbx-web",
+  "generatedAt": "1970-01-01T00:00:00.000Z",
+  "generator": "@dereekb/dbx-components-mcp/scripts/generate-manifests.mjs",
+  "entries": [
+    {
+      "slug": "action-confirm",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionConfirm]",
+      "className": "DbxActionConfirmDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a confirmation dialog when the action is triggered. If the user confirms,\nthe configured ready value is passed to the action. If the user cancels, the action is rejected.\n\nThis directive works with action triggering only, not button clicks.\nFor button-based confirmation, use an appPromptConfirmButton directive instead.",
+      "inputs": [
+        {
+          "name": "dbxActionConfirm",
+          "type": "Maybe<DbxActionConfirmConfig<T>>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "dbxActionConfirmSkip",
+          "type": "boolean",
+          "description": "When true, the confirmation dialog is disabled and the action proceeds without prompting.",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "action-snackbar",
+        "prompt-confirm"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/action/action.confirm.directive.ts",
+      "example": "<button [dbxAction]=\"deleteAction\" [dbxActionConfirm]=\"{ header: 'Delete account?', confirmText: 'Delete' }\">Delete</button>",
+      "minimalExample": "<div [dbxActionConfirm]=\"cfg\"></div>",
+      "sourceLocation": {
+        "file": "src/lib/action/action.confirm.directive.ts",
+        "line": 39
+      }
+    },
+    {
+      "slug": "action-key-trigger",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionKeyTrigger]",
+      "className": "DbxActionKeyTriggerDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Triggers the parent action context when a specific keyboard key is released.\nDefaults to the \"enter\" key. Key names should be lowercase.",
+      "inputs": [
+        {
+          "name": "dbxActionKeyTrigger",
+          "type": "string",
+          "description": "",
+          "required": false,
+          "default": "DEFAULT_ACTION_KEY_TRIGGER"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "action-confirm",
+        "action-snackbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/action/key.trigger.directive.ts",
+      "example": "<form [dbxAction]=\"saveAction\" [dbxActionKeyTrigger]=\"'cmd+s'\">...</form>",
+      "minimalExample": "<div [dbxActionKeyTrigger]=\"'enter'\"></div>",
+      "sourceLocation": {
+        "file": "src/lib/action/key.trigger.directive.ts",
+        "line": 25
+      }
+    },
+    {
+      "slug": "button",
+      "category": "button",
+      "kind": "component",
+      "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.",
+      "inputs": [
+        {
+          "name": "bar",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "type",
+          "type": "Maybe<DbxButtonType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "buttonStyle",
+          "type": "Maybe<DbxButtonStyle>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "Maybe<ThemePalette | DbxThemeColor>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "spinnerColor",
+          "type": "Maybe<ThemePalette | DbxThemeColor>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "customButtonColor",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "customTextColor",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "customSpinnerColor",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "basic",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "tonal",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "raised",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "stroked",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "flat",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "iconOnly",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "fab",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "customContent",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "allowClickPropagation",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "mode",
+          "type": "Maybe<ProgressSpinnerMode>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "icon-button",
+        "progress-spinner-button",
+        "progress-bar-button"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/button/button.component.ts",
+      "example": "<dbx-button [text]=\"'Save'\" raised [dbxAction]=\"saveAction\">\n</dbx-button>",
+      "minimalExample": "<dbx-button text=\"Save\" raised [dbxAction]=\"saveAction\"></dbx-button>",
+      "sourceLocation": {
+        "file": "src/lib/button/button.component.ts",
+        "line": 45
+      }
+    },
+    {
+      "slug": "button-spacer",
+      "category": "button",
+      "kind": "directive",
+      "selector": "dbx-button-spacer,[dbxButtonSpacer]",
+      "className": "DbxButtonSpacerDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Adds inline spacing between adjacent buttons. Can be used as an element or attribute.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "bar",
+        "spacer",
+        "button"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/button/button.spacer.directive.ts",
+      "example": "<dbx-bar>\n  <dbx-button text=\"Save\" raised></dbx-button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <dbx-button text=\"Cancel\"></dbx-button>\n</dbx-bar>",
+      "minimalExample": "<dbx-button-spacer></dbx-button-spacer>",
+      "sourceLocation": {
+        "file": "src/lib/button/button.spacer.directive.ts",
+        "line": 24
+      }
+    },
+    {
+      "slug": "error",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-error",
+      "className": "DbxErrorComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Root error component that displays content related to an error.\n\nConverts an {@link ErrorInput} into a {@link ReadableError} and renders either a default error view\nwith an icon and message, or a custom error widget registered via {@link DbxErrorWidgetService}.\nClicking the error icon opens a popover with detailed error information.",
+      "inputs": [
+        {
+          "name": "error",
+          "type": "Maybe<ErrorInput>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "iconOnly",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "popoverOpened",
+          "emits": "NgPopoverRef",
+          "description": ""
+        }
+      ],
+      "relatedSlugs": [
+        "error-snackbar",
+        "error-view",
+        "loading"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/error/error.component.ts",
+      "example": "<dbx-error [error]=\"error$ | async\"></dbx-error>",
+      "minimalExample": "<dbx-error [error]=\"error\"></dbx-error>",
+      "sourceLocation": {
+        "file": "src/lib/error/error.component.ts",
+        "line": 52
+      }
+    },
+    {
+      "slug": "action-snackbar-error",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionSnackbarError]",
+      "className": "DbxActionSnackbarErrorDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays action errors in a snackbar notification.\n\nSubscribes to the action context's error stream and shows a snackbar via {@link DbxErrorSnackbarService}\nwhenever an error occurs. Accepts an optional configuration or a duration in milliseconds as input.",
+      "inputs": [
+        {
+          "name": "dbxActionSnackbarError",
+          "type": "Maybe<DbxErrorSnackbarConfig> | Milliseconds | ''",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "action-snackbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/error/error.snackbar.action.directive.ts",
+      "example": "<button [dbxAction]=\"saveAction\" dbxActionSnackbarError>Save</button>",
+      "minimalExample": "<div [dbxActionSnackbarError]></div>",
+      "sourceLocation": {
+        "file": "src/lib/error/error.snackbar.action.directive.ts",
+        "line": 28
+      }
+    },
+    {
+      "slug": "error-snackbar",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-error-snackbar",
+      "className": "DbxErrorSnackbarComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Snackbar component that displays an error with a dismiss button.\n\nSupports an optional auto-dismiss timer that pauses while an error detail popover is open.\nTypically opened via {@link DbxErrorSnackbarService} or the static {@link DbxErrorSnackbarComponent.showErrorSnackbar} method.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "error"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/error/error.snackbar.component.ts",
+      "example": "// Triggered via DbxErrorSnackbarService.showError(error)",
+      "minimalExample": "<dbx-error-snackbar></dbx-error-snackbar>",
+      "sourceLocation": {
+        "file": "src/lib/error/error.snackbar.component.ts",
+        "line": 51
+      }
+    },
+    {
+      "slug": "error-view",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-error-view",
+      "className": "DbxErrorViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Low-level error view that renders a Material icon button and an optional error message.\n\nEmits a {@link DbxErrorViewButtonEvent} when the button is clicked, which is typically used\nto open an error detail popover. Used internally by {@link DbxErrorComponent}.",
+      "inputs": [
+        {
+          "name": "icon",
+          "type": "string",
+          "description": "",
+          "required": false,
+          "default": "'error'"
+        },
+        {
+          "name": "message",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "buttonDisabled",
+          "type": "Maybe<boolean>",
+          "description": "Whether or not the error button is disabled.",
+          "required": false
+        }
+      ],
+      "outputs": [
+        {
+          "name": "buttonClick",
+          "emits": "DbxErrorViewButtonEvent",
+          "description": ""
+        }
+      ],
+      "relatedSlugs": [
+        "error",
+        "error-snackbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/error/error.view.component.ts",
+      "example": "<dbx-error-view [error]=\"error\">\n  <dbx-button text=\"Retry\" [dbxAction]=\"retryAction\"></dbx-button>\n</dbx-error-view>",
+      "minimalExample": "<dbx-error-view [error]=\"error\"></dbx-error-view>",
+      "sourceLocation": {
+        "file": "src/lib/error/error.view.component.ts",
+        "line": 39
+      }
+    },
+    {
+      "slug": "basic-loading",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-basic-loading",
+      "className": "DbxBasicLoadingComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Low-level loading component that renders a spinner or progress bar, error state, and projected content.\n\nPrefer using {@link DbxLoadingComponent} (`<dbx-loading>`) which wraps this component with\nsupport for {@link LoadingContext} streams.",
+      "inputs": [
+        {
+          "name": "diameter",
+          "type": "Maybe<number>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "mode",
+          "type": "Maybe<ProgressBarMode | ProgressSpinnerMode>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "ThemePalette | DbxThemeColor",
+          "description": "",
+          "required": false,
+          "default": "'primary'"
+        },
+        {
+          "name": "text",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "linear",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "show",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "loading",
+          "type": "Maybe<DbxLoadingIsLoadingOrProgress>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "Maybe<ErrorInput>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "loading",
+        "loading-progress",
+        "error"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/loading/basic-loading.component.ts",
+      "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>",
+      "minimalExample": "<dbx-basic-loading [loading]=\"true\"><p>Content</p></dbx-basic-loading>",
+      "sourceLocation": {
+        "file": "src/lib/loading/basic-loading.component.ts",
+        "line": 45
+      }
+    },
+    {
+      "slug": "loading-progress",
+      "category": "feedback",
+      "kind": "component",
+      "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.",
+      "inputs": [
+        {
+          "name": "diameter",
+          "type": "Maybe<number>",
+          "description": "",
+          "required": false,
+          "default": "this.defaultDiameter"
+        },
+        {
+          "name": "text",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "linear",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "mode",
+          "type": "ProgressBarMode | ProgressSpinnerMode",
+          "description": "",
+          "required": false,
+          "default": "'indeterminate'"
+        },
+        {
+          "name": "color",
+          "type": "ThemePalette | DbxThemeColor",
+          "description": "",
+          "required": false,
+          "default": "'primary'"
+        },
+        {
+          "name": "value",
+          "type": "Maybe<number>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "bufferValue",
+          "type": "Maybe<number>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "loading",
+        "basic-loading"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/loading/loading-progress.component.ts",
+      "example": "<dbx-loading-progress mode=\"bar\"></dbx-loading-progress>",
+      "minimalExample": "<dbx-loading-progress></dbx-loading-progress>",
+      "sourceLocation": {
+        "file": "src/lib/loading/loading-progress.component.ts",
+        "line": 35
+      }
+    },
+    {
+      "slug": "action-loading-context",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionLoadingContext]",
+      "className": "DbxActionLoadingContextDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Links a {@link DbxLoadingComponent} to a {@link DbxActionContextStoreSourceInstance} by forwarding its loading state.\n\nApply to a `<dbx-loading>` element that is within an action context to automatically\nreflect the action's loading state in the loading component.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "loading",
+        "action-snackbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/loading/loading.action.directive.ts",
+      "example": "<dbx-loading [state]=\"ctx.state$ | async\">\n  <button [dbxAction]=\"saveAction\" dbxActionLoadingContext>Save</button>\n</dbx-loading>",
+      "minimalExample": "<button [dbxActionLoadingContext]></button>",
+      "sourceLocation": {
+        "file": "src/lib/loading/loading.action.directive.ts",
+        "line": 27
+      }
+    },
+    {
+      "slug": "loading",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-loading",
+      "className": "DbxLoadingComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Primary loading wrapper that shows a spinner/progress bar while data is being fetched,\nthen reveals projected content on completion, or displays an error state.\n\nAccepts a {@link LoadingContext} observable via the `context` input to automatically\ntrack loading and error state from reactive streams. Also supports manual `loading`\nand `error` inputs for simpler use cases.",
+      "inputs": [
+        {
+          "name": "padding",
+          "type": "Maybe<boolean>",
+          "description": "Whether or not to add padding to the linear presentation when linear is complete. This prevents the linear bar from pushing content around.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "show",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "text",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "mode",
+          "type": "Maybe<ProgressBarMode>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "ThemePalette | DbxThemeColor",
+          "description": "",
+          "required": false,
+          "default": "'primary'"
+        },
+        {
+          "name": "diameter",
+          "type": "Maybe<number>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "linear",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "Maybe<DbxLoadingIsLoadingOrProgress>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "Maybe<ErrorInput>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "context",
+          "type": "MaybeObservableOrValue<LoadingContext>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "basic-loading",
+        "loading-progress",
+        "error"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/loading/loading.component.ts",
+      "example": "<dbx-loading [state]=\"state$ | async\" text=\"Loading items...\">\n  <dbx-list [state$]=\"state$\" [config]=\"listConfig\"></dbx-list>\n</dbx-loading>",
+      "minimalExample": "<dbx-loading [state]=\"state$ | async\">Body</dbx-loading>",
+      "sourceLocation": {
+        "file": "src/lib/loading/loading.component.ts",
+        "line": 44
+      }
+    },
+    {
+      "slug": "resized",
+      "category": "screen",
+      "kind": "directive",
+      "selector": "[dbxResized]",
+      "className": "DbxResizedDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Emits {@link ResizedEvent} values whenever the host element is resized.\n\nUses a `ResizeObserver` internally via {@link resizeSignal}.",
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "dbxResized",
+          "emits": "ResizedEvent",
+          "description": ""
+        }
+      ],
+      "relatedSlugs": [
+        "flex-group"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/screen/resize.directive.ts",
+      "example": "<div (dbxResized)=\"onResized($event)\" class=\"resizable-panel\"></div>",
+      "minimalExample": "<div (dbxResized)=\"handle($event)\"></div>",
+      "sourceLocation": {
+        "file": "src/lib/screen/resize.directive.ts",
+        "line": 23
+      }
+    },
+    {
+      "slug": "action-snackbar",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionSnackbar]",
+      "className": "DbxActionSnackbarDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a Material snackbar notification when the parent action transitions between loading states\n(loading, success, error). Supports built-in message presets via `dbxActionSnackbarDefault` and\ncustom generator functions via the `dbxActionSnackbar` input.",
+      "inputs": [
+        {
+          "name": "dbxActionSnackbarDefault",
+          "type": "Maybe<DbxActionSnackbarType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "dbxActionSnackbarUndo",
+          "type": "Maybe<DbxActionSnackbarGeneratorUndoInput<T, O>>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "dbxActionSnackbar",
+          "type": "Maybe<DbxActionSnackbarDisplayConfigGeneratorFunction>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "action-snackbar-error",
+        "action-confirm",
+        "error-snackbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/action/snackbar/action.snackbar.directive.ts",
+      "example": "<button [dbxAction]=\"saveAction\" [dbxActionSnackbar]=\"snackbarFn\">Save</button>",
+      "minimalExample": "<div [dbxActionSnackbar]=\"fn\"></div>",
+      "sourceLocation": {
+        "file": "src/lib/action/snackbar/action.snackbar.directive.ts",
+        "line": 28
+      }
+    },
+    {
+      "slug": "action-transition-safety",
+      "category": "action",
+      "kind": "directive",
+      "selector": "[dbxActionTransitionSafety]",
+      "className": "DbxActionTransitionSafetyDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Prevents UI Router transitions when the action has unsaved changes. Depending on the\nconfigured safety type, it can auto-trigger the action, show a confirmation dialog,\nor allow the transition without intervention.\n\nNOTE: This directive only works with UI-Router (not Angular Router).",
+      "inputs": [
+        {
+          "name": "dbxActionTransitionSafety",
+          "type": "DbxActionTransitionSafetyType",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "action-confirm"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/action/transition/transition.safety.directive.ts",
+      "example": "<form [dbxAction]=\"formAction\" dbxActionTransitionSafety>...</form>",
+      "minimalExample": "<form [dbxActionTransitionSafety]></form>",
+      "sourceLocation": {
+        "file": "src/lib/action/transition/transition.safety.directive.ts",
+        "line": 39
+      }
+    },
+    {
+      "slug": "icon-button",
+      "category": "button",
+      "kind": "component",
+      "selector": "dbx-icon-button",
+      "className": "DbxIconButtonComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Lightweight button that renders as either an icon-only Material icon button or a text button\nwith an icon prefix, depending on whether text is provided.",
+      "inputs": [],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "button"
+      ],
+      "skillRefs": [
+        "dbx__migration__migrate-dbx-icon-button"
+      ],
+      "sourcePath": "lib/button/icon/icon.button.component.ts",
+      "example": "<dbx-icon-button icon=\"delete\" color=\"warn\" [dbxAction]=\"deleteAction\"></dbx-icon-button>",
+      "minimalExample": "<dbx-icon-button icon=\"add\"></dbx-icon-button>",
+      "sourceLocation": {
+        "file": "src/lib/button/icon/icon.button.component.ts",
+        "line": 25
+      }
+    },
+    {
+      "slug": "progress-bar-button",
+      "category": "button",
+      "kind": "component",
+      "selector": "dbx-progress-bar-button,dbx-bar-button",
+      "className": "DbxProgressBarButtonComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Progress button that displays a Material progress bar beneath the button while working.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "Maybe<DbxProgressButtonConfig>",
+          "description": "",
+          "required": true
+        },
+        {
+          "name": "buttonId",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "working",
+          "type": "Maybe<DbxButtonWorking>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "allowClickPropagation",
+          "type": "boolean",
+          "description": "When true, the click handler will not call `stopImmediatePropagation()`,\nallowing the click event to continue bubbling. Needed for components like\nfile upload buttons where a parent must handle the click synchronously.",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "btnClick",
+          "emits": "MouseEvent",
+          "description": ""
+        }
+      ],
+      "relatedSlugs": [
+        "button",
+        "progress-spinner-button"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/button/progress/bar.button.component.ts",
+      "example": "<dbx-progress-bar-button [config]=\"cfg\" (btnClick)=\"onClick()\"></dbx-progress-bar-button>",
+      "minimalExample": "<dbx-progress-bar-button [config]=\"cfg\"></dbx-progress-bar-button>",
+      "sourceLocation": {
+        "file": "src/lib/button/progress/bar.button.component.ts",
+        "line": 30
+      }
+    },
+    {
+      "slug": "progress-spinner-button",
+      "category": "button",
+      "kind": "component",
+      "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.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "Maybe<DbxProgressButtonConfig>",
+          "description": "",
+          "required": true
+        },
+        {
+          "name": "buttonId",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "working",
+          "type": "Maybe<DbxButtonWorking>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "allowClickPropagation",
+          "type": "boolean",
+          "description": "When true, the click handler will not call `stopImmediatePropagation()`,\nallowing the click event to continue bubbling. Needed for components like\nfile upload buttons where a parent must handle the click synchronously.",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "btnClick",
+          "emits": "MouseEvent",
+          "description": ""
+        }
+      ],
+      "relatedSlugs": [
+        "button",
+        "progress-bar-button"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/button/progress/spinner.button.component.ts",
+      "example": "<dbx-progress-spinner-button [config]=\"cfg\" (btnClick)=\"onClick()\"></dbx-progress-spinner-button>",
+      "minimalExample": "<dbx-progress-spinner-button [config]=\"cfg\"></dbx-progress-spinner-button>",
+      "sourceLocation": {
+        "file": "src/lib/button/progress/spinner.button.component.ts",
+        "line": 30
+      }
+    },
+    {
+      "slug": "dialog-content",
+      "category": "overlay",
+      "kind": "directive",
+      "selector": "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content",
+      "className": "DbxDialogContentDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Directive that applies standard dialog content styling and width configuration.\n\nCan be used as an element, attribute, or CSS class selector.",
+      "inputs": [
+        {
+          "name": "width",
+          "type": "DbxDialogContentContainerWidth",
+          "description": "",
+          "required": false,
+          "default": "'normal'"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "popover",
+        "popup",
+        "prompt"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/interaction/dialog/dialog.content.directive.ts",
+      "example": "<dbx-dialog-content>\n  <h2>Confirm</h2>\n  <p>Are you sure?</p>\n</dbx-dialog-content>",
+      "minimalExample": "<div dbxDialogContent>Body</div>",
+      "sourceLocation": {
+        "file": "src/lib/interaction/dialog/dialog.content.directive.ts",
+        "line": 31
+      }
+    },
+    {
+      "slug": "popover",
+      "category": "overlay",
+      "kind": "component",
+      "selector": "",
+      "className": "DbxPopoverComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Core popover component that renders injected content with position strategy, transition watching, and keyboard close support.\n\nCoordinates with {@link DbxPopoverCoordinatorService} to ensure only one popover per key is active at a time.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "popup",
+        "prompt-confirm",
+        "dialog-content"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/interaction/popover/popover.component.ts",
+      "example": "// In a service: this.popoverService.open({ content: MyContentComponent, origin })",
+      "minimalExample": "<dbx-popover></dbx-popover>",
+      "sourceLocation": {
+        "file": "src/lib/interaction/popover/popover.component.ts",
+        "line": 89
+      }
+    },
+    {
+      "slug": "popup",
+      "category": "overlay",
+      "kind": "component",
+      "selector": "",
+      "className": "DbxPopupComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Core popup component that renders injected content with support for minimize, fullscreen, and normal window states.\n\nCoordinates with {@link DbxPopupCoordinatorService} to ensure only one popup per key is active at a time.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "popover"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/interaction/popup/popup.component.ts",
+      "example": "// In a service: this.popupService.open({ content: MyContentComponent })",
+      "minimalExample": "<dbx-popup></dbx-popup>",
+      "sourceLocation": {
+        "file": "src/lib/interaction/popup/popup.component.ts",
+        "line": 63
+      }
+    },
+    {
+      "slug": "prompt",
+      "category": "overlay",
+      "kind": "component",
+      "selector": "dbx-prompt",
+      "className": "DbxPromptComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a styled prompt section with a header, descriptive text, and a hero content slot.",
+      "inputs": [
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "prompt",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[hero]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "prompt-confirm",
+        "dialog-content"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/interaction/prompt/prompt.component.ts",
+      "example": "<dbx-prompt header=\"Delete account\" prompt=\"This cannot be undone.\">\n  <button mat-button (click)=\"cancel()\">Cancel</button>\n  <button mat-flat-button color=\"warn\" (click)=\"confirm()\">Delete</button>\n</dbx-prompt>",
+      "minimalExample": "<dbx-prompt header=\"Confirm\"></dbx-prompt>",
+      "sourceLocation": {
+        "file": "src/lib/interaction/prompt/prompt.component.ts",
+        "line": 25
+      }
+    },
+    {
+      "slug": "prompt-confirm",
+      "category": "overlay",
+      "kind": "component",
+      "selector": "dbx-prompt-confirm",
+      "className": "DbxPromptConfirmComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a confirmation prompt with customizable title, message, confirm, and cancel buttons.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "Maybe<DbxPromptConfirmConfig>",
+          "description": "",
+          "required": false,
+          "default": "{}"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "confirm",
+          "emits": "void",
+          "description": ""
+        },
+        {
+          "name": "cancel",
+          "emits": "void",
+          "description": ""
+        }
+      ],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "prompt",
+        "action-confirm"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/interaction/prompt/prompt.confirm.component.ts",
+      "example": "<dbx-prompt-confirm [config]=\"{ header: 'Delete?', confirmText: 'Delete', cancelText: 'Cancel' }\"></dbx-prompt-confirm>",
+      "minimalExample": "<dbx-prompt-confirm [config]=\"cfg\"></dbx-prompt-confirm>",
+      "sourceLocation": {
+        "file": "src/lib/interaction/prompt/prompt.confirm.component.ts",
+        "line": 34
+      }
+    },
+    {
+      "slug": "bar",
+      "category": "layout",
+      "kind": "directive",
+      "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<DbxBarColor>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "bar-header",
+        "pagebar",
+        "button-spacer"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/bar/bar.directive.ts",
+      "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>",
+      "minimalExample": "<dbx-bar><button>A</button><button>B</button></dbx-bar>",
+      "sourceLocation": {
+        "file": "src/lib/layout/bar/bar.directive.ts",
+        "line": 27
+      }
+    },
+    {
+      "slug": "bar-header",
+      "category": "layout",
+      "kind": "component",
+      "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.",
+      "inputs": [
+        {
+          "name": "text",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "color",
+          "type": "Maybe<DbxBarColor>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "bar",
+        "pagebar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/bar/bar.header.component.ts",
+      "example": "<dbx-bar-header header=\"Members\" icon=\"group\">\n  <button mat-icon-button><mat-icon>add</mat-icon></button>\n</dbx-bar-header>",
+      "minimalExample": "<dbx-bar-header header=\"Title\"></dbx-bar-header>",
+      "sourceLocation": {
+        "file": "src/lib/layout/bar/bar.header.component.ts",
+        "line": 26
+      }
+    },
+    {
+      "slug": "pagebar",
+      "category": "layout",
+      "kind": "component",
+      "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
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[left]\"></ng-content>; <ng-content select=\"[right]\"></ng-content>",
+      "relatedSlugs": [
+        "bar",
+        "navbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks",
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/layout/bar/pagebar.component.ts",
+      "example": "<dbx-pagebar>\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>",
+      "sourceLocation": {
+        "file": "src/lib/layout/bar/pagebar.component.ts",
+        "line": 28
+      }
+    },
+    {
+      "slug": "card-box",
+      "category": "card",
+      "kind": "component",
+      "selector": "dbx-card-box",
+      "className": "DbxCardBoxComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a card-style box with an optional section header, icon, and projected content.\n\nSupports a named content slot `[sectionHeader]` for custom header actions beside the title.",
+      "inputs": [
+        {
+          "name": "header",
+          "type": "string",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[sectionHeader]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "card-box-container",
+        "section"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/card/card.box.component.ts",
+      "example": "<dbx-card-box [header]=\"'Settings'\" [icon]=\"'settings'\">\n  <button sectionHeader mat-icon-button><mat-icon>edit</mat-icon></button>\n  <p>Card body content goes here.</p>\n</dbx-card-box>",
+      "minimalExample": "<dbx-card-box header=\"Title\"><p>Body</p></dbx-card-box>",
+      "sourceLocation": {
+        "file": "src/lib/layout/card/card.box.component.ts",
+        "line": 26
+      }
+    },
+    {
+      "slug": "card-box-container",
+      "category": "card",
+      "kind": "directive",
+      "selector": "dbx-card-box-container, [dbxCardBoxContainer]",
+      "className": "DbxCardBoxContainerDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Adds content padding around a card box section.\n\nCan be used as an element or as an attribute directive on any host element.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "card-box"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/card/card.box.container.directive.ts",
+      "example": "<dbx-card-box-container>\n  <dbx-card-box header=\"One\"></dbx-card-box>\n  <dbx-card-box header=\"Two\"></dbx-card-box>\n</dbx-card-box-container>",
+      "minimalExample": "<div dbxCardBoxContainer><dbx-card-box></dbx-card-box></div>",
+      "sourceLocation": {
+        "file": "src/lib/layout/card/card.box.container.directive.ts",
+        "line": 25
+      }
+    },
+    {
+      "slug": "content-box",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-content-box, [dbxContentBox]",
+      "className": "DbxContentBoxDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Wraps content in a box container with optional elevation (card-like shadow) and wide layout.\nBoth `elevate` and `wide` default to `true`.",
+      "inputs": [
+        {
+          "name": "elevate",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "wide",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "true"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "content",
+        "content-elevate",
+        "content-pit"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.box.directive.ts",
+      "example": "<dbx-content-box>\n  <p>Summary content</p>\n</dbx-content-box>",
+      "minimalExample": "<div dbxContentBox>Body</div>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.box.directive.ts",
+        "line": 23
+      }
+    },
+    {
+      "slug": "content-container",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-content-container,[dbxContentContainer],.dbx-content-container",
+      "className": "DbxContentContainerDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Constrains content to a maximum width with configurable padding. Useful for centering\npage content and maintaining readable line lengths.",
+      "inputs": [
+        {
+          "name": "grow",
+          "type": "DbxContentContainerWidth",
+          "description": "",
+          "required": false,
+          "default": "'wide'"
+        },
+        {
+          "name": "padding",
+          "type": "DbxContentContainerPadding",
+          "description": "",
+          "required": false,
+          "default": "'normal'"
+        },
+        {
+          "name": "topPadding",
+          "type": "DbxContentContainerPadding",
+          "description": "",
+          "required": false,
+          "default": "'none'"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "content",
+        "content-page",
+        "content-box"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.container.directive.ts",
+      "example": "<dbx-content-container grow=\"full\" padding=\"normal\">\n  <p>Page body</p>\n</dbx-content-container>",
+      "minimalExample": "<div dbxContentContainer>Body</div>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.container.directive.ts",
+        "line": 33
+      }
+    },
+    {
+      "slug": "content",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-content,[dbxContent]",
+      "className": "DbxContentDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Sets the host element to fill the available page height. Use as a wrapper for page-level content blocks.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "content-container",
+        "content-page",
+        "content-box"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.directive.ts",
+      "example": "<div dbxContent>\n  <p>Standard content body</p>\n</div>",
+      "minimalExample": "<dbx-content>Body</dbx-content>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.directive.ts",
+        "line": 22
+      }
+    },
+    {
+      "slug": "content-elevate",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-content-elevate,[dbxContentElevate]",
+      "className": "DbxContentElevateDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies elevation (box-shadow) styling to the host element, giving it a raised card appearance.\nElevation is enabled by default and can be toggled off.",
+      "inputs": [
+        {
+          "name": "elevate",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "true"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "content-box",
+        "content-pit"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.elevate.directive.ts",
+      "example": "<div dbxContentElevate>Highlighted block</div>",
+      "minimalExample": "<dbx-content-elevate>Body</dbx-content-elevate>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.elevate.directive.ts",
+        "line": 21
+      }
+    },
+    {
+      "slug": "content-page",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-content-page,[dbxContentPage]",
+      "className": "DbxContentPageDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Sets the host element to fill the full page height with page-level content styling.\nSimilar to `DbxContentDirective` but applies the `dbx-content-page` class for page-specific layout.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "content-container",
+        "section-page"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.page.directive.ts",
+      "example": "<div dbxContentPage>\n  <dbx-section-page header=\"Dashboard\"><p>...</p></dbx-section-page>\n</div>",
+      "minimalExample": "<dbx-content-page>Page</dbx-content-page>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.page.directive.ts",
+        "line": 23
+      }
+    },
+    {
+      "slug": "content-pit",
+      "category": "layout",
+      "kind": "directive",
+      "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.",
+      "inputs": [
+        {
+          "name": "scrollable",
+          "type": "Maybe<DbxContentPitScrollableInput>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "rounded",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "content-box",
+        "content-elevate"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/content/content.pit.directive.ts",
+      "example": "<div dbxContentPit>Inset block</div>",
+      "minimalExample": "<dbx-content-pit>Body</dbx-content-pit>",
+      "sourceLocation": {
+        "file": "src/lib/layout/content/content.pit.directive.ts",
+        "line": 38
+      }
+    },
+    {
+      "slug": "flex-group",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxFlexGroup]",
+      "className": "DbxFlexGroupDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Creates a flex group container that arranges child elements in a responsive row layout.\n\nOn small screens (below the configured breakpoint), the group applies a small-screen CSS class\nthat can be used to adjust styling. When `breakToColumn` is enabled, items will stack vertically\non small screens.",
+      "inputs": [
+        {
+          "name": "content",
+          "type": "boolean",
+          "description": "Whether to apply the flex group content styling. Defaults to `true`.",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "breakToColumn",
+          "type": "boolean",
+          "description": "Whether child items should break to a column layout on small screens.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "relative",
+          "type": "boolean",
+          "description": "Whether the flex group should use relative positioning.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "breakpoint",
+          "type": "ScreenMediaWidthType",
+          "description": "Screen width breakpoint below which the group is considered \"small\". Defaults to `'tablet'`.",
+          "required": false,
+          "default": "'tablet'"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "flex-size",
+        "bar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/flex/flex.group.directive.ts",
+      "example": "<div dbxFlexGroup breakpoint=\"sm\">\n  <div dbxFlexSize=\"2\">Wide</div>\n  <div dbxFlexSize=\"1\">Narrow</div>\n</div>",
+      "minimalExample": "<div dbxFlexGroup><div dbxFlexSize=\"1\">A</div></div>",
+      "sourceLocation": {
+        "file": "src/lib/layout/flex/flex.group.directive.ts",
+        "line": 33
+      }
+    },
+    {
+      "slug": "flex-size",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxFlexSize]",
+      "className": "DbxFlexSizeDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies a `dbx-flex-{size}` CSS class to the host element based on the given {@link DbxFlexSize} value.\nUse within a {@link DbxFlexGroupDirective} to control how much row width this element occupies.",
+      "inputs": [
+        {
+          "name": "dbxFlexSize",
+          "type": "DbxFlexSize",
+          "description": "The flex size to apply, from 1 (1/6 width) to 6 (full width).",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "flex-group"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/flex/flex.size.directive.ts",
+      "example": "<div dbxFlexGroup>\n  <div dbxFlexSize=\"2\">Twice as wide</div>\n  <div dbxFlexSize=\"1\">Narrow</div>\n</div>",
+      "minimalExample": "<div dbxFlexSize=\"1\"></div>",
+      "sourceLocation": {
+        "file": "src/lib/layout/flex/flex.size.directive.ts",
+        "line": 25
+      }
+    },
+    {
+      "slug": "list",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list",
+      "className": "DbxListComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a potentially infinitely scrollable list of content. Supports load-more triggers, selection modes, and empty/loading states.\n\nThis component is typically wrapped by a higher-level component that provides its configuration via the `config` input.",
+      "inputs": [
+        {
+          "name": "padded",
+          "type": "boolean",
+          "description": "Whether or not to add bottom padding to the list content.",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "state",
+          "type": "Maybe<Observable<Maybe<S>>>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "config",
+          "type": "Maybe<DbxListConfig<T, V>>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "disabled",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "selectionMode",
+          "type": "Maybe<DbxListSelectionMode>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "hasMore",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "contentScrolled",
+          "emits": "DbxListComponentScrolledEventPosition",
+          "description": "Emitted when content is scrolled."
+        }
+      ],
+      "relatedSlugs": [
+        "list-view",
+        "list-empty-content",
+        "list-grid-view",
+        "list-accordion-view",
+        "selection-list-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/list.component.ts",
+      "example": "<dbx-list [state$]=\"items$\" [config]=\"listConfig\" (contentScrolled)=\"onScroll($event)\"></dbx-list>",
+      "minimalExample": "<dbx-list [state$]=\"items$\" [config]=\"listConfig\"></dbx-list>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/list.component.ts",
+        "line": 138
+      }
+    },
+    {
+      "slug": "list-empty-content",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list-empty-content",
+      "className": "DbxListEmptyContentComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays centered placeholder content within an empty list. Projects its content into a styled container.",
+      "inputs": [],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "list"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/list.content.empty.component.ts",
+      "example": "<dbx-list [state$]=\"items$\" [config]=\"listConfig\">\n  <dbx-list-empty-content>\n    <p>No items yet — add one to get started.</p>\n  </dbx-list-empty-content>\n</dbx-list>",
+      "minimalExample": "<dbx-list-empty-content>Empty</dbx-list-empty-content>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/list.content.empty.component.ts",
+        "line": 24
+      }
+    },
+    {
+      "slug": "list-view",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list-view",
+      "className": "DbxValueListViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a value-based list view using a configuration input. Must be used within a parent {@link DbxListView} context.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "C",
+          "description": "",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "list",
+        "selection-list-view",
+        "list-grid-view",
+        "list-accordion-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/list.view.value.component.ts",
+      "example": "<dbx-list-view [config]=\"rowConfig\"></dbx-list-view>",
+      "minimalExample": "<dbx-list-view [config]=\"rowConfig\"></dbx-list-view>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/list.view.value.component.ts",
+        "line": 194
+      }
+    },
+    {
+      "slug": "selection-list-view",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-selection-list-view",
+      "className": "DbxSelectionValueListViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a selection-capable list view using a configuration input. Requires a parent {@link DbxListView} context.\nSwitches between selection mode (with checkboxes) and view mode (standard list) based on the parent's selection mode.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "C",
+          "description": "",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "list",
+        "list-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/list.view.value.selection.component.ts",
+      "example": "<dbx-selection-list-view [config]=\"rowConfig\" selectionMode=\"multi\"></dbx-selection-list-view>",
+      "minimalExample": "<dbx-selection-list-view [config]=\"rowConfig\"></dbx-selection-list-view>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/list.view.value.selection.component.ts",
+        "line": 104
+      }
+    },
+    {
+      "slug": "section",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-section",
+      "className": "DbxSectionComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a content section with a header and body area. The header defaults to an h3 heading\nand supports optional elevation styling.",
+      "inputs": [
+        {
+          "name": "elevate",
+          "type": "boolean",
+          "description": "Apply elevated card styling.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "headerConfig",
+          "type": "Maybe<DbxSectionHeaderConfig>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "h",
+          "type": "Maybe<DbxSectionHeaderHType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "paddedHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "onlyHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hintInline",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[sectionHeader]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "subsection",
+        "section-page",
+        "section-header",
+        "intro-action-section"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks",
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/section/section.component.ts",
+      "example": "<dbx-section header=\"My Section\" icon=\"info\" hint=\"Additional context\">\n  <p>Section body content here.</p>\n</dbx-section>\n\n<dbx-section header=\"Elevated Section\" [elevate]=\"true\">\n  <button sectionHeader>Custom Header Action</button>\n  <p>Body content with elevated card styling.</p>\n</dbx-section>",
+      "minimalExample": "<dbx-section header=\"My Section\"><p>Body</p></dbx-section>",
+      "sourceLocation": {
+        "file": "src/lib/layout/section/section.component.ts",
+        "line": 29
+      }
+    },
+    {
+      "slug": "section-header",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-section-header,.dbx-section-header",
+      "className": "DbxSectionHeaderComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a section header with a configurable heading level (h1-h5), optional icon, and hint text.\nCan be used as a standalone element or as an attribute directive on elements with the `.dbx-section-header` class.\nServes as the base class for `DbxSectionComponent` and `DbxSectionPageComponent`.",
+      "inputs": [
+        {
+          "name": "headerConfig",
+          "type": "Maybe<DbxSectionHeaderConfig>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "h",
+          "type": "Maybe<DbxSectionHeaderHType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "paddedHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "onlyHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hintInline",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "section",
+        "subsection"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/section/section.header.component.ts",
+      "example": "<div class=\"dbx-section-header\" header=\"Custom Layout\" [h]=\"2\" icon=\"info\"></div>",
+      "minimalExample": "<dbx-section-header header=\"My Header\"></dbx-section-header>",
+      "sourceLocation": {
+        "file": "src/lib/layout/section/section.header.component.ts",
+        "line": 26
+      }
+    },
+    {
+      "slug": "intro-action-section",
+      "category": "feedback",
+      "kind": "component",
+      "selector": "dbx-intro-action-section",
+      "className": "DbxIntroActionSectionComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays an introductory message with a call-to-action button. When the button is clicked,\nthe intro is replaced by the projected content. Useful for onboarding or first-time-use flows.",
+      "inputs": [
+        {
+          "name": "hint",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "showIntro",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "action",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [
+        {
+          "name": "showAction",
+          "emits": "void",
+          "description": ""
+        }
+      ],
+      "contentProjection": "<ng-content select=\"[info]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "section",
+        "list-empty-content"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/section/section.intro.component.ts",
+      "example": "<dbx-intro-action-section\n  hint=\"Welcome! Click below to get started.\"\n  action=\"Get Started\"\n  [showIntro]=\"!hasOnboarded\"\n  (showAction)=\"markOnboarded()\">\n  <p>Main content shown after the action.</p>\n</dbx-intro-action-section>",
+      "minimalExample": "<dbx-intro-action-section hint=\"Welcome\" action=\"Start\"><p>Body</p></dbx-intro-action-section>",
+      "sourceLocation": {
+        "file": "src/lib/layout/section/section.intro.component.ts",
+        "line": 29
+      }
+    },
+    {
+      "slug": "section-page",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-section-page",
+      "className": "DbxSectionPageComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a full page section with a header (defaulting to h2) and scrollable body area.\nSupports nested section pages that retain proper fixed-height layout. Use for top-level\npage content that needs a prominent heading.",
+      "inputs": [
+        {
+          "name": "scroll",
+          "type": "DbxSectionPageScrollLockedMode",
+          "description": "",
+          "required": false,
+          "default": "'all'"
+        },
+        {
+          "name": "headerConfig",
+          "type": "Maybe<DbxSectionHeaderConfig>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "h",
+          "type": "Maybe<DbxSectionHeaderHType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "paddedHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "onlyHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hintInline",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[sectionHeader]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "section",
+        "content-page"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks",
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/layout/section/section.page.component.ts",
+      "example": "<dbx-section-page header=\"Dashboard\" icon=\"dashboard\" scroll=\"body\">\n  <p>Top-level page content.</p>\n</dbx-section-page>",
+      "minimalExample": "<dbx-section-page header=\"Page\"><p>Body</p></dbx-section-page>",
+      "sourceLocation": {
+        "file": "src/lib/layout/section/section.page.component.ts",
+        "line": 34
+      }
+    },
+    {
+      "slug": "subsection",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-subsection",
+      "className": "DbxSubSectionComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a subsection within a parent section, using a smaller heading (defaults to h4).\nUseful for grouping related content under a `dbx-section`.",
+      "inputs": [
+        {
+          "name": "elevate",
+          "type": "boolean",
+          "description": "Apply elevated card styling.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "headerConfig",
+          "type": "Maybe<DbxSectionHeaderConfig>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "h",
+          "type": "Maybe<DbxSectionHeaderHType>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "paddedHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "onlyHeader",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hint",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "hintInline",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[sectionHeader]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "section",
+        "section-header"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/section/subsection.component.ts",
+      "example": "<dbx-section header=\"Settings\">\n  <dbx-subsection header=\"Notifications\" icon=\"notifications\">\n    <p>Subsection body.</p>\n  </dbx-subsection>\n</dbx-section>",
+      "minimalExample": "<dbx-subsection header=\"Details\"><p>Body</p></dbx-subsection>",
+      "sourceLocation": {
+        "file": "src/lib/layout/section/subsection.component.ts",
+        "line": 27
+      }
+    },
+    {
+      "slug": "spacer",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-spacer, [dbxSpacer]",
+      "className": "DbxSpacerDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Adds flexible spacing between sibling elements in a flex container.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "bar",
+        "button-spacer"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/style/spacer.directive.ts",
+      "example": "<dbx-bar>\n  <span>Title</span>\n  <dbx-spacer></dbx-spacer>\n  <button mat-button>Action</button>\n</dbx-bar>",
+      "minimalExample": "<dbx-spacer></dbx-spacer>",
+      "sourceLocation": {
+        "file": "src/lib/layout/style/spacer.directive.ts",
+        "line": 24
+      }
+    },
+    {
+      "slug": "click-to-copy-text",
+      "category": "text",
+      "kind": "component",
+      "selector": "dbx-click-to-copy-text",
+      "className": "DbxClickToCopyTextComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Wraps projected content with click-to-copy functionality and a copy icon button.\n\nClicking the text or the icon copies the text to the clipboard and optionally shows a snackbar confirmation.",
+      "inputs": [
+        {
+          "name": "copyText",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "showIcon",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "highlighted",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "clipboardSnackbarMessagesConfig",
+          "type": "Maybe<CopyToClipboardFunctionWithSnackbarMessageSnackbarConfig>",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "clipboardSnackbarMessagesEnabled",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "clickToCopyIcon",
+          "type": "string",
+          "description": "",
+          "required": false,
+          "default": "'content_copy'"
+        },
+        {
+          "name": "clickIconToCopyOnly",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "chip"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/text/copy.text.component.ts",
+      "example": "<dbx-click-to-copy-text [text]=\"userId\"></dbx-click-to-copy-text>",
+      "minimalExample": "<dbx-click-to-copy-text [text]=\"value\"></dbx-click-to-copy-text>",
+      "sourceLocation": {
+        "file": "src/lib/layout/text/copy.text.component.ts",
+        "line": 26
+      }
+    },
+    {
+      "slug": "detail-block",
+      "category": "text",
+      "kind": "component",
+      "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.",
+      "inputs": [
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "alignHeader",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "bigHeader",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[header]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "label-block"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/text/detail.block.component.ts",
+      "example": "<dbx-detail-block header=\"Email\" icon=\"mail\">\n  <p>{{ user.email }}</p>\n</dbx-detail-block>",
+      "minimalExample": "<dbx-detail-block header=\"Label\">Body</dbx-detail-block>",
+      "sourceLocation": {
+        "file": "src/lib/layout/text/detail.block.component.ts",
+        "line": 26
+      }
+    },
+    {
+      "slug": "label-block",
+      "category": "text",
+      "kind": "component",
+      "selector": "dbx-label-block",
+      "className": "DbxLabelBlockComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a label header above projected content, useful for labeling form fields or data sections.",
+      "inputs": [
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "detail-block"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/text/label.block.component.ts",
+      "example": "<dbx-label-block header=\"Status\"><span>Active</span></dbx-label-block>",
+      "minimalExample": "<dbx-label-block header=\"Label\">Body</dbx-label-block>",
+      "sourceLocation": {
+        "file": "src/lib/layout/text/label.block.component.ts",
+        "line": 21
+      }
+    },
+    {
+      "slug": "chip",
+      "category": "text",
+      "kind": "directive",
+      "selector": "dbx-chip",
+      "className": "DbxChipDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a styled chip element with optional small, block, and color modes.",
+      "inputs": [
+        {
+          "name": "small",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "block",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        },
+        {
+          "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.",
+          "required": false
+        },
+        {
+          "name": "display",
+          "type": "Maybe<DbxChipDisplay>",
+          "description": "Display configuration that provides color (and optionally label/value metadata).\n\nThe color from `display` is used as a fallback when `color` is not explicitly set.",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "Maybe<DbxColorTone>",
+          "description": "Background tone level for tonal appearance. Defaults to {@link DBX_CHIP_DEFAULT_TONE}.\n\nSet to `100` for fully opaque background.",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "chip-list"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/text/text.chip.directive.ts",
+      "example": "<dbx-chip text=\"Active\" icon=\"check\" color=\"primary\"></dbx-chip>",
+      "minimalExample": "<dbx-chip text=\"Tag\"></dbx-chip>",
+      "sourceLocation": {
+        "file": "src/lib/layout/text/text.chip.directive.ts",
+        "line": 55
+      }
+    },
+    {
+      "slug": "chip-list",
+      "category": "text",
+      "kind": "component",
+      "selector": "dbx-chip-list",
+      "className": "DbxChipListComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a row of colored chips from an array of {@link DbxChipDisplay} items.\n\nUses {@link DbxChipDirective} internally with `dbx-chip-spacer` class for spacing.",
+      "inputs": [
+        {
+          "name": "chips",
+          "type": "Maybe<DbxChipDisplay[]>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "small",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "chip"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks"
+      ],
+      "sourcePath": "lib/layout/text/text.chip.list.component.ts",
+      "example": "<dbx-chip-list>\n  <dbx-chip text=\"Tag1\"></dbx-chip>\n  <dbx-chip text=\"Tag2\"></dbx-chip>\n</dbx-chip-list>",
+      "minimalExample": "<dbx-chip-list></dbx-chip-list>",
+      "sourceLocation": {
+        "file": "src/lib/layout/text/text.chip.list.component.ts",
+        "line": 27
+      }
+    },
+    {
+      "slug": "two-column",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-two-column",
+      "className": "DbxTwoColumnComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Responsive two-column layout that splits content into a narrower left column and a wider right column.\n\nThe right column contains the primary content. When the viewport is too narrow to fit both columns,\nthe left column can be automatically hidden based on the configured minimum right width.\n\nRequires a {@link TwoColumnsContextStore} to be provided by a parent component or directive.",
+      "inputs": [
+        {
+          "name": "reverseSizing",
+          "type": "boolean",
+          "description": "Whether to reverse the default column sizing so the left column is larger than the right.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "inSectionPage",
+          "type": "boolean",
+          "description": "Whether this two-column layout is rendered within a section page context.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "hasRightContent",
+          "type": "boolean",
+          "description": "Acts as an override to show the right column without having to use dbx-two-column-right or update the context store directly.",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[left]\"></ng-content>; <ng-content select=\"[right]\"></ng-content>",
+      "relatedSlugs": [
+        "two-column-right"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks",
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/layout/column/two/two.column.component.ts",
+      "example": "<dbx-two-column [inSectionPage]=\"true\">\n  <dbx-list left [state$]=\"state$\" [config]=\"listConfig\" />\n  <dbx-two-column-right right header=\"Detail\">\n    <p>Selected item detail.</p>\n  </dbx-two-column-right>\n</dbx-two-column>",
+      "minimalExample": "<dbx-two-column>\n<div left>Sidebar</div>\n<div right>Main</div>\n</dbx-two-column>",
+      "sourceLocation": {
+        "file": "src/lib/layout/column/two/two.column.component.ts",
+        "line": 53
+      }
+    },
+    {
+      "slug": "two-column-right",
+      "category": "layout",
+      "kind": "component",
+      "selector": "dbx-two-column-right",
+      "className": "DbxTwoColumnRightComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Wraps right-column content within a {@link DbxTwoColumnComponent} and renders a navigation bar with a back button.\n\nWhen this component is created, it automatically registers itself with the {@link TwoColumnsContextStore}\nto indicate that right-side content is present.",
+      "inputs": [
+        {
+          "name": "full",
+          "type": "boolean",
+          "description": "Whether the header area should expand to full width.",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "header",
+          "type": "Maybe<string>",
+          "description": "Optional title text displayed in the navigation bar header.",
+          "required": false
+        },
+        {
+          "name": "block",
+          "type": "Maybe<boolean>",
+          "description": "Whether the header should use block-level display.",
+          "required": false
+        },
+        {
+          "name": "showBack",
+          "type": "boolean",
+          "description": "Whether to show the default back button. Defaults to `true`.\nIf a `backRef` is set on the store, that anchor is used instead.",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "minRightWidth",
+          "type": "Maybe<number>",
+          "description": "Minimum right-side width allowed in pixels.",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[nav]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "two-column"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-ui-building-blocks",
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/layout/column/two/two.column.right.component.ts",
+      "example": "<dbx-two-column-right header=\"Item Detail\">\n  <button nav mat-icon-button><mat-icon>delete</mat-icon></button>\n  <p>Body content</p>\n</dbx-two-column-right>",
+      "minimalExample": "<dbx-two-column-right>Body</dbx-two-column-right>",
+      "sourceLocation": {
+        "file": "src/lib/layout/column/two/two.column.right.component.ts",
+        "line": 35
+      }
+    },
+    {
+      "slug": "list-accordion-view",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list-accordion-view",
+      "className": "DbxValueListAccordionViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a value list as an accordion using a configuration input. Each item renders its own expansion panel.\nRequires a parent {@link DbxListView} context.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "C",
+          "description": "",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "list",
+        "list-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/accordion/list.accordion.view.component.ts",
+      "example": "<dbx-list-accordion-view [config]=\"rowConfig\"></dbx-list-accordion-view>",
+      "minimalExample": "<dbx-list-accordion-view [config]=\"rowConfig\"></dbx-list-accordion-view>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/accordion/list.accordion.view.component.ts",
+        "line": 228
+      }
+    },
+    {
+      "slug": "list-grid-view",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list-grid-view",
+      "className": "DbxValueListGridViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders a value list as a CSS grid using a configuration input. Requires a parent {@link DbxListView} context.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "C",
+          "description": "",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "list",
+        "list-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/grid/list.grid.view.component.ts",
+      "example": "<dbx-list-grid-view [config]=\"cellConfig\" dbxListGridSize=\"md\"></dbx-list-grid-view>",
+      "minimalExample": "<dbx-list-grid-view [config]=\"cellConfig\"></dbx-list-grid-view>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/grid/list.grid.view.component.ts",
+        "line": 182
+      }
+    },
+    {
+      "slug": "list-title-group-header",
+      "category": "list",
+      "kind": "component",
+      "selector": "dbx-list-title-group-header",
+      "className": "DbxListTitleGroupHeaderComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Default group header component that displays a title, optional icon, and optional hint text.\nUsed automatically by {@link DbxListTitleGroupDirective} unless a custom header component is specified.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "list",
+        "list-view"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ],
+      "sourcePath": "lib/layout/list/group/list.view.value.group.title.header.component.ts",
+      "example": "<dbx-list-view [config]=\"rowConfig\" dbxListTitleGroup></dbx-list-view>",
+      "minimalExample": "<dbx-list-title-group-header></dbx-list-title-group-header>",
+      "sourceLocation": {
+        "file": "src/lib/layout/list/group/list.view.value.group.title.header.component.ts",
+        "line": 38
+      }
+    },
+    {
+      "slug": "anchor",
+      "category": "router",
+      "kind": "component",
+      "selector": "dbx-anchor, [dbx-anchor]",
+      "className": "DbxAnchorComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders an anchor element that adapts its presentation based on the type of navigation link provided.\n\nSupports plain content, clickable actions, router segue references, external hrefs, and disabled states.",
+      "inputs": [
+        {
+          "name": "block",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content></ng-content>",
+      "relatedSlugs": [
+        "anchor-list",
+        "navbar",
+        "sidenav"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/router/layout/anchor/anchor.component.ts",
+      "example": "<dbx-anchor [anchor]=\"{ ref: 'app.home' }\">\n  <button mat-button>Home</button>\n</dbx-anchor>",
+      "minimalExample": "<dbx-anchor [anchor]=\"{ url: '/' }\">Home</dbx-anchor>",
+      "sourceLocation": {
+        "file": "src/lib/router/layout/anchor/anchor.component.ts",
+        "line": 32
+      }
+    },
+    {
+      "slug": "anchor-list",
+      "category": "router",
+      "kind": "component",
+      "selector": "dbx-anchor-list",
+      "className": "DbxAnchorListComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Displays a hierarchical list of {@link ClickableAnchorLinkTree} items inside a Material navigation list.\n\nEach anchor is expanded and assigned depth-based CSS classes for nested styling.",
+      "inputs": [
+        {
+          "name": "anchors",
+          "type": "ClickableAnchorLinkTree[]",
+          "description": "",
+          "required": true
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "anchor",
+        "sidenav"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/router/layout/anchorlist/anchorlist.component.ts",
+      "example": "<dbx-anchor-list [anchors]=\"navAnchors\"></dbx-anchor-list>",
+      "minimalExample": "<dbx-anchor-list [anchors]=\"anchors\"></dbx-anchor-list>",
+      "sourceLocation": {
+        "file": "src/lib/router/layout/anchorlist/anchorlist.component.ts",
+        "line": 36
+      }
+    },
+    {
+      "slug": "navbar",
+      "category": "navigation",
+      "kind": "component",
+      "selector": "dbx-navbar",
+      "className": "DbxNavbarComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Responsive navigation bar that displays anchor links as Material tabs, collapsing to a button menu or icon on smaller screens.\n\nAutomatically selects the active anchor based on the current route and supports configurable breakpoints.",
+      "inputs": [
+        {
+          "name": "showMenuCaret",
+          "type": "boolean",
+          "description": "Whether or not to show the dropwdown caret for a menu",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "fab",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "navAlign",
+          "type": "HorizontalConnectionPos",
+          "description": "",
+          "required": false,
+          "default": "'center'"
+        },
+        {
+          "name": "icon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "defaultIcon",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false,
+          "default": "'menu'"
+        },
+        {
+          "name": "defaultText",
+          "type": "Maybe<string>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "mode",
+          "type": "Maybe<NavbarMode>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "buttonMode",
+          "type": "NavbarButtonMode",
+          "description": "",
+          "required": false,
+          "default": "'menu'"
+        },
+        {
+          "name": "breakpoint",
+          "type": "ScreenMediaWidthType",
+          "description": "",
+          "required": false,
+          "default": "'large'"
+        },
+        {
+          "name": "anchors",
+          "type": "Maybe<ClickableAnchorLinkSegueRef[]>",
+          "description": "",
+          "required": false,
+          "default": "[]"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "anchor",
+        "sidenav",
+        "pagebar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/router/layout/navbar/navbar.component.ts",
+      "example": "<dbx-navbar [anchors]=\"topNav\"></dbx-navbar>",
+      "minimalExample": "<dbx-navbar [anchors]=\"anchors\"></dbx-navbar>",
+      "sourceLocation": {
+        "file": "src/lib/router/layout/navbar/navbar.component.ts",
+        "line": 58
+      }
+    },
+    {
+      "slug": "sidenav",
+      "category": "navigation",
+      "kind": "component",
+      "selector": "dbx-sidenav",
+      "className": "DbxSidenavComponent",
+      "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 | DbxThemeColor",
+          "description": "",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "position",
+          "type": "DbxSidenavPosition",
+          "description": "",
+          "required": false,
+          "default": "'start'"
+        },
+        {
+          "name": "displayMode",
+          "type": "Maybe<SideNavDisplayModeString>",
+          "description": "Overrides the responsive display mode. When set, the sidenav ignores screen-width breakpoints and uses this mode instead.\n\nSet to `'mobile'` to keep the sidenav always hidden as an overlay that only opens when toggled.",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "allowedModes",
+          "type": "Maybe<SideNavDisplayModeString[]>",
+          "description": "Restricts which {@link SideNavDisplayMode} values are permitted.\n\nWhen set, any responsive or overridden mode not in this set is rounded down to the nearest\nallowed mode in the {@link SIDE_NAV_DISPLAY_MODE_ORDER} hierarchy.",
+          "required": false,
+          "default": "undefined"
+        },
+        {
+          "name": "anchors",
+          "type": "Maybe<ClickableAnchorLinkTree[]>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[top]\"></ng-content>; <ng-content select=\"[bottom]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "sidenav-page",
+        "anchor-list"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/router/layout/sidenav/sidenav.component.ts",
+      "example": "<dbx-sidenav [anchors]=\"sidenavAnchors\"></dbx-sidenav>",
+      "minimalExample": "<dbx-sidenav [anchors]=\"anchors\"></dbx-sidenav>",
+      "sourceLocation": {
+        "file": "src/lib/router/layout/sidenav/sidenav.component.ts",
+        "line": 45
+      }
+    },
+    {
+      "slug": "sidenav-page",
+      "category": "navigation",
+      "kind": "component",
+      "selector": "dbx-sidenav-page",
+      "className": "DbxSidenavPageComponent",
+      "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>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "mobileOnly",
+          "type": "boolean",
+          "description": "",
+          "required": false,
+          "default": "false"
+        }
+      ],
+      "outputs": [],
+      "contentProjection": "<ng-content select=\"[navRight]\"></ng-content>; <ng-content></ng-content>",
+      "relatedSlugs": [
+        "sidenav",
+        "navbar"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-app-structure"
+      ],
+      "sourcePath": "lib/router/layout/sidenav/sidenav.page.component.ts",
+      "example": "<dbx-sidenav-page>\n  <ui-view></ui-view>\n</dbx-sidenav-page>",
+      "minimalExample": "<dbx-sidenav-page>Content</dbx-sidenav-page>",
+      "sourceLocation": {
+        "file": "src/lib/router/layout/sidenav/sidenav.page.component.ts",
+        "line": 31
+      }
+    }
+  ]
+}