@dereekb/dbx-web 13.17.0 → 13.18.0

package/fesm2022/dereekb-dbx-web-style-demo.mjs

@@ -0,0 +1,1698 @@
+import { asArray, cssClassesSet, useIterableOrValue, spaceSeparatedCssClasses, makeValuesGroupMap } from '@dereekb/util';
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, computed, Directive, InjectionToken, makeEnvironmentProviders, signal, viewChild, ElementRef, effect, ChangeDetectionStrategy, Component, provideEnvironmentInitializer } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { DbxDetachService, DbxPopoverService, DbxStyleService, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxButtonSpacerDirective, DbxColorService, DbxColorDirective, DBX_THEME_COLORS_MAIN, DBX_THEME_COLORS_EXTRA, DbxPagebarComponent, DbxBarDirective, DbxBarHeaderComponent, DbxAnchorListComponent } from '@dereekb/dbx-web';
+import { NgComponentOutlet } from '@angular/common';
+import * as i1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent } from '@dereekb/dbx-web/docs';
+
+/**
+ * Merges an ordered list of {@link DbxStyleDemoStyleTemplate} entries into a single {@link DbxStyleDemoStyleSet}.
+ *
+ * Style POJOs are merged with `{ ...acc, ...template.style }` so later templates override earlier ones on
+ * conflicting token keys; classes accumulate across all templates and are de-duplicated order-preserving via
+ * {@link cssClassesSet}.
+ *
+ * @param templates - The templates to merge, in precedence order (earliest first, latest wins).
+ * @returns The merged style set.
+ *
+ * @example
+ * ```ts
+ * mergeDbxStyleDemoStyleTemplates([
+ *   { key: 'a', style: { '--mat-sys-primary': 'red' }, className: 'x' },
+ *   { key: 'b', style: { '--mat-sys-primary': 'blue' }, className: ['x', 'y'] }
+ * ]);
+ * // -> { style: { '--mat-sys-primary': 'blue' }, classes: ['x', 'y'] }
+ * ```
+ */
+function mergeDbxStyleDemoStyleTemplates(templates) {
+    let style = {};
+    const classInputs = [];
+    templates.forEach((template) => {
+        if (template.style) {
+            style = { ...style, ...template.style };
+        }
+        if (template.className != null) {
+            classInputs.push(...asArray(template.className));
+        }
+    });
+    return { style, classes: [...cssClassesSet(classInputs)] };
+}
+/**
+ * Type guard: true when the value is a {@link DbxStyleDemoStyleTemplate} object (not a bare template-key string).
+ *
+ * @param value - The value to test.
+ * @returns `true` when the value is an object carrying a string `key`.
+ *
+ * @example
+ * ```ts
+ * isDbxStyleDemoStyleTemplate('corner-shape-large'); // false
+ * isDbxStyleDemoStyleTemplate({ key: 'corner-shape-large' }); // true
+ * ```
+ */
+function isDbxStyleDemoStyleTemplate(value) {
+    return typeof value === 'object' && value !== null && typeof value.key === 'string';
+}
+/**
+ * Type guard: true when the directive input is a {@link DbxStyleDemoStyleLoaderConfig} (rather than a key / array of keys).
+ *
+ * @param value - The value to test.
+ * @returns `true` when the value is a non-array object carrying a `templates` property.
+ *
+ * @example
+ * ```ts
+ * isDbxStyleDemoStyleLoaderConfig('corner-shape-large'); // false
+ * isDbxStyleDemoStyleLoaderConfig(['a', 'b']); // false
+ * isDbxStyleDemoStyleLoaderConfig({ templates: ['a'] }); // true
+ * ```
+ */
+function isDbxStyleDemoStyleLoaderConfig(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && 'templates' in value;
+}
+
+/**
+ * Configuration provided in the root environment for seeding {@link DbxStyleDemoStyleLoaderService} with initial templates.
+ *
+ * Registered via `provideDbxStyleDemo({ templates: [...] })`.
+ */
+class DbxStyleDemoStyleLoaderServiceConfig {
+}
+/**
+ * Registry of named {@link DbxStyleDemoStyleTemplate} levers used by the style-demo playground.
+ *
+ * Mirrors the shape of `DbxColorService`: app-provided templates are seeded from an optional
+ * {@link DbxStyleDemoStyleLoaderServiceConfig}, then resolved by key at render time by the
+ * `[dbxStyleDemoStyleLoader]` directive. Ships with no built-in templates — every lever is contributed by an app.
+ *
+ * This service is demo/debug-only and disposable — it is not a dbx-web core runtime primitive.
+ *
+ * @example
+ * ```ts
+ * const loader = inject(DbxStyleDemoStyleLoaderService);
+ * loader.register({ key: 'pink', style: { '--mat-sys-primary': '#ff0066' } });
+ * loader.mergeTemplates(['pink']);
+ * // -> { style: { '--mat-sys-primary': '#ff0066' }, classes: [] }
+ * ```
+ */
+class DbxStyleDemoStyleLoaderService {
+    _templates = new Map();
+    constructor() {
+        const initialConfig = inject(DbxStyleDemoStyleLoaderServiceConfig, { optional: true });
+        if (initialConfig?.templates) {
+            this.register(initialConfig.templates);
+        }
+    }
+    /**
+     * Registers one or more {@link DbxStyleDemoStyleTemplate} entries.
+     *
+     * @param templates - The template(s) to register.
+     * @param override - Whether existing entries with the same key should be replaced (default true)
+     */
+    register(templates, override = true) {
+        useIterableOrValue(templates, (template) => {
+            if (override || !this._templates.has(template.key)) {
+                this._templates.set(template.key, template);
+            }
+        });
+    }
+    /**
+     * Returns whether a template with the given key has been registered.
+     *
+     * @param key - The template key to check.
+     * @returns True when a template is registered under the given key.
+     */
+    hasTemplate(key) {
+        return this._templates.has(key);
+    }
+    /**
+     * Returns the {@link DbxStyleDemoStyleTemplate} registered under the given key, or undefined if none.
+     *
+     * @param key - The template key to look up.
+     * @returns The registered template, or undefined when no template matches.
+     */
+    getTemplate(key) {
+        return this._templates.get(key);
+    }
+    /**
+     * Returns all currently registered template keys, in registration order.
+     *
+     * @returns Array of all registered template keys.
+     */
+    getAllRegisteredTemplateKeys() {
+        return [...this._templates.keys()];
+    }
+    /**
+     * Returns all registered templates flagged {@link DbxStyleDemoStyleTemplate.curated}, in registration order.
+     *
+     * @returns The curated templates in insertion order.
+     */
+    getCuratedTemplates() {
+        return [...this._templates.values()].filter((template) => template.curated === true);
+    }
+    /**
+     * Resolves a mix of template keys and inline templates into a single merged {@link DbxStyleDemoStyleSet}.
+     *
+     * String keys are resolved through the registry; unknown keys are skipped. Inline template objects are
+     * used as-is. Resolution preserves input order so later entries win on conflicting style keys.
+     *
+     * @param keysOrTemplates - Template keys and/or inline templates to merge, in precedence order.
+     * @returns The merged style set.
+     *
+     * @example
+     * ```ts
+     * loader.register({ key: 'pink', style: { '--mat-sys-primary': '#ff0066' } });
+     * loader.mergeTemplates(['pink', 'unknown', { key: 'inline', className: 'demo' }]);
+     * // -> { style: { '--mat-sys-primary': '#ff0066' }, classes: ['demo'] }
+     * ```
+     */
+    mergeTemplates(keysOrTemplates) {
+        const resolved = [];
+        asArray(keysOrTemplates).forEach((keyOrTemplate) => {
+            if (isDbxStyleDemoStyleTemplate(keyOrTemplate)) {
+                resolved.push(keyOrTemplate);
+            }
+            else {
+                const template = this._templates.get(keyOrTemplate);
+                if (template) {
+                    resolved.push(template);
+                }
+            }
+        });
+        return mergeDbxStyleDemoStyleTemplates(resolved);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Applies a merged bundle of style-demo template levers to its host element, repainting every dbx component
+ * beneath it via the CSS custom-property cascade.
+ *
+ * The input accepts either one or more registered template keys (`ArrayOrValue<DbxStyleDemoStyleTemplateKey>`) or a
+ * {@link DbxStyleDemoStyleLoaderConfig} carrying inline template objects. The {@link DbxStyleDemoStyleLoaderService} is
+ * optional-injected: when present, string keys are resolved through the registry (unknown keys skipped); when absent,
+ * only inline template objects are merged (string keys are unresolvable and skipped). Merged inline CSS-token overrides
+ * bind to the host `[style]` and merged debug classes bind to the host `[class]`.
+ *
+ * This directive is demo/debug-only and disposable — it is not a dbx-web core runtime primitive.
+ *
+ * @example
+ * ```html
+ * <div [dbxStyleDemoStyleLoader]="['corner-shape-large', 'surface-tint']">…</div>
+ * <div [dbxStyleDemoStyleLoader]="{ templates: [{ key: 'pink', style: { '--mat-sys-primary': '#ff0066' } }] }">…</div>
+ * ```
+ */
+class DbxStyleDemoStyleLoaderDirective {
+    _loaderService = inject(DbxStyleDemoStyleLoaderService, { optional: true });
+    /**
+     * Template keys to resolve through the service, or a config object carrying inline templates.
+     */
+    dbxStyleDemoStyleLoader = input(undefined, ...(ngDevMode ? [{ debugName: "dbxStyleDemoStyleLoader" }] : /* istanbul ignore next */ []));
+    _mergedSignal = computed(() => {
+        const input = this.dbxStyleDemoStyleLoader();
+        const keysOrTemplates = isDbxStyleDemoStyleLoaderConfig(input) ? input.templates : input;
+        const service = this._loaderService;
+        let result;
+        if (service) {
+            result = service.mergeTemplates(keysOrTemplates ?? []);
+        }
+        else {
+            // No service: only inline template objects can be merged; string keys are unresolvable and skipped.
+            result = mergeDbxStyleDemoStyleTemplates(asArray(keysOrTemplates).filter(isDbxStyleDemoStyleTemplate));
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "_mergedSignal" }] : /* istanbul ignore next */ []));
+    styleSignal = computed(() => {
+        const { style } = this._mergedSignal();
+        return Object.keys(style).length > 0 ? style : null;
+    }, ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
+    classesSignal = computed(() => spaceSeparatedCssClasses(this._mergedSignal().classes), ...(ngDevMode ? [{ debugName: "classesSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxStyleDemoStyleLoaderDirective, isStandalone: true, selector: "[dbxStyleDemoStyleLoader]", inputs: { dbxStyleDemoStyleLoader: { classPropertyName: "dbxStyleDemoStyleLoader", publicName: "dbxStyleDemoStyleLoader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classesSignal()", "style": "styleSignal()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxStyleDemoStyleLoader]',
+                    host: {
+                        '[class]': 'classesSignal()',
+                        '[style]': 'styleSignal()'
+                    },
+                    standalone: true
+                }]
+        }], propDecorators: { dbxStyleDemoStyleLoader: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxStyleDemoStyleLoader", required: false }] }] } });
+
+/**
+ * Multi-provider injection token collecting every {@link DbxStyleDemoSectionGroup} contributed by an app's libraries.
+ *
+ * Injected by {@link DbxStyleDemoSectionRegistry} (as an array) to assemble the full set of showcase sections.
+ */
+const DBX_STYLE_DEMO_SECTION_GROUP = new InjectionToken('DbxStyleDemoSectionGroup');
+/**
+ * Registers a library's {@link DbxStyleDemoSectionGroup} with the style-demo playground.
+ *
+ * Each call contributes one group via the {@link DBX_STYLE_DEMO_SECTION_GROUP} multi-provider, so several libraries
+ * (e.g. `provideDbxWebStyleDemo()`, `provideDbxFormStyleDemo()`) can each add their own sections.
+ *
+ * @param group - The section group to register.
+ * @returns EnvironmentProviders contributing the group.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function provideDbxStyleDemoSections(group) {
+    return makeEnvironmentProviders([
+        {
+            provide: DBX_STYLE_DEMO_SECTION_GROUP,
+            useValue: group,
+            multi: true
+        }
+    ]);
+}
+
+/**
+ * Root service that flattens every {@link DbxStyleDemoSectionGroup} registered via {@link provideDbxStyleDemoSections}
+ * into a single ordered list of {@link DbxStyleDemoSection} entries.
+ *
+ * Consumed by the `<dbx-style-demo>` playground to determine which sections are available to render.
+ */
+class DbxStyleDemoSectionRegistry {
+    /**
+     * All registered sections, in library-registration then section-declaration order.
+     */
+    sectionsSignal;
+    constructor() {
+        const groups = inject(DBX_STYLE_DEMO_SECTION_GROUP, { optional: true }) ?? [];
+        this.sectionsSignal = signal(groups.flatMap((group) => group.sections), ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Clusters template toggles by their {@link DbxStyleDemoTemplateToggle.group} label for grouped rendering.
+ *
+ * The ungrouped cluster (`label: null`) is emitted first when any ungrouped toggle exists, followed by each named
+ * group in first-seen order. Toggle order within a cluster is preserved.
+ *
+ * @param toggles - The toggles to cluster.
+ * @returns The clusters in render order.
+ *
+ * @example
+ * ```ts
+ * groupDbxStyleDemoTemplateToggles([
+ *   { templateName: 'a', label: 'A' },
+ *   { templateName: 'b', label: 'B', group: 'Shape' },
+ *   { templateName: 'c', label: 'C', group: 'Shape' }
+ * ]);
+ * // -> [{ label: null, toggles: [A] }, { label: 'Shape', toggles: [B, C] }]
+ * ```
+ */
+function groupDbxStyleDemoTemplateToggles(toggles) {
+    const groupMap = makeValuesGroupMap(toggles, (toggle) => toggle.group ?? null);
+    const result = [];
+    const ungrouped = groupMap.get(null);
+    if (ungrouped != null) {
+        result.push({ label: null, toggles: ungrouped });
+    }
+    groupMap.forEach((groupToggles, label) => {
+        if (label != null) {
+            result.push({ label, toggles: groupToggles });
+        }
+    });
+    return result;
+}
+
+/**
+ * Multi-provider injection token collecting every {@link DbxStyleDemoTemplateToggle} contributed by an app's libraries.
+ *
+ * Injected by the `<dbx-style-demo>` playground (as an array) to populate the template-lever list in the controls UI.
+ */
+const DBX_STYLE_DEMO_TEMPLATE_TOGGLE = new InjectionToken('DbxStyleDemoTemplateToggle');
+/**
+ * Registers one or more {@link DbxStyleDemoTemplateToggle} levers with the style-demo playground.
+ *
+ * Each toggle is contributed via the {@link DBX_STYLE_DEMO_TEMPLATE_TOGGLE} multi-provider, so several libraries can
+ * each add their own levers.
+ *
+ * @param toggles - The template toggles to register.
+ * @returns EnvironmentProviders contributing the toggles.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function provideDbxStyleDemoTemplateToggles(...toggles) {
+    const providers = toggles.map((toggle) => ({
+        provide: DBX_STYLE_DEMO_TEMPLATE_TOGGLE,
+        useValue: toggle,
+        multi: true
+    }));
+    return makeEnvironmentProviders(providers);
+}
+
+/**
+ * Detach key used by the style-demo controls detach panel.
+ */
+const DBX_STYLE_DEMO_CONTROLS_DETACH_KEY = 'dbx-style-demo-controls';
+/**
+ * Injection token carrying the component class rendered inside the style-demo controls detach panel.
+ *
+ * `DbxStyleDemoControlsService` opens this component via `DbxDetachService` (so it survives navigation and is available
+ * app-wide) reading the service's {@link DbxStyleDemoControls} state. When unregistered, the controls buttons are hidden.
+ *
+ * `@dereekb/dbx-form/style-demo` registers `DbxFormStyleDemoControlsDetachComponent` (a presets chip-field controls UI)
+ * here — the controls UI lives in dbx-form because it depends on `@dereekb/dbx-form`'s pickable chip field, which dbx-web
+ * cannot import.
+ */
+const DBX_STYLE_DEMO_CONTROLS_COMPONENT = new InjectionToken('DbxStyleDemoControlsComponent');
+/**
+ * Popover key used by the style-demo sections popover, opened from the playground header.
+ */
+const DBX_STYLE_DEMO_SECTIONS_POPOVER_KEY = 'dbx-style-demo-sections';
+/**
+ * Injection token carrying the component class rendered inside the style-demo sections popover.
+ *
+ * `DbxStyleDemoControlsService` opens this component via `DbxPopoverService`, anchored to the playground header's
+ * "Sections" button, because sections only affect the `<dbx-style-demo>` playground page (unlike presets, which restyle
+ * the whole app). When unregistered, the playground's "Sections" button is hidden.
+ *
+ * `@dereekb/dbx-form/style-demo` registers `DbxFormStyleDemoSectionsPopoverComponent` (a sections chip-field controls
+ * UI) here — the controls UI lives in dbx-form because it depends on `@dereekb/dbx-form`'s pickable chip field, which
+ * dbx-web cannot import.
+ */
+const DBX_STYLE_DEMO_SECTIONS_COMPONENT = new InjectionToken('DbxStyleDemoSectionsComponent');
+
+/**
+ * Configuration for the {@link DbxStyleDemoControlsService}, provided in the root environment via `provideDbxStyleDemo()`.
+ */
+class DbxStyleDemoControlsServiceConfig {
+}
+/**
+ * Root-level state holder for the `<dbx-style-demo>` controls, implementing {@link DbxStyleDemoControls}.
+ *
+ * Owning the enabled-sections / active-template state here (rather than in the playground component) lets the controls
+ * panel open through {@link DbxDetachService} so it survives navigation and is available app-wide. When a
+ * {@link DbxStyleService} is available (and {@link DbxStyleDemoControlsServiceConfig.applyStylesToApp} is not false), the
+ * active levers are forwarded into the style service as a body supplement so they repaint the entire app.
+ *
+ * This service is demo/debug-only and disposable — it is not a dbx-web core runtime primitive.
+ */
+class DbxStyleDemoControlsService {
+    _registry = inject(DbxStyleDemoSectionRegistry);
+    _toggles = inject(DBX_STYLE_DEMO_TEMPLATE_TOGGLE, { optional: true }) ?? [];
+    _loaderService = inject(DbxStyleDemoStyleLoaderService);
+    _detachService = inject(DbxDetachService);
+    _popoverService = inject(DbxPopoverService, { optional: true });
+    _controlsComponentClass = inject(DBX_STYLE_DEMO_CONTROLS_COMPONENT, { optional: true });
+    _sectionsComponentClass = inject(DBX_STYLE_DEMO_SECTIONS_COMPONENT, { optional: true });
+    _styleService = inject(DbxStyleService, { optional: true });
+    _config = inject(DbxStyleDemoControlsServiceConfig, { optional: true });
+    _sectionEnabledOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "_sectionEnabledOverrides" }] : /* istanbul ignore next */ []));
+    _activeTemplateKeysOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeTemplateKeysOverride" }] : /* istanbul ignore next */ []));
+    _defaultActiveTemplateKeys = signal([], ...(ngDevMode ? [{ debugName: "_defaultActiveTemplateKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * True when a controls component is registered, gating the controls buttons.
+     */
+    hasControlsSignal = signal(this._controlsComponentClass != null, ...(ngDevMode ? [{ debugName: "hasControlsSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * True when a sections component is registered (and a popover service is available), gating the playground's
+     * "Sections" button.
+     */
+    hasSectionsSignal = signal(this._sectionsComponentClass != null && this._popoverService != null, ...(ngDevMode ? [{ debugName: "hasSectionsSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * All registered sections, unfiltered (the global controls list every section).
+     */
+    sectionsSignal = this._registry.sectionsSignal;
+    templateTogglesSignal = signal(this._toggles, ...(ngDevMode ? [{ debugName: "templateTogglesSignal" }] : /* istanbul ignore next */ []));
+    enabledIdsSignal = computed(() => {
+        const overrides = this._sectionEnabledOverrides();
+        return new Set(this.sectionsSignal()
+            .filter((section) => overrides.get(section.id) ?? section.defaultEnabled !== false)
+            .map((section) => section.id));
+    }, ...(ngDevMode ? [{ debugName: "enabledIdsSignal" }] : /* istanbul ignore next */ []));
+    activeTemplateKeysSignal = computed(() => {
+        const _defaultActiveTemplateKeys = this._defaultActiveTemplateKeys();
+        const override = this._activeTemplateKeysOverride();
+        return override ?? new Set(_defaultActiveTemplateKeys);
+    }, ...(ngDevMode ? [{ debugName: "activeTemplateKeysSignal" }] : /* istanbul ignore next */ []));
+    activeTemplateKeysArraySignal = computed(() => [...this.activeTemplateKeysSignal()], ...(ngDevMode ? [{ debugName: "activeTemplateKeysArraySignal" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const styleService = this._styleService;
+        if (styleService != null && this._config?.applyStylesToApp !== false) {
+            const supplementSignal = computed(() => {
+                const { style, classes } = this._loaderService.mergeTemplates([...this.activeTemplateKeysSignal()]);
+                return { style, classes };
+            }, ...(ngDevMode ? [{ debugName: "supplementSignal" }] : /* istanbul ignore next */ []));
+            styleService.setSupplement(toObservable(supplementSignal));
+        }
+    }
+    setSectionEnabled(id, enabled) {
+        const next = new Map(this._sectionEnabledOverrides());
+        next.set(id, enabled);
+        this._sectionEnabledOverrides.set(next);
+    }
+    setTemplateActive(key, active) {
+        const next = new Set(this.activeTemplateKeysSignal());
+        if (active) {
+            // Levers sharing a non-null group are mutually exclusive (radio-like): deactivate the others before activating this one.
+            const group = this._toggles.find((toggle) => toggle.templateName === key)?.group;
+            if (group != null) {
+                this._toggles.forEach((toggle) => {
+                    if (toggle.group === group && toggle.templateName !== key) {
+                        next.delete(toggle.templateName);
+                    }
+                });
+            }
+            next.add(key);
+        }
+        else {
+            next.delete(key);
+        }
+        this._activeTemplateKeysOverride.set(next);
+    }
+    /**
+     * Seeds the default active template keys. Has no effect once the user has set an override via {@link setTemplateActive}.
+     *
+     * @param keys - The template keys to activate by default.
+     */
+    setDefaultActiveTemplates(keys) {
+        this._defaultActiveTemplateKeys.set(keys);
+    }
+    /**
+     * Opens the registered controls component in a draggable detached overlay. No-op when no controls component is registered.
+     */
+    openControls() {
+        const componentClass = this._controlsComponentClass;
+        if (componentClass != null) {
+            this._detachService
+                .init({
+                key: DBX_STYLE_DEMO_CONTROLS_DETACH_KEY,
+                componentClass,
+                overlay: { width: '420px', height: '560px', isDraggable: true }
+            })
+                .detach();
+        }
+    }
+    /**
+     * Opens the registered sections component in a popover anchored to the given origin. No-op when no sections component
+     * is registered (or no popover service is available). Symmetric with {@link openControls}.
+     *
+     * @param config - The popover configuration.
+     * @param config.origin - The element the popover anchors to (the playground header's "Sections" button).
+     */
+    openSectionsPopover(config) {
+        const componentClass = this._sectionsComponentClass;
+        const popoverService = this._popoverService;
+        if (componentClass != null && popoverService != null) {
+            popoverService.open({
+                key: DBX_STYLE_DEMO_SECTIONS_POPOVER_KEY,
+                origin: config.origin,
+                componentClass
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Drop-in styling showcase for dbx-components apps.
+ *
+ * Renders the registered {@link DbxStyleDemoSection} components beneath a `[dbxStyleDemoStyleLoader]` host so they
+ * paint purely through the host app's `--mat-sys-*` / `--dbx-*` tokens and `.dbx-*` utilities — the playground emits
+ * no theme of its own. The "Style controls" button opens the shared {@link DbxStyleDemoControlsService} detach panel
+ * (also reachable from the app toolbar); flipping a lever re-points CSS tokens that ripple through every rendered
+ * section live via the custom-property cascade. The button only appears when a controls component is registered.
+ *
+ * Section enablement and active levers are held globally in {@link DbxStyleDemoControlsService}; this playground only
+ * adds its own tag filtering on top of the global enabled state.
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-web core runtime primitive.
+ *
+ * @example
+ * ```html
+ * <dbx-style-demo [config]="{ defaultActiveTemplates: ['corner-shape-full'] }"></dbx-style-demo>
+ * ```
+ */
+class DbxStyleDemoComponent {
+    _registry = inject(DbxStyleDemoSectionRegistry);
+    _controlsService = inject(DbxStyleDemoControlsService);
+    /**
+     * Playground configuration.
+     */
+    config = input(undefined, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * True when a controls component is registered, gating the "Style controls" button.
+     */
+    hasControlsSignal = this._controlsService.hasControlsSignal;
+    /**
+     * True when a sections component is registered, gating the "Sections" button (which opens the sections popover).
+     */
+    hasSectionsSignal = this._controlsService.hasSectionsSignal;
+    /**
+     * The "Sections" button element, used as the sections popover's anchor origin (present only while the button renders).
+     */
+    sectionsButton = viewChild('sectionsButton', { ...(ngDevMode ? { debugName: "sectionsButton" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * The active template keys held by the controls service, applied to this playground's style-loader host.
+     */
+    activeTemplatesSignal = this._controlsService.activeTemplateKeysArraySignal;
+    /**
+     * The registry sections this playground instance considers, filtered by its configured tags (enablement stays global).
+     */
+    sectionsSignal = computed(() => {
+        const tags = this.config()?.tags;
+        const sections = this._registry.sectionsSignal();
+        let result;
+        if (tags && tags.length > 0) {
+            const tagSet = new Set(tags);
+            result = sections.filter((section) => (section.tags ?? []).some((tag) => tagSet.has(tag)));
+        }
+        else {
+            result = sections;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
+    visibleSectionsSignal = computed(() => {
+        const enabledIds = this._controlsService.enabledIdsSignal();
+        return this.sectionsSignal().filter((section) => enabledIds.has(section.id));
+    }, ...(ngDevMode ? [{ debugName: "visibleSectionsSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Seeds the controls service with this playground's configured default active templates.
+     */
+    _seedDefaultTemplatesEffect = effect(() => {
+        const defaults = this.config()?.defaultActiveTemplates;
+        this._controlsService.setDefaultActiveTemplates(defaults ?? []);
+    }, ...(ngDevMode ? [{ debugName: "_seedDefaultTemplatesEffect" }] : /* istanbul ignore next */ []));
+    openControls() {
+        this._controlsService.openControls();
+    }
+    openSectionsPopover() {
+        const origin = this.sectionsButton();
+        if (origin != null) {
+            this._controlsService.openSectionsPopover({ origin });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoComponent, isStandalone: true, selector: "dbx-style-demo", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sectionsButton", first: true, predicate: ["sectionsButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <div class="dbx-style-demo dbx-flex-column dbx-p3">
+      <div class="dbx-flex-bar dbx-pb3">
+        <span class="dbx-text-title-large">Style Demo</span>
+        <span class="dbx-flex-fill"></span>
+        @if (hasSectionsSignal()) {
+          <dbx-button class="dbx-button-spacer" #sectionsButton stroked icon="tune" text="Sections" (buttonClick)="openSectionsPopover()"></dbx-button>
+        }
+        @if (hasControlsSignal()) {
+          <dbx-button stroked icon="palette" text="Style controls" (buttonClick)="openControls()"></dbx-button>
+        }
+      </div>
+      <div [dbxStyleDemoStyleLoader]="activeTemplatesSignal()">
+        <div dbxFlexGroup>
+          @for (section of visibleSectionsSignal(); track section.id) {
+            <div [dbxFlexSize]="3">
+              <mat-card appearance="outlined" class="dbx-mb3">
+                <mat-card-content class="dbx-p3">
+                  <ng-container *ngComponentOutlet="section.component"></ng-container>
+                </mat-card-content>
+              </mat-card>
+            </div>
+          } @empty {
+            <p class="dbx-hint">No sections enabled.</p>
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }, { kind: "directive", type: DbxStyleDemoStyleLoaderDirective, selector: "[dbxStyleDemoStyleLoader]", inputs: ["dbxStyleDemoStyleLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo',
+                    template: `
+    <div class="dbx-style-demo dbx-flex-column dbx-p3">
+      <div class="dbx-flex-bar dbx-pb3">
+        <span class="dbx-text-title-large">Style Demo</span>
+        <span class="dbx-flex-fill"></span>
+        @if (hasSectionsSignal()) {
+          <dbx-button class="dbx-button-spacer" #sectionsButton stroked icon="tune" text="Sections" (buttonClick)="openSectionsPopover()"></dbx-button>
+        }
+        @if (hasControlsSignal()) {
+          <dbx-button stroked icon="palette" text="Style controls" (buttonClick)="openControls()"></dbx-button>
+        }
+      </div>
+      <div [dbxStyleDemoStyleLoader]="activeTemplatesSignal()">
+        <div dbxFlexGroup>
+          @for (section of visibleSectionsSignal(); track section.id) {
+            <div [dbxFlexSize]="3">
+              <mat-card appearance="outlined" class="dbx-mb3">
+                <mat-card-content class="dbx-p3">
+                  <ng-container *ngComponentOutlet="section.component"></ng-container>
+                </mat-card-content>
+              </mat-card>
+            </div>
+          } @empty {
+            <p class="dbx-hint">No sections enabled.</p>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [NgComponentOutlet, MatCardModule, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxStyleDemoStyleLoaderDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], sectionsButton: [{ type: i0.ViewChild, args: ['sectionsButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+/**
+ * Style-demo section showing every `dbx-button` appearance (basic, stroked, flat, raised, tonal) across the core
+ * theme colors, plus an icon-only and a FAB button. Buttons paint their container colour and corner radius from the
+ * `--mat-button-*` tokens, so they respond live to the playground's Shape levers and flip with light/dark.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-buttons
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary dbx-button appearances across theme colors, plus icon-only and FAB modes.
+ * @dbxDocsUiExampleRelated button, icon-button
+ */
+class DbxStyleDemoButtonsSectionComponent {
+    variants = ['basic', 'stroked', 'flat', 'raised', 'tonal'];
+    colors = [undefined, 'primary', 'accent', 'warn', 'success'];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoButtonsSectionComponent, isStandalone: true, selector: "dbx-style-demo-buttons-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Buttons" hint="dbx-button appearances across theme colors.">
+      <dbx-docs-ui-example-info>
+        <p>
+          Each row is one Material button appearance —
+          <code>basic</code>
+          ,
+          <code>stroked</code>
+          ,
+          <code>flat</code>
+          ,
+          <code>raised</code>
+          ,
+          <code>tonal</code>
+          — rendered across the core theme colors. Buttons draw their container colour and corner radius from the
+          <code>--mat-button-*</code>
+          tokens, so they respond live to the Shape levers and flip with light/dark.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (variant of variants; track variant) {
+            <div class="dbx-pb2">
+              <div class="dbx-text-label-small dbx-hint dbx-pb1">{{ variant }}</div>
+              <div class="dbx-flex">
+                @for (color of colors; track color; let last = $last) {
+                  <dbx-button [basic]="variant === 'basic'" [stroked]="variant === 'stroked'" [flat]="variant === 'flat'" [raised]="variant === 'raised'" [tonal]="variant === 'tonal'" [color]="color" [text]="color ?? 'default'"></dbx-button>
+                  @if (!last) {
+                    <dbx-button-spacer></dbx-button-spacer>
+                  }
+                }
+              </div>
+            </div>
+          }
+          <div class="dbx-flex">
+            <dbx-button iconOnly icon="palette"></dbx-button>
+            <dbx-button-spacer></dbx-button-spacer>
+            <dbx-button fab icon="add"></dbx-button>
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-buttons-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxButtonComponent, DbxButtonSpacerDirective],
+                    template: `
+    <dbx-docs-ui-example header="Buttons" hint="dbx-button appearances across theme colors.">
+      <dbx-docs-ui-example-info>
+        <p>
+          Each row is one Material button appearance —
+          <code>basic</code>
+          ,
+          <code>stroked</code>
+          ,
+          <code>flat</code>
+          ,
+          <code>raised</code>
+          ,
+          <code>tonal</code>
+          — rendered across the core theme colors. Buttons draw their container colour and corner radius from the
+          <code>--mat-button-*</code>
+          tokens, so they respond live to the Shape levers and flip with light/dark.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (variant of variants; track variant) {
+            <div class="dbx-pb2">
+              <div class="dbx-text-label-small dbx-hint dbx-pb1">{{ variant }}</div>
+              <div class="dbx-flex">
+                @for (color of colors; track color; let last = $last) {
+                  <dbx-button [basic]="variant === 'basic'" [stroked]="variant === 'stroked'" [flat]="variant === 'flat'" [raised]="variant === 'raised'" [tonal]="variant === 'tonal'" [color]="color" [text]="color ?? 'default'"></dbx-button>
+                  @if (!last) {
+                    <dbx-button-spacer></dbx-button-spacer>
+                  }
+                }
+              </div>
+            </div>
+          }
+          <div class="dbx-flex">
+            <dbx-button iconOnly icon="palette"></dbx-button>
+            <dbx-button-spacer></dbx-button-spacer>
+            <dbx-button fab icon="add"></dbx-button>
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing the three Material 3 card appearances (outlined, raised, filled) painted purely
+ * from `--mat-sys-*` surface tokens, so they respond live to the playground's surface-tint and corner-shape levers.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-cards
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary Material 3 card appearances (outlined, elevated, filled) painted from system surface tokens.
+ * @dbxDocsUiExampleRelated mat-card, dbx-card-box
+ */
+class DbxStyleDemoCardsSectionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxStyleDemoCardsSectionComponent, isStandalone: true, selector: "dbx-style-demo-cards-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Cards" hint="Material 3 card appearances painted from system surface tokens.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The three M3 card appearances —
+          <code>outlined</code>
+          ,
+          <code>raised</code>
+          , and
+          <code>filled</code>
+          — draw their container colour and shape from
+          <code>--mat-sys-surface*</code>
+          and the
+          <code>--mat-card-*-container-shape</code>
+          tokens. No hard-coded colours or radii, so they flip with light/dark and respond live to the surface-tint and corner-shape levers.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div dbxFlexGroup>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="outlined">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Outlined</div>
+                <p class="dbx-text-body-medium">Surface with a hairline outline.</p>
+                <dbx-button stroked text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="raised">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Raised</div>
+                <p class="dbx-text-body-medium">Surface lifted by a shadow.</p>
+                <dbx-button flat text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="filled">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Filled</div>
+                <p class="dbx-text-body-medium">Tonal surface container.</p>
+                <dbx-button basic text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-cards-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, MatCardModule, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective],
+                    template: `
+    <dbx-docs-ui-example header="Cards" hint="Material 3 card appearances painted from system surface tokens.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The three M3 card appearances —
+          <code>outlined</code>
+          ,
+          <code>raised</code>
+          , and
+          <code>filled</code>
+          — draw their container colour and shape from
+          <code>--mat-sys-surface*</code>
+          and the
+          <code>--mat-card-*-container-shape</code>
+          tokens. No hard-coded colours or radii, so they flip with light/dark and respond live to the surface-tint and corner-shape levers.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div dbxFlexGroup>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="outlined">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Outlined</div>
+                <p class="dbx-text-body-medium">Surface with a hairline outline.</p>
+                <dbx-button stroked text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="raised">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Raised</div>
+                <p class="dbx-text-body-medium">Surface lifted by a shadow.</p>
+                <dbx-button flat text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+          <div [dbxFlexSize]="2">
+            <mat-card appearance="filled">
+              <mat-card-content class="dbx-p3">
+                <div class="dbx-text-title-medium dbx-mb1">Filled</div>
+                <p class="dbx-text-body-medium">Tonal surface container.</p>
+                <dbx-button basic text="Action"></dbx-button>
+              </mat-card-content>
+            </mat-card>
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section that dumps every template registered with the host app's {@link DbxColorService} as a
+ * `[dbxColor]` swatch, marking the curated ones. This makes both the built-in curated set and any app-seeded
+ * templates visible in one place; when the service is not provided, an empty-state hint is shown instead.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-color-templates
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary Every registered DbxColorService template dumped as a [dbxColor] swatch, curated ones marked.
+ * @dbxDocsUiExampleRelated color, color-service
+ */
+class DbxStyleDemoColorTemplatesSectionComponent {
+    _colorService = inject(DbxColorService, { optional: true });
+    templates = (this._colorService?.getAllRegisteredTemplateKeys() ?? []).map((key) => ({ key, curated: this._colorService?.getTemplate(key)?.curated === true }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoColorTemplatesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-templates-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Color Templates" hint="Registered DbxColorService templates.">
+      <dbx-docs-ui-example-info>
+        <p>
+          A
+          <code>DbxColorConfigTemplate</code>
+          is a named, reusable color preset registered with
+          <code>DbxColorService</code>
+          — via
+          <code>provideDbxStyleService(&#123; dbxColorServiceConfig: &#123; templates &#125; &#125;)</code>
+          at the app root or
+          <code>DbxColorService.register(...)</code>
+          at runtime. Each swatch below is painted with
+          <code>[dbxColor]="&#123; template: key &#125;"</code>
+          ; the
+          <code>curated</code>
+          ones also feed the deterministic name-derived color pickers.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        @if (templates.length > 0) {
+          <div class="dbx-flex" [style.flex-wrap]="'wrap'">
+            @for (template of templates; track template.key) {
+              <div class="dbx-pr1 dbx-pb1">
+                <div class="dbx-p2 dbx-color-bg" [dbxColor]="{ template: template.key }">
+                  <span class="dbx-text-label-small">{{ template.key }}</span>
+                  @if (template.curated) {
+                    <span class="dbx-text-label-small">· curated</span>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <p class="dbx-hint">No DbxColorService templates are registered (or the service is not provided by the host app).</p>
+        }
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-color-templates-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxColorDirective],
+                    template: `
+    <dbx-docs-ui-example header="Color Templates" hint="Registered DbxColorService templates.">
+      <dbx-docs-ui-example-info>
+        <p>
+          A
+          <code>DbxColorConfigTemplate</code>
+          is a named, reusable color preset registered with
+          <code>DbxColorService</code>
+          — via
+          <code>provideDbxStyleService(&#123; dbxColorServiceConfig: &#123; templates &#125; &#125;)</code>
+          at the app root or
+          <code>DbxColorService.register(...)</code>
+          at runtime. Each swatch below is painted with
+          <code>[dbxColor]="&#123; template: key &#125;"</code>
+          ; the
+          <code>curated</code>
+          ones also feed the deterministic name-derived color pickers.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        @if (templates.length > 0) {
+          <div class="dbx-flex" [style.flex-wrap]="'wrap'">
+            @for (template of templates; track template.key) {
+              <div class="dbx-pr1 dbx-pb1">
+                <div class="dbx-p2 dbx-color-bg" [dbxColor]="{ template: template.key }">
+                  <span class="dbx-text-label-small">{{ template.key }}</span>
+                  @if (template.curated) {
+                    <span class="dbx-text-label-small">· curated</span>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <p class="dbx-hint">No DbxColorService templates are registered (or the service is not provided by the host app).</p>
+        }
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing `[dbxColor]` themed backgrounds at full strength and as `[dbxColorTone]` tonal washes,
+ * across the core and extra theme colors, so the color tokens are easy to compare under the host app's theme.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-color-tones
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary Themed [dbxColor] backgrounds at full strength and as [dbxColorTone] tonal washes.
+ * @dbxDocsUiExampleRelated color, text-color, color-service
+ */
+class DbxStyleDemoColorTonesSectionComponent {
+    colors = [...DBX_THEME_COLORS_MAIN, ...DBX_THEME_COLORS_EXTRA];
+    tones = [40, 18, 8];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoColorTonesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-tones-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Color & Tones" hint="Themed [dbxColor] backgrounds, full and tonal.">
+      <dbx-docs-ui-example-info>
+        <p>
+          <code>[dbxColor]</code>
+          paints an element from a named theme color token; adding
+          <code>[dbxColorTone]</code>
+          (0–100) mixes it toward the surface for a muted tonal wash. Every core and extra theme color is shown below at full strength and at tones of 40, 18, and 8, so each token reads correctly under any theme.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div dbxFlexGroup>
+          @for (color of colors; track color) {
+            <div [dbxFlexSize]="3">
+              <div class="dbx-p3 dbx-mb1 dbx-color-bg" [dbxColor]="color">
+                <span class="dbx-text-label-large">{{ color }}</span>
+              </div>
+              @for (tone of tones; track tone) {
+                <div class="dbx-p3 dbx-mb1 dbx-color-bg" [dbxColor]="color" [dbxColorTone]="tone">
+                  <span class="dbx-text-label-large">{{ color }} · tone {{ tone }}</span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-color-tones-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxColorDirective, DbxFlexGroupDirective, DbxFlexSizeDirective],
+                    template: `
+    <dbx-docs-ui-example header="Color & Tones" hint="Themed [dbxColor] backgrounds, full and tonal.">
+      <dbx-docs-ui-example-info>
+        <p>
+          <code>[dbxColor]</code>
+          paints an element from a named theme color token; adding
+          <code>[dbxColorTone]</code>
+          (0–100) mixes it toward the surface for a muted tonal wash. Every core and extra theme color is shown below at full strength and at tones of 40, 18, and 8, so each token reads correctly under any theme.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div dbxFlexGroup>
+          @for (color of colors; track color) {
+            <div [dbxFlexSize]="3">
+              <div class="dbx-p3 dbx-mb1 dbx-color-bg" [dbxColor]="color">
+                <span class="dbx-text-label-large">{{ color }}</span>
+              </div>
+              @for (tone of tones; track tone) {
+                <div class="dbx-p3 dbx-mb1 dbx-color-bg" [dbxColor]="color" [dbxColorTone]="tone">
+                  <span class="dbx-text-label-large">{{ color }} · tone {{ tone }}</span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing the router-free navigation building blocks — `dbx-pagebar`, `dbx-bar` + `dbx-bar-header`,
+ * and a nested `dbx-anchor-list` — painted from the host theme's bar / surface tokens. The anchors are click-only, so
+ * this section needs no router; the route-bound `dbx-navbar` demo is contributed by the host app instead.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-navigation
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary Router-free navigation building blocks — pagebar, bar, bar-header, and a nested anchor list.
+ * @dbxDocsUiExampleRelated pagebar, bar, bar-header, anchor-list
+ */
+class DbxStyleDemoNavigationSectionComponent {
+    navAnchors = [
+        { title: 'Dashboard', icon: 'dashboard', onClick: () => undefined },
+        {
+            title: 'Settings',
+            icon: 'settings',
+            onClick: () => undefined,
+            children: [
+                { title: 'Profile', icon: 'person', onClick: () => undefined },
+                { title: 'Security', icon: 'lock', onClick: () => undefined }
+            ]
+        },
+        { title: 'Help', icon: 'help', onClick: () => undefined }
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxStyleDemoNavigationSectionComponent, isStandalone: true, selector: "dbx-style-demo-navigation-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Navigation" hint="Router-free navigation building blocks.">
+      <dbx-docs-ui-example-info>
+        <p>
+          <code>dbx-pagebar</code>
+          ,
+          <code>dbx-bar</code>
+          ,
+          <code>dbx-bar-header</code>
+          , and
+          <code>dbx-anchor-list</code>
+          all paint from the host theme's bar / surface tokens. The anchors here are click-only (no
+          <code>ref</code>
+          ), so the section is router-free; the route-bound
+          <code>dbx-navbar</code>
+          tab demo is the app-contributed Navbar section.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          <dbx-pagebar>
+            <span left class="dbx-text-title-medium">Page title</span>
+            <span right>
+              <dbx-button iconOnly icon="search"></dbx-button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <dbx-button iconOnly icon="more_vert"></dbx-button>
+            </span>
+          </dbx-pagebar>
+          <dbx-bar-header class="dbx-pt2" text="Section divider" icon="folder"></dbx-bar-header>
+          <dbx-bar class="dbx-pt2">
+            <dbx-button stroked text="Cancel"></dbx-button>
+            <dbx-button-spacer></dbx-button-spacer>
+            <dbx-button flat color="primary" text="Save"></dbx-button>
+          </dbx-bar>
+          <dbx-anchor-list class="dbx-pt2" [anchors]="navAnchors"></dbx-anchor-list>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "component", type: DbxPagebarComponent, selector: "dbx-pagebar" }, { kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]" }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon"] }, { kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-navigation-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxPagebarComponent, DbxBarDirective, DbxBarHeaderComponent, DbxAnchorListComponent, DbxButtonComponent, DbxButtonSpacerDirective],
+                    template: `
+    <dbx-docs-ui-example header="Navigation" hint="Router-free navigation building blocks.">
+      <dbx-docs-ui-example-info>
+        <p>
+          <code>dbx-pagebar</code>
+          ,
+          <code>dbx-bar</code>
+          ,
+          <code>dbx-bar-header</code>
+          , and
+          <code>dbx-anchor-list</code>
+          all paint from the host theme's bar / surface tokens. The anchors here are click-only (no
+          <code>ref</code>
+          ), so the section is router-free; the route-bound
+          <code>dbx-navbar</code>
+          tab demo is the app-contributed Navbar section.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          <dbx-pagebar>
+            <span left class="dbx-text-title-medium">Page title</span>
+            <span right>
+              <dbx-button iconOnly icon="search"></dbx-button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <dbx-button iconOnly icon="more_vert"></dbx-button>
+            </span>
+          </dbx-pagebar>
+          <dbx-bar-header class="dbx-pt2" text="Section divider" icon="folder"></dbx-bar-header>
+          <dbx-bar class="dbx-pt2">
+            <dbx-button stroked text="Cancel"></dbx-button>
+            <dbx-button-spacer></dbx-button-spacer>
+            <dbx-button flat color="primary" text="Save"></dbx-button>
+          </dbx-bar>
+          <dbx-anchor-list class="dbx-pt2" [anchors]="navAnchors"></dbx-anchor-list>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing the full Material 3 corner-radius scale (per
+ * https://m3.material.io/styles/shape/corner-radius-scale) as fixed-size tiles, flagging the spec steps that have no
+ * web token. A live outlined card + stroked button below follow whichever Shape lever is active, demonstrating that
+ * the levers override the component shape tokens (`--mat-card-*` / `--mat-button-*`), not `--mat-sys-corner-*`.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-shape-scale
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary The Material 3 corner-radius scale as fixed tiles, flagging spec steps with no web token.
+ * @dbxDocsUiExampleRelated cards, button
+ */
+class DbxStyleDemoShapeScaleSectionComponent {
+    steps = [
+        { label: 'none', radius: 'var(--mat-sys-corner-none)', webToken: '--mat-sys-corner-none' },
+        { label: 'extra-small', radius: 'var(--mat-sys-corner-extra-small)', webToken: '--mat-sys-corner-extra-small' },
+        { label: 'small', radius: 'var(--mat-sys-corner-small)', webToken: '--mat-sys-corner-small' },
+        { label: 'medium', radius: 'var(--mat-sys-corner-medium)', webToken: '--mat-sys-corner-medium' },
+        { label: 'large', radius: 'var(--mat-sys-corner-large)', webToken: '--mat-sys-corner-large' },
+        { label: 'large-increased', radius: '20px' },
+        { label: 'extra-large', radius: 'var(--mat-sys-corner-extra-large)', webToken: '--mat-sys-corner-extra-large' },
+        { label: 'extra-large-increased', radius: '32px' },
+        { label: 'extra-extra-large', radius: '48px' },
+        { label: 'full', radius: 'var(--mat-sys-corner-full)', webToken: '--mat-sys-corner-full' }
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoShapeScaleSectionComponent, isStandalone: true, selector: "dbx-style-demo-shape-scale-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Shape Scale" hint="The Material 3 corner-radius scale.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The
+          <a href="https://m3.material.io/styles/shape/corner-radius-scale" target="_blank" rel="noopener">M3 corner-radius scale</a>
+          runs from
+          <code>none</code>
+          to
+          <code>full</code>
+          . Each tile below is rounded by the matching
+          <code>--mat-sys-corner-*</code>
+          token; a few spec steps (large-increased, extra-large-increased, extra-extra-large) have no web token and use a literal value. The Shape levers in the controls do not change these
+          <code>--mat-sys-corner-*</code>
+          values — they re-point the per-component shape tokens (
+          <code>--mat-card-*-container-shape</code>
+          ,
+          <code>--mat-button-*-container-shape</code>
+          ), which is why the card and button below re-round while the tiles stay fixed.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex" [style.flex-wrap]="'wrap'">
+          @for (step of steps; track step.label) {
+            <div class="dbx-pr3 dbx-pb3">
+              <div [style.border-radius]="step.radius" [style.width.px]="64" [style.height.px]="64" [style.background]="'var(--mat-sys-surface-container-high)'" [style.border]="'1px solid var(--mat-sys-outline-variant)'"></div>
+              <div class="dbx-text-label-small dbx-pt1">{{ step.label }}</div>
+              @if (step.webToken) {
+                <div class="dbx-text-label-small dbx-hint">
+                  <code>{{ step.webToken }}</code>
+                </div>
+              } @else {
+                <div class="dbx-text-label-small dbx-hint">no web token</div>
+              }
+            </div>
+          }
+        </div>
+        <div class="dbx-pt2">
+          <p class="dbx-hint">The card and button below follow the active Shape lever:</p>
+          <mat-card appearance="outlined">
+            <mat-card-content class="dbx-p3">
+              <div class="dbx-text-title-medium dbx-mb1">Outlined card</div>
+              <dbx-button stroked text="Action"></dbx-button>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-shape-scale-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, MatCardModule, DbxButtonComponent],
+                    template: `
+    <dbx-docs-ui-example header="Shape Scale" hint="The Material 3 corner-radius scale.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The
+          <a href="https://m3.material.io/styles/shape/corner-radius-scale" target="_blank" rel="noopener">M3 corner-radius scale</a>
+          runs from
+          <code>none</code>
+          to
+          <code>full</code>
+          . Each tile below is rounded by the matching
+          <code>--mat-sys-corner-*</code>
+          token; a few spec steps (large-increased, extra-large-increased, extra-extra-large) have no web token and use a literal value. The Shape levers in the controls do not change these
+          <code>--mat-sys-corner-*</code>
+          values — they re-point the per-component shape tokens (
+          <code>--mat-card-*-container-shape</code>
+          ,
+          <code>--mat-button-*-container-shape</code>
+          ), which is why the card and button below re-round while the tiles stay fixed.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex" [style.flex-wrap]="'wrap'">
+          @for (step of steps; track step.label) {
+            <div class="dbx-pr3 dbx-pb3">
+              <div [style.border-radius]="step.radius" [style.width.px]="64" [style.height.px]="64" [style.background]="'var(--mat-sys-surface-container-high)'" [style.border]="'1px solid var(--mat-sys-outline-variant)'"></div>
+              <div class="dbx-text-label-small dbx-pt1">{{ step.label }}</div>
+              @if (step.webToken) {
+                <div class="dbx-text-label-small dbx-hint">
+                  <code>{{ step.webToken }}</code>
+                </div>
+              } @else {
+                <div class="dbx-text-label-small dbx-hint">no web token</div>
+              }
+            </div>
+          }
+        </div>
+        <div class="dbx-pt2">
+          <p class="dbx-hint">The card and button below follow the active Shape lever:</p>
+          <mat-card appearance="outlined">
+            <mat-card-content class="dbx-p3">
+              <div class="dbx-text-title-medium dbx-mb1">Outlined card</div>
+              <dbx-button stroked text="Action"></dbx-button>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing the full Material 3 surface ramp (`surface-dim` → `surface-container-highest`, plus
+ * `inverse-surface`) painted straight from the `--mat-sys-*` tokens, so the host theme's neutral palette and the
+ * playground's surface-tint lever are easy to read under light and dark.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-surfaces
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary The Material 3 surface ramp painted from --mat-sys-surface* tokens, plus outline samples.
+ * @dbxDocsUiExampleRelated cards, color
+ */
+class DbxStyleDemoSurfacesSectionComponent {
+    surfaces = [
+        { label: 'surface-dim', background: 'var(--mat-sys-surface-dim)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface', background: 'var(--mat-sys-surface)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-bright', background: 'var(--mat-sys-surface-bright)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-container-lowest', background: 'var(--mat-sys-surface-container-lowest)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-container-low', background: 'var(--mat-sys-surface-container-low)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-container', background: 'var(--mat-sys-surface-container)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-container-high', background: 'var(--mat-sys-surface-container-high)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'surface-container-highest', background: 'var(--mat-sys-surface-container-highest)', color: 'var(--mat-sys-on-surface)' },
+        { label: 'inverse-surface', background: 'var(--mat-sys-inverse-surface)', color: 'var(--mat-sys-inverse-on-surface)' }
+    ];
+    outlines = [
+        { label: 'outline', border: '1px solid var(--mat-sys-outline)' },
+        { label: 'outline-variant', border: '1px solid var(--mat-sys-outline-variant)' }
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoSurfacesSectionComponent, isStandalone: true, selector: "dbx-style-demo-surfaces-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Surfaces" hint="The Material 3 surface ramp from system tokens.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The M3 neutral ramp —
+          <code>--mat-sys-surface-dim</code>
+          through
+          <code>--mat-sys-surface-container-highest</code>
+          , plus the
+          <code>inverse-surface</code>
+          pair — is what every dbx surface (cards, menus, sheets) is layered from. Each swatch reads its colour straight from the token, so the surface-tint lever shifts the
+          <code>surface</code>
+          /
+          <code>-container</code>
+          /
+          <code>-container-high</code>
+          rows live, and all of them flip with light/dark.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (surface of surfaces; track surface.label) {
+            <div class="dbx-p2" [style.background]="surface.background" [style.color]="surface.color">
+              <span class="dbx-text-label-medium">{{ surface.label }}</span>
+            </div>
+          }
+          <p class="dbx-pt2" [style.color]="'var(--mat-sys-on-surface-variant)'">
+            Secondary text uses
+            <code>--mat-sys-on-surface-variant</code>
+            against these surfaces.
+          </p>
+          <div class="dbx-flex">
+            @for (outline of outlines; track outline.label) {
+              <div class="dbx-p2 dbx-pr3" [style.border]="outline.border">
+                <span class="dbx-text-label-small">{{ outline.label }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-surfaces-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent],
+                    template: `
+    <dbx-docs-ui-example header="Surfaces" hint="The Material 3 surface ramp from system tokens.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The M3 neutral ramp —
+          <code>--mat-sys-surface-dim</code>
+          through
+          <code>--mat-sys-surface-container-highest</code>
+          , plus the
+          <code>inverse-surface</code>
+          pair — is what every dbx surface (cards, menus, sheets) is layered from. Each swatch reads its colour straight from the token, so the surface-tint lever shifts the
+          <code>surface</code>
+          /
+          <code>-container</code>
+          /
+          <code>-container-high</code>
+          rows live, and all of them flip with light/dark.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (surface of surfaces; track surface.label) {
+            <div class="dbx-p2" [style.background]="surface.background" [style.color]="surface.color">
+              <span class="dbx-text-label-medium">{{ surface.label }}</span>
+            </div>
+          }
+          <p class="dbx-pt2" [style.color]="'var(--mat-sys-on-surface-variant)'">
+            Secondary text uses
+            <code>--mat-sys-on-surface-variant</code>
+            against these surfaces.
+          </p>
+          <div class="dbx-flex">
+            @for (outline of outlines; track outline.label) {
+              <div class="dbx-p2 dbx-pr3" [style.border]="outline.border">
+                <span class="dbx-text-label-small">{{ outline.label }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * Style-demo section showing the Material 3 typescale roles via the `.dbx-text-<role>` utility classes, so the
+ * host theme's type ramp (family, size, weight, tracking) is visible at a glance.
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-type-roles
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary Material 3 typescale roles rendered via the .dbx-text-<role> utility classes.
+ * @dbxDocsUiExampleRelated text
+ */
+class DbxStyleDemoTypeRolesSectionComponent {
+    roles = [
+        { cssClass: 'dbx-text-display-small', label: 'Display Small' },
+        { cssClass: 'dbx-text-headline-medium', label: 'Headline Medium' },
+        { cssClass: 'dbx-text-title-large', label: 'Title Large' },
+        { cssClass: 'dbx-text-body-large', label: 'Body Large — the quick brown fox jumps over the lazy dog.' },
+        { cssClass: 'dbx-text-label-medium', label: 'Label Medium' }
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoTypeRolesSectionComponent, isStandalone: true, selector: "dbx-style-demo-type-roles-section", ngImport: i0, template: `
+    <dbx-docs-ui-example header="Type Roles" hint="Material 3 typescale via .dbx-text-* utilities.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The
+          <code>.dbx-text-&lt;role&gt;</code>
+          utilities map to the M3 typescale tokens (
+          <code>--mat-sys-headline-large</code>
+          ,
+          <code>--mat-sys-title-medium</code>
+          , …). They inherit the host theme's plain/brand families and weights, so a downstream app changing its typography ramp updates every role here without any local font rules.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (role of roles; track role.cssClass) {
+            <div class="dbx-pb1" [class]="role.cssClass">{{ role.label }}</div>
+          }
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-style-demo-type-roles-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent],
+                    template: `
+    <dbx-docs-ui-example header="Type Roles" hint="Material 3 typescale via .dbx-text-* utilities.">
+      <dbx-docs-ui-example-info>
+        <p>
+          The
+          <code>.dbx-text-&lt;role&gt;</code>
+          utilities map to the M3 typescale tokens (
+          <code>--mat-sys-headline-large</code>
+          ,
+          <code>--mat-sys-title-medium</code>
+          , …). They inherit the host theme's plain/brand families and weights, so a downstream app changing its typography ramp updates every role here without any local font rules.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <div class="dbx-flex-column">
+          @for (role of roles; track role.cssClass) {
+            <div class="dbx-pb1" [class]="role.cssClass">{{ role.label }}</div>
+          }
+        </div>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * The starter set of style-lever templates contributed by `@dereekb/dbx-web/style-demo`.
+ *
+ * The five `corner-shape-*` levers, the controls-only `pill-controls`, the component-scoped `button-corner-*` /
+ * `list-corner-*` / `anchor-list-corner-*` levers, and `surface-tint` reference the disposable
+ * `.dbx-style-demo-template-*` debug classes (emitted by the `dbx-style-demo-debug-classes()` SCSS mixin); the
+ * `vivid-primary` `style` lever applies an inline CSS-token override directly. The `corner-shape-*` levers share the
+ * `'Shape'` toggle group, so only one is active at a time; `pill-controls` (`'Controls'`), `button-corner-*`
+ * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) each live in
+ * their own group so they compose on top of a corner lever instead of radio-excluding it — their debug classes are
+ * emitted after `corner-shape-*` / `pill-controls` so they win the shape tokens they share.
+ */
+const DBX_WEB_STYLE_DEMO_TEMPLATES = [
+    { key: 'corner-shape-none', className: 'dbx-style-demo-template-corner-shape-none', label: 'Corners: none', curated: true },
+    { key: 'corner-shape-extra-small', className: 'dbx-style-demo-template-corner-shape-extra-small', label: 'Corners: extra-small', curated: true },
+    { key: 'corner-shape-medium', className: 'dbx-style-demo-template-corner-shape-medium', label: 'Corners: medium', curated: true },
+    { key: 'corner-shape-large', className: 'dbx-style-demo-template-corner-shape-large', label: 'Corners: large', curated: true },
+    { key: 'corner-shape-extra-large', className: 'dbx-style-demo-template-corner-shape-extra-large', label: 'Corners: extra-large', curated: true },
+    { key: 'pill-controls', className: 'dbx-style-demo-template-pill-controls', label: 'Pill controls', curated: true },
+    // Button-only corner levers ('Button Shape' group) — compose on top of a corner-shape-* lever.
+    { key: 'button-corner-none', className: 'dbx-style-demo-template-button-corner-none', label: 'Button corners: none', curated: true },
+    { key: 'button-corner-extra-small', className: 'dbx-style-demo-template-button-corner-extra-small', label: 'Button corners: extra-small', curated: true },
+    { key: 'button-corner-medium', className: 'dbx-style-demo-template-button-corner-medium', label: 'Button corners: medium', curated: true },
+    { key: 'button-corner-large', className: 'dbx-style-demo-template-button-corner-large', label: 'Button corners: large', curated: true },
+    { key: 'button-corner-extra-large', className: 'dbx-style-demo-template-button-corner-extra-large', label: 'Button corners: extra-large', curated: true },
+    // dbx-list-only corner levers ('List Shape' group) — re-round selection/standard + card list rows.
+    { key: 'list-corner-none', className: 'dbx-style-demo-template-list-corner-none', label: 'List corners: none', curated: true },
+    { key: 'list-corner-small', className: 'dbx-style-demo-template-list-corner-small', label: 'List corners: small', curated: true },
+    { key: 'list-corner-medium', className: 'dbx-style-demo-template-list-corner-medium', label: 'List corners: medium', curated: true },
+    { key: 'list-corner-large', className: 'dbx-style-demo-template-list-corner-large', label: 'List corners: large', curated: true },
+    { key: 'list-corner-extra-large', className: 'dbx-style-demo-template-list-corner-extra-large', label: 'List corners: extra-large', curated: true },
+    // dbx-anchor-list-only corner levers ('Anchor List Shape' group) — re-round nav/anchor list rows, independent of List Shape.
+    { key: 'anchor-list-corner-none', className: 'dbx-style-demo-template-anchor-list-corner-none', label: 'Anchor list corners: none', curated: true },
+    { key: 'anchor-list-corner-small', className: 'dbx-style-demo-template-anchor-list-corner-small', label: 'Anchor list corners: small', curated: true },
+    { key: 'anchor-list-corner-medium', className: 'dbx-style-demo-template-anchor-list-corner-medium', label: 'Anchor list corners: medium', curated: true },
+    { key: 'anchor-list-corner-large', className: 'dbx-style-demo-template-anchor-list-corner-large', label: 'Anchor list corners: large', curated: true },
+    { key: 'anchor-list-corner-extra-large', className: 'dbx-style-demo-template-anchor-list-corner-extra-large', label: 'Anchor list corners: extra-large', curated: true },
+    { key: 'surface-tint', className: 'dbx-style-demo-template-surface-tint', label: 'Surface tint', curated: true },
+    // Inline-style POJO lever — an intentional demo override value, no debug class needed.
+    { key: 'vivid-primary', style: { '--mat-sys-primary': '#ff0066', '--mat-sys-on-primary': '#ffffff' }, label: 'Vivid primary', curated: true }
+];
+/**
+ * The controls levers exposed for {@link DBX_WEB_STYLE_DEMO_TEMPLATES}.
+ *
+ * The `corner-shape-*` levers share the `'Shape'` group (mutually exclusive); the component-scoped `button-corner-*`
+ * (`'Button Shape'`), `list-corner-*` (`'List Shape'`) and `anchor-list-corner-*` (`'Anchor List Shape'`) levers are
+ * mutually exclusive within their own groups but compose with `'Shape'` and `'Controls'`, letting a global corner
+ * preset be overridden for just buttons, just `dbx-list` rows, or just `dbx-anchor-list` (nav) rows. `pill-controls`
+ * (`'Controls'`), `surface-tint` and `vivid-primary` are independent toggles in their own groups.
+ */
+const DBX_WEB_STYLE_DEMO_TEMPLATE_TOGGLES = [
+    { templateName: 'corner-shape-none', label: 'Corners: none', group: 'Shape' },
+    { templateName: 'corner-shape-extra-small', label: 'Corners: extra-small', group: 'Shape' },
+    { templateName: 'corner-shape-medium', label: 'Corners: medium', group: 'Shape' },
+    { templateName: 'corner-shape-large', label: 'Corners: large', group: 'Shape' },
+    { templateName: 'corner-shape-extra-large', label: 'Corners: extra-large', group: 'Shape' },
+    { templateName: 'pill-controls', label: 'Pill controls', group: 'Controls' },
+    { templateName: 'button-corner-none', label: 'Button corners: none', group: 'Button Shape' },
+    { templateName: 'button-corner-extra-small', label: 'Button corners: extra-small', group: 'Button Shape' },
+    { templateName: 'button-corner-medium', label: 'Button corners: medium', group: 'Button Shape' },
+    { templateName: 'button-corner-large', label: 'Button corners: large', group: 'Button Shape' },
+    { templateName: 'button-corner-extra-large', label: 'Button corners: extra-large', group: 'Button Shape' },
+    { templateName: 'list-corner-none', label: 'List corners: none', group: 'List Shape' },
+    { templateName: 'list-corner-small', label: 'List corners: small', group: 'List Shape' },
+    { templateName: 'list-corner-medium', label: 'List corners: medium', group: 'List Shape' },
+    { templateName: 'list-corner-large', label: 'List corners: large', group: 'List Shape' },
+    { templateName: 'list-corner-extra-large', label: 'List corners: extra-large', group: 'List Shape' },
+    { templateName: 'anchor-list-corner-none', label: 'Anchor list corners: none', group: 'Anchor List Shape' },
+    { templateName: 'anchor-list-corner-small', label: 'Anchor list corners: small', group: 'Anchor List Shape' },
+    { templateName: 'anchor-list-corner-medium', label: 'Anchor list corners: medium', group: 'Anchor List Shape' },
+    { templateName: 'anchor-list-corner-large', label: 'Anchor list corners: large', group: 'Anchor List Shape' },
+    { templateName: 'anchor-list-corner-extra-large', label: 'Anchor list corners: extra-large', group: 'Anchor List Shape' },
+    { templateName: 'surface-tint', label: 'Surface tint', group: 'Surface' },
+    { templateName: 'vivid-primary', label: 'Vivid primary', group: 'Color' }
+];
+/**
+ * The `@dereekb/dbx-web/style-demo` section group.
+ */
+const DBX_WEB_STYLE_DEMO_SECTION_GROUP = {
+    libId: 'dbx-web',
+    sections: [
+        { id: 'dbx-web-cards', title: 'Cards', group: 'cards', tags: ['dbx-web', 'cards', 'surface'], component: DbxStyleDemoCardsSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-buttons', title: 'Buttons', group: 'buttons', tags: ['dbx-web', 'button'], component: DbxStyleDemoButtonsSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-surfaces', title: 'Surfaces', group: 'surface', tags: ['dbx-web', 'surface'], component: DbxStyleDemoSurfacesSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-color-tones', title: 'Color & Tones', group: 'color', tags: ['dbx-web', 'color'], component: DbxStyleDemoColorTonesSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-color-templates', title: 'Color Templates', group: 'color', tags: ['dbx-web', 'color'], component: DbxStyleDemoColorTemplatesSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-type-roles', title: 'Type Roles', group: 'type', tags: ['dbx-web', 'type'], component: DbxStyleDemoTypeRolesSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-shape-scale', title: 'Shape Scale', group: 'shape', tags: ['dbx-web', 'shape'], component: DbxStyleDemoShapeScaleSectionComponent, defaultEnabled: true },
+        { id: 'dbx-web-navigation', title: 'Navigation', group: 'navigation', tags: ['dbx-web', 'navigation'], component: DbxStyleDemoNavigationSectionComponent, defaultEnabled: true }
+    ]
+};
+/**
+ * Registers the `@dereekb/dbx-web/style-demo` sections and style levers with the `<dbx-style-demo>` playground.
+ *
+ * Contributes the web section group and template toggles via their multi-providers, and seeds the
+ * {@link DbxStyleDemoStyleLoaderService} with the matching templates via an environment initializer.
+ *
+ * Pair with `provideDbxStyleDemo()` (the shell).
+ *
+ * @returns EnvironmentProviders contributing the web sections and levers.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function provideDbxWebStyleDemo() {
+    const toggleProviders = DBX_WEB_STYLE_DEMO_TEMPLATE_TOGGLES.map((toggle) => ({
+        provide: DBX_STYLE_DEMO_TEMPLATE_TOGGLE,
+        useValue: toggle,
+        multi: true
+    }));
+    return makeEnvironmentProviders([
+        {
+            provide: DBX_STYLE_DEMO_SECTION_GROUP,
+            useValue: DBX_WEB_STYLE_DEMO_SECTION_GROUP,
+            multi: true
+        },
+        ...toggleProviders,
+        provideEnvironmentInitializer(() => {
+            inject(DbxStyleDemoStyleLoaderService).register(DBX_WEB_STYLE_DEMO_TEMPLATES);
+        })
+    ]);
+}
+
+/**
+ * Provides the `<dbx-style-demo>` showcase shell: the {@link DbxStyleDemoStyleLoaderService}, the
+ * {@link DbxStyleDemoControlsService}, and an optional seed config.
+ *
+ * Pair with `provideDbxWebStyleDemo()` (and the per-library plumbing providers) to register the sections and style levers.
+ *
+ * @param config - Optional configuration seeding the loader service with templates and toggling app-wide style forwarding.
+ * @returns EnvironmentProviders for the showcase shell.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function provideDbxStyleDemo(config) {
+    const providers = [DbxStyleDemoStyleLoaderService, DbxStyleDemoControlsService];
+    if (config?.templates) {
+        providers.push({
+            provide: DbxStyleDemoStyleLoaderServiceConfig,
+            useValue: { templates: config.templates }
+        });
+    }
+    if (config?.applyStylesToApp != null) {
+        providers.push({
+            provide: DbxStyleDemoControlsServiceConfig,
+            useValue: { applyStylesToApp: config.applyStylesToApp }
+        });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DBX_STYLE_DEMO_CONTROLS_COMPONENT, DBX_STYLE_DEMO_CONTROLS_DETACH_KEY, DBX_STYLE_DEMO_SECTIONS_COMPONENT, DBX_STYLE_DEMO_SECTIONS_POPOVER_KEY, DBX_STYLE_DEMO_SECTION_GROUP, DBX_STYLE_DEMO_TEMPLATE_TOGGLE, DBX_WEB_STYLE_DEMO_SECTION_GROUP, DBX_WEB_STYLE_DEMO_TEMPLATES, DBX_WEB_STYLE_DEMO_TEMPLATE_TOGGLES, DbxStyleDemoButtonsSectionComponent, DbxStyleDemoCardsSectionComponent, DbxStyleDemoColorTemplatesSectionComponent, DbxStyleDemoColorTonesSectionComponent, DbxStyleDemoComponent, DbxStyleDemoControlsService, DbxStyleDemoControlsServiceConfig, DbxStyleDemoNavigationSectionComponent, DbxStyleDemoSectionRegistry, DbxStyleDemoShapeScaleSectionComponent, DbxStyleDemoStyleLoaderDirective, DbxStyleDemoStyleLoaderService, DbxStyleDemoStyleLoaderServiceConfig, DbxStyleDemoSurfacesSectionComponent, DbxStyleDemoTypeRolesSectionComponent, groupDbxStyleDemoTemplateToggles, isDbxStyleDemoStyleLoaderConfig, isDbxStyleDemoStyleTemplate, mergeDbxStyleDemoStyleTemplates, provideDbxStyleDemo, provideDbxStyleDemoSections, provideDbxStyleDemoTemplateToggles, provideDbxWebStyleDemo };
+//# sourceMappingURL=dereekb-dbx-web-style-demo.mjs.map