@dereekb/dbx-web 13.9.0 → 13.10.0

package/types/dereekb-dbx-web.d.ts

@@ -47,6 +47,15 @@ type LoadingComponentState = 'none' | 'loading' | 'content' | 'error';
  * 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...">
@@ -85,13 +94,18 @@ declare 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>
  * ```
  */
 declare class DbxLoadingProgressComponent {
@@ -138,19 +152,19 @@ interface DbxLoadingComponentState {
  * 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>
  * ```
  */
@@ -190,10 +204,19 @@ declare class DbxLoadingComponent {
  * 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>
  * ```
  */
@@ -484,18 +507,18 @@ declare const DBX_ACTION_SNACKBAR_DEFAULTS: DbxActionSnackbarEventMakeConfig;
  * (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>
  * ```
  */
 declare class DbxActionSnackbarDirective<T = unknown, O = unknown> implements OnInit {
@@ -548,11 +571,18 @@ interface DbxPromptConfirmConfig {
 /**
  * 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>
  * ```
  */
 declare class DbxPromptConfirmComponent {
@@ -604,18 +634,18 @@ type DbxActionTransitionSafetyType = 'none' | 'dialog' | 'auto';
  *
  * 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>
  * ```
  */
 declare class DbxActionTransitionSafetyDirective<T, O> implements OnInit, OnDestroy {
@@ -708,11 +738,18 @@ interface DbxActionConfirmConfig<T = unknown> extends DbxPromptConfirmConfig {
  * 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>
  * ```
  */
 declare class DbxActionConfirmDirective<T = unknown, O = unknown> extends AbstractPromptConfirmDirective {
@@ -733,18 +770,18 @@ declare class DbxActionConfirmDirective<T = unknown, O = unknown> extends Abstra
  * 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>
  * ```
  */
 declare class DbxActionKeyTriggerDirective<T = unknown, O = unknown> {
@@ -769,18 +806,18 @@ declare class DbxActionModule {
  * 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>
  * ```
  */
 declare class DbxIconButtonComponent extends AbstractDbxButtonDirective {
@@ -1198,10 +1235,21 @@ declare class DbxAvatarComponent {
 /**
  * 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>
  * ```
  */
@@ -1215,9 +1263,20 @@ declare class DbxBarDirective {
 /**
  * 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>
  * ```
  */
 declare class DbxBarHeaderComponent {
@@ -1231,11 +1290,21 @@ declare class DbxBarHeaderComponent {
 /**
  * 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>
  * ```
  */
@@ -1317,6 +1386,15 @@ declare class DbxTwoBlockComponent {
  *
  * 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'">
@@ -1337,18 +1415,21 @@ declare class DbxCardBoxComponent {
  *
  * 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>
  * ```
  */
 declare class DbxCardBoxContainerDirective {
@@ -1595,11 +1676,25 @@ interface DbxTwoColumnViewState {
  *
  * 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>
  * ```
  */
@@ -1730,13 +1825,20 @@ declare class DbxTwoColumnColumnHeadDirective {
  * 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>
  * ```
  */
@@ -1991,15 +2093,20 @@ declare class DbxContentBorderDirective {
  * 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>
  * ```
  */
 declare class DbxContentBoxDirective {
@@ -2012,14 +2119,19 @@ declare class DbxContentBoxDirective {
 /**
  * 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>
  * ```
  */
@@ -2040,15 +2152,20 @@ type DbxContentContainerWidth = 'small' | 'medium' | 'large' | 'wide' | 'full';
  * 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>
  * ```
  */
 declare class DbxContentContainerDirective {
@@ -2064,15 +2181,18 @@ declare class DbxContentContainerDirective {
  * 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>
  * ```
  */
 declare class DbxContentElevateDirective {
@@ -2085,14 +2205,19 @@ declare class DbxContentElevateDirective {
  * 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>
  * ```
  */
@@ -2118,15 +2243,18 @@ type DbxContentPitScrollableHeightSetting = 'small' | 'medium' | 'large';
  * 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>
  * ```
  */
 declare class DbxContentPitDirective {
@@ -2252,11 +2380,20 @@ declare function compareScreenMediaWidthTypes(a: ScreenMediaWidthType, b: Screen
  * 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>
  * ```
  */
@@ -2296,11 +2433,20 @@ type DbxFlexSize = 1 | 2 | 3 | 4 | 5 | 6;
  * 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>
  * ```
  */
@@ -2787,9 +2933,18 @@ declare class DbxValueListViewContentComponent<T, I extends DbxValueListItem<T>
 /**
  * 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>
  * ```
  */
 declare class DbxValueListViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown, C extends DbxValueListViewConfig<T, I, V> = DbxValueListViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
@@ -2893,9 +3048,18 @@ declare class DbxValueListAccordionViewContentComponent<T, I extends DbxValueLis
  * 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>
  * ```
  */
 declare class DbxValueListAccordionViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown, C extends DbxValueListAccordionViewConfig<T, I, V> = DbxValueListAccordionViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
@@ -3059,9 +3223,18 @@ declare class DbxValueListGridViewContentComponent<T, I extends DbxValueListItem
 /**
  * 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>
  * ```
  */
 declare class DbxValueListGridViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown, C extends DbxValueListGridViewConfig<T, I, V> = DbxValueListGridViewConfig<T, I, V>> extends AbstractDbxValueListViewDirective<T, I, V, C> {
@@ -3305,11 +3478,22 @@ declare class DbxListModifierModule {
 /**
  * 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>
  * ```
  */
 declare class DbxListEmptyContentComponent {
@@ -3398,11 +3582,18 @@ declare 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>
  * ```
  */
 declare class DbxListComponent<T = unknown, V extends DbxListView<T> = DbxListView<T>, S extends ListLoadingState<T> = ListLoadingState<T>> implements OnDestroy {
@@ -3638,9 +3829,18 @@ declare class DbxSelectionValueListViewContentComponent<T, I extends DbxValueLis
  * 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>
  * ```
  */
 declare class DbxSelectionValueListViewComponent<T, I extends DbxValueListItem<T> = DbxValueListItem<T>, V = unknown> extends AbstractDbxValueListViewDirective<T, I, V, DbxSelectionValueListViewConfig<T, I, V>> {
@@ -3738,13 +3938,18 @@ interface DbxSectionHeaderConfig {
  * 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>
  * ```
  */
 declare class DbxSectionHeaderComponent {
@@ -3767,6 +3972,15 @@ declare class DbxSectionHeaderComponent {
  * 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">
@@ -3780,6 +3994,7 @@ declare class DbxSectionHeaderComponent {
  * ```
  */
 declare class DbxSectionComponent extends DbxSectionHeaderComponent {
+    /** Apply elevated card styling. */
     readonly elevate: _angular_core.InputSignal<boolean>;
     readonly classConfig: _angular_core.Signal<"" | "dbx-section-elevate dbx-content-elevate">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DbxSectionComponent, never>;
@@ -3790,15 +4005,23 @@ declare class DbxSectionComponent extends DbxSectionHeaderComponent {
  * 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>
  * ```
  */
@@ -3825,14 +4048,19 @@ type DbxSectionPageScrollLockedMode = 'all' | 'body' | 'locked';
  * 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>
  * ```
  */
@@ -3848,11 +4076,20 @@ declare class DbxSectionPageComponent extends DbxSectionHeaderComponent {
  * 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>
  * ```
@@ -3910,13 +4147,22 @@ declare class DbxColorDirective {
 /**
  * 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>
  * ```
  */
 declare class DbxSpacerDirective {
@@ -4158,11 +4404,19 @@ declare class DbxUnitedStatesAddressComponent {
  *
  * 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>
  * ```
  */
@@ -4283,11 +4537,18 @@ declare class DbxIconSpacerDirective {
 /**
  * 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>
  * ```
  */
 declare class DbxLabelBlockComponent {
@@ -4487,11 +4748,18 @@ declare 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>
  * ```
  */
 declare class DbxChipDirective {
@@ -4538,10 +4806,21 @@ declare class DbxChipDirective {
  *
  * 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>
  * ```
  */
 declare class DbxChipListComponent {
@@ -4863,10 +5142,18 @@ declare function overrideClickElementEffect(config: OverrideClickElementEffectCo
  *
  * 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>
  * ```
  */
 declare class DbxClickToCopyTextComponent {
@@ -5145,11 +5432,18 @@ declare abstract class AbstractProgressButtonDirective {
 /**
  * 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>
  * ```
  */
 declare class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective {
@@ -5163,11 +5457,18 @@ declare class DbxProgressBarButtonComponent extends AbstractProgressButtonDirect
  * 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>
  * ```
  */
 declare class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective {
@@ -5223,6 +5524,15 @@ declare function provideDbxProgressButtonGlobalConfig(config: DbxProgressButtonG
  * 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">
@@ -5276,16 +5586,22 @@ declare class DbxButtonComponent extends AbstractDbxButtonDirective {
 /**
  * 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>
  * ```
  */
 declare class DbxButtonSpacerDirective {
@@ -5352,9 +5668,20 @@ interface DbxErrorViewButtonEvent {
  * 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>
  * ```
  */
 declare class DbxErrorViewComponent {
@@ -5397,12 +5724,18 @@ interface DbxErrorComponentState {
  * 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>
  * ```
  */
 declare class DbxErrorComponent {
@@ -5542,9 +5875,18 @@ interface DbxErrorSnackbarData<T extends ErrorInput = ErrorInput> {
  * 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)
  * ```
  */
 declare class DbxErrorSnackbarComponent {
@@ -5597,13 +5939,18 @@ declare class DbxErrorSnackbarService {
  * 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>
  * ```
  */
 declare class DbxActionSnackbarErrorDirective {
@@ -5693,6 +6040,20 @@ interface FullDbxPopoverComponentConfig<O, I, T> extends DbxPopoverComponentConf
  * 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 })
+ * ```
  */
 declare class DbxPopoverComponent<O = unknown, I = unknown, T = unknown> extends AbstractTransitionWatcherDirective implements DbxPopoverController<O, I>, OnInit, OnDestroy {
     private readonly popoverRef;
@@ -6855,10 +7216,20 @@ declare function dbxZipBlobPreviewEntryTreeFromEntries(entries: Maybe<Entry[]>):
  *
  * 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>
  * ```
  */
 declare class DbxAnchorComponent extends AbstractDbxAnchorDirective {
@@ -6983,9 +7354,18 @@ interface DbxAnchorListExpandedAnchor extends ExpandedClickableAnchorLinkTree {
  *
  * 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>
  * ```
  */
 declare class DbxAnchorListComponent {
@@ -7051,10 +7431,18 @@ type NavbarButtonMode = 'menu' | 'rotate';
  *
  * 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>
  * ```
  */
 declare class DbxNavbarComponent extends AbstractTransitionDirective {
@@ -7159,13 +7547,18 @@ interface DbxSidenavSidebarState {
  * 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>
  * ```
  */
 declare class DbxSidenavComponent extends AbstractTransitionWatcherDirective implements OnInit {
@@ -7291,15 +7684,20 @@ declare class DbxSidenavPagebarComponent extends DbxPagebarComponent {
  *
  * 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>
  * ```
  */
 declare class DbxSidenavPageComponent {
@@ -7548,10 +7946,20 @@ type DbxDialogContentContainerWidth = 'normal' | 'wide';
  *
  * 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>
  * ```
  */
@@ -9287,6 +9695,20 @@ interface DbxPopupComponentConfig<O, I, T> {
  * 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 })
+ * ```
  */
 declare class DbxPopupComponent<O = unknown, I = unknown, T = unknown> extends AbstractTransitionWatcherDirective implements DbxPopupController<O, I> {
     private readonly popoverRef;
@@ -9486,11 +9908,20 @@ declare class DbxPromptConfirmButtonDirective implements OnInit, DbxButtonInterc
 /**
  * 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>
  * ```
  */
@@ -9963,11 +10394,18 @@ declare class DbxWindowKeyDownListenerDirective {
  *
  * 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>
  * ```
  */
 declare class DbxResizedDirective {