@dereekb/dbx-web 13.9.0 → 13.10.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -394,6 +394,20 @@ class DbxPopoverComponentController extends DbxPopoverController {
  * Core popover component that renders injected content with position strategy, transition watching, and keyboard close support.
  *
  * Coordinates with {@link DbxPopoverCoordinatorService} to ensure only one popover per key is active at a time.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug popover
+ * @dbxWebCategory overlay
+ * @dbxWebRelated popup, prompt-confirm, dialog-content
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-popover></dbx-popover>
+ * ```
+ *
+ * @example
+ * ```html
+ * // In a service: this.popoverService.open({ content: MyContentComponent, origin })
+ * ```
  */
 class DbxPopoverComponent extends AbstractTransitionWatcherDirective {
     popoverRef = inject((NgPopoverRef));
@@ -967,11 +981,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Progress button that displays a Material progress bar beneath the button while working.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug progress-bar-button
+ * @dbxWebCategory button
+ * @dbxWebRelated button, progress-spinner-button
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-progress-bar-button [config]="cfg"></dbx-progress-bar-button>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-progress-bar-button [config]="buttonConfig" (btnClick)="onSave()">
- *   Save
- * </dbx-progress-bar-button>
+ * <dbx-progress-bar-button [config]="cfg" (btnClick)="onClick()"></dbx-progress-bar-button>
  * ```
  */
 class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective {
@@ -989,11 +1010,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Progress button that overlays a Material progress spinner on the button while working.
  * Supports icon-only, FAB, and text button modes with automatic spinner sizing.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug progress-spinner-button
+ * @dbxWebCategory button
+ * @dbxWebRelated button, progress-bar-button
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-progress-spinner-button [config]="cfg"></dbx-progress-spinner-button>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-progress-spinner-button [config]="buttonConfig" (btnClick)="onSubmit()">
- *   Submit
- * </dbx-progress-spinner-button>
+ * <dbx-progress-spinner-button [config]="cfg" (btnClick)="onClick()"></dbx-progress-spinner-button>
  * ```
  */
 class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective {
@@ -1120,6 +1148,15 @@ function provideDbxProgressButtonGlobalConfig(config) {
  * custom colors, icons, and floating action button (FAB) mode. Integrates with the dbxAction system
  * for automatic working/disabled state management.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug button
+ * @dbxWebCategory button
+ * @dbxWebRelated icon-button, progress-spinner-button, progress-bar-button
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-button text="Save" raised [dbxAction]="saveAction"></dbx-button>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-button [text]="'Save'" raised [dbxAction]="saveAction">
@@ -1310,16 +1347,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Adds inline spacing between adjacent buttons. Can be used as an element or attribute.
  *
- * @example
- * ```html
- * <dbx-button text="Cancel"></dbx-button>
+ * @dbxWebComponent
+ * @dbxWebSlug button-spacer
+ * @dbxWebCategory button
+ * @dbxWebRelated bar, spacer, button
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
  * <dbx-button-spacer></dbx-button-spacer>
- * <dbx-button text="Save" raised></dbx-button>
  * ```
  *
  * @example
  * ```html
- * <span dbxButtonSpacer></span>
+ * <dbx-bar>
+ *   <dbx-button text="Save" raised></dbx-button>
+ *   <dbx-button-spacer></dbx-button-spacer>
+ *   <dbx-button text="Cancel"></dbx-button>
+ * </dbx-bar>
  * ```
  */
 class DbxButtonSpacerDirective {
@@ -1341,18 +1384,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Lightweight button that renders as either an icon-only Material icon button or a text button
  * with an icon prefix, depending on whether text is provided.
  *
- * @deprecated Use `dbx-button` instead. For icon-only buttons use `<dbx-button icon="settings" iconOnly>`.
- * For icon+text buttons use `<dbx-button icon="settings" text="Label">`. The `dbx-button` component
- * supports all the same inputs plus working/loading states, colors, and button style variants.
- *
- * @example
- * ```html
- * <dbx-icon-button icon="settings" (buttonClick)="openSettings()"></dbx-icon-button>
+ * @dbxWebComponent
+ * @dbxWebSlug icon-button
+ * @dbxWebCategory button
+ * @dbxWebRelated button
+ * @dbxWebSkillRefs dbx__migration__migrate-dbx-icon-button
+ * @dbxWebMinimalExample ```html
+ * <dbx-icon-button icon="add"></dbx-icon-button>
  * ```
  *
  * @example
  * ```html
- * <dbx-icon-button icon="add" text="Add Item" (buttonClick)="addItem()"></dbx-icon-button>
+ * <dbx-icon-button icon="delete" color="warn" [dbxAction]="deleteAction"></dbx-icon-button>
  * ```
  */
 class DbxIconButtonComponent extends AbstractDbxButtonDirective {
@@ -2288,10 +2331,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Can be used as an element, attribute, or CSS class selector.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug dialog-content
+ * @dbxWebCategory overlay
+ * @dbxWebRelated popover, popup, prompt
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <div dbxDialogContent>Body</div>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-dialog-content [width]="'wide'">
- *   <p>Dialog body content here.</p>
+ * <dbx-dialog-content>
+ *   <h2>Confirm</h2>
+ *   <p>Are you sure?</p>
  * </dbx-dialog-content>
  * ```
  */
@@ -2690,11 +2743,18 @@ function resizeSignal(inputElement) {
  *
  * Uses a `ResizeObserver` internally via {@link resizeSignal}.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug resized
+ * @dbxWebCategory screen
+ * @dbxWebRelated flex-group
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div (dbxResized)="handle($event)"></div>
+ * ```
+ *
  * @example
  * ```html
- * <div dbxResized (dbxResized)="onResize($event)">
- *   Resizable content
- * </div>
+ * <div (dbxResized)="onResized($event)" class="resizable-panel"></div>
  * ```
  */
 class DbxResizedDirective {
@@ -3333,10 +3393,20 @@ function overrideClickElementEffect(config) {
  *
  * Supports plain content, clickable actions, router segue references, external hrefs, and disabled states.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug anchor
+ * @dbxWebCategory router
+ * @dbxWebRelated anchor-list, navbar, sidenav
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-anchor [anchor]="{ url: '/' }">Home</dbx-anchor>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-anchor [anchor]="myAnchor">Click me</dbx-anchor>
- * <span dbx-anchor [anchor]="myAnchor" [block]="true">Block anchor</span>
+ * <dbx-anchor [anchor]="{ ref: 'app.home' }">
+ *   <button mat-button>Home</button>
+ * </dbx-anchor>
  * ```
  */
 class DbxAnchorComponent extends AbstractDbxAnchorDirective {
@@ -3455,9 +3525,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Each anchor is expanded and assigned depth-based CSS classes for nested styling.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug anchor-list
+ * @dbxWebCategory router
+ * @dbxWebRelated anchor, sidenav
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-anchor-list [anchors]="anchors"></dbx-anchor-list>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-anchor-list [anchors]="navLinks"></dbx-anchor-list>
+ * <dbx-anchor-list [anchors]="navAnchors"></dbx-anchor-list>
  * ```
  */
 class DbxAnchorListComponent {
@@ -4046,6 +4125,20 @@ class DbxPopupComponentController extends DbxPopupController {
  * Core popup component that renders injected content with support for minimize, fullscreen, and normal window states.
  *
  * Coordinates with {@link DbxPopupCoordinatorService} to ensure only one popup per key is active at a time.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug popup
+ * @dbxWebCategory overlay
+ * @dbxWebRelated popover
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-popup></dbx-popup>
+ * ```
+ *
+ * @example
+ * ```html
+ * // In a service: this.popupService.open({ content: MyContentComponent })
+ * ```
  */
 class DbxPopupComponent extends AbstractTransitionWatcherDirective {
     popoverRef = inject((NgPopoverRef));
@@ -4478,13 +4571,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Can be used as a standalone element or as an attribute directive on elements with the `.dbx-section-header` class.
  * Serves as the base class for `DbxSectionComponent` and `DbxSectionPageComponent`.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug section-header
+ * @dbxWebCategory layout
+ * @dbxWebRelated section, subsection
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-section-header header="My Header"></dbx-section-header>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-section-header header="My Header" [h]="2" icon="star" hint="A helpful hint"></dbx-section-header>
- *
- * <div class="dbx-section-header" header="Attribute Usage" [h]="3"></div>
- *
- * <dbx-section-header [headerConfig]="{ header: 'Config Object', h: 2, icon: 'info' }"></dbx-section-header>
+ * <div class="dbx-section-header" header="Custom Layout" [h]="2" icon="info"></div>
  * ```
  */
 class DbxSectionHeaderComponent {
@@ -4636,6 +4734,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Displays a content section with a header and body area. The header defaults to an h3 heading
  * and supports optional elevation styling.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug section
+ * @dbxWebCategory layout
+ * @dbxWebRelated subsection, section-page, section-header, intro-action-section
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-section header="My Section"><p>Body</p></dbx-section>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-section header="My Section" icon="info" hint="Additional context">
@@ -4649,6 +4756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * ```
  */
 class DbxSectionComponent extends DbxSectionHeaderComponent {
+    /** Apply elevated card styling. */
     elevate = input(false, ...(ngDevMode ? [{ debugName: "elevate" }] : /* istanbul ignore next */ []));
     classConfig = computed(() => {
         return this.elevate() ? 'dbx-section-elevate dbx-content-elevate' : '';
@@ -4691,11 +4799,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Renders a subsection within a parent section, using a smaller heading (defaults to h4).
  * Useful for grouping related content under a `dbx-section`.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug subsection
+ * @dbxWebCategory layout
+ * @dbxWebRelated section, section-header
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-subsection header="Details"><p>Body</p></dbx-subsection>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-section header="Parent Section">
- *   <dbx-subsection header="Details" icon="settings">
- *     <p>Subsection content here.</p>
+ * <dbx-section header="Settings">
+ *   <dbx-subsection header="Notifications" icon="notifications">
+ *     <p>Subsection body.</p>
  *   </dbx-subsection>
  * </dbx-section>
  * ```
@@ -4736,11 +4853,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Renders a styled prompt section with a header, descriptive text, and a hero content slot.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug prompt
+ * @dbxWebCategory overlay
+ * @dbxWebRelated prompt-confirm, dialog-content
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-prompt header="Confirm"></dbx-prompt>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-prompt [header]="'Welcome'" [prompt]="'Please sign in to continue.'">
- *   <img hero src="logo.png" />
- *   <button mat-raised-button>Sign In</button>
+ * <dbx-prompt header="Delete account" prompt="This cannot be undone.">
+ *   <button mat-button (click)="cancel()">Cancel</button>
+ *   <button mat-flat-button color="warn" (click)="confirm()">Delete</button>
  * </dbx-prompt>
  * ```
  */
@@ -4778,11 +4904,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Renders a confirmation prompt with customizable title, message, confirm, and cancel buttons.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug prompt-confirm
+ * @dbxWebCategory overlay
+ * @dbxWebRelated prompt, action-confirm
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-prompt-confirm [config]="cfg"></dbx-prompt-confirm>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-prompt-confirm [config]="{ title: 'Delete?', prompt: 'This cannot be undone.' }" (confirm)="onConfirm()" (cancel)="onCancel()">
- *   <p>Additional content here.</p>
- * </dbx-prompt-confirm>
+ * <dbx-prompt-confirm [config]="{ header: 'Delete?', confirmText: 'Delete', cancelText: 'Cancel' }"></dbx-prompt-confirm>
  * ```
  */
 class DbxPromptConfirmComponent {
@@ -4959,15 +5092,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Constrains content to a maximum width with configurable padding. Useful for centering
  * page content and maintaining readable line lengths.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content-container
+ * @dbxWebCategory layout
+ * @dbxWebRelated content, content-page, content-box
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxContentContainer>Body</div>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-content-container grow="medium" padding="small">
- *   <p>Centered content with medium max-width.</p>
+ * <dbx-content-container grow="full" padding="normal">
+ *   <p>Page body</p>
  * </dbx-content-container>
- *
- * <div dbxContentContainer grow="full" padding="none" topPadding="small">
- *   <p>Full-width content with top padding.</p>
- * </div>
  * ```
  */
 class DbxContentContainerDirective {
@@ -5701,11 +5839,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Displays a label header above projected content, useful for labeling form fields or data sections.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug label-block
+ * @dbxWebCategory text
+ * @dbxWebRelated detail-block
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-label-block header="Label">Body</dbx-label-block>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-label-block header="Email">
- *   <span>user@example.com</span>
- * </dbx-label-block>
+ * <dbx-label-block header="Status"><span>Active</span></dbx-label-block>
  * ```
  */
 class DbxLabelBlockComponent {
@@ -6045,9 +6190,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Emits a {@link DbxErrorViewButtonEvent} when the button is clicked, which is typically used
  * to open an error detail popover. Used internally by {@link DbxErrorComponent}.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug error-view
+ * @dbxWebCategory feedback
+ * @dbxWebRelated error, error-snackbar
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-error-view [error]="error"></dbx-error-view>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-error-view icon="warning" [message]="'Something went wrong'" (buttonClick)="onErrorClick($event)"></dbx-error-view>
+ * <dbx-error-view [error]="error">
+ *   <dbx-button text="Retry" [dbxAction]="retryAction"></dbx-button>
+ * </dbx-error-view>
  * ```
  */
 class DbxErrorViewComponent {
@@ -6104,12 +6260,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * with an icon and message, or a custom error widget registered via {@link DbxErrorWidgetService}.
  * Clicking the error icon opens a popover with detailed error information.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug error
+ * @dbxWebCategory feedback
+ * @dbxWebRelated error-snackbar, error-view, loading
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-error [error]="error"></dbx-error>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-error [error]="myError"></dbx-error>
- *
- * <!-- Icon-only mode, no message text -->
- * <dbx-error [error]="myError" [iconOnly]="true"></dbx-error>
+ * <dbx-error [error]="error$ | async"></dbx-error>
  * ```
  */
 class DbxErrorComponent {
@@ -6213,13 +6375,18 @@ const DEFAULT_LOADING_PROGRESS_DIAMETER = 96;
  * Supports both linear (bar) and circular (spinner) modes with configurable
  * diameter, color, and optional hint text below the indicator.
  *
- * @example
- * ```html
- * <!-- Indeterminate spinner -->
+ * @dbxWebComponent
+ * @dbxWebSlug loading-progress
+ * @dbxWebCategory feedback
+ * @dbxWebRelated loading, basic-loading
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
  * <dbx-loading-progress></dbx-loading-progress>
+ * ```
  *
- * <!-- Determinate linear bar at 75% -->
- * <dbx-loading-progress [linear]="true" mode="determinate" [value]="75" text="Uploading..."></dbx-loading-progress>
+ * @example
+ * ```html
+ * <dbx-loading-progress mode="bar"></dbx-loading-progress>
  * ```
  */
 class DbxLoadingProgressComponent {
@@ -6286,6 +6453,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Prefer using {@link DbxLoadingComponent} (`<dbx-loading>`) which wraps this component with
  * support for {@link LoadingContext} streams.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug basic-loading
+ * @dbxWebCategory feedback
+ * @dbxWebRelated loading, loading-progress, error
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-basic-loading [loading]="true"><p>Content</p></dbx-basic-loading>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-basic-loading [loading]="true" color="accent" text="Loading data...">
@@ -6368,19 +6544,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * track loading and error state from reactive streams. Also supports manual `loading`
  * and `error` inputs for simpler use cases.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug loading
+ * @dbxWebCategory feedback
+ * @dbxWebRelated basic-loading, loading-progress, error
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-loading [state]="state$ | async">Body</dbx-loading>
+ * ```
+ *
  * @example
  * ```html
- * <!-- With a LoadingContext -->
- * <dbx-loading [context]="myLoadingContext$">
- *   <p>Data loaded successfully.</p>
- * </dbx-loading>
- *
- * <!-- With manual loading/error inputs -->
- * <dbx-loading [loading]="isLoading" [error]="loadError" linear [padding]="true">
- *   <p>Content here.</p>
- *   <ng-container error>
- *     <p>Custom error message.</p>
- *   </ng-container>
+ * <dbx-loading [state]="state$ | async" text="Loading items...">
+ *   <dbx-list [state$]="state$" [config]="listConfig"></dbx-list>
  * </dbx-loading>
  * ```
  */
@@ -6475,10 +6651,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Apply to a `<dbx-loading>` element that is within an action context to automatically
  * reflect the action's loading state in the loading component.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug action-loading-context
+ * @dbxWebCategory action
+ * @dbxWebRelated loading, action-snackbar
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <button [dbxActionLoadingContext]></button>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-loading dbxActionLoadingContext>
- *   <p>Content appears when the action's loading state resolves.</p>
+ * <dbx-loading [state]="ctx.state$ | async">
+ *   <button [dbxAction]="saveAction" dbxActionLoadingContext>Save</button>
  * </dbx-loading>
  * ```
  */
@@ -6523,13 +6708,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Adds flexible spacing between sibling elements in a flex container.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug spacer
+ * @dbxWebCategory layout
+ * @dbxWebRelated bar, button-spacer
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-spacer></dbx-spacer>
+ * ```
+ *
  * @example
  * ```html
- * <div class="dbx-flex">
- *   <span>Left</span>
+ * <dbx-bar>
+ *   <span>Title</span>
  *   <dbx-spacer></dbx-spacer>
- *   <span>Right</span>
- * </div>
+ *   <button mat-button>Action</button>
+ * </dbx-bar>
  * ```
  */
 class DbxSpacerDirective {
@@ -6880,18 +7074,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * (loading, success, error). Supports built-in message presets via `dbxActionSnackbarDefault` and
  * custom generator functions via the `dbxActionSnackbar` input.
  *
- * @example
- * ```html
- * <form [dbxAction]="saveAction" dbxActionSnackbar dbxActionSnackbarDefault="save">
- *   <!-- Shows "Saving...", "Saved", or "Save Failed" snackbars automatically -->
- * </form>
+ * @dbxWebComponent
+ * @dbxWebSlug action-snackbar
+ * @dbxWebCategory action
+ * @dbxWebRelated action-snackbar-error, action-confirm, error-snackbar
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <div [dbxActionSnackbar]="fn"></div>
  * ```
  *
  * @example
  * ```html
- * <div [dbxAction]="deleteAction" [dbxActionSnackbar]="customSnackbarFn" [dbxActionSnackbarUndo]="undoRef">
- *   <!-- Custom snackbar with undo support -->
- * </div>
+ * <button [dbxAction]="saveAction" [dbxActionSnackbar]="snackbarFn">Save</button>
  * ```
  */
 class DbxActionSnackbarDirective {
@@ -7035,18 +7229,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * NOTE: This directive only works with UI-Router (not Angular Router).
  *
- * @example
- * ```html
- * <form [dbxAction]="saveAction" [dbxActionTransitionSafety]="'dialog'">
- *   <!-- Navigating away with unsaved changes shows a confirmation dialog -->
- * </form>
+ * @dbxWebComponent
+ * @dbxWebSlug action-transition-safety
+ * @dbxWebCategory action
+ * @dbxWebRelated action-confirm
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <form [dbxActionTransitionSafety]></form>
  * ```
  *
  * @example
  * ```html
- * <form [dbxAction]="autoSaveAction" [dbxActionTransitionSafety]="'auto'">
- *   <!-- Auto-triggers save on navigation if possible, otherwise shows dialog -->
- * </form>
+ * <form [dbxAction]="formAction" dbxActionTransitionSafety>...</form>
  * ```
  */
 class DbxActionTransitionSafetyDirective {
@@ -7165,11 +7359,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * This directive works with action triggering only, not button clicks.
  * For button-based confirmation, use an appPromptConfirmButton directive instead.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug action-confirm
+ * @dbxWebCategory action
+ * @dbxWebRelated action-snackbar, prompt-confirm
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <div [dbxActionConfirm]="cfg"></div>
+ * ```
+ *
  * @example
  * ```html
- * <form [dbxAction]="myAction" [dbxActionConfirm]="{ title: 'Confirm Delete', prompt: 'Are you sure?', readyValue: itemId }">
- *   ...
- * </form>
+ * <button [dbxAction]="deleteAction" [dbxActionConfirm]="{ header: 'Delete account?', confirmText: 'Delete' }">Delete</button>
  * ```
  */
 class DbxActionConfirmDirective extends AbstractPromptConfirmDirective {
@@ -7222,18 +7423,18 @@ const DEFAULT_ACTION_KEY_TRIGGER = 'enter';
  * Triggers the parent action context when a specific keyboard key is released.
  * Defaults to the "enter" key. Key names should be lowercase.
  *
- * @example
- * ```html
- * <form [dbxAction]="saveAction" dbxActionKeyTrigger>
- *   <!-- Pressing Enter triggers the action -->
- * </form>
+ * @dbxWebComponent
+ * @dbxWebSlug action-key-trigger
+ * @dbxWebCategory action
+ * @dbxWebRelated action-confirm, action-snackbar
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <div [dbxActionKeyTrigger]="'enter'"></div>
  * ```
  *
  * @example
  * ```html
- * <div [dbxAction]="searchAction" [dbxActionKeyTrigger]="'escape'">
- *   <!-- Pressing Escape triggers the action -->
- * </div>
+ * <form [dbxAction]="saveAction" [dbxActionKeyTrigger]="'cmd+s'">...</form>
  * ```
  */
 class DbxActionKeyTriggerDirective {
@@ -7394,9 +7595,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Supports an optional auto-dismiss timer that pauses while an error detail popover is open.
  * Typically opened via {@link DbxErrorSnackbarService} or the static {@link DbxErrorSnackbarComponent.showErrorSnackbar} method.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug error-snackbar
+ * @dbxWebCategory feedback
+ * @dbxWebRelated error
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-error-snackbar></dbx-error-snackbar>
+ * ```
+ *
  * @example
- * ```typescript
- * DbxErrorSnackbarComponent.showErrorSnackbar(matSnackBar, error, { duration: 5000 });
+ * ```html
+ * // Triggered via DbxErrorSnackbarService.showError(error)
  * ```
  */
 class DbxErrorSnackbarComponent {
@@ -7518,13 +7728,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Subscribes to the action context's error stream and shows a snackbar via {@link DbxErrorSnackbarService}
  * whenever an error occurs. Accepts an optional configuration or a duration in milliseconds as input.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug action-snackbar-error
+ * @dbxWebCategory action
+ * @dbxWebRelated action-snackbar
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <div [dbxActionSnackbarError]></div>
+ * ```
+ *
  * @example
  * ```html
- * <!-- Auto-dismiss after 5 seconds -->
- * <div dbxAction [dbxActionSnackbarError]="5000">...</div>
- *
- * <!-- Default behavior, no auto-dismiss -->
- * <div dbxAction dbxActionSnackbarError>...</div>
+ * <button [dbxAction]="saveAction" dbxActionSnackbarError>Save</button>
  * ```
  */
 class DbxActionSnackbarErrorDirective {
@@ -8315,15 +8530,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
  * Useful for displaying bounded content areas such as lists or previews with a constrained height.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content-pit
+ * @dbxWebCategory layout
+ * @dbxWebRelated content-box, content-elevate
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-content-pit>Body</dbx-content-pit>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-content-pit [scrollable]="true" [rounded]="true">
- *   <p>Scrollable pit with medium height and rounded corners.</p>
- * </dbx-content-pit>
- *
- * <div dbxContentPit scrollable="large">
- *   <p>Large scrollable pit area.</p>
- * </div>
+ * <div dbxContentPit>Inset block</div>
  * ```
  */
 class DbxContentPitDirective {
@@ -9244,10 +9462,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Renders a horizontal bar with a themed background color, used to visually group or separate content.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug bar
+ * @dbxWebCategory layout
+ * @dbxWebRelated bar-header, pagebar, button-spacer
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-bar><button>A</button><button>B</button></dbx-bar>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-bar color="primary">
- *   <span>Bar content</span>
+ * <dbx-bar>
+ *   <dbx-button text="Save" raised color="primary"></dbx-button>
+ *   <dbx-button-spacer></dbx-button-spacer>
+ *   <dbx-button text="Cancel" stroked></dbx-button>
  * </dbx-bar>
  * ```
  */
@@ -9275,9 +9504,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * A themed header bar displaying an optional icon and text label, useful as a section divider.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug bar-header
+ * @dbxWebCategory layout
+ * @dbxWebRelated bar, pagebar
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-bar-header header="Title"></dbx-bar-header>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-bar-header icon="info" text="Section Title" color="accent"></dbx-bar-header>
+ * <dbx-bar-header header="Members" icon="group">
+ *   <button mat-icon-button><mat-icon>add</mat-icon></button>
+ * </dbx-bar-header>
  * ```
  */
 class DbxBarHeaderComponent {
@@ -9324,11 +9564,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * A page-level toolbar with left and right content slots, built on Angular Material's mat-toolbar.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug pagebar
+ * @dbxWebCategory layout
+ * @dbxWebRelated bar, navbar
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-pagebar>Title</dbx-pagebar>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-pagebar color="primary">
- *   <span left>Page Title</span>
- *   <button right mat-icon-button><mat-icon>settings</mat-icon></button>
+ * <dbx-pagebar>
+ *   <h2>Settings</h2>
+ *   <span class="spacer"></span>
+ *   <button mat-stroked-button>Save</button>
  * </dbx-pagebar>
  * ```
  */
@@ -9448,6 +9698,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Supports a named content slot `[sectionHeader]` for custom header actions beside the title.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug card-box
+ * @dbxWebCategory card
+ * @dbxWebRelated card-box-container, section
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-card-box header="Title"><p>Body</p></dbx-card-box>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-card-box [header]="'Settings'" [icon]="'settings'">
@@ -9518,18 +9777,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Can be used as an element or as an attribute directive on any host element.
  *
- * @example
- * ```html
- * <dbx-card-box-container>
- *   <p>Padded content inside the card box.</p>
- * </dbx-card-box-container>
+ * @dbxWebComponent
+ * @dbxWebSlug card-box-container
+ * @dbxWebCategory card
+ * @dbxWebRelated card-box
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxCardBoxContainer><dbx-card-box></dbx-card-box></div>
  * ```
  *
  * @example
  * ```html
- * <div dbxCardBoxContainer>
- *   <p>Padded content using the attribute directive.</p>
- * </div>
+ * <dbx-card-box-container>
+ *   <dbx-card-box header="One"></dbx-card-box>
+ *   <dbx-card-box header="Two"></dbx-card-box>
+ * </dbx-card-box-container>
  * ```
  */
 class DbxCardBoxContainerDirective {
@@ -9711,11 +9973,25 @@ function provideTwoColumnsContext() {
  *
  * Requires a {@link TwoColumnsContextStore} to be provided by a parent component or directive.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug two-column
+ * @dbxWebCategory layout
+ * @dbxWebRelated two-column-right
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-two-column>
+ *   <div left>Sidebar</div>
+ *   <div right>Main</div>
+ * </dbx-two-column>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-two-column [reverseSizing]="false" [inSectionPage]="true">
- *   <div left>Navigation sidebar</div>
- *   <div right>Main content area</div>
+ * <dbx-two-column [inSectionPage]="true">
+ *   <dbx-list left [state$]="state$" [config]="listConfig" />
+ *   <dbx-two-column-right right header="Detail">
+ *     <p>Selected item detail.</p>
+ *   </dbx-two-column-right>
  * </dbx-two-column>
  * ```
  */
@@ -10424,10 +10700,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Automatically selects the active anchor based on the current route and supports configurable breakpoints.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug navbar
+ * @dbxWebCategory navigation
+ * @dbxWebRelated anchor, sidenav, pagebar
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-navbar [anchors]="anchors"></dbx-navbar>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-navbar [anchors]="navAnchors" breakpoint="large" buttonMode="menu"></dbx-navbar>
- * <dbx-navbar [anchors]="navAnchors" mode="icon" [showMenuCaret]="true"></dbx-navbar>
+ * <dbx-navbar [anchors]="topNav"></dbx-navbar>
  * ```
  */
 class DbxNavbarComponent extends AbstractTransitionDirective {
@@ -10568,13 +10852,18 @@ function resolveSideNavDisplayMode(mode, allowedModes) {
  * Renders a Material sidenav with an anchor list and automatically transitions between mobile overlay, icon rail, and full sidebar modes.
  * Closes automatically on route transitions in mobile mode.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug sidenav
+ * @dbxWebCategory navigation
+ * @dbxWebRelated sidenav-page, anchor-list
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-sidenav [anchors]="anchors"></dbx-sidenav>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-sidenav [anchors]="sidenavLinks" color="primary">
- *   <div top>Header Content</div>
- *   <div bottom>Footer Content</div>
- *   <router-outlet></router-outlet>
- * </dbx-sidenav>
+ * <dbx-sidenav [anchors]="sidenavAnchors"></dbx-sidenav>
  * ```
  */
 class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
@@ -10843,15 +11132,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * When `mobileOnly` is true, the pagebar is hidden on non-mobile screen sizes.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug sidenav-page
+ * @dbxWebCategory navigation
+ * @dbxWebRelated sidenav, navbar
+ * @dbxWebSkillRefs dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-sidenav-page>Content</dbx-sidenav-page>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-sidenav [anchors]="links">
- *   <dbx-sidenav-page [mobileOnly]="true" color="primary">
- *     <span navLeft>Left Nav Content</span>
- *     <span navRight>Right Nav Content</span>
- *     <p>Page body content</p>
- *   </dbx-sidenav-page>
- * </dbx-sidenav>
+ * <dbx-sidenav-page>
+ *   <ui-view></ui-view>
+ * </dbx-sidenav-page>
  * ```
  */
 class DbxSidenavPageComponent {
@@ -11076,13 +11370,20 @@ function provideDbxRouterWebUiRouterProviderConfig() {
  * When this component is created, it automatically registers itself with the {@link TwoColumnsContextStore}
  * to indicate that right-side content is present.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug two-column-right
+ * @dbxWebCategory layout
+ * @dbxWebRelated two-column
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-two-column-right>Body</dbx-two-column-right>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-two-column-right header="Detail View" [showBack]="true" [minRightWidth]="400">
- *   <div nav>
- *     <button mat-icon-button>Actions</button>
- *   </div>
- *   <p>Right column content here</p>
+ * <dbx-two-column-right header="Item Detail">
+ *   <button nav mat-icon-button><mat-icon>delete</mat-icon></button>
+ *   <p>Body content</p>
  * </dbx-two-column-right>
  * ```
  */
@@ -11328,15 +11629,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Wraps content in a box container with optional elevation (card-like shadow) and wide layout.
  * Both `elevate` and `wide` default to `true`.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content-box
+ * @dbxWebCategory layout
+ * @dbxWebRelated content, content-elevate, content-pit
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxContentBox>Body</div>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-content-box>
- *   <p>Elevated wide box content.</p>
+ *   <p>Summary content</p>
  * </dbx-content-box>
- *
- * <div dbxContentBox [elevate]="false" [wide]="false">
- *   <p>Flat, non-wide box content.</p>
- * </div>
  * ```
  */
 class DbxContentBoxDirective {
@@ -11361,14 +11667,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Sets the host element to fill the available page height. Use as a wrapper for page-level content blocks.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content
+ * @dbxWebCategory layout
+ * @dbxWebRelated content-container, content-page, content-box
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-content>Body</dbx-content>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-content>
- *   <p>This content fills the page height.</p>
- * </dbx-content>
- *
  * <div dbxContent>
- *   <p>Attribute usage on any element.</p>
+ *   <p>Standard content body</p>
  * </div>
  * ```
  */
@@ -11391,15 +11702,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Applies elevation (box-shadow) styling to the host element, giving it a raised card appearance.
  * Elevation is enabled by default and can be toggled off.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content-elevate
+ * @dbxWebCategory layout
+ * @dbxWebRelated content-box, content-pit
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-content-elevate>Body</dbx-content-elevate>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-content-elevate>
- *   <p>Elevated content with shadow.</p>
- * </dbx-content-elevate>
- *
- * <div dbxContentElevate [elevate]="false">
- *   <p>Flat content, no elevation.</p>
- * </div>
+ * <div dbxContentElevate>Highlighted block</div>
  * ```
  */
 class DbxContentElevateDirective {
@@ -11423,14 +11737,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Sets the host element to fill the full page height with page-level content styling.
  * Similar to `DbxContentDirective` but applies the `dbx-content-page` class for page-specific layout.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug content-page
+ * @dbxWebCategory layout
+ * @dbxWebRelated content-container, section-page
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-content-page>Page</dbx-content-page>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-content-page>
- *   <p>Full-page content layout.</p>
- * </dbx-content-page>
- *
  * <div dbxContentPage>
- *   <p>Attribute usage on any element.</p>
+ *   <dbx-section-page header="Dashboard"><p>...</p></dbx-section-page>
  * </div>
  * ```
  */
@@ -11595,11 +11914,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * that can be used to adjust styling. When `breakToColumn` is enabled, items will stack vertically
  * on small screens.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug flex-group
+ * @dbxWebCategory layout
+ * @dbxWebRelated flex-size, bar
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxFlexGroup><div dbxFlexSize="1">A</div></div>
+ * ```
+ *
  * @example
  * ```html
- * <div dbxFlexGroup [breakToColumn]="true" breakpoint="tablet">
- *   <div [dbxFlexSize]="3">Half width</div>
- *   <div [dbxFlexSize]="3">Half width</div>
+ * <div dbxFlexGroup breakpoint="sm">
+ *   <div dbxFlexSize="2">Wide</div>
+ *   <div dbxFlexSize="1">Narrow</div>
  * </div>
  * ```
  */
@@ -11644,11 +11972,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Applies a `dbx-flex-{size}` CSS class to the host element based on the given {@link DbxFlexSize} value.
  * Use within a {@link DbxFlexGroupDirective} to control how much row width this element occupies.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug flex-size
+ * @dbxWebCategory layout
+ * @dbxWebRelated flex-group
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxFlexSize="1"></div>
+ * ```
+ *
  * @example
  * ```html
  * <div dbxFlexGroup>
- *   <div [dbxFlexSize]="4">Two-thirds width</div>
- *   <div [dbxFlexSize]="2">One-third width</div>
+ *   <div dbxFlexSize="2">Twice as wide</div>
+ *   <div dbxFlexSize="1">Narrow</div>
  * </div>
  * ```
  */
@@ -12155,9 +12492,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Renders a value-based list view using a configuration input. Must be used within a parent {@link DbxListView} context.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list-view
+ * @dbxWebCategory list
+ * @dbxWebRelated list, selection-list-view, list-grid-view, list-accordion-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list-view [config]="rowConfig"></dbx-list-view>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list-view [config]="listViewConfig"></dbx-list-view>
+ * <dbx-list-view [config]="rowConfig"></dbx-list-view>
  * ```
  */
 class DbxValueListViewComponent extends AbstractDbxValueListViewDirective {
@@ -12373,9 +12719,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Renders a value list as an accordion using a configuration input. Each item renders its own expansion panel.
  * Requires a parent {@link DbxListView} context.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list-accordion-view
+ * @dbxWebCategory list
+ * @dbxWebRelated list, list-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list-accordion-view [config]="rowConfig"></dbx-list-accordion-view>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list-accordion-view [config]="accordionConfig"></dbx-list-accordion-view>
+ * <dbx-list-accordion-view [config]="rowConfig"></dbx-list-accordion-view>
  * ```
  */
 class DbxValueListAccordionViewComponent extends AbstractDbxValueListViewDirective {
@@ -12667,9 +13022,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Renders a value list as a CSS grid using a configuration input. Requires a parent {@link DbxListView} context.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list-grid-view
+ * @dbxWebCategory list
+ * @dbxWebRelated list, list-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list-grid-view [config]="cellConfig"></dbx-list-grid-view>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list-grid-view [config]="gridViewConfig"></dbx-list-grid-view>
+ * <dbx-list-grid-view [config]="cellConfig" dbxListGridSize="md"></dbx-list-grid-view>
  * ```
  */
 class DbxValueListGridViewComponent extends AbstractDbxValueListViewDirective {
@@ -12792,9 +13156,18 @@ class AbstractDbxListTitleGroupHeaderComponent {
  * Default group header component that displays a title, optional icon, and optional hint text.
  * Used automatically by {@link DbxListTitleGroupDirective} unless a custom header component is specified.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list-title-group-header
+ * @dbxWebCategory list
+ * @dbxWebRelated list, list-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list-title-group-header></dbx-list-title-group-header>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list-title-group-header></dbx-list-title-group-header>
+ * <dbx-list-view [config]="rowConfig" dbxListTitleGroup></dbx-list-view>
  * ```
  */
 class DbxListTitleGroupHeaderComponent extends AbstractDbxListTitleGroupHeaderComponent {
@@ -13030,11 +13403,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 /**
  * Displays centered placeholder content within an empty list. Projects its content into a styled container.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list-empty-content
+ * @dbxWebCategory list
+ * @dbxWebRelated list
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list-empty-content>Empty</dbx-list-empty-content>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list-empty-content>
- *   <p>No results found.</p>
- * </dbx-list-empty-content>
+ * <dbx-list [state$]="items$" [config]="listConfig">
+ *   <dbx-list-empty-content>
+ *     <p>No items yet — add one to get started.</p>
+ *   </dbx-list-empty-content>
+ * </dbx-list>
  * ```
  */
 class DbxListEmptyContentComponent {
@@ -13109,11 +13493,18 @@ const DBX_LIST_DEFAULT_THROTTLE_SCROLL = 50;
  *
  * This component is typically wrapped by a higher-level component that provides its configuration via the `config` input.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug list
+ * @dbxWebCategory list
+ * @dbxWebRelated list-view, list-empty-content, list-grid-view, list-accordion-view, selection-list-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-list [state$]="items$" [config]="listConfig"></dbx-list>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-list [state]="listState$" [config]="listConfig" [disabled]="isDisabled" [selectionMode]="'select'">
- *   <ng-container empty>No items found.</ng-container>
- * </dbx-list>
+ * <dbx-list [state$]="items$" [config]="listConfig" (contentScrolled)="onScroll($event)"></dbx-list>
  * ```
  */
 class DbxListComponent {
@@ -13568,9 +13959,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Renders a selection-capable list view using a configuration input. Requires a parent {@link DbxListView} context.
  * Switches between selection mode (with checkboxes) and view mode (standard list) based on the parent's selection mode.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug selection-list-view
+ * @dbxWebCategory list
+ * @dbxWebRelated list, list-view
+ * @dbxWebSkillRefs dbx__ref__dbx-component-patterns
+ * @dbxWebMinimalExample ```html
+ * <dbx-selection-list-view [config]="rowConfig"></dbx-selection-list-view>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-selection-list-view [config]="selectionListViewConfig"></dbx-selection-list-view>
+ * <dbx-selection-list-view [config]="rowConfig" selectionMode="multi"></dbx-selection-list-view>
  * ```
  */
 class DbxSelectionValueListViewComponent extends AbstractDbxValueListViewDirective {
@@ -13705,15 +14105,23 @@ function provideDbxListViewWrapper(sourceType) {
  * Displays an introductory message with a call-to-action button. When the button is clicked,
  * the intro is replaced by the projected content. Useful for onboarding or first-time-use flows.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug intro-action-section
+ * @dbxWebCategory feedback
+ * @dbxWebRelated section, list-empty-content
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-intro-action-section hint="Welcome" action="Start"><p>Body</p></dbx-intro-action-section>
+ * ```
+ *
  * @example
  * ```html
  * <dbx-intro-action-section
  *   hint="Welcome! Click below to get started."
  *   action="Get Started"
- *   [showIntro]="isFirstVisit"
- *   (showAction)="onGetStarted()">
- *   <div info>Additional info shown in the intro state.</div>
- *   <p>Main content shown after the action is clicked.</p>
+ *   [showIntro]="!hasOnboarded"
+ *   (showAction)="markOnboarded()">
+ *   <p>Main content shown after the action.</p>
  * </dbx-intro-action-section>
  * ```
  */
@@ -13782,14 +14190,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Supports nested section pages that retain proper fixed-height layout. Use for top-level
  * page content that needs a prominent heading.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug section-page
+ * @dbxWebCategory layout
+ * @dbxWebRelated section, content-page
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks, dbx__ref__dbx-app-structure
+ * @dbxWebMinimalExample ```html
+ * <dbx-section-page header="Page"><p>Body</p></dbx-section-page>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-section-page header="Page Title" icon="dashboard">
- *   <p>Page content here.</p>
- * </dbx-section-page>
- *
- * <dbx-section-page header="Scrollable Body" scroll="body" hint="Only the body scrolls">
- *   <div style="height: 2000px">Tall content</div>
+ * <dbx-section-page header="Dashboard" icon="dashboard" scroll="body">
+ *   <p>Top-level page content.</p>
  * </dbx-section-page>
  * ```
  */
@@ -14301,11 +14714,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Use the `[header]` content slot for extra header-level content and default content for the detail area.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug detail-block
+ * @dbxWebCategory text
+ * @dbxWebRelated label-block
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-detail-block header="Label">Body</dbx-detail-block>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-detail-block icon="person" header="User Info">
- *   <span header>Extra header content</span>
- *   <p>Detail content goes here.</p>
+ * <dbx-detail-block header="Email" icon="mail">
+ *   <p>{{ user.email }}</p>
  * </dbx-detail-block>
  * ```
  */
@@ -14653,11 +15074,18 @@ const DBX_CHIP_DEFAULT_TONE = 18;
 /**
  * Renders a styled chip element with optional small, block, and color modes.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug chip
+ * @dbxWebCategory text
+ * @dbxWebRelated chip-list
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-chip text="Tag"></dbx-chip>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-chip [small]="true">Tag</dbx-chip>
- * <dbx-chip [block]="true">Full Width</dbx-chip>
- * <dbx-chip [color]="'primary'">Primary</dbx-chip>
+ * <dbx-chip text="Active" icon="check" color="primary"></dbx-chip>
  * ```
  */
 class DbxChipDirective {
@@ -14740,10 +15168,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Uses {@link DbxChipDirective} internally with `dbx-chip-spacer` class for spacing.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug chip-list
+ * @dbxWebCategory text
+ * @dbxWebRelated chip
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-chip-list></dbx-chip-list>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-chip-list [chips]="[{ label: 'Active', value: 'active', color: 'primary' }, { label: 'Pending', value: 'pending', color: 'accent' }]"></dbx-chip-list>
- * <dbx-chip-list [chips]="chips" [small]="true"></dbx-chip-list>
+ * <dbx-chip-list>
+ *   <dbx-chip text="Tag1"></dbx-chip>
+ *   <dbx-chip text="Tag2"></dbx-chip>
+ * </dbx-chip-list>
  * ```
  */
 class DbxChipListComponent {
@@ -14988,10 +15427,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  *
  * Clicking the text or the icon copies the text to the clipboard and optionally shows a snackbar confirmation.
  *
+ * @dbxWebComponent
+ * @dbxWebSlug click-to-copy-text
+ * @dbxWebCategory text
+ * @dbxWebRelated chip
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-click-to-copy-text [text]="value"></dbx-click-to-copy-text>
+ * ```
+ *
  * @example
  * ```html
- * <dbx-click-to-copy-text copyText="some-value">some-value</dbx-click-to-copy-text>
- * <dbx-click-to-copy-text [clickIconToCopyOnly]="true">Click icon only</dbx-click-to-copy-text>
+ * <dbx-click-to-copy-text [text]="userId"></dbx-click-to-copy-text>
  * ```
  */
 class DbxClickToCopyTextComponent {