@hermes-ui/angular 0.1.4

package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs

@@ -0,0 +1,922 @@
+import * as i21 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Input, ViewChild, Output, Component } from '@angular/core';
+import * as i22 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { HermesTimelineStepState, ClarityIcons, sunIcon, moonIcon, undoIcon, homeIcon, cogIcon, userIcon, HermesModule } from '@hermes-ui/angular';
+import * as i1 from '@hermes-ui/angular/emphasis/alert';
+import * as i2 from '@hermes-ui/angular/emphasis/label';
+import * as i3 from '@hermes-ui/angular/data/datagrid';
+import * as i4 from '@hermes-ui/angular/data/stack-view';
+import * as i5 from '@hermes-ui/angular/data/tree-view';
+import * as i6 from '@hermes-ui/angular/icon';
+import * as i7 from '@hermes-ui/angular/forms/common';
+import * as i8 from '@hermes-ui/angular/forms/checkbox';
+import * as i9 from '@hermes-ui/angular/forms/input';
+import * as i10 from '@hermes-ui/angular/forms/radio';
+import * as i11 from '@hermes-ui/angular/forms/textarea';
+import * as i12 from '@hermes-ui/angular/layout/tabs';
+import * as i13 from '@hermes-ui/angular/layout/vertical-nav';
+import * as i14 from '@hermes-ui/angular/layout/breadcrumbs';
+import * as i15 from '@hermes-ui/angular/popover/tooltip';
+import * as i16 from '@hermes-ui/angular/wizard';
+import * as i17 from '@hermes-ui/angular/accordion';
+import * as i18 from '@hermes-ui/angular/stepper';
+import * as i19 from '@hermes-ui/angular/progress/progress-bars';
+import * as i20 from '@hermes-ui/angular/timeline';
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/** Normalizes a hue to `[0, 360)` — hue is cyclic, so out-of-range values wrap instead of clamping. */
+function wrapDegrees(value) {
+    return ((value % 360) + 360) % 360;
+}
+/** HSL color: hue wraps to 0–360, saturation/lightness clamp to 0–100. */
+class HslColor {
+    constructor(h, s, l) {
+        this.h = wrapDegrees(h);
+        this.s = clamp(s, 0, 100);
+        this.l = clamp(l, 0, 100);
+    }
+}
+/** RGB color: red/green/blue clamp to 0–255 and round to whole channel values. */
+class RgbColor {
+    constructor(r, g, b) {
+        this.r = Math.round(clamp(r, 0, 255));
+        this.g = Math.round(clamp(g, 0, 255));
+        this.b = Math.round(clamp(b, 0, 255));
+    }
+}
+/** LinearSRGB color: red/green/blue clamp to 0–1 — continuous linear light, not rounded. */
+class LinearSrgbColor {
+    constructor({ r, g, b }) {
+        this.r = clamp(this.toLinear(r), 0, 1);
+        this.g = clamp(this.toLinear(g), 0, 1);
+        this.b = clamp(this.toLinear(b), 0, 1);
+    }
+    /** Un-gammas an sRGB channel (0–1) to linear light, per IEC 61966-2-1. */
+    toLinear(c) {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    }
+}
+/** OKLCH color: lightness clamps to 0–1, chroma clamps to ≥0, hue wraps to 0–360. */
+class OklchColor {
+    constructor(l, c, h) {
+        this.l = clamp(l, 0, 1);
+        this.c = Math.max(0, c);
+        this.h = wrapDegrees(h);
+    }
+}
+/** OKLab color: lightness clamps to 0–1; `a`/`b` are unbounded perceptual axes. */
+class OKLabColor {
+    constructor(l, a, b) {
+        this.l = clamp(l, 0, 1);
+        this.a = a;
+        this.b = b;
+    }
+}
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * A single theme token: its CSS custom property name, the original Clarity-provided
+ * HSL value, and the current (possibly user-edited) color. Colors are stored in HSL;
+ * RGB and HEX are derived on demand.
+ */
+class Color {
+    /**
+     * @param name CSS custom property name, e.g. `--hermes-alias-status-info`
+     * @param originalColor Clarity-provided HSL, e.g. `hsl(198deg 100% 59%)`
+     */
+    constructor(name, originalColor) {
+        this.name = name;
+        this.originalColor = originalColor;
+    }
+    /** HSL components. Falls back to parsing `originalColor` when not explicitly set. */
+    get color() {
+        return this._color ?? this.parseHsl(this.originalColor);
+    }
+    set color(value) {
+        this._color = value;
+    }
+    /** RGB components — HSL is converted to RGB only for relative luminance checks. */
+    get rgb() {
+        return this.hslToRgb(this.color);
+    }
+    /** HEX string — used by native color inputs. */
+    get hex() {
+        return this.hslToHex(this.color);
+    }
+    /** HSL string — used by native color inputs. */
+    get hsl() {
+        const { h, s, l } = this.color;
+        return `hsl(${h}deg, ${s}%, ${l}%)`;
+    }
+    /**
+     * OKLCH components — unlike HSL's `L`, OKLCH's `L` tracks perceived lightness
+     * uniformly across all hues, which is why it's used for palette/contrast math.
+     */
+    get oklch() {
+        return this.hslToOklch(this.color);
+    }
+    /** OKLCH string, CSS Color 4 syntax. */
+    get oklchString() {
+        const { l, c, h } = this.oklch;
+        return `oklch(${Math.round(l * 1000) / 10}% ${Math.round(c * 10000) / 10000} ${Math.round(h * 10) / 10}deg)`;
+    }
+    /** Human-readable variant label derived from the token name suffix, e.g. `Tint dark`. */
+    get label() {
+        if (this.name.endsWith('-tint-dark')) {
+            return 'Tint dark';
+        }
+        else if (this.name.endsWith('-tint')) {
+            return 'Tint';
+        }
+        else if (this.name.endsWith('-shade')) {
+            return 'Shade';
+        }
+        else if (this.name.endsWith('-dark')) {
+            return 'Dark';
+        }
+        return 'Base';
+    }
+    get isOriginalColor() {
+        // no original color override
+        if (!this._color) {
+            return true;
+        }
+        const originalColorHsl = this.parseHsl(this.originalColor);
+        return (this._color.h === originalColorHsl.h &&
+            this._color.s === originalColorHsl.s &&
+            this._color.l === originalColorHsl.l);
+    }
+    static isHex(hex) {
+        return /^#[0-9a-fA-F]{6}$/.test(hex);
+    }
+    static shiftL({ h, s, l }, delta) {
+        return new HslColor(h, s, l + delta);
+    }
+    static hexToHsl(hex) {
+        const h = hex.replace(/^#/, '');
+        const full = h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h;
+        const n = parseInt(full, 16);
+        const r = ((n >> 16) & 255) / 255;
+        const g = ((n >> 8) & 255) / 255;
+        const b = (n & 255) / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const l = (max + min) / 2;
+        if (max === min) {
+            return new HslColor(0, 0, Math.round(l * 10000) / 100);
+        }
+        const d = max - min;
+        const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        let hue = 0;
+        if (max === r) {
+            hue = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        }
+        else if (max === g) {
+            hue = ((b - r) / d + 2) / 6;
+        }
+        else {
+            hue = ((r - g) / d + 4) / 6;
+        }
+        // Round to second decimal. `s` and `l` are between 0 and 1.
+        const saturation = Math.round(s * 10000) / 100;
+        const lightness = Math.round(l * 10000) / 100;
+        return new HslColor(Math.round(hue * 360), saturation, lightness);
+    }
+    /**
+     * Converts HSL to OKLCH via linear sRGB and OKLab (CSS Color 4 / Björn Ottosson
+     * formulas). Goes through OKLCH — not raw HSL — whenever perceptual uniformity
+     * matters, since HSL's `L` looks lighter or darker depending on hue.
+     */
+    hslToOklch(hsl) {
+        const linearSrgbColor = new LinearSrgbColor(this.hslToRgb(hsl));
+        const oklabColor = this.linearSrgbToOklab(linearSrgbColor);
+        const c = Math.sqrt(oklabColor.a * oklabColor.a + oklabColor.b * oklabColor.b);
+        const hue = (Math.atan2(oklabColor.b, oklabColor.a) * 180) / Math.PI;
+        return new OklchColor(oklabColor.l, c, hue);
+    }
+    reset() {
+        this._color = undefined;
+    }
+    hslToHex({ h, s, l }) {
+        l /= 100;
+        const a = (s * Math.min(l, 1 - l)) / 100;
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+            return Math.round(255 * color)
+                .toString(16)
+                .padStart(2, '0');
+        };
+        return `#${f(0)}${f(8)}${f(4)}`;
+    }
+    /** Converts HSL to RGB — use only for relative luminance calculations. */
+    hslToRgb({ h, s, l }) {
+        l /= 100;
+        const a = (s * Math.min(l, 1 - l)) / 100;
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            return 255 * (l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1));
+        };
+        return new RgbColor(f(0), f(8), f(4));
+    }
+    /** Converts linear sRGB (0–1 channels) to OKLab. */
+    linearSrgbToOklab({ r, g, b }) {
+        const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+        const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+        const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+        return new OKLabColor(0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s);
+    }
+    /** Parses a CSS HSL string such as `hsl(198deg 100% 59%)`. */
+    parseHsl(input) {
+        const [h = 0, s = 0, l = 0] = input.match(/[\d.]+/g)?.map(Number) ?? [];
+        return new HslColor(h, s, l);
+    }
+}
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const DEFAULT_OVERRIDES = {
+    // primary
+    '--hermes-alias-primary-tint': ['--hermes-alias-object-interaction-background-hover'],
+    '--hermes-alias-primary-shade': ['--hermes-alias-typography-link-color', '--hermes-alias-object-interaction-primary-hover'],
+    '--hermes-alias-primary-dark': [
+        '--hermes-alias-typography-link-color-hover',
+        '--hermes-alias-typography-primary-hover',
+        '--hermes-alias-object-interaction-primary-active',
+    ],
+    '--hermes-alias-primary-tint-dark': [
+        '--hermes-alias-object-interaction-background-selected',
+        '--hermes-alias-object-interaction-background-shade-active',
+        '--hermes-alias-object-interaction-primary-secondary-hover',
+    ],
+    // info
+    '--hermes-alias-status-info': ['--hermes-alias-utility-blue'],
+    '--hermes-alias-status-info-tint': [
+        '--hermes-alias-object-interaction-info-secondary-hover',
+        '--hermes-alias-utility-blue-tint',
+    ],
+    '--hermes-alias-status-info-shade': [
+        '--hermes-alias-object-interaction-info-hover',
+        '--hermes-alias-typography-info-hover',
+        '--hermes-alias-utility-blue-shade',
+    ],
+    '--hermes-alias-status-info-dark': [
+        '--hermes-alias-object-interaction-info-click',
+        '--hermes-alias-object-interaction-info-active',
+        '--hermes-alias-object-interaction-info-selected',
+    ],
+    // success
+    '--hermes-alias-status-success': ['--hermes-alias-utility-green'],
+    '--hermes-alias-status-success-tint': [
+        '--hermes-alias-object-interaction-success-secondary-hover',
+        '--hermes-alias-utility-green-tint',
+    ],
+    '--hermes-alias-status-success-shade': [
+        '--hermes-alias-object-interaction-success-hover',
+        '--hermes-alias-typography-success-hover',
+        '--hermes-alias-utility-green-shade',
+    ],
+    '--hermes-alias-status-success-dark': [
+        '--hermes-alias-object-interaction-success-click',
+        '--hermes-alias-object-interaction-success-active',
+    ],
+    // warning
+    '--hermes-alias-status-warning': ['--hermes-alias-utility-yellow'],
+    '--hermes-alias-status-warning-tint': [
+        '--hermes-alias-object-interaction-warning-secondary-hover',
+        '--hermes-alias-utility-yellow-tint',
+    ],
+    '--hermes-alias-status-warning-shade': [
+        '--hermes-alias-object-interaction-warning-hover',
+        '--hermes-alias-typography-warning-hover',
+        '--hermes-alias-utility-yellow-shade',
+    ],
+    '--hermes-alias-status-warning-dark': [
+        '--hermes-alias-object-interaction-warning-click',
+        '--hermes-alias-object-interaction-warning-active',
+    ],
+    //danger
+    '--hermes-alias-status-danger': ['--hermes-alias-utility-red'],
+    '--hermes-alias-status-danger-tint': [
+        '--hermes-alias-object-interaction-danger-secondary-hover',
+        '--hermes-alias-utility-red-tint',
+    ],
+    '--hermes-alias-status-danger-shade': [
+        '--hermes-alias-object-interaction-danger-hover',
+        '--hermes-alias-typography-danger-hover',
+        '--hermes-alias-utility-red-shade',
+    ],
+    '--hermes-alias-status-danger-dark': [
+        '--hermes-alias-object-interaction-danger-click',
+        '--hermes-alias-object-interaction-danger-active',
+    ],
+};
+const BACKGROUND_TOKENS = [
+    {
+        name: 'Text',
+        token: '--hermes-alias-typography-color-100',
+    },
+    {
+        name: 'App Background',
+        token: '--hermes-alias-object-app-background',
+    },
+    {
+        name: 'Interaction Background',
+        token: '--hermes-alias-object-interaction-background',
+    },
+    {
+        name: 'Container Background',
+        token: '--hermes-alias-object-container-background',
+    },
+];
+const TOKEN_KEYS = {
+    baseTokens: [
+        '--hermes-alias-primary',
+        '--hermes-alias-status-info',
+        '--hermes-alias-status-success',
+        '--hermes-alias-status-warning',
+        '--hermes-alias-status-danger',
+    ],
+    primary: [
+        '--hermes-alias-primary',
+        '--hermes-alias-primary-tint',
+        '--hermes-alias-primary-tint-dark',
+        '--hermes-alias-primary-shade',
+        '--hermes-alias-primary-dark',
+    ],
+    info: [
+        '--hermes-alias-status-info',
+        '--hermes-alias-status-info-tint',
+        '--hermes-alias-status-info-shade',
+        '--hermes-alias-status-info-dark',
+    ],
+    success: [
+        '--hermes-alias-status-success',
+        '--hermes-alias-status-success-tint',
+        '--hermes-alias-status-success-shade',
+        '--hermes-alias-status-success-dark',
+    ],
+    warning: [
+        '--hermes-alias-status-warning',
+        '--hermes-alias-status-warning-tint',
+        '--hermes-alias-status-warning-shade',
+        '--hermes-alias-status-warning-dark',
+    ],
+    danger: [
+        '--hermes-alias-status-danger',
+        '--hermes-alias-status-danger-tint',
+        '--hermes-alias-status-danger-shade',
+        '--hermes-alias-status-danger-dark',
+    ],
+};
+/** The default (Evergreen) theme. Acts as the identity preset that resets every color back to its shipped value. */
+const DEFAULT_PRESET = {
+    name: 'Evergreen',
+    light: null,
+    dark: null,
+};
+const PRESETS = [
+    {
+        // The original Clarity theme, kept as an explicit, selectable preset now that Evergreen ships as the default.
+        name: 'Clarity',
+        light: { primary: new Color('--hermes-alias-primary', 'hsl(198deg 100% 34%)') }, // blue-700
+        dark: { primary: new Color('--hermes-alias-primary', 'hsl(198deg 100% 59%)') }, // blue-400
+    },
+    {
+        name: 'Midnight',
+        light: {
+            primary: new Color('--hermes-alias-primary', 'hsl(282deg 60% 49%)'), // violet-600
+            success: new Color('--hermes-alias-status-success', 'hsl(184deg 100% 34%)'), // aqua-600
+            warning: new Color('--hermes-alias-status-warning', 'hsl(50deg 100% 57%)'), // yellow-300
+        },
+        dark: {
+            primary: new Color('--hermes-alias-primary', 'hsl(282deg 60% 65%)'), // violet-400
+            success: new Color('--hermes-alias-status-success', 'hsl(184deg 100% 48%)'), // aqua-400
+            warning: new Color('--hermes-alias-status-warning', 'hsl(50deg 100% 57%)'), // yellow-300
+        },
+    },
+    {
+        name: 'Sunset',
+        light: {
+            primary: new Color('--hermes-alias-primary', 'hsl(39deg 100% 50%)'), // ochre-600
+            info: new Color('--hermes-alias-status-info', 'hsl(238deg 60% 52%)'), // lavender-600
+            success: new Color('--hermes-alias-status-success', 'hsl(93deg 80% 37%)'), // green-600
+            warning: new Color('--hermes-alias-status-warning', 'hsl(9deg 100% 59%)'), // red-600
+            danger: new Color('--hermes-alias-status-danger', 'hsl(345deg 83% 40%)'), // magenta-600
+        },
+        dark: {
+            primary: new Color('--hermes-alias-primary', 'hsl(41deg 100% 70%)'), // ochre-400
+            info: new Color('--hermes-alias-status-info', 'hsl(238deg 58% 64%)'), // lavender-400
+            success: new Color('--hermes-alias-status-success', 'hsl(93deg 80% 48%)'), // green-400
+            warning: new Color('--hermes-alias-status-warning', 'hsl(9deg 100% 71%)'), // red-400
+            danger: new Color('--hermes-alias-status-danger', 'hsl(345deg 100% 61%)'), // magenta-400
+        },
+    },
+    {
+        name: 'Berry',
+        light: {
+            primary: new Color('--hermes-alias-primary', 'hsl(345deg 83% 40%)'), // magenta-600
+            info: new Color('--hermes-alias-status-info', 'hsl(238deg 60% 52%)'), // lavender-600
+            success: new Color('--hermes-alias-status-success', 'hsl(160deg 69% 36%)'), // jade-600
+            warning: new Color('--hermes-alias-status-warning', 'hsl(42deg 100% 42%)'), // yellow-600
+            danger: new Color('--hermes-alias-status-danger', 'hsl(9deg 100% 59%)'), // red-600
+        },
+        dark: {
+            primary: new Color('--hermes-alias-primary', 'hsl(345deg 100% 61%)'), // magenta-400
+            info: new Color('--hermes-alias-status-info', 'hsl(238deg 58% 64%)'), // lavender-400
+            success: new Color('--hermes-alias-status-success', 'hsl(160deg 69% 53%)'), // jade-400
+            warning: new Color('--hermes-alias-status-warning', 'hsl(46deg 100% 52%)'), // yellow-400
+            danger: new Color('--hermes-alias-status-danger', 'hsl(9deg 100% 71%)'), // red-400
+        },
+    },
+    {
+        name: 'Ocean',
+        light: {
+            primary: new Color('--hermes-alias-primary', 'hsl(184deg 100% 34%)'), // aqua-600
+            info: new Color('--hermes-alias-status-info', 'hsl(282deg 60% 49%)'), // violet-600
+            success: new Color('--hermes-alias-status-success', 'hsl(93deg 80% 37%)'), // green-600
+            warning: new Color('--hermes-alias-status-warning', 'hsl(42deg 100% 42%)'), // yellow-600
+            danger: new Color('--hermes-alias-status-danger', 'hsl(9deg 100% 59%)'), // red-600
+        },
+        dark: {
+            primary: new Color('--hermes-alias-primary', 'hsl(184deg 100% 43%)'), // aqua-500
+            info: new Color('--hermes-alias-status-info', 'hsl(282deg 60% 65%)'), // violet-400
+            success: new Color('--hermes-alias-status-success', 'hsl(93deg 80% 48%)'), // green-400
+            warning: new Color('--hermes-alias-status-warning', 'hsl(46deg 100% 52%)'), // yellow-400
+            danger: new Color('--hermes-alias-status-danger', 'hsl(9deg 100% 71%)'), // red-400
+        },
+    },
+];
+const SAMPLE_ROWS = [
+    { name: 'Ada Lovelace', role: 'Engineer', status: 'Active' },
+    { name: 'Grace Hopper', role: 'Architect', status: 'Active' },
+    { name: 'Alan Turing', role: 'Researcher', status: 'Inactive' },
+    { name: 'Linus Torvalds', role: 'Engineer', status: 'Active' },
+    { name: 'Margaret Hamilton', role: 'Director', status: 'Active' },
+];
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+function generateCSS(colorStruct, warningTextOverrideEnabled = true) {
+    const lines = ['/* Clarity Theme Override — generated by Clarity Theme Builder */'];
+    const defaultOverrides = new Set();
+    for (const theme in colorStruct) {
+        const changedGroups = [];
+        for (const colorGroupKey in colorStruct[theme]) {
+            const colorVariants = colorStruct[theme][colorGroupKey];
+            const changedColors = colorVariants.filter(color => !color.isOriginalColor);
+            if (changedColors.length) {
+                changedGroups.push({ key: colorGroupKey, colors: changedColors });
+            }
+        }
+        if (!changedGroups.length) {
+            continue;
+        }
+        lines.push(`\n\n[hermes-theme~='${theme}'] {`);
+        for (const group of changedGroups) {
+            lines.push(`  /* ${group.key} */`);
+            for (const color of group.colors) {
+                lines.push(`  ${color.name}: ${color.hsl};`);
+                // warning text override — mirrors the same condition applied live in applyPreviewStyles; light theme only
+                if (warningTextOverrideEnabled && theme === 'light' && color.name === '--hermes-alias-status-warning') {
+                    lines.push(`  --hermes-alias-typography-color-black: var(--hermes-alias-typography-color-100);`);
+                }
+                DEFAULT_OVERRIDES[color.name]?.forEach((override) => {
+                    const overrideResult = `  ${override}: var(${color.name});`;
+                    if (!defaultOverrides.has(overrideResult)) {
+                        defaultOverrides.add(overrideResult);
+                    }
+                });
+            }
+            lines.push('');
+        }
+        lines.push(`}`);
+    }
+    if (lines.length === 1) {
+        lines.push('\n/* NO changes */');
+    }
+    if (defaultOverrides.size > 0) {
+        const overrideLines = ['\n\n[hermes-theme] {', ...defaultOverrides.values(), '}'];
+        return lines.slice(0, 1).concat(overrideLines, lines.slice(1));
+    }
+    return lines;
+}
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const redCoefficient = 0.2126;
+const greenCoefficient = 0.7152;
+const blueCoefficient = 0.0722;
+const lowGammaCoefficient = 12.92;
+function adjustGamma(v) {
+    return Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance({ r, g, b }) {
+    const colorMap = [r, g, b].map(c => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / lowGammaCoefficient : adjustGamma(s);
+    });
+    return colorMap[0] * redCoefficient + colorMap[1] * greenCoefficient + colorMap[2] * blueCoefficient;
+}
+function contrastRatio(a, b) {
+    const l1 = relativeLuminance(a);
+    const l2 = relativeLuminance(b);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+function wcagScore(ratio) {
+    const result = {
+        label: 'Fail',
+        score: Math.max(ratio, 0).toFixed(2),
+        type: 'danger',
+    };
+    if (ratio >= 7) {
+        result.label = 'AAA';
+        result.type = 'success';
+    }
+    else if (ratio >= 4.5) {
+        result.label = 'AA';
+        result.type = 'success';
+    }
+    else if (ratio >= 3) {
+        result.label = 'AA Large';
+        result.type = 'warning';
+    }
+    return result;
+}
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ThemeBuilderComponent {
+    constructor() {
+        /** Emits the generated CSS override text whenever a color, preset, reset, or override toggle changes. */
+        this.generatedCSS = new EventEmitter();
+        // Tracks which preset is active so CSS output can use token refs instead of hex values.
+        // Set to null when the user manually edits any color.
+        this.activePreset = null;
+        this.activeTheme = 'light';
+        // Forces black text on the warning color for legibility — toggled via the "Warning text override" switch.
+        this.warningTextOverrideEnabled = true;
+        this.colorStruct = {
+            light: {},
+            dark: {},
+        };
+        this.backgrounds = {
+            light: {},
+            dark: {},
+        };
+        this.themeColors = [];
+        // State backing the built-in default preview content.
+        this.breadcrumbs = [
+            { label: 'Framework', href: 'javascript://' },
+            { label: 'Angular', href: 'javascript://' },
+            { label: 'Clarity', href: 'javascript://' },
+        ];
+        this.wizardOpen = false;
+        this.rows = SAMPLE_ROWS;
+        this.stepperForm = {
+            account: { fullName: '' },
+            confirm: { agree: false },
+        };
+        this.timelineStates = HermesTimelineStepState;
+        this._presets = [DEFAULT_PRESET, ...PRESETS];
+        ClarityIcons.addIcons(sunIcon, moonIcon, undoIcon, homeIcon, cogIcon, userIcon);
+    }
+    /**
+     * Presets available in the preset selector. Defaults to Hermes's built-in preset list.
+     * The default (Evergreen) preset is always prepended, so it's guaranteed to remain available
+     * as a fallback even when a custom list is provided.
+     */
+    get presets() {
+        return this._presets;
+    }
+    set presets(value) {
+        this._presets = [DEFAULT_PRESET, ...(value ?? [])];
+    }
+    get isDarkTheme() {
+        return this.activeTheme === 'dark';
+    }
+    get generatedCss() {
+        return generateCSS(this.colorStruct, this.warningTextOverrideEnabled).join('\n');
+    }
+    ngOnInit() {
+        this.activePreset = this.presets?.[0] ?? null;
+    }
+    ngAfterViewInit() {
+        this.buildColorStructure();
+        this.applyPreviewStyles();
+    }
+    toggleActiveTheme() {
+        this.activeTheme = this.activeTheme === 'dark' ? 'light' : 'dark';
+        this.applyPreviewStyles();
+        this.refreshThemeColors();
+    }
+    setCurrentColor(colorVariant, hex, colorGroup = []) {
+        if (Color.isHex(hex)) {
+            colorVariant.color = Color.hexToHsl(hex);
+            this.colorBuilder(colorVariant, colorGroup);
+            this.applyPreviewStyles();
+            this.refreshThemeColors();
+            this.resetActivePreset();
+        }
+    }
+    applyPreset(preset) {
+        this.activePreset = preset;
+        for (const theme of Object.keys(this.activePreset)) {
+            if (theme === 'name') {
+                continue;
+            }
+            this.resetAllThemeColors(theme);
+            if (!this.activePreset[theme]) {
+                continue;
+            }
+            for (const activePresetKey of Object.keys(this.activePreset[theme])) {
+                const presetColor = this.activePreset[theme][activePresetKey];
+                const activeColor = this.colorStruct[theme][activePresetKey].find(c => c.name === presetColor.name);
+                activeColor.color = presetColor.color;
+                this.colorBuilder(activeColor, this.colorStruct[theme][activePresetKey], theme === 'dark');
+            }
+        }
+        this.applyPreviewStyles();
+        this.refreshThemeColors();
+    }
+    resetAllThemeColors(theme) {
+        for (const key of Object.keys(this.colorStruct[theme])) {
+            const tokenGroup = this.colorStruct[theme][key];
+            for (let i = 0; i < tokenGroup.length; i++) {
+                tokenGroup[i].reset();
+            }
+        }
+    }
+    resetColor($event, color, colorGroup = []) {
+        $event.stopPropagation();
+        color.reset();
+        colorGroup?.forEach(color => {
+            color.reset();
+        });
+        this.applyPreviewStyles();
+        this.refreshThemeColors();
+        this.resetActivePreset();
+    }
+    onWarningTextOverrideChange() {
+        this.applyPreviewStyles();
+        this.generatedCSS.emit(this.generatedCss);
+    }
+    applyPreviewStyles() {
+        const el = this.previewWrapper?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const colorGroups = this.colorStruct[this.activeTheme];
+        for (const colorGroupKey in colorGroups) {
+            const colorVariants = colorGroups[colorGroupKey];
+            for (let i = 0; i < colorVariants.length; i++) {
+                const color = colorVariants[i];
+                el.style.setProperty(color.name, color.hsl);
+                // warning text override — toggled via the "Warning text override" switch; light theme only
+                if (color.name === '--hermes-alias-status-warning') {
+                    const override = '--hermes-alias-typography-color-black';
+                    if (this.activeTheme !== 'light' || !this.warningTextOverrideEnabled || color.isOriginalColor) {
+                        el.style.removeProperty(override);
+                    }
+                    else {
+                        el.style.setProperty(override, 'var(--hermes-alias-typography-color-100)');
+                    }
+                }
+                DEFAULT_OVERRIDES[color.name]?.forEach((override) => {
+                    // remove override if color isOriginalColor
+                    // another shorter variant is:
+                    // el.style.setProperty(override, color.isOriginalColor ? null : `var(${color.name})`);
+                    if (color.isOriginalColor) {
+                        el.style.removeProperty(override);
+                    }
+                    else {
+                        el.style.setProperty(override, `var(${color.name})`);
+                    }
+                });
+            }
+        }
+    }
+    getContrast(color) {
+        const backgrounds = [];
+        let minScore = 10;
+        for (const bgName in this.backgrounds[this.activeTheme]) {
+            const background = this.backgrounds[this.activeTheme][bgName];
+            const score = Math.max(contrastRatio(color.rgb, background.rgb), 0);
+            if (minScore > score) {
+                minScore = score;
+            }
+            backgrounds.push({
+                name: bgName,
+                score,
+                wcag: wcagScore(score),
+            });
+        }
+        return {
+            minContrast: { wcag: wcagScore(minScore), score: minScore },
+            backgrounds,
+        };
+    }
+    refreshThemeColors() {
+        const themeColors = [];
+        const colorGroups = this.colorStruct[this.activeTheme];
+        for (const key of Object.keys(colorGroups)) {
+            const colorGroup = colorGroups[key];
+            const baseColor = colorGroup.find(c => c.label === 'Base');
+            themeColors.push({
+                key,
+                base: baseColor,
+                variants: colorGroup.filter(c => c.label !== 'Base'),
+                contrast: this.getContrast(baseColor),
+            });
+        }
+        this.themeColors = themeColors;
+        this.generatedCSS.emit(this.generatedCss);
+    }
+    resetActivePreset() {
+        const themes = Object.values(this.colorStruct);
+        const allOriginal = themes.every(theme => {
+            return Object.values(theme).every(colors => {
+                return colors.every(color => color.isOriginalColor);
+            });
+        });
+        this.activePreset = allOriginal ? (this.presets?.[0] ?? null) : null;
+    }
+    colorBuilder(colorVariant, colorGroup, isDarkTheme = this.isDarkTheme) {
+        if (TOKEN_KEYS.baseTokens.includes(colorVariant.name)) {
+            const baseColorHSL = colorVariant.color;
+            colorGroup.forEach(item => {
+                if (item.name.endsWith('-tint')) {
+                    item.color = new HslColor(baseColorHSL.h, baseColorHSL.s, isDarkTheme ? 25 : 94);
+                }
+                else if (item.name.endsWith('-tint-dark')) {
+                    item.color = new HslColor(baseColorHSL.h, baseColorHSL.s, isDarkTheme ? 18 : 95);
+                }
+                else if (item.name.endsWith('-shade')) {
+                    item.color = Color.shiftL(baseColorHSL, isDarkTheme ? 7 : -7);
+                }
+                else if (item.name.endsWith('-dark')) {
+                    item.color = Color.shiftL(baseColorHSL, isDarkTheme ? 20 : -10);
+                }
+            });
+        }
+    }
+    buildColorStructure() {
+        const lightEl = this.previewWrapper?.nativeElement;
+        const darkEl = this.previewDarkWrapper?.nativeElement;
+        if (!lightEl || !darkEl) {
+            return;
+        }
+        const lightStyles = window.getComputedStyle(lightEl);
+        const darkStyles = window.getComputedStyle(darkEl);
+        for (const key in TOKEN_KEYS) {
+            if (key === 'baseTokens') {
+                continue;
+            }
+            const tokenGroup = TOKEN_KEYS[key];
+            this.colorStruct['light'][key] = [];
+            this.colorStruct['dark'][key] = [];
+            for (let i = 0; i < tokenGroup.length; i++) {
+                this.colorStruct['light'][key].push(new Color(tokenGroup[i], lightStyles.getPropertyValue(tokenGroup[i])));
+                this.colorStruct['dark'][key].push(new Color(tokenGroup[i], darkStyles.getPropertyValue(tokenGroup[i])));
+            }
+        }
+        BACKGROUND_TOKENS.forEach(bg => {
+            this.backgrounds['light'][bg.name] = new Color(bg.token, lightStyles.getPropertyValue(bg.token));
+            this.backgrounds['dark'][bg.name] = new Color(bg.token, darkStyles.getPropertyValue(bg.token));
+        });
+        this.refreshThemeColors();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ThemeBuilderComponent, isStandalone: true, selector: "hermes-theme-builder", inputs: { presets: "presets" }, outputs: { generatedCSS: "generatedCSS" }, viewQueries: [{ propertyName: "previewWrapper", first: true, predicate: ["previewWrapper"], descendants: true }, { propertyName: "previewDarkWrapper", first: true, predicate: ["previewDarkWrapper"], descendants: true }], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<!-- Preset selector -->\r\n<div class=\"tb-presets\" hermes-layout=\"m-t:lg\">\r\n  <div class=\"tb-preset-cards hermes-row\">\r\n    @for (preset of presets; track preset.name) {\r\n      <a\r\n        href=\"javascript://\"\r\n        class=\"card clickable tb-preset-card hermes-col-1\"\r\n        [class.tb-preset-card-active]=\"activePreset?.name === preset.name\"\r\n        (click)=\"applyPreset(preset)\"\r\n      >\r\n        <div class=\"tb-preset-swatch\" [style.background-color]=\"preset.light?.primary?.hex\"></div>\r\n        <div class=\"card-text\">{{ preset.name }}</div>\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500 Preview DARK card \u2500\u2500 -->\r\n<!-- Invisible for filling the dark values on initial load -->\r\n<div style=\"display: none\" #previewDarkWrapper hermes-theme=\"dark\"></div>\r\n\r\n<!-- \u2500\u2500 Two-column layout: controls | preview \u2500\u2500 -->\r\n<div class=\"tb-layout\" hermes-layout=\"m-t:lg m-b:lg\">\r\n  <!-- \u2500\u2500 Controls card (sticky left column) \u2500\u2500 -->\r\n  <div class=\"card tb-controls-card\">\r\n    <div class=\"card-block\">\r\n      @for (colorGroup of themeColors; track colorGroup.key) {\r\n        <div>\r\n          <hermes-stack-view>\r\n            <hermes-stack-header>\r\n              <div class=\"tb-control-header\">\r\n                {{ colorGroup.key | uppercase }}\r\n\r\n                <hermes-tooltip>\r\n                  <hermes-label\r\n                    hermes-layout=\"m:none\"\r\n                    hermesTooltipTrigger\r\n                    [hermesText]=\"'Contrast ' + colorGroup.contrast.minContrast.wcag.label\"\r\n                    [hermesBadgeText]=\"colorGroup.contrast.minContrast.wcag.score\"\r\n                    [hermesColor]=\"colorGroup.contrast.minContrast.wcag.type\"\r\n                  >\r\n                  </hermes-label>\r\n                  <hermes-tooltip-content hermesPosition=\"right\" hermesSize=\"lg\">\r\n                    <div class=\"tb-wcag-container\">\r\n                      @for (background of colorGroup.contrast.backgrounds; track background.name) {\r\n                        <div class=\"tb-wcag-item\">\r\n                          {{ background.name }}:\r\n                          <hermes-label\r\n                            hermes-layout=\"m:none\"\r\n                            hermesType=\"solid\"\r\n                            [hermesText]=\"background.wcag.label\"\r\n                            [hermesBadgeText]=\"background.wcag.score\"\r\n                            [hermesColor]=\"background.wcag.type\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </hermes-tooltip-content>\r\n                </hermes-tooltip>\r\n              </div>\r\n            </hermes-stack-header>\r\n            <hermes-stack-block [hermesStackViewLevel]=\"1\">\r\n              <hermes-stack-label class=\"tb-stack-label\">{{ colorGroup.base.label }}</hermes-stack-label>\r\n              <hermes-stack-content style=\"width: 52%\">\r\n                <div class=\"tb-color-input-wrap\">\r\n                  <input\r\n                    type=\"color\"\r\n                    class=\"tb-color-picker\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color picker'\"\r\n                    (input)=\"\r\n                      setCurrentColor(\r\n                        colorGroup.base,\r\n                        $any($event.target).value,\r\n                        colorStruct[activeTheme][colorGroup.key]\r\n                      )\r\n                    \"\r\n                  />\r\n                  <input\r\n                    readonly\r\n                    type=\"text\"\r\n                    class=\"tb-hex-input\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color hex value'\"\r\n                  />\r\n                  <button\r\n                    *ngIf=\"!colorGroup.base.isOriginalColor\"\r\n                    class=\"btn btn-sm btn-icon btn-primary\"\r\n                    (click)=\"resetColor($event, colorGroup.base, colorStruct[activeTheme][colorGroup.key])\"\r\n                    title=\"Back to original color\"\r\n                  >\r\n                    <hermes-icon shape=\"undo\"></hermes-icon>\r\n                  </button>\r\n                </div>\r\n              </hermes-stack-content>\r\n\r\n              @for (colorVariant of colorGroup.variants; track colorVariant.label) {\r\n                <hermes-stack-block [hermesStackViewLevel]=\"2\">\r\n                  <hermes-stack-label>{{ colorVariant.label }}</hermes-stack-label>\r\n                  <hermes-stack-content>\r\n                    <div class=\"tb-color-input-wrap\">\r\n                      <input\r\n                        type=\"color\"\r\n                        class=\"tb-color-picker\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color picker'\"\r\n                        (input)=\"setCurrentColor(colorVariant, $any($event.target).value)\"\r\n                      />\r\n                      <input\r\n                        readonly\r\n                        type=\"text\"\r\n                        class=\"tb-hex-input\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color hex value'\"\r\n                      />\r\n                      <button\r\n                        *ngIf=\"!colorVariant.isOriginalColor\"\r\n                        class=\"btn btn-sm btn-icon btn-primary\"\r\n                        (click)=\"resetColor($event, colorVariant)\"\r\n                        title=\"Back to original color\"\r\n                      >\r\n                        <hermes-icon shape=\"undo\"></hermes-icon>\r\n                      </button>\r\n                    </div>\r\n                  </hermes-stack-content>\r\n                </hermes-stack-block>\r\n              }\r\n            </hermes-stack-block>\r\n          </hermes-stack-view>\r\n\r\n          @if (colorGroup.key === 'warning' && !colorGroup.base.isOriginalColor) {\r\n            <hermes-toggle-wrapper>\r\n              <input\r\n                type=\"checkbox\"\r\n                hermesToggle\r\n                [(ngModel)]=\"warningTextOverrideEnabled\"\r\n                (ngModelChange)=\"onWarningTextOverrideChange()\"\r\n              />\r\n              <label>Light Theme Warning Text Override</label>\r\n            </hermes-toggle-wrapper>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- end controls card -->\r\n\r\n  <!-- \u2500\u2500 Preview card (right column) \u2500\u2500 -->\r\n  <div class=\"card tb-preview-card\">\r\n    <div class=\"card-header\">\r\n      Live Preview:\r\n      <button\r\n        class=\"btn btn-outline-neutral\"\r\n        [attr.aria-label]=\"'Switch to ' + (isDarkTheme ? 'light' : 'dark') + ' theme'\"\r\n        (click)=\"toggleActiveTheme()\"\r\n      >\r\n        <hermes-icon [shape]=\"isDarkTheme ? 'moon' : 'sun'\" [solid]=\"true\" [size]=\"'md'\"></hermes-icon>\r\n        {{ isDarkTheme ? 'Dark' : 'Light' }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"card-block tb-preview-sandbox\" #previewWrapper [attr.hermes-theme]=\"activeTheme\">\r\n      <ng-content></ng-content>\r\n\r\n      <!-- Breadcrumbs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Breadcrumbs</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-breadcrumbs [items]=\"breadcrumbs\"></hermes-breadcrumbs>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Buttons -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Buttons</p>\r\n        <div class=\"tb-preview-row\">\r\n          <button class=\"btn btn-primary\">Primary</button>\r\n          <button class=\"btn\">Primary Outline</button>\r\n          <button class=\"btn btn-link\">Primary FLAT</button>\r\n          <button class=\"btn btn-info\">Info</button>\r\n          <button class=\"btn btn-info-outline\">Info Outline</button>\r\n          <button class=\"btn btn-link-info\">Info Flat</button>\r\n          <button class=\"btn btn-danger\">Danger</button>\r\n          <button class=\"btn btn-success\">Success</button>\r\n          <button class=\"btn btn-warning\">Warning</button>\r\n          <button class=\"btn btn-primary\" disabled>Disabled</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Badges & Labels -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Badges &amp; Labels</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'info'\"\r\n            [hermesText]=\"'info'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'danger'\" [hermesText]=\"'danger'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'success'\" [hermesText]=\"'success'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'warning'\"\r\n            [hermesText]=\"'warning'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'info'\" [hermesText]=\"'info'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'danger'\"\r\n            [hermesText]=\"'danger'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'success'\"\r\n            [hermesText]=\"'success'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'warning'\" [hermesText]=\"'warning'\" [hermesBadgeText]=\"'99+'\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\">\r\n          <hermes-alert-item><span class=\"alert-text\">This is an info alert.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Operation completed successfully.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Please review before proceeding.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Something went wrong.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- App-Level Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">App-Level Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level info.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Thanks</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level alert.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Fix</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level warning.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Check</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level success.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Great</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- Forms -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Form Controls</p>\r\n        <form hermesForm #tbForm=\"ngForm\" hermesLayout=\"horizontal\">\r\n          <hermes-input-container>\r\n            <label>Text input</label>\r\n            <input hermesInput type=\"text\" placeholder=\"Enter value...\" />\r\n          </hermes-input-container>\r\n          <hermes-checkbox-container>\r\n            <label>Checkbox</label>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox checked />\r\n              <label>Checkbox (checked)</label>\r\n            </hermes-checkbox-wrapper>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox />\r\n              <label>Checkbox (unchecked)</label>\r\n            </hermes-checkbox-wrapper>\r\n          </hermes-checkbox-container>\r\n          <hermes-radio-container>\r\n            <label>Radio</label>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"a\" checked />\r\n              <label>Radio A</label>\r\n            </hermes-radio-wrapper>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"b\" />\r\n              <label>Radio B</label>\r\n            </hermes-radio-wrapper>\r\n          </hermes-radio-container>\r\n          <hermes-toggle-container>\r\n            <label>Toggle</label>\r\n            <hermes-toggle-wrapper>\r\n              <input type=\"checkbox\" hermesToggle checked />\r\n              <label>Toggle (on)</label>\r\n            </hermes-toggle-wrapper>\r\n          </hermes-toggle-container>\r\n\r\n          <hermes-textarea-container>\r\n            <label>Textarea</label>\r\n            <textarea hermesTextarea [(ngModel)]=\"description\" name=\"description\" required></textarea>\r\n            <hermes-control-helper>Please provide a description.</hermes-control-helper>\r\n            <hermes-control-error *hermesIfError=\"'required'\">You must provide a description!</hermes-control-error>\r\n          </hermes-textarea-container>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Accordion -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Accordion</p>\r\n        <hermes-accordion>\r\n          <hermes-accordion-panel [hermesAccordionPanelOpen]=\"true\">\r\n            <hermes-accordion-title>Panel One</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the first accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n          <hermes-accordion-panel>\r\n            <hermes-accordion-title>Panel Two</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the second accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n        </hermes-accordion>\r\n      </div>\r\n\r\n      <!-- Tree view -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tree View</p>\r\n        <hermes-tree>\r\n          <hermes-tree-node [hermesExpanded]=\"true\">\r\n            Root Node\r\n            <hermes-tree-node [hermesSelected]=\"1\"> Child One </hermes-tree-node>\r\n            <hermes-tree-node>\r\n              Child Two\r\n              <hermes-tree-node>Grandchild</hermes-tree-node>\r\n            </hermes-tree-node>\r\n          </hermes-tree-node>\r\n        </hermes-tree>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Progress Bar</p>\r\n        <hermes-progress-bar hermesValue=\"20\" hermesMax=\"100\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"55\" hermesMax=\"100\" hermesColor=\"warning\" hermesLabeled></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"80\" hermesMax=\"100\" hermesColor=\"success\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"40\" hermesMax=\"100\" hermesColor=\"danger\"></hermes-progress-bar>\r\n      </div>\r\n\r\n      <!-- Vertical nav -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Vertical Navigation</p>\r\n        <div class=\"tb-nav-preview-wrap\">\r\n          <hermes-vertical-nav [hermesVerticalNavCollapsible]=\"true\">\r\n            <hermes-vertical-nav-group hermesVerticalNavGroupExpanded>\r\n              <hermes-icon shape=\"home\" hermesVerticalNavIcon></hermes-icon>\r\n              Dashboard\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\" class=\"active\">Overview</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Analytics</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n            <hermes-vertical-nav-group>\r\n              <hermes-icon shape=\"cog\" hermesVerticalNavIcon></hermes-icon>\r\n              Settings\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Profile</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Security</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n          </hermes-vertical-nav>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Stepper</p>\r\n        <form hermesStepper #tbStepperForm=\"ngForm\">\r\n          <hermes-stepper-panel ngModelGroup=\"account\">\r\n            <hermes-step-title>Account Details</hermes-step-title>\r\n            <hermes-step-description>Tell us about yourself</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-input-container>\r\n                <label>Full Name</label>\r\n                <input hermesInput name=\"fullName\" [(ngModel)]=\"stepperForm.account.fullName\" />\r\n              </hermes-input-container>\r\n              <button hermesStepButton=\"next\">Next</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n\r\n          <hermes-stepper-panel ngModelGroup=\"confirm\">\r\n            <hermes-step-title>Confirmation</hermes-step-title>\r\n            <hermes-step-description>Review and submit</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-checkbox-container>\r\n                <hermes-checkbox-wrapper>\r\n                  <input type=\"checkbox\" hermesCheckbox name=\"agree\" [(ngModel)]=\"stepperForm.confirm.agree\" />\r\n                  <label>I agree to the terms</label>\r\n                </hermes-checkbox-wrapper>\r\n              </hermes-checkbox-container>\r\n              <button hermesStepButton=\"previous\">Previous</button>\r\n              <button hermesStepButton=\"submit\">Submit</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Datagrid -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Datagrid</p>\r\n        <hermes-datagrid [hermesDgSelectionType]=\"'multi'\">\r\n          <hermes-dg-column>Name</hermes-dg-column>\r\n          <hermes-dg-column>Role</hermes-dg-column>\r\n          <hermes-dg-column>Status</hermes-dg-column>\r\n          @for (row of rows; track row.name) {\r\n            <hermes-dg-row [hermesDgItem]=\"row\">\r\n              <hermes-dg-cell>{{ row.name }}</hermes-dg-cell>\r\n              <hermes-dg-cell>{{ row.role }}</hermes-dg-cell>\r\n              <hermes-dg-cell>\r\n                <span\r\n                  class=\"badge\"\r\n                  [class.badge-success]=\"row.status === 'Active'\"\r\n                  [class.badge-danger]=\"row.status === 'Inactive'\"\r\n                >\r\n                  {{ row.status }}\r\n                </span>\r\n              </hermes-dg-cell>\r\n            </hermes-dg-row>\r\n          }\r\n          <hermes-dg-footer>{{ rows.length }} users</hermes-dg-footer>\r\n        </hermes-datagrid>\r\n      </div>\r\n\r\n      <!-- Tabs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tabs</p>\r\n        <hermes-tabs>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Dashboard</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Dashboard tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Management</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Management tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Settings</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Settings tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n        </hermes-tabs>\r\n      </div>\r\n\r\n      <!-- Timeline -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Timeline</p>\r\n        <hermes-timeline>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.SUCCESS\">\r\n            <hermes-timeline-step-header>11:59 am</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Add KMS</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Root CA certificate requested.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.CURRENT\">\r\n            <hermes-timeline-step-header>12:04 pm</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Make KMS trust vCenter</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>\r\n              Upload the certificate to the KMS to complete the connection.\r\n            </hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.NOT_STARTED\">\r\n            <hermes-timeline-step-header>--:-- --</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Enable Encryption</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Not started yet.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n        </hermes-timeline>\r\n      </div>\r\n\r\n      <!-- Wizard launcher -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Wizard</p>\r\n        <button class=\"btn btn-outline\" (click)=\"wizardOpen = true\">Open Wizard</button>\r\n        <hermes-wizard [(hermesWizardOpen)]=\"wizardOpen\" hermesWizardSize=\"md\">\r\n          <hermes-wizard-title>Sample Wizard</hermes-wizard-title>\r\n          <hermes-wizard-button [type]=\"'cancel'\">Cancel</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'previous'\">Back</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'next'\">Next</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'finish'\">Finish</hermes-wizard-button>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 1: Introduction</ng-template>\r\n            Welcome to the wizard. This step introduces the process.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 2: Configuration</ng-template>\r\n            Configure the required options in this step.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 3: Confirm</ng-template>\r\n            Review your choices and click Finish.\r\n          </hermes-wizard-page>\r\n        </hermes-wizard>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- end preview card -->\r\n</div>\r\n<!-- end .tb-layout -->\r\n", styles: [":host{display:block}:host ::ng-deep .stack-view .stack-view-key{min-width:26%;max-width:26%}:host ::ng-deep .stack-view .stack-block-content{max-width:46%}:host ::ng-deep .card .alert{margin:0}:host ::ng-deep .card-block .progress,:host ::ng-deep .card-block .progress-static{position:relative;height:var(--hermes-base-progress-bar-height);margin:0}:host ::ng-deep .card-block .progress>progress,:host ::ng-deep .card-block .progress-static>progress{height:100%;position:static}.tb-presets{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap;margin:0 var(--hermes-base-gap-m)}.tb-preset-cards{gap:var(--hermes-base-gap-l)}.tb-preset-cards .tb-preset-card{display:inline-flex;align-items:center;gap:var(--hermes-base-gap-m);margin:0;padding:var(--hermes-base-vertical-offset-m) var(--hermes-base-horizontal-offset-m);min-width:170px}.tb-preset-cards .tb-preset-card.tb-preset-card-active{outline:var(--hermes-alias-object-border-width-200) solid var(--hermes-alias-primary);outline-offset:2px}.tb-preset-cards .tb-preset-card .card-text{margin-bottom:0}.tb-preset-swatch{display:flex;align-items:center;justify-content:center;height:var(--hermes-base-row-height-m);min-width:var(--hermes-base-row-height-m);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);background:var(--hermes-alias-object-container-background);color:var(--hermes-alias-typography-color-300)}.tb-layout{display:grid;grid-template-columns:370px 1fr;gap:var(--hermes-base-gap-l);align-items:start}.tb-controls-card{margin-top:0;position:sticky;top:0;max-height:calc(100vh - var(--hermes-global-space-15));overflow-y:auto}.tb-controls-card .tb-control-header{display:flex;align-items:center;justify-content:space-between}.tb-wcag-container{display:flex;flex-direction:column;gap:var(--hermes-base-gap-s)}.tb-wcag-container .tb-wcag-item{display:flex;justify-content:space-between;align-items:center}.card-block{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l)}.card-block .tb-color-input-wrap{display:flex;align-items:center;gap:var(--hermes-base-gap-s);min-width:190px}.card-block .tb-color-picker{padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-2xs);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);cursor:pointer;background:var(--hermes-alias-object-container-background);width:var(--hermes-global-space-11)}.card-block .tb-hex-input{width:var(--hermes-base-layout-space-5xl);padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-s);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100)}.card-block .tb-stack-label{display:flex;gap:var(--hermes-base-gap-m);align-items:center}.tb-preview-card{margin-top:0}.tb-preview-card .card-header{display:flex;align-items:center;gap:var(--hermes-base-gap-m)}.tb-preview-sandbox{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l);border-bottom-left-radius:var(--hermes-alias-object-border-radius-100);border-bottom-right-radius:var(--hermes-alias-object-border-radius-100)}.tb-preview-section{display:flex;flex-direction:column;gap:var(--hermes-base-gap-m)}.tb-preview-row{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap}.tb-nav-preview-wrap{height:180px;border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);overflow:hidden;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: HermesModule }, { kind: "component", type: i1.HermesAlert, selector: "hermes-alert", inputs: ["hermesAlertSizeSmall", "hermesAlertClosable", "hermesAlertAppLevel", "hermesCloseButtonAriaLabel", "hermesAlertLightweight", "hermesAlertType", "hermesAlertIcon", "hermesAlertClosed"], outputs: ["hermesAlertClosedChange"] }, { kind: "component", type: i1.HermesAlertItem, selector: "hermes-alert-item" }, { kind: "directive", type: i1.HermesAlertText, selector: ".alert-text" }, { kind: "component", type: i2.HermesLabel, selector: "hermes-label", inputs: ["hermesColor", "hermesBadgeText", "hermesText", "hermesClickable", "hermesDisabled", "hermesType"] }, { kind: "component", type: i3.HermesDatagrid, selector: "hermes-datagrid", inputs: ["hermesLoadingMoreItems", "hermesDgSingleSelectionAriaLabel", "hermesDgSingleActionableAriaLabel", "hermesDetailExpandableAriaLabel", "hermesDgDisablePageFocus", "hermesDgCustomSelectAllEnabled", "hermesDgSelectAllDisabled", "hermesDgLoading", "hermesDgSelectionType", "hermesDgSelected", "hermesDgPreserveSelection", "hermesDgRowSelection", "hermesDgItemsIdentityFn"], outputs: ["hermesDgSelectedChange", "hermesDgRefresh", "hermesDgCustomSelectAll"] }, { kind: "component", type: i3.HermesDatagridCell, selector: "hermes-dg-cell" }, { kind: "component", type: i3.HermesDatagridColumn, selector: "hermes-dg-column", inputs: ["hermesFilterStringPlaceholder", "hermesFilterNumberMaxPlaceholder", "hermesFilterNumberMinPlaceholder", "hermesDgDisableUnsort", "hermesDgPinned", "hermesDgColType", "hermesDgField", "hermesDgSortBy", "hermesDgSortOrder", "hermesFilterValue"], outputs: ["hermesDgSortOrderChange", "hermesFilterValueChange"] }, { kind: "component", type: i3.HermesDatagridFooter, selector: "hermes-dg-footer" }, { kind: "component", type: i3.HermesDatagridRow, selector: "hermes-dg-row", inputs: ["hermesDgDetailDisabled", "hermesDgDetailHidden", "hermesDgSkeletonLoading", "hermesDgItem", "hermesDgSelectable", "hermesDgSelected", "hermesDgExpanded", "hermesDgDetailOpenLabel", "hermesDgDetailCloseLabel", "hermesDgRowSelectionLabel"], outputs: ["hermesDgSelectedChange", "hermesDgExpandedChange"] }, { kind: "directive", type: i3.DatagridCellRenderer, selector: "hermes-dg-cell" }, { kind: "directive", type: i3.DatagridHeaderRenderer, selector: "hermes-dg-column", outputs: ["hermesDgColumnResize"] }, { kind: "directive", type: i3.DatagridMainRenderer, selector: "hermes-datagrid" }, { kind: "directive", type: i3.DatagridRowRenderer, selector: "hermes-dg-row" }, { kind: "directive", type: i3.ActionableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "directive", type: i3.DatagridWillyWonka, selector: "hermes-datagrid" }, { kind: "directive", type: i3.ExpandableOompaLoompa, selector: "hermes-datagrid, hermes-dg-row" }, { kind: "component", type: i4.HermesStackView, selector: "hermes-stack-view" }, { kind: "component", type: i4.HermesStackHeader, selector: "hermes-stack-header", inputs: ["hermesStackHeaderLevel"] }, { kind: "component", type: i4.HermesStackBlock, selector: "hermes-stack-block", inputs: ["hermesSbExpanded", "hermesSbExpandable", "hermesStackViewLevel", "hermesSbNotifyChange"], outputs: ["hermesSbExpandedChange"] }, { kind: "component", type: i4.HermesStackViewLabel, selector: "hermes-stack-label", inputs: ["id"] }, { kind: "directive", type: i4.HermesStackViewCustomTags, selector: "hermes-stack-content" }, { kind: "component", type: i5.HermesTree, selector: "hermes-tree", inputs: ["hermesLazy"] }, { kind: "component", type: i5.HermesTreeNode, selector: "hermes-tree-node", inputs: ["hermesExpandable", "hermesDisabled", "hermesSelected", "hermesExpanded", "hermesForTypeAhead"], outputs: ["hermesSelectedChange", "hermesExpandedChange"] }, { kind: "component", type: i6.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i6.HermesIconCustomTag, selector: "hermes-icon" }, { kind: "directive", type: i7.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: i7.HermesControlError, selector: "hermes-control-error" }, { kind: "component", type: i7.HermesControlHelper, selector: "hermes-control-helper" }, { kind: "directive", type: i7.HermesIfError, selector: "[hermesIfError]", inputs: ["hermesIfError"] }, { kind: "directive", type: i7.HermesForm, selector: "[hermesForm]", inputs: ["hermesLabelSize"] }, { kind: "directive", type: i7.HermesLayout, selector: "[hermesForm][hermesLayout]", inputs: ["hermesLayout"] }, { kind: "directive", type: i8.HermesCheckbox, selector: "[hermesCheckbox],[hermesToggle]" }, { kind: "component", type: i8.HermesCheckboxContainer, selector: "hermes-checkbox-container,hermes-toggle-container", inputs: ["hermesInline"] }, { kind: "component", type: i8.HermesCheckboxWrapper, selector: "hermes-checkbox-wrapper,hermes-toggle-wrapper" }, { kind: "directive", type: i9.HermesInput, selector: "[hermesInput]" }, { kind: "component", type: i9.HermesInputContainer, selector: "hermes-input-container" }, { kind: "directive", type: i10.HermesRadio, selector: "[hermesRadio]" }, { kind: "component", type: i10.HermesRadioContainer, selector: "hermes-radio-container", inputs: ["hermesInline"] }, { kind: "component", type: i10.HermesRadioWrapper, selector: "hermes-radio-wrapper" }, { kind: "directive", type: i11.HermesTextarea, selector: "[hermesTextarea]" }, { kind: "component", type: i11.HermesTextareaContainer, selector: "hermes-textarea-container" }, { kind: "component", type: i12.HermesTabContent, selector: "hermes-tab-content", inputs: ["id"] }, { kind: "component", type: i12.HermesTab, selector: "hermes-tab" }, { kind: "component", type: i12.HermesTabs, selector: "hermes-tabs", inputs: ["hermesLayout"] }, { kind: "directive", type: i12.HermesTabLink, selector: "[hermesTabLink]", inputs: ["id", "hermesTabLinkInOverflow"] }, { kind: "directive", type: i12.TabsWillyWonka, selector: "hermes-tabs" }, { kind: "directive", type: i12.ActiveOompaLoompa, selector: "[hermesTabLink], hermes-tab-content" }, { kind: "component", type: i13.HermesVerticalNav, selector: "hermes-vertical-nav", inputs: ["hermesVerticalNavToggleLabel", "hermesVerticalNavCollapsible", "hermesVerticalNavCollapsed"], outputs: ["hermesVerticalNavCollapsedChange"] }, { kind: "component", type: i13.HermesVerticalNavLink, selector: "[hermesVerticalNavLink]" }, { kind: "component", type: i13.HermesVerticalNavGroup, selector: "hermes-vertical-nav-group", inputs: ["hermesVerticalNavGroupExpanded"], outputs: ["hermesVerticalNavGroupExpandedChange"] }, { kind: "component", type: i13.HermesVerticalNavGroupChildren, selector: "hermes-vertical-nav-group-children" }, { kind: "directive", type: i13.HermesVerticalNavIcon, selector: "[hermesVerticalNavIcon]" }, { kind: "component", type: i14.HermesBreadcrumbs, selector: "hermes-breadcrumbs", inputs: ["items"], outputs: ["hermesBreadcrumbItemClick"] }, { kind: "component", type: i15.HermesTooltip, selector: "hermes-tooltip" }, { kind: "directive", type: i15.HermesTooltipTrigger, selector: "[hermesTooltipTrigger]" }, { kind: "component", type: i15.HermesTooltipContent, selector: "hermes-tooltip-content", inputs: ["id", "hermesPosition", "hermesSize"] }, { kind: "component", type: i16.HermesWizard, selector: "hermes-wizard", inputs: ["hermesWizardStepnavAriaLabel", "hermesWizardStepnavLayout", "hermesWizardSize", "hermesWizardInPage", "hermesWizardInPageFillContentArea", "hermesWizardHideFooter", "hermesWizardFooterAlign", "hermesWizardClosable", "hermesWizardPreventModalAnimation", "hermesWizardForceForwardNavigation", "hermesWizardOpen", "hermesWizardPreventDefaultNext", "hermesWizardPreventDefaultCancel", "hermesWizardPreventNavigation", "hermesWizardDisableStepnav"], outputs: ["hermesWizardOpenChange", "hermesWizardOnCancel", "hermesWizardOnFinish", "hermesWizardOnReset", "hermesWizardCurrentPageChange", "hermesWizardOnNext", "hermesWizardOnPrevious"] }, { kind: "component", type: i16.HermesWizardPage, selector: "hermes-wizard-page", inputs: ["id", "hermesWizardPagePreventDefault", "hermesWizardPageNextDisabled", "hermesWizardPagePreviousDisabled", "hermesWizardPageHasError", "hermesWizardPagePreventDefaultCancel", "hermesWizardPagePreventDefaultNext"], outputs: ["hermesWizardPageNextDisabledChange", "hermesWizardPagePreviousDisabledChange", "hermesWizardPagePreventDefaultCancelChange", "hermesWizardPageOnCommit", "hermesWizardPageOnLoad", "hermesWizardPageOnCancel", "hermesWizardPageFinish", "hermesWizardPagePrevious", "hermesWizardPageNext", "hermesWizardPageDanger", "hermesWizardPagePrimary", "hermesWizardPageCustomButton"] }, { kind: "component", type: i16.HermesWizardButton, selector: "hermes-wizard-button", inputs: ["type", "hermesWizardButtonDisabled", "hermesWizardButtonHidden"], outputs: ["hermesWizardButtonClicked"] }, { kind: "directive", type: i16.HermesWizardTitle, selector: "hermes-wizard-title", inputs: ["hermesHeadingLevel"] }, { kind: "directive", type: i16.HermesWizardPageTitle, selector: "[hermesPageTitle]", inputs: ["hermesHeadingLevel"] }, { kind: "component", type: i17.HermesAccordion, selector: "hermes-accordion", inputs: ["hermesAccordionMultiPanel"] }, { kind: "component", type: i17.HermesAccordionPanel, selector: "hermes-accordion-panel", inputs: ["hermesAccordionPanelDisabled", "hermesAccordionPanelOpen", "hermesAccordionPanelHeadingLevel"], outputs: ["hermesAccordionPanelOpenChange"] }, { kind: "component", type: i17.HermesAccordionTitle, selector: "hermes-accordion-title" }, { kind: "component", type: i17.HermesAccordionContent, selector: "hermes-accordion-content" }, { kind: "directive", type: i17.AccordionOompaLoompa, selector: "hermes-accordion-panel" }, { kind: "directive", type: i17.AccordionWillyWonka, selector: "hermes-accordion" }, { kind: "component", type: i18.HermesStepper, selector: "form[hermesStepper]", inputs: ["hermesInitialStep"] }, { kind: "directive", type: i18.HermesStepButton, selector: "[hermesStepButton]", inputs: ["hermesStepButton"] }, { kind: "component", type: i18.HermesStepTitle, selector: "hermes-step-title" }, { kind: "component", type: i18.HermesStepDescription, selector: "hermes-step-description" }, { kind: "component", type: i18.HermesStepContent, selector: "hermes-step-content" }, { kind: "component", type: i18.HermesStepperPanel, selector: "hermes-stepper-panel" }, { kind: "directive", type: i18.StepperOompaLoompa, selector: "hermes-stepper-panel, [hermesStepButton]" }, { kind: "directive", type: i18.StepperWillyWonka, selector: "form[hermesStepper]" }, { kind: "component", type: i19.HermesProgressBar, selector: "hermes-progress-bar", inputs: ["hermesMax", "hermesDisplayval", "hermesColor", "hermesValue", "id", "hermesCompact", "hermesLabeled", "hermesFade", "hermesLoop", "hermesFlash", "hermesFlashDanger"] }, { kind: "component", type: i20.HermesTimeline, selector: "hermes-timeline", inputs: ["hermesLayout"] }, { kind: "component", type: i20.HermesTimelineStep, selector: "hermes-timeline-step", inputs: ["hermesState"] }, { kind: "component", type: i20.HermesTimelineStepDescription, selector: "hermes-timeline-step-description" }, { kind: "component", type: i20.HermesTimelineStepHeader, selector: "hermes-timeline-step-header" }, { kind: "component", type: i20.HermesTimelineStepTitle, selector: "hermes-timeline-step-title" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i21.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i22.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i22.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i22.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i22.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i22.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i22.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i22.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i22.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "directive", type: i22.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i21.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-theme-builder', imports: [HermesModule, CommonModule, FormsModule], template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<!-- Preset selector -->\r\n<div class=\"tb-presets\" hermes-layout=\"m-t:lg\">\r\n  <div class=\"tb-preset-cards hermes-row\">\r\n    @for (preset of presets; track preset.name) {\r\n      <a\r\n        href=\"javascript://\"\r\n        class=\"card clickable tb-preset-card hermes-col-1\"\r\n        [class.tb-preset-card-active]=\"activePreset?.name === preset.name\"\r\n        (click)=\"applyPreset(preset)\"\r\n      >\r\n        <div class=\"tb-preset-swatch\" [style.background-color]=\"preset.light?.primary?.hex\"></div>\r\n        <div class=\"card-text\">{{ preset.name }}</div>\r\n      </a>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500 Preview DARK card \u2500\u2500 -->\r\n<!-- Invisible for filling the dark values on initial load -->\r\n<div style=\"display: none\" #previewDarkWrapper hermes-theme=\"dark\"></div>\r\n\r\n<!-- \u2500\u2500 Two-column layout: controls | preview \u2500\u2500 -->\r\n<div class=\"tb-layout\" hermes-layout=\"m-t:lg m-b:lg\">\r\n  <!-- \u2500\u2500 Controls card (sticky left column) \u2500\u2500 -->\r\n  <div class=\"card tb-controls-card\">\r\n    <div class=\"card-block\">\r\n      @for (colorGroup of themeColors; track colorGroup.key) {\r\n        <div>\r\n          <hermes-stack-view>\r\n            <hermes-stack-header>\r\n              <div class=\"tb-control-header\">\r\n                {{ colorGroup.key | uppercase }}\r\n\r\n                <hermes-tooltip>\r\n                  <hermes-label\r\n                    hermes-layout=\"m:none\"\r\n                    hermesTooltipTrigger\r\n                    [hermesText]=\"'Contrast ' + colorGroup.contrast.minContrast.wcag.label\"\r\n                    [hermesBadgeText]=\"colorGroup.contrast.minContrast.wcag.score\"\r\n                    [hermesColor]=\"colorGroup.contrast.minContrast.wcag.type\"\r\n                  >\r\n                  </hermes-label>\r\n                  <hermes-tooltip-content hermesPosition=\"right\" hermesSize=\"lg\">\r\n                    <div class=\"tb-wcag-container\">\r\n                      @for (background of colorGroup.contrast.backgrounds; track background.name) {\r\n                        <div class=\"tb-wcag-item\">\r\n                          {{ background.name }}:\r\n                          <hermes-label\r\n                            hermes-layout=\"m:none\"\r\n                            hermesType=\"solid\"\r\n                            [hermesText]=\"background.wcag.label\"\r\n                            [hermesBadgeText]=\"background.wcag.score\"\r\n                            [hermesColor]=\"background.wcag.type\"\r\n                          />\r\n                        </div>\r\n                      }\r\n                    </div>\r\n                  </hermes-tooltip-content>\r\n                </hermes-tooltip>\r\n              </div>\r\n            </hermes-stack-header>\r\n            <hermes-stack-block [hermesStackViewLevel]=\"1\">\r\n              <hermes-stack-label class=\"tb-stack-label\">{{ colorGroup.base.label }}</hermes-stack-label>\r\n              <hermes-stack-content style=\"width: 52%\">\r\n                <div class=\"tb-color-input-wrap\">\r\n                  <input\r\n                    type=\"color\"\r\n                    class=\"tb-color-picker\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color picker'\"\r\n                    (input)=\"\r\n                      setCurrentColor(\r\n                        colorGroup.base,\r\n                        $any($event.target).value,\r\n                        colorStruct[activeTheme][colorGroup.key]\r\n                      )\r\n                    \"\r\n                  />\r\n                  <input\r\n                    readonly\r\n                    type=\"text\"\r\n                    class=\"tb-hex-input\"\r\n                    [value]=\"colorGroup.base.hex\"\r\n                    [attr.aria-label]=\"colorGroup.key + ' ' + colorGroup.base.label + ' color hex value'\"\r\n                  />\r\n                  <button\r\n                    *ngIf=\"!colorGroup.base.isOriginalColor\"\r\n                    class=\"btn btn-sm btn-icon btn-primary\"\r\n                    (click)=\"resetColor($event, colorGroup.base, colorStruct[activeTheme][colorGroup.key])\"\r\n                    title=\"Back to original color\"\r\n                  >\r\n                    <hermes-icon shape=\"undo\"></hermes-icon>\r\n                  </button>\r\n                </div>\r\n              </hermes-stack-content>\r\n\r\n              @for (colorVariant of colorGroup.variants; track colorVariant.label) {\r\n                <hermes-stack-block [hermesStackViewLevel]=\"2\">\r\n                  <hermes-stack-label>{{ colorVariant.label }}</hermes-stack-label>\r\n                  <hermes-stack-content>\r\n                    <div class=\"tb-color-input-wrap\">\r\n                      <input\r\n                        type=\"color\"\r\n                        class=\"tb-color-picker\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color picker'\"\r\n                        (input)=\"setCurrentColor(colorVariant, $any($event.target).value)\"\r\n                      />\r\n                      <input\r\n                        readonly\r\n                        type=\"text\"\r\n                        class=\"tb-hex-input\"\r\n                        [value]=\"colorVariant.hex\"\r\n                        [attr.aria-label]=\"colorGroup.key + ' ' + colorVariant.label + ' color hex value'\"\r\n                      />\r\n                      <button\r\n                        *ngIf=\"!colorVariant.isOriginalColor\"\r\n                        class=\"btn btn-sm btn-icon btn-primary\"\r\n                        (click)=\"resetColor($event, colorVariant)\"\r\n                        title=\"Back to original color\"\r\n                      >\r\n                        <hermes-icon shape=\"undo\"></hermes-icon>\r\n                      </button>\r\n                    </div>\r\n                  </hermes-stack-content>\r\n                </hermes-stack-block>\r\n              }\r\n            </hermes-stack-block>\r\n          </hermes-stack-view>\r\n\r\n          @if (colorGroup.key === 'warning' && !colorGroup.base.isOriginalColor) {\r\n            <hermes-toggle-wrapper>\r\n              <input\r\n                type=\"checkbox\"\r\n                hermesToggle\r\n                [(ngModel)]=\"warningTextOverrideEnabled\"\r\n                (ngModelChange)=\"onWarningTextOverrideChange()\"\r\n              />\r\n              <label>Light Theme Warning Text Override</label>\r\n            </hermes-toggle-wrapper>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- end controls card -->\r\n\r\n  <!-- \u2500\u2500 Preview card (right column) \u2500\u2500 -->\r\n  <div class=\"card tb-preview-card\">\r\n    <div class=\"card-header\">\r\n      Live Preview:\r\n      <button\r\n        class=\"btn btn-outline-neutral\"\r\n        [attr.aria-label]=\"'Switch to ' + (isDarkTheme ? 'light' : 'dark') + ' theme'\"\r\n        (click)=\"toggleActiveTheme()\"\r\n      >\r\n        <hermes-icon [shape]=\"isDarkTheme ? 'moon' : 'sun'\" [solid]=\"true\" [size]=\"'md'\"></hermes-icon>\r\n        {{ isDarkTheme ? 'Dark' : 'Light' }}\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"card-block tb-preview-sandbox\" #previewWrapper [attr.hermes-theme]=\"activeTheme\">\r\n      <ng-content></ng-content>\r\n\r\n      <!-- Breadcrumbs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Breadcrumbs</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-breadcrumbs [items]=\"breadcrumbs\"></hermes-breadcrumbs>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Buttons -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Buttons</p>\r\n        <div class=\"tb-preview-row\">\r\n          <button class=\"btn btn-primary\">Primary</button>\r\n          <button class=\"btn\">Primary Outline</button>\r\n          <button class=\"btn btn-link\">Primary FLAT</button>\r\n          <button class=\"btn btn-info\">Info</button>\r\n          <button class=\"btn btn-info-outline\">Info Outline</button>\r\n          <button class=\"btn btn-link-info\">Info Flat</button>\r\n          <button class=\"btn btn-danger\">Danger</button>\r\n          <button class=\"btn btn-success\">Success</button>\r\n          <button class=\"btn btn-warning\">Warning</button>\r\n          <button class=\"btn btn-primary\" disabled>Disabled</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Badges & Labels -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Badges &amp; Labels</p>\r\n        <div class=\"tb-preview-row\">\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'info'\"\r\n            [hermesText]=\"'info'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'danger'\" [hermesText]=\"'danger'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label [hermesType]=\"'outlined'\" [hermesColor]=\"'success'\" [hermesText]=\"'success'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'outlined'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'warning'\"\r\n            [hermesText]=\"'warning'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'info'\" [hermesText]=\"'info'\" [hermesBadgeText]=\"'99+'\" />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'danger'\"\r\n            [hermesText]=\"'danger'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label\r\n            [hermesType]=\"'solid'\"\r\n            [hermesClickable]=\"true\"\r\n            [hermesColor]=\"'success'\"\r\n            [hermesText]=\"'success'\"\r\n            [hermesBadgeText]=\"'99+'\"\r\n          />\r\n          <hermes-label [hermesType]=\"'solid'\" [hermesColor]=\"'warning'\" [hermesText]=\"'warning'\" [hermesBadgeText]=\"'99+'\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\">\r\n          <hermes-alert-item><span class=\"alert-text\">This is an info alert.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Operation completed successfully.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Please review before proceeding.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\">\r\n          <hermes-alert-item><span class=\"alert-text\">Something went wrong.</span></hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- App-Level Alerts -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">App-Level Alerts</p>\r\n        <hermes-alert [hermesAlertType]=\"'info'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level info.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Thanks</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'danger'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level alert.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Fix</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'warning'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level warning.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Check</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n        <hermes-alert [hermesAlertType]=\"'success'\" [hermesAlertAppLevel]=\"true\">\r\n          <hermes-alert-item>\r\n            <span class=\"alert-text\">This is an app level success.</span>\r\n            <div class=\"alert-actions\">\r\n              <button class=\"btn alert-action\"><hermes-icon shape=\"user\"></hermes-icon>Great</button>\r\n            </div>\r\n          </hermes-alert-item>\r\n        </hermes-alert>\r\n      </div>\r\n\r\n      <!-- Forms -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Form Controls</p>\r\n        <form hermesForm #tbForm=\"ngForm\" hermesLayout=\"horizontal\">\r\n          <hermes-input-container>\r\n            <label>Text input</label>\r\n            <input hermesInput type=\"text\" placeholder=\"Enter value...\" />\r\n          </hermes-input-container>\r\n          <hermes-checkbox-container>\r\n            <label>Checkbox</label>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox checked />\r\n              <label>Checkbox (checked)</label>\r\n            </hermes-checkbox-wrapper>\r\n            <hermes-checkbox-wrapper>\r\n              <input type=\"checkbox\" hermesCheckbox />\r\n              <label>Checkbox (unchecked)</label>\r\n            </hermes-checkbox-wrapper>\r\n          </hermes-checkbox-container>\r\n          <hermes-radio-container>\r\n            <label>Radio</label>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"a\" checked />\r\n              <label>Radio A</label>\r\n            </hermes-radio-wrapper>\r\n            <hermes-radio-wrapper>\r\n              <input type=\"radio\" hermesRadio name=\"r1\" value=\"b\" />\r\n              <label>Radio B</label>\r\n            </hermes-radio-wrapper>\r\n          </hermes-radio-container>\r\n          <hermes-toggle-container>\r\n            <label>Toggle</label>\r\n            <hermes-toggle-wrapper>\r\n              <input type=\"checkbox\" hermesToggle checked />\r\n              <label>Toggle (on)</label>\r\n            </hermes-toggle-wrapper>\r\n          </hermes-toggle-container>\r\n\r\n          <hermes-textarea-container>\r\n            <label>Textarea</label>\r\n            <textarea hermesTextarea [(ngModel)]=\"description\" name=\"description\" required></textarea>\r\n            <hermes-control-helper>Please provide a description.</hermes-control-helper>\r\n            <hermes-control-error *hermesIfError=\"'required'\">You must provide a description!</hermes-control-error>\r\n          </hermes-textarea-container>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Accordion -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Accordion</p>\r\n        <hermes-accordion>\r\n          <hermes-accordion-panel [hermesAccordionPanelOpen]=\"true\">\r\n            <hermes-accordion-title>Panel One</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the first accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n          <hermes-accordion-panel>\r\n            <hermes-accordion-title>Panel Two</hermes-accordion-title>\r\n            <hermes-accordion-content>Content for the second accordion panel.</hermes-accordion-content>\r\n          </hermes-accordion-panel>\r\n        </hermes-accordion>\r\n      </div>\r\n\r\n      <!-- Tree view -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tree View</p>\r\n        <hermes-tree>\r\n          <hermes-tree-node [hermesExpanded]=\"true\">\r\n            Root Node\r\n            <hermes-tree-node [hermesSelected]=\"1\"> Child One </hermes-tree-node>\r\n            <hermes-tree-node>\r\n              Child Two\r\n              <hermes-tree-node>Grandchild</hermes-tree-node>\r\n            </hermes-tree-node>\r\n          </hermes-tree-node>\r\n        </hermes-tree>\r\n      </div>\r\n\r\n      <!-- Progress bar -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Progress Bar</p>\r\n        <hermes-progress-bar hermesValue=\"20\" hermesMax=\"100\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"55\" hermesMax=\"100\" hermesColor=\"warning\" hermesLabeled></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"80\" hermesMax=\"100\" hermesColor=\"success\"></hermes-progress-bar>\r\n        <hermes-progress-bar hermesValue=\"40\" hermesMax=\"100\" hermesColor=\"danger\"></hermes-progress-bar>\r\n      </div>\r\n\r\n      <!-- Vertical nav -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Vertical Navigation</p>\r\n        <div class=\"tb-nav-preview-wrap\">\r\n          <hermes-vertical-nav [hermesVerticalNavCollapsible]=\"true\">\r\n            <hermes-vertical-nav-group hermesVerticalNavGroupExpanded>\r\n              <hermes-icon shape=\"home\" hermesVerticalNavIcon></hermes-icon>\r\n              Dashboard\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\" class=\"active\">Overview</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Analytics</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n            <hermes-vertical-nav-group>\r\n              <hermes-icon shape=\"cog\" hermesVerticalNavIcon></hermes-icon>\r\n              Settings\r\n              <hermes-vertical-nav-group-children>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Profile</a>\r\n                <a hermesVerticalNavLink href=\"javascript:void(0)\">Security</a>\r\n              </hermes-vertical-nav-group-children>\r\n            </hermes-vertical-nav-group>\r\n          </hermes-vertical-nav>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Stepper -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Stepper</p>\r\n        <form hermesStepper #tbStepperForm=\"ngForm\">\r\n          <hermes-stepper-panel ngModelGroup=\"account\">\r\n            <hermes-step-title>Account Details</hermes-step-title>\r\n            <hermes-step-description>Tell us about yourself</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-input-container>\r\n                <label>Full Name</label>\r\n                <input hermesInput name=\"fullName\" [(ngModel)]=\"stepperForm.account.fullName\" />\r\n              </hermes-input-container>\r\n              <button hermesStepButton=\"next\">Next</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n\r\n          <hermes-stepper-panel ngModelGroup=\"confirm\">\r\n            <hermes-step-title>Confirmation</hermes-step-title>\r\n            <hermes-step-description>Review and submit</hermes-step-description>\r\n            <hermes-step-content>\r\n              <hermes-checkbox-container>\r\n                <hermes-checkbox-wrapper>\r\n                  <input type=\"checkbox\" hermesCheckbox name=\"agree\" [(ngModel)]=\"stepperForm.confirm.agree\" />\r\n                  <label>I agree to the terms</label>\r\n                </hermes-checkbox-wrapper>\r\n              </hermes-checkbox-container>\r\n              <button hermesStepButton=\"previous\">Previous</button>\r\n              <button hermesStepButton=\"submit\">Submit</button>\r\n            </hermes-step-content>\r\n          </hermes-stepper-panel>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Datagrid -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Datagrid</p>\r\n        <hermes-datagrid [hermesDgSelectionType]=\"'multi'\">\r\n          <hermes-dg-column>Name</hermes-dg-column>\r\n          <hermes-dg-column>Role</hermes-dg-column>\r\n          <hermes-dg-column>Status</hermes-dg-column>\r\n          @for (row of rows; track row.name) {\r\n            <hermes-dg-row [hermesDgItem]=\"row\">\r\n              <hermes-dg-cell>{{ row.name }}</hermes-dg-cell>\r\n              <hermes-dg-cell>{{ row.role }}</hermes-dg-cell>\r\n              <hermes-dg-cell>\r\n                <span\r\n                  class=\"badge\"\r\n                  [class.badge-success]=\"row.status === 'Active'\"\r\n                  [class.badge-danger]=\"row.status === 'Inactive'\"\r\n                >\r\n                  {{ row.status }}\r\n                </span>\r\n              </hermes-dg-cell>\r\n            </hermes-dg-row>\r\n          }\r\n          <hermes-dg-footer>{{ rows.length }} users</hermes-dg-footer>\r\n        </hermes-datagrid>\r\n      </div>\r\n\r\n      <!-- Tabs -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Tabs</p>\r\n        <hermes-tabs>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Dashboard</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Dashboard tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Management</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Management tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n          <hermes-tab>\r\n            <button hermesTabLink>Settings</button>\r\n            <hermes-tab-content>\r\n              <p>Content for the Settings tab.</p>\r\n            </hermes-tab-content>\r\n          </hermes-tab>\r\n        </hermes-tabs>\r\n      </div>\r\n\r\n      <!-- Timeline -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Timeline</p>\r\n        <hermes-timeline>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.SUCCESS\">\r\n            <hermes-timeline-step-header>11:59 am</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Add KMS</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Root CA certificate requested.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.CURRENT\">\r\n            <hermes-timeline-step-header>12:04 pm</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Make KMS trust vCenter</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>\r\n              Upload the certificate to the KMS to complete the connection.\r\n            </hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n          <hermes-timeline-step [hermesState]=\"timelineStates.NOT_STARTED\">\r\n            <hermes-timeline-step-header>--:-- --</hermes-timeline-step-header>\r\n            <hermes-timeline-step-title>Enable Encryption</hermes-timeline-step-title>\r\n            <hermes-timeline-step-description>Not started yet.</hermes-timeline-step-description>\r\n          </hermes-timeline-step>\r\n        </hermes-timeline>\r\n      </div>\r\n\r\n      <!-- Wizard launcher -->\r\n      <div class=\"tb-preview-section\">\r\n        <p hermes-text=\"subsection uppercase bold\">Wizard</p>\r\n        <button class=\"btn btn-outline\" (click)=\"wizardOpen = true\">Open Wizard</button>\r\n        <hermes-wizard [(hermesWizardOpen)]=\"wizardOpen\" hermesWizardSize=\"md\">\r\n          <hermes-wizard-title>Sample Wizard</hermes-wizard-title>\r\n          <hermes-wizard-button [type]=\"'cancel'\">Cancel</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'previous'\">Back</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'next'\">Next</hermes-wizard-button>\r\n          <hermes-wizard-button [type]=\"'finish'\">Finish</hermes-wizard-button>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 1: Introduction</ng-template>\r\n            Welcome to the wizard. This step introduces the process.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 2: Configuration</ng-template>\r\n            Configure the required options in this step.\r\n          </hermes-wizard-page>\r\n          <hermes-wizard-page>\r\n            <ng-template hermesPageTitle>Step 3: Confirm</ng-template>\r\n            Review your choices and click Finish.\r\n          </hermes-wizard-page>\r\n        </hermes-wizard>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- end preview card -->\r\n</div>\r\n<!-- end .tb-layout -->\r\n", styles: [":host{display:block}:host ::ng-deep .stack-view .stack-view-key{min-width:26%;max-width:26%}:host ::ng-deep .stack-view .stack-block-content{max-width:46%}:host ::ng-deep .card .alert{margin:0}:host ::ng-deep .card-block .progress,:host ::ng-deep .card-block .progress-static{position:relative;height:var(--hermes-base-progress-bar-height);margin:0}:host ::ng-deep .card-block .progress>progress,:host ::ng-deep .card-block .progress-static>progress{height:100%;position:static}.tb-presets{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap;margin:0 var(--hermes-base-gap-m)}.tb-preset-cards{gap:var(--hermes-base-gap-l)}.tb-preset-cards .tb-preset-card{display:inline-flex;align-items:center;gap:var(--hermes-base-gap-m);margin:0;padding:var(--hermes-base-vertical-offset-m) var(--hermes-base-horizontal-offset-m);min-width:170px}.tb-preset-cards .tb-preset-card.tb-preset-card-active{outline:var(--hermes-alias-object-border-width-200) solid var(--hermes-alias-primary);outline-offset:2px}.tb-preset-cards .tb-preset-card .card-text{margin-bottom:0}.tb-preset-swatch{display:flex;align-items:center;justify-content:center;height:var(--hermes-base-row-height-m);min-width:var(--hermes-base-row-height-m);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);background:var(--hermes-alias-object-container-background);color:var(--hermes-alias-typography-color-300)}.tb-layout{display:grid;grid-template-columns:370px 1fr;gap:var(--hermes-base-gap-l);align-items:start}.tb-controls-card{margin-top:0;position:sticky;top:0;max-height:calc(100vh - var(--hermes-global-space-15));overflow-y:auto}.tb-controls-card .tb-control-header{display:flex;align-items:center;justify-content:space-between}.tb-wcag-container{display:flex;flex-direction:column;gap:var(--hermes-base-gap-s)}.tb-wcag-container .tb-wcag-item{display:flex;justify-content:space-between;align-items:center}.card-block{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l)}.card-block .tb-color-input-wrap{display:flex;align-items:center;gap:var(--hermes-base-gap-s);min-width:190px}.card-block .tb-color-picker{padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-2xs);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100);cursor:pointer;background:var(--hermes-alias-object-container-background);width:var(--hermes-global-space-11)}.card-block .tb-hex-input{width:var(--hermes-base-layout-space-5xl);padding:var(--hermes-base-vertical-offset-2xs) var(--hermes-base-horizontal-offset-s);border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);border-radius:var(--hermes-alias-object-border-radius-100)}.card-block .tb-stack-label{display:flex;gap:var(--hermes-base-gap-m);align-items:center}.tb-preview-card{margin-top:0}.tb-preview-card .card-header{display:flex;align-items:center;gap:var(--hermes-base-gap-m)}.tb-preview-sandbox{display:flex;flex-direction:column;gap:var(--hermes-base-gap-l);border-bottom-left-radius:var(--hermes-alias-object-border-radius-100);border-bottom-right-radius:var(--hermes-alias-object-border-radius-100)}.tb-preview-section{display:flex;flex-direction:column;gap:var(--hermes-base-gap-m)}.tb-preview-row{display:flex;align-items:center;gap:var(--hermes-base-gap-m);flex-wrap:wrap}.tb-nav-preview-wrap{height:180px;border:var(--hermes-alias-object-border-width-100) solid var(--hermes-alias-object-border-color);overflow:hidden;display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { generatedCSS: [{
+                type: Output
+            }], previewWrapper: [{
+                type: ViewChild,
+                args: ['previewWrapper']
+            }], previewDarkWrapper: [{
+                type: ViewChild,
+                args: ['previewDarkWrapper']
+            }], presets: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const GROUP_KEYS = Object.keys(TOKEN_KEYS).filter(key => key !== 'baseTokens');
+function hslString({ h, s, l }) {
+    return `hsl(${h}deg, ${s}%, ${l}%)`;
+}
+/** Same lightness-shift formula `ThemeBuilderComponent` uses to derive tint/tint-dark/shade/dark from a base color. */
+function deriveVariant(name, base, isDarkTheme) {
+    if (name.endsWith('-tint-dark')) {
+        return new HslColor(base.h, base.s, isDarkTheme ? 18 : 95);
+    }
+    if (name.endsWith('-tint')) {
+        return new HslColor(base.h, base.s, isDarkTheme ? 25 : 94);
+    }
+    if (name.endsWith('-shade')) {
+        return Color.shiftL(base, isDarkTheme ? 7 : -7);
+    }
+    if (name.endsWith('-dark')) {
+        return Color.shiftL(base, isDarkTheme ? 20 : -10);
+    }
+    return null;
+}
+/** Clears every custom property `applyThemePreset` can set, restoring `el`'s shipped/default colors. */
+function clearThemeProperties(el) {
+    for (const key of GROUP_KEYS) {
+        TOKEN_KEYS[key].forEach((name) => el.style.removeProperty(name));
+    }
+    Object.values(DEFAULT_OVERRIDES).forEach((targets) => targets.forEach(target => el.style.removeProperty(target)));
+}
+/**
+ * Applies a theme-builder preset's colors directly onto `el` as inline CSS custom properties —
+ * the same mechanism `ThemeBuilderComponent` uses on its own preview sandbox. An inline style
+ * always outranks the attribute-selector rules that ship the default/dark-theme tokens, so this
+ * reskins whatever `el` themes (e.g. `document.body` reskins the whole page).
+ *
+ * Pass the identity preset (`light`/`dark`: null, see `DEFAULT_PRESET`) to clear every override
+ * and fall back to the shipped defaults.
+ */
+function applyThemePreset(el, preset, theme) {
+    clearThemeProperties(el);
+    const overrides = preset[theme];
+    if (!overrides) {
+        return;
+    }
+    const isDarkTheme = theme === 'dark';
+    for (const groupKey of GROUP_KEYS) {
+        const base = overrides[groupKey];
+        if (!base) {
+            continue;
+        }
+        el.style.setProperty(base.name, base.hsl);
+        DEFAULT_OVERRIDES[base.name]?.forEach((target) => el.style.setProperty(target, `var(${base.name})`));
+        TOKEN_KEYS[groupKey].forEach((name) => {
+            if (name === base.name) {
+                return;
+            }
+            const variant = deriveVariant(name, base.color, isDarkTheme);
+            if (!variant) {
+                return;
+            }
+            el.style.setProperty(name, hslString(variant));
+            DEFAULT_OVERRIDES[name]?.forEach((target) => el.style.setProperty(target, `var(${name})`));
+        });
+    }
+}
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Color, DEFAULT_PRESET, PRESETS, ThemeBuilderComponent, applyThemePreset };
+//# sourceMappingURL=hermes-ui-angular-addons-theme-builder.mjs.map