@ng-brutalism/ui 0.1.2 → 0.2.0

package/fesm2022/ng-brutalism-ui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, DOCUMENT, PLATFORM_ID, input, computed, Directive, booleanAttribute, ChangeDetectionStrategy, Component, model, contentChildren, viewChild, DestroyRef, signal, afterNextRender, ElementRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, DOCUMENT, PLATFORM_ID, input, computed, Directive, ElementRef, effect, booleanAttribute, ChangeDetectionStrategy, Component, model, contentChildren, isDevMode, viewChild, DestroyRef, signal, afterNextRender, numberAttribute } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 
 /**
@@ -24,6 +24,12 @@ function applyThemeVars(doc, config) {
         primary: '--nb-primary',
         secondary: '--nb-secondary',
         accent: '--nb-accent',
+        yellow: '--nb-yellow',
+        pink: '--nb-pink',
+        mint: '--nb-mint',
+        lavender: '--nb-lavender',
+        blue: '--nb-blue',
+        cream: '--nb-cream',
         danger: '--nb-danger',
         success: '--nb-success',
         warning: '--nb-warning',
@@ -63,12 +69,522 @@ function provideNgBrutalism(config = {}) {
     ]);
 }
 
+const NB_TONE_TOKENS = {
+    default: {
+        bg: 'var(--nb-surface)',
+        fg: 'var(--nb-surface-foreground)',
+    },
+    cream: {
+        bg: 'var(--nb-cream)',
+        fg: '#000000',
+    },
+    white: {
+        bg: '#ffffff',
+        fg: '#000000',
+    },
+    black: {
+        bg: '#000000',
+        fg: '#ffffff',
+    },
+    yellow: {
+        bg: 'var(--nb-yellow)',
+        fg: '#000000',
+    },
+    pink: {
+        bg: 'var(--nb-pink)',
+        fg: '#000000',
+    },
+    mint: {
+        bg: 'var(--nb-mint)',
+        fg: '#000000',
+    },
+    lavender: {
+        bg: 'var(--nb-lavender)',
+        fg: '#000000',
+    },
+    blue: {
+        bg: 'var(--nb-blue)',
+        fg: '#000000',
+    },
+    primary: {
+        bg: 'var(--nb-primary)',
+        fg: 'var(--nb-primary-foreground)',
+    },
+    secondary: {
+        bg: 'var(--nb-secondary)',
+        fg: 'var(--nb-secondary-foreground)',
+    },
+    accent: {
+        bg: 'var(--nb-accent)',
+        fg: 'var(--nb-accent-foreground)',
+    },
+    success: {
+        bg: 'var(--nb-success)',
+        fg: 'var(--nb-success-foreground)',
+    },
+    warning: {
+        bg: 'var(--nb-warning)',
+        fg: 'var(--nb-warning-foreground)',
+    },
+    danger: {
+        bg: 'var(--nb-danger)',
+        fg: 'var(--nb-danger-foreground)',
+    },
+};
+function nbToneTokens(tone) {
+    return NB_TONE_TOKENS[tone];
+}
+function nbToneVars(tone) {
+    const borderColor = 'var(--nb-border)';
+    if (tone === 'surface') {
+        return { ...nbToneTokens('default'), borderColor };
+    }
+    if (tone === 'background') {
+        return {
+            bg: 'var(--nb-background)',
+            fg: 'var(--nb-foreground)',
+            borderColor,
+        };
+    }
+    if (tone === 'ink') {
+        return { ...nbToneTokens('black'), borderColor };
+    }
+    return { ...nbToneTokens(tone), borderColor };
+}
+
+const RADIUS_VALUES = {
+    none: '0px',
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    xl: '1rem',
+    full: '9999px',
+};
+function nbRadiusValue(radius) {
+    return RADIUS_VALUES[radius];
+}
+
+const SHADOW_VALUES = {
+    none: 'none',
+    sm: '2px 2px 0 0 var(--nb-shadow)',
+    default: 'var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 0 var(--nb-shadow)',
+    hard: '6px 6px 0 0 var(--nb-shadow)',
+    heavy: '10px 10px 0 0 var(--nb-shadow)',
+};
+function nbShadowValue(shadow) {
+    return SHADOW_VALUES[shadow];
+}
+
+const BORDER_WIDTH_VALUES = {
+    none: '0px',
+    thin: '1px',
+    default: 'var(--nb-border-width)',
+    strong: '3px',
+    thick: '4px',
+};
+function nbBorderWidthValue(border) {
+    return BORDER_WIDTH_VALUES[border];
+}
+
+const SPACING_VALUES = {
+    none: '0px',
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1rem',
+    xl: '1.5rem',
+    '2xl': '2rem',
+};
+function nbSpacingValue(spacing) {
+    return SPACING_VALUES[spacing];
+}
+
+const PADDING_VALUES = {
+    none: '0px',
+    xs: '0.5rem',
+    sm: '0.75rem',
+    md: '1rem',
+    lg: '1.5rem',
+    xl: '2rem',
+};
+function nbPaddingValue(padding) {
+    return PADDING_VALUES[padding];
+}
+
+/**
+ * Shared typography vocabulary. One source of truth for the font-weight scale,
+ * the font-role contract, underline customization, and the text-tracking scale
+ * so a token means the same thing across nbText / nbDisplay / nbTypography /
+ * nbChipGroup.
+ */
+const FONT_WEIGHT_VALUES = {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+};
+function nbFontWeightValue(weight) {
+    return FONT_WEIGHT_VALUES[weight];
+}
+const FONT_ROLE_VALUES = {
+    inherit: null,
+    body: 'var(--nb-font-body, var(--nb-font-sans))',
+    display: 'var(--nb-font-display, var(--nb-font-sans))',
+    accent: 'var(--nb-font-accent, var(--nb-font-sans))',
+    mono: 'var(--nb-font-mono, monospace)',
+};
+function nbTypographyFontValue(font) {
+    return FONT_ROLE_VALUES[font];
+}
+const UNDERLINE_GAP_VALUES = {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1.25rem',
+};
+const UNDERLINE_WIDTH_VALUES = {
+    auto: null,
+    xs: '2rem',
+    sm: '4rem',
+    md: '7rem',
+    lg: '12rem',
+    full: '100%',
+};
+function nbUnderlineGapValue(gap) {
+    return UNDERLINE_GAP_VALUES[gap];
+}
+function nbUnderlineWidthValue(width) {
+    return UNDERLINE_WIDTH_VALUES[width];
+}
+
+/**
+ * INTERNAL. The CSS-variable namespace a primitive owns, e.g. `'surface'` →
+ * capabilities write `--nb-surface-*`. Every primitive that composes a style
+ * capability must provide this on its element injector.
+ */
+const NB_STYLE_NAMESPACE = new InjectionToken('NB_STYLE_NAMESPACE');
+const NB_STYLE_DEFAULTS = new InjectionToken('NB_STYLE_DEFAULTS', { factory: () => ({}) });
+
+/**
+ * INTERNAL capability — not part of the public API. Composed into primitives via
+ * `hostDirectives`. Defaults and scoped public tokens flow through low
+ * specificity marker CSS; explicit inputs write final inline color properties.
+ */
+class NbToneCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    tone = input(undefined, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.tone() ?? this.defaults.tone ?? 'default', ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    defaultVars = computed(() => nbToneVars(this.defaults.tone ?? 'default'), ...(ngDevMode ? [{ debugName: "defaultVars" }] : /* istanbul ignore next */ []));
+    inputVars = computed(() => {
+        const tone = this.tone();
+        return tone ? nbToneVars(tone) : null;
+    }, ...(ngDevMode ? [{ debugName: "inputVars" }] : /* istanbul ignore next */ []));
+    toneBgDefaultVar = computed(() => this.defaultVars().bg, ...(ngDevMode ? [{ debugName: "toneBgDefaultVar" }] : /* istanbul ignore next */ []));
+    toneFgDefaultVar = computed(() => this.defaultVars().fg, ...(ngDevMode ? [{ debugName: "toneFgDefaultVar" }] : /* istanbul ignore next */ []));
+    toneBorderColorDefaultVar = computed(() => this.defaultVars().borderColor, ...(ngDevMode ? [{ debugName: "toneBorderColorDefaultVar" }] : /* istanbul ignore next */ []));
+    toneBgTokenVar = computed(() => `var(--nb-${this.namespace}-bg, var(--_nb-tone-bg-default))`, ...(ngDevMode ? [{ debugName: "toneBgTokenVar" }] : /* istanbul ignore next */ []));
+    toneFgTokenVar = computed(() => `var(--nb-${this.namespace}-fg, var(--_nb-tone-fg-default))`, ...(ngDevMode ? [{ debugName: "toneFgTokenVar" }] : /* istanbul ignore next */ []));
+    toneBorderColorTokenVar = computed(() => `var(--nb-${this.namespace}-border-color, var(--_nb-tone-border-color-default))`, ...(ngDevMode ? [{ debugName: "toneBorderColorTokenVar" }] : /* istanbul ignore next */ []));
+    toneInputBgStyle = computed(() => this.inputVars()?.bg ?? null, ...(ngDevMode ? [{ debugName: "toneInputBgStyle" }] : /* istanbul ignore next */ []));
+    toneInputFgStyle = computed(() => this.inputVars()?.fg ?? null, ...(ngDevMode ? [{ debugName: "toneInputFgStyle" }] : /* istanbul ignore next */ []));
+    toneInputBorderColorStyle = computed(() => this.inputVars()?.borderColor ?? null, ...(ngDevMode ? [{ debugName: "toneInputBorderColorStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbToneCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbToneCapability, isStandalone: true, selector: "[nbToneCapability]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-tone-bg-default": "toneBgDefaultVar()", "style.--_nb-tone-fg-default": "toneFgDefaultVar()", "style.--_nb-tone-border-color-default": "toneBorderColorDefaultVar()", "style.--_nb-tone-bg-token": "toneBgTokenVar()", "style.--_nb-tone-fg-token": "toneFgTokenVar()", "style.--_nb-tone-border-color-token": "toneBorderColorTokenVar()", "style.background-color": "toneInputBgStyle()", "style.color": "toneInputFgStyle()", "style.border-color": "toneInputBorderColorStyle()", "attr.data-tone": "resolved()" }, classAttribute: "nb-tone" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbToneCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbToneCapability]',
+                    host: {
+                        class: 'nb-tone',
+                        '[style.--_nb-tone-bg-default]': 'toneBgDefaultVar()',
+                        '[style.--_nb-tone-fg-default]': 'toneFgDefaultVar()',
+                        '[style.--_nb-tone-border-color-default]': 'toneBorderColorDefaultVar()',
+                        '[style.--_nb-tone-bg-token]': 'toneBgTokenVar()',
+                        '[style.--_nb-tone-fg-token]': 'toneFgTokenVar()',
+                        '[style.--_nb-tone-border-color-token]': 'toneBorderColorTokenVar()',
+                        '[style.background-color]': 'toneInputBgStyle()',
+                        '[style.color]': 'toneInputFgStyle()',
+                        '[style.border-color]': 'toneInputBorderColorStyle()',
+                        '[attr.data-tone]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Defaults and scoped public
+ * tokens flow through marker CSS; explicit inputs write the final property.
+ */
+class NbRadiusCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    radius = input(undefined, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    fallback = computed(() => this.defaults.radius ?? 'md', ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.radius() ?? this.fallback(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    radiusDefaultVar = computed(() => {
+        const radius = this.fallback();
+        return radius === 'md' ? 'var(--nb-radius)' : nbRadiusValue(radius);
+    }, ...(ngDevMode ? [{ debugName: "radiusDefaultVar" }] : /* istanbul ignore next */ []));
+    radiusTokenVar = computed(() => `var(--nb-${this.namespace}-radius, var(--_nb-radius-default))`, ...(ngDevMode ? [{ debugName: "radiusTokenVar" }] : /* istanbul ignore next */ []));
+    radiusInputStyle = computed(() => {
+        const radius = this.radius();
+        return radius ? nbRadiusValue(radius) : null;
+    }, ...(ngDevMode ? [{ debugName: "radiusInputStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbRadiusCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbRadiusCapability, isStandalone: true, selector: "[nbRadiusCapability]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-radius-default": "radiusDefaultVar()", "style.--nb-radius-token": "radiusTokenVar()", "style.border-radius": "radiusInputStyle()", "attr.data-radius": "resolved()" }, classAttribute: "nb-radius" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbRadiusCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbRadiusCapability]',
+                    host: {
+                        class: 'nb-radius',
+                        '[style.--_nb-radius-default]': 'radiusDefaultVar()',
+                        '[style.--nb-radius-token]': 'radiusTokenVar()',
+                        '[style.border-radius]': 'radiusInputStyle()',
+                        '[attr.data-radius]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Defaults and scoped public
+ * tokens flow through marker CSS; explicit inputs write the final property.
+ */
+class NbShadowCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    fallback = computed(() => this.defaults.shadow ?? 'default', ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.shadow() ?? this.fallback(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    shadowDefaultVar = computed(() => nbShadowValue(this.fallback()), ...(ngDevMode ? [{ debugName: "shadowDefaultVar" }] : /* istanbul ignore next */ []));
+    shadowTokenVar = computed(() => `var(--nb-${this.namespace}-shadow, var(--_nb-shadow-default))`, ...(ngDevMode ? [{ debugName: "shadowTokenVar" }] : /* istanbul ignore next */ []));
+    shadowInputStyle = computed(() => {
+        const shadow = this.shadow();
+        return shadow ? nbShadowValue(shadow) : null;
+    }, ...(ngDevMode ? [{ debugName: "shadowInputStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbShadowCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbShadowCapability, isStandalone: true, selector: "[nbShadowCapability]", inputs: { shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-shadow-default": "shadowDefaultVar()", "style.--nb-shadow-token": "shadowTokenVar()", "style.box-shadow": "shadowInputStyle()", "attr.data-shadow": "resolved()" }, classAttribute: "nb-shadow" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbShadowCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbShadowCapability]',
+                    host: {
+                        class: 'nb-shadow',
+                        '[style.--_nb-shadow-default]': 'shadowDefaultVar()',
+                        '[style.--nb-shadow-token]': 'shadowTokenVar()',
+                        '[style.box-shadow]': 'shadowInputStyle()',
+                        '[attr.data-shadow]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Defaults and scoped public
+ * tokens flow through marker CSS; explicit inputs write the final property.
+ * Border color is owned by the tone capability.
+ */
+class NbBorderCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    border = input(undefined, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    fallback = computed(() => this.defaults.border ?? 'default', ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.border() ?? this.fallback(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    borderWidthDefaultVar = computed(() => nbBorderWidthValue(this.fallback()), ...(ngDevMode ? [{ debugName: "borderWidthDefaultVar" }] : /* istanbul ignore next */ []));
+    borderWidthTokenVar = computed(() => `var(--nb-${this.namespace}-border-width, var(--_nb-border-width-default))`, ...(ngDevMode ? [{ debugName: "borderWidthTokenVar" }] : /* istanbul ignore next */ []));
+    borderWidthInputStyle = computed(() => {
+        const border = this.border();
+        return border ? nbBorderWidthValue(border) : null;
+    }, ...(ngDevMode ? [{ debugName: "borderWidthInputStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbBorderCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbBorderCapability, isStandalone: true, selector: "[nbBorderCapability]", inputs: { border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-border-width-default": "borderWidthDefaultVar()", "style.--nb-border-width-token": "borderWidthTokenVar()", "style.border-width": "borderWidthInputStyle()", "attr.data-border": "resolved()" }, classAttribute: "nb-border-width" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbBorderCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbBorderCapability]',
+                    host: {
+                        class: 'nb-border-width',
+                        '[style.--_nb-border-width-default]': 'borderWidthDefaultVar()',
+                        '[style.--nb-border-width-token]': 'borderWidthTokenVar()',
+                        '[style.border-width]': 'borderWidthInputStyle()',
+                        '[attr.data-border]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Defaults and scoped public
+ * tokens flow through marker CSS; explicit inputs write the final property.
+ */
+class NbPaddingCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    padding = input(undefined, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    fallback = computed(() => this.defaults.padding ?? 'md', ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.padding() ?? this.fallback(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    paddingDefaultVar = computed(() => nbPaddingValue(this.fallback()), ...(ngDevMode ? [{ debugName: "paddingDefaultVar" }] : /* istanbul ignore next */ []));
+    paddingTokenVar = computed(() => `var(--nb-${this.namespace}-padding, var(--_nb-padding-default))`, ...(ngDevMode ? [{ debugName: "paddingTokenVar" }] : /* istanbul ignore next */ []));
+    paddingInputStyle = computed(() => {
+        const padding = this.padding();
+        return padding ? nbPaddingValue(padding) : null;
+    }, ...(ngDevMode ? [{ debugName: "paddingInputStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbPaddingCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbPaddingCapability, isStandalone: true, selector: "[nbPaddingCapability]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-padding-default": "paddingDefaultVar()", "style.--nb-padding-token": "paddingTokenVar()", "style.padding": "paddingInputStyle()", "attr.data-padding": "resolved()" }, classAttribute: "nb-padding" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbPaddingCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbPaddingCapability]',
+                    host: {
+                        class: 'nb-padding',
+                        '[style.--_nb-padding-default]': 'paddingDefaultVar()',
+                        '[style.--nb-padding-token]': 'paddingTokenVar()',
+                        '[style.padding]': 'paddingInputStyle()',
+                        '[attr.data-padding]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Defaults and scoped public
+ * tokens flow through marker CSS; explicit inputs write the final property.
+ */
+class NbGapCapability {
+    namespace = inject(NB_STYLE_NAMESPACE);
+    defaults = inject(NB_STYLE_DEFAULTS);
+    gap = input(undefined, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    fallback = computed(() => this.defaults.gap ?? 'md', ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => this.gap() ?? this.fallback(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    gapDefaultVar = computed(() => nbSpacingValue(this.fallback()), ...(ngDevMode ? [{ debugName: "gapDefaultVar" }] : /* istanbul ignore next */ []));
+    gapInputVar = computed(() => {
+        const gap = this.gap();
+        return gap ? nbSpacingValue(gap) : null;
+    }, ...(ngDevMode ? [{ debugName: "gapInputVar" }] : /* istanbul ignore next */ []));
+    gapResolvedVar = computed(() => `var(--_nb-gap-input, var(--nb-${this.namespace}-gap, var(--_nb-gap-default)))`, ...(ngDevMode ? [{ debugName: "gapResolvedVar" }] : /* istanbul ignore next */ []));
+    gapInputStyle = computed(() => {
+        const gap = this.gap();
+        return gap ? nbSpacingValue(gap) : null;
+    }, ...(ngDevMode ? [{ debugName: "gapInputStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbGapCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbGapCapability, isStandalone: true, selector: "[nbGapCapability]", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_nb-gap-input": "gapInputVar()", "style.--_nb-gap-default": "gapDefaultVar()", "style.--_nb-gap-resolved": "gapResolvedVar()", "style.gap": "gapInputStyle()", "attr.data-gap": "resolved()" }, classAttribute: "nb-gap" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbGapCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbGapCapability]',
+                    host: {
+                        class: 'nb-gap',
+                        '[style.--_nb-gap-input]': 'gapInputVar()',
+                        '[style.--_nb-gap-default]': 'gapDefaultVar()',
+                        '[style.--_nb-gap-resolved]': 'gapResolvedVar()',
+                        '[style.gap]': 'gapInputStyle()',
+                        '[attr.data-gap]': 'resolved()',
+                    },
+                }]
+        }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Handles the three underline
+ * inputs shared by nbText and nbDisplay: the variant (none/bar/wave), the gap
+ * between text baseline and the decoration, and the decoration width.
+ *
+ * Writes `data-underline`, `--nb-underline-gap`, and `--nb-underline-width`
+ * onto the host when the Angular inputs are present so the underline CSS in the
+ * theme can read them without each text primitive re-implementing the same
+ * computed chain.
+ */
+class NbUnderlineCapability {
+    element = inject(ElementRef);
+    writtenCustomProperties = new Set();
+    underline = input('none', ...(ngDevMode ? [{ debugName: "underline" }] : /* istanbul ignore next */ []));
+    underlineGap = input(undefined, ...(ngDevMode ? [{ debugName: "underlineGap" }] : /* istanbul ignore next */ []));
+    underlineWidth = input(undefined, ...(ngDevMode ? [{ debugName: "underlineWidth" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.syncCustomProperty('--nb-underline-gap', this.underlineGapValue());
+        });
+        effect(() => {
+            this.syncCustomProperty('--nb-underline-width', this.underlineWidthValue());
+        });
+    }
+    underlineAttr = computed(() => {
+        const u = this.underline();
+        return u === 'none' ? null : u;
+    }, ...(ngDevMode ? [{ debugName: "underlineAttr" }] : /* istanbul ignore next */ []));
+    underlineGapValue = computed(() => {
+        const gap = this.underlineGap();
+        return gap ? nbUnderlineGapValue(gap) : null;
+    }, ...(ngDevMode ? [{ debugName: "underlineGapValue" }] : /* istanbul ignore next */ []));
+    underlineWidthValue = computed(() => {
+        const width = this.underlineWidth();
+        return width ? nbUnderlineWidthValue(width) : null;
+    }, ...(ngDevMode ? [{ debugName: "underlineWidthValue" }] : /* istanbul ignore next */ []));
+    syncCustomProperty(name, value) {
+        const style = this.element.nativeElement.style;
+        if (value !== null) {
+            style.setProperty(name, value);
+            this.writtenCustomProperties.add(name);
+            return;
+        }
+        if (this.writtenCustomProperties.has(name)) {
+            style.removeProperty(name);
+            this.writtenCustomProperties.delete(name);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbUnderlineCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbUnderlineCapability, isStandalone: true, selector: "[nbUnderlineCapability]", inputs: { underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, underlineGap: { classPropertyName: "underlineGap", publicName: "underlineGap", isSignal: true, isRequired: false, transformFunction: null }, underlineWidth: { classPropertyName: "underlineWidth", publicName: "underlineWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-underline": "underlineAttr()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbUnderlineCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbUnderlineCapability]',
+                    host: {
+                        '[attr.data-underline]': 'underlineAttr()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }], underlineGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineGap", required: false }] }], underlineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "underlineWidth", required: false }] }] } });
+
+/**
+ * INTERNAL capability — not part of the public API. Marks the host for a
+ * low-specificity stylesheet margin reset when `reset` is true (the default),
+ * so browser-default margins on `<p>`, `<h1>`–`<h6>`, and other typographic
+ * elements don't interfere with layout-primitive spacing (nbStack, nbCluster,
+ * etc.).
+ *
+ * Shared by nbText and nbDisplay so neither primitive re-implements the same
+ * one-line computed.
+ */
+class NbResetMarginCapability {
+    reset = input(true, { ...(ngDevMode ? { debugName: "reset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbResetMarginCapability, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbResetMarginCapability, isStandalone: true, selector: "[nbResetMarginCapability]", inputs: { reset: { classPropertyName: "reset", publicName: "reset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-nb-reset-margin": "reset() ? \"\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbResetMarginCapability, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbResetMarginCapability]',
+                    host: {
+                        '[attr.data-nb-reset-margin]': 'reset() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { reset: [{ type: i0.Input, args: [{ isSignal: true, alias: "reset", required: false }] }] } });
+
+// INTERNAL barrel. Consumed by library primitives only — NOT re-exported from
+// the package entry point (`libs/ui/src/index.ts`). Capability directives are an
+// internal composition mechanism; users compose the public primitives instead.
+
 class NbCheckbox {
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     classes = computed(() => nbClass('[--nb-checkbox-bg:var(--nb-main)]', '[--nb-checkbox-fg:#fff]', '[--nb-checkbox-border:var(--nb-border)]', '[--nb-checkbox-radius:0]', 'peer grid shrink-0 cursor-pointer appearance-none place-content-center', 'rounded-(--nb-checkbox-radius) outline-2 outline-(--nb-checkbox-border) ring-offset-white', 'checked:bg-(--nb-checkbox-bg) checked:text-(--nb-checkbox-fg)', 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-(--nb-checkbox-border) focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed', this.sizeClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     sizeClass() {
         const map = {
-            default: 'size-4',
+            md: 'size-4',
             sm: 'size-3.5',
             lg: 'size-5',
         };
@@ -99,14 +615,25 @@ class NbAccordionItem {
     triggerId = `neo-accordion-trigger-${this.id}`;
     contentId = `neo-accordion-content-${this.id}`;
     open = computed(() => this.accordion.isItemOpen(this.value()), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    classes = computed(() => nbClass('[--nb-accordion-item-bg:var(--nb-surface)]', '[--nb-accordion-item-fg:var(--nb-surface-foreground)]', '[--nb-accordion-item-border:var(--nb-border)]', '[--nb-accordion-item-radius:var(--nb-radius)]', '[--nb-accordion-item-shadow:var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]', 'overflow-hidden rounded-(--nb-accordion-item-radius)', 'border-2 border-(--nb-accordion-item-border)', 'bg-(--nb-accordion-item-bg) text-(--nb-accordion-item-fg)', 'shadow-[var(--nb-accordion-item-shadow)]', this.disabled() && 'opacity-50'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('overflow-hidden rounded-[var(--nb-radius-token,var(--_nb-radius-default))]', 'border-[length:var(--nb-border-width-token,var(--_nb-border-width-default))]', 'nb-tone', 'shadow-[var(--nb-shadow-token,var(--_nb-shadow-default))]', this.disabled() && 'opacity-50'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     toggle() {
         if (!this.disabled()) {
             this.accordion.toggleItem(this.value());
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbAccordionItem, isStandalone: true, selector: "nb-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "\"vertical\"" }, classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbAccordionItem, isStandalone: true, selector: "nb-accordion-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "\"vertical\"" }, classAttribute: "block" }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'accordion-item' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'surface',
+                    radius: 'md',
+                    shadow: 'default',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
     <div [class]="classes()">
       <ng-content />
     </div>
@@ -121,6 +648,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <ng-content />
     </div>
   `,
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'accordion-item' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'surface',
+                                radius: 'md',
+                                shadow: 'default',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
                         class: 'block',
                         '[attr.data-state]': 'open() ? "open" : "closed"',
@@ -246,7 +791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class NbAccordionTrigger {
     item = inject(NbAccordionItem);
-    triggerClasses = computed(() => nbClass('[--nb-accordion-trigger-bg:var(--nb-main)]', '[--nb-accordion-trigger-fg:var(--nb-main-foreground)]', 'flex min-h-14 flex-1 items-center justify-between gap-4', 'w-full bg-(--nb-accordion-trigger-bg) p-4 text-left text-base font-bold', 'text-(--nb-accordion-trigger-fg) transition-all duration-200', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-(--nb-accordion-item-border) focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.item.open() && 'border-b-2 border-(--nb-accordion-item-border)'), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => nbClass('[--nb-accordion-trigger-bg:var(--nb-main)]', '[--nb-accordion-trigger-fg:var(--nb-main-foreground)]', 'flex min-h-14 flex-1 items-center justify-between gap-4', 'w-full bg-(--nb-accordion-trigger-bg) p-4 text-left text-base font-bold', 'text-(--nb-accordion-trigger-fg) transition-all duration-200', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-[var(--_nb-tone-border-color-token,var(--_nb-tone-border-color-default))] focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', this.item.open() &&
+        'border-b-[length:var(--nb-border-width-token,var(--_nb-border-width-default))] border-b-[var(--_nb-tone-border-color-token,var(--_nb-tone-border-color-default))]'), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NbAccordionTrigger, isStandalone: true, selector: "nb-accordion-trigger", ngImport: i0, template: `
     <h3 class="flex">
@@ -303,70 +849,293 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+const sizeMap$3 = {
+    sm: 'h-9 px-3 text-sm gap-1.5',
+    md: 'h-11 px-4 text-base gap-2',
+    lg: 'h-[3.25rem] px-5 text-lg gap-2.5',
+    xl: 'h-14 px-4 text-xl gap-3',
+};
 class NbButton {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    shadow = input('default', ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
-    classes = computed(() => nbClass('inline-flex items-center justify-center whitespace-nowrap select-none', 'gap-2', 'font-bold', '[--nb-button-bg:var(--nb-main)]', '[--nb-button-fg:var(--nb-main-foreground)]', '[--nb-button-border:var(--nb-border)]', '[--nb-button-radius:var(--nb-radius)]', '[--nb-button-shadow:var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]', 'bg-(--nb-button-bg) text-(--nb-button-fg)', 'rounded-(--nb-button-radius)', 'border-2 border-(--nb-button-border)', 'shadow-[var(--nb-button-shadow)]', 'transition-all duration-150 ease-out', '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--nb-border) focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none', 'aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none', this.variantClass(), this.shadowClass(), this.sizeClass(), this.fullWidth() && 'w-full'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    variantClass() {
-        const variant = this.variant();
-        const map = {
-            default: '',
-            neutral: '[--nb-button-bg:var(--nb-background)] [--nb-button-fg:var(--nb-foreground)]',
-            primary: '[--nb-button-bg:var(--nb-primary)] [--nb-button-fg:var(--nb-primary-foreground)]',
-            secondary: '[--nb-button-bg:var(--nb-secondary)] [--nb-button-fg:var(--nb-secondary-foreground)]',
-            accent: '[--nb-button-bg:var(--nb-accent)] [--nb-button-fg:var(--nb-accent-foreground)]',
-            danger: '[--nb-button-bg:var(--nb-danger)] [--nb-button-fg:var(--nb-danger-foreground)]',
-            success: '[--nb-button-bg:var(--nb-success)] [--nb-button-fg:var(--nb-success-foreground)]',
-            warning: '[--nb-button-bg:var(--nb-warning)] [--nb-button-fg:var(--nb-warning-foreground)]',
-        };
-        return map[variant];
-    }
+    press = input('push', ...(ngDevMode ? [{ debugName: "press" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => nbClass('inline-flex items-center justify-center whitespace-nowrap select-none font-bold', 'transition-all duration-150 ease-out', '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--nb-border) focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none', 'aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none', this.shadowClass(), this.sizeClass(), this.fullWidth() && 'w-full'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     shadowClass() {
         const map = {
-            default: 'hover:translate-x-(--nb-shadow-offset-x) hover:translate-y-(--nb-shadow-offset-y) hover:shadow-none',
-            none: '[--nb-button-shadow:none]',
-            reverse: '[--nb-button-shadow:none] hover:-translate-x-(--nb-reverse-shadow-offset-x) hover:-translate-y-(--nb-reverse-shadow-offset-y) hover:shadow-[var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]',
+            push: 'hover:translate-x-(--nb-shadow-offset-x) hover:translate-y-(--nb-shadow-offset-y) hover:shadow-none',
+            reverse: 'hover:-translate-x-(--nb-reverse-shadow-offset-x) hover:-translate-y-(--nb-reverse-shadow-offset-y)',
+            none: '',
         };
-        return map[this.shadow()];
+        return map[this.press()];
     }
     sizeClass() {
-        const map = {
-            default: 'h-10 px-4 py-2 text-sm',
-            sm: 'h-9 px-3 text-sm',
-            lg: 'h-11 px-8 text-sm',
-            icon: 'size-10',
-        };
-        return map[this.size()];
+        return sizeMap$3[this.size()];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbButton, isStandalone: true, selector: "button[nbButton], a[nbButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()", "attr.data-shadow": "shadow()", "attr.data-size": "size()", "attr.data-full-width": "fullWidth() ? \"\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbButton, isStandalone: true, selector: "button[nbButton], a[nbButton]", inputs: { press: { classPropertyName: "press", publicName: "press", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-press": "press()", "attr.data-size": "size()", "attr.data-full-width": "fullWidth() ? \"\" : null" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'button' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'primary',
+                    radius: 'md',
+                    shadow: 'default',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[nbButton], a[nbButton]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'button' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'primary',
+                                radius: 'md',
+                                shadow: 'default',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
                         '[class]': 'classes()',
-                        '[attr.data-variant]': 'variant()',
-                        '[attr.data-shadow]': 'shadow()',
+                        '[attr.data-press]': 'press()',
                         '[attr.data-size]': 'size()',
                         '[attr.data-full-width]': 'fullWidth() ? "" : null',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+        }], propDecorators: { press: [{ type: i0.Input, args: [{ isSignal: true, alias: "press", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+
+const sizeMap$2 = {
+    xs: '0.75rem',
+    sm: '1rem',
+    md: '1.25rem',
+    lg: '1.5rem',
+    xl: '2rem',
+};
+const toneMap$1 = {
+    current: 'currentColor',
+    default: 'var(--nb-foreground)',
+    muted: 'color-mix(in srgb, var(--nb-foreground) 75%, transparent)',
+    inverse: 'var(--nb-background)',
+    primary: 'var(--nb-primary)',
+    secondary: 'var(--nb-secondary)',
+    accent: 'var(--nb-accent)',
+    danger: 'var(--nb-danger)',
+    success: 'var(--nb-success)',
+    warning: 'var(--nb-warning)',
+};
+class NbIcon {
+    src = input.required(...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    mode = input('mask', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    tone = input('current', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    decorative = input(false, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hasWarnedAboutMissingA11y = false;
+    sizeValue = computed(() => sizeMap$2[this.size()], ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    toneValue = computed(() => toneMap$1[this.tone()], ...(ngDevMode ? [{ debugName: "toneValue" }] : /* istanbul ignore next */ []));
+    srcValue = computed(() => `url("${this.src()}")`, ...(ngDevMode ? [{ debugName: "srcValue" }] : /* istanbul ignore next */ []));
+    isMaskMode = computed(() => this.mode() === 'mask', ...(ngDevMode ? [{ debugName: "isMaskMode" }] : /* istanbul ignore next */ []));
+    isImageMode = computed(() => this.mode() === 'image', ...(ngDevMode ? [{ debugName: "isImageMode" }] : /* istanbul ignore next */ []));
+    roleValue = computed(() => !this.decorative() && this.label() ? 'img' : null, ...(ngDevMode ? [{ debugName: "roleValue" }] : /* istanbul ignore next */ []));
+    ariaHiddenValue = computed(() => this.decorative() ? 'true' : null, ...(ngDevMode ? [{ debugName: "ariaHiddenValue" }] : /* istanbul ignore next */ []));
+    ariaLabelValue = computed(() => this.decorative() ? null : this.label(), ...(ngDevMode ? [{ debugName: "ariaLabelValue" }] : /* istanbul ignore next */ []));
+    backgroundColorValue = computed(() => this.isMaskMode() ? 'var(--nb-icon-color, currentColor)' : null, ...(ngDevMode ? [{ debugName: "backgroundColorValue" }] : /* istanbul ignore next */ []));
+    backgroundImageValue = computed(() => this.isImageMode() ? this.srcValue() : null, ...(ngDevMode ? [{ debugName: "backgroundImageValue" }] : /* istanbul ignore next */ []));
+    backgroundSizeValue = computed(() => this.isImageMode() ? 'contain' : null, ...(ngDevMode ? [{ debugName: "backgroundSizeValue" }] : /* istanbul ignore next */ []));
+    backgroundPositionValue = computed(() => this.isImageMode() ? 'center' : null, ...(ngDevMode ? [{ debugName: "backgroundPositionValue" }] : /* istanbul ignore next */ []));
+    backgroundRepeatValue = computed(() => this.isImageMode() ? 'no-repeat' : null, ...(ngDevMode ? [{ debugName: "backgroundRepeatValue" }] : /* istanbul ignore next */ []));
+    maskImageValue = computed(() => this.isMaskMode() ? this.srcValue() : null, ...(ngDevMode ? [{ debugName: "maskImageValue" }] : /* istanbul ignore next */ []));
+    maskSizeValue = computed(() => this.isMaskMode() ? 'contain' : null, ...(ngDevMode ? [{ debugName: "maskSizeValue" }] : /* istanbul ignore next */ []));
+    maskPositionValue = computed(() => this.isMaskMode() ? 'center' : null, ...(ngDevMode ? [{ debugName: "maskPositionValue" }] : /* istanbul ignore next */ []));
+    maskRepeatValue = computed(() => this.isMaskMode() ? 'no-repeat' : null, ...(ngDevMode ? [{ debugName: "maskRepeatValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (isDevMode()) {
+            effect(() => {
+                if (!this.hasWarnedAboutMissingA11y &&
+                    !this.decorative() &&
+                    !this.label()) {
+                    console.warn('[ng-brutalism] nbIcon should be marked decorative or given a label.');
+                    this.hasWarnedAboutMissingA11y = true;
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbIcon, isStandalone: true, selector: "[nbIcon]", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-nb-icon": "\"\"", "attr.data-size": "size()", "attr.data-tone": "tone()", "attr.data-mode": "mode()", "attr.role": "roleValue()", "attr.aria-hidden": "ariaHiddenValue()", "attr.aria-label": "ariaLabelValue()", "style.--nb-icon-color": "toneValue()", "style.display": "\"inline-block\"", "style.width": "sizeValue()", "style.height": "sizeValue()", "style.flex-shrink": "\"0\"", "style.vertical-align": "\"middle\"", "style.color": "toneValue()", "style.background-color": "backgroundColorValue()", "style.background-image": "backgroundImageValue()", "style.background-size": "backgroundSizeValue()", "style.background-position": "backgroundPositionValue()", "style.background-repeat": "backgroundRepeatValue()", "style.mask-image": "maskImageValue()", "style.-webkit-mask-image": "maskImageValue()", "style.mask-size": "maskSizeValue()", "style.-webkit-mask-size": "maskSizeValue()", "style.mask-position": "maskPositionValue()", "style.-webkit-mask-position": "maskPositionValue()", "style.mask-repeat": "maskRepeatValue()", "style.-webkit-mask-repeat": "maskRepeatValue()" } }, exportAs: ["nbIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbIcon]',
+                    standalone: true,
+                    exportAs: 'nbIcon',
+                    host: {
+                        '[attr.data-nb-icon]': '""',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.role]': 'roleValue()',
+                        '[attr.aria-hidden]': 'ariaHiddenValue()',
+                        '[attr.aria-label]': 'ariaLabelValue()',
+                        '[style.--nb-icon-color]': 'toneValue()',
+                        '[style.display]': '"inline-block"',
+                        '[style.width]': 'sizeValue()',
+                        '[style.height]': 'sizeValue()',
+                        '[style.flex-shrink]': '"0"',
+                        '[style.vertical-align]': '"middle"',
+                        '[style.color]': 'toneValue()',
+                        '[style.background-color]': 'backgroundColorValue()',
+                        '[style.background-image]': 'backgroundImageValue()',
+                        '[style.background-size]': 'backgroundSizeValue()',
+                        '[style.background-position]': 'backgroundPositionValue()',
+                        '[style.background-repeat]': 'backgroundRepeatValue()',
+                        '[style.mask-image]': 'maskImageValue()',
+                        '[style.-webkit-mask-image]': 'maskImageValue()',
+                        '[style.mask-size]': 'maskSizeValue()',
+                        '[style.-webkit-mask-size]': 'maskSizeValue()',
+                        '[style.mask-position]': 'maskPositionValue()',
+                        '[style.-webkit-mask-position]': 'maskPositionValue()',
+                        '[style.mask-repeat]': 'maskRepeatValue()',
+                        '[style.-webkit-mask-repeat]': 'maskRepeatValue()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+const iconSizeMap$1 = {
+    sm: '1.5rem',
+    md: '2rem',
+    lg: '2.5rem',
+};
+// Glyph size for the internal `nbIcon`, sized to sit comfortably inside the
+// badge box defined by `size` above (roughly half the box).
+const iconGlyphMap = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+};
+const iconRadiusMap = {
+    none: '0',
+    square: 'var(--nb-radius-sm, 0.25rem)',
+    circle: '999px',
+};
+const iconToneMap = {
+    default: { bg: 'transparent', color: 'currentColor' },
+    inverse: { bg: 'var(--nb-foreground)', color: 'var(--nb-background)' },
+    current: { bg: 'currentColor', color: 'var(--nb-background)' },
+};
+class NbButtonTrailingIcon {
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input(undefined, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    tone = input(undefined, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    push = input('none', ...(ngDevMode ? [{ debugName: "push" }] : /* istanbul ignore next */ []));
+    // Optional icon, given as an SVG/image URL. Rendered through nbIcon in mask
+    // mode so it tints to the badge's foreground color. Omit to project your own
+    // icon as content instead.
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    sizeVal = computed(() => {
+        const s = this.size();
+        return s !== undefined ? iconSizeMap$1[s] : null;
+    }, ...(ngDevMode ? [{ debugName: "sizeVal" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => {
+        const s = this.size();
+        return s !== undefined ? iconGlyphMap[s] : 'sm';
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    radiusVal = computed(() => {
+        const s = this.shape();
+        return s !== undefined ? iconRadiusMap[s] : null;
+    }, ...(ngDevMode ? [{ debugName: "radiusVal" }] : /* istanbul ignore next */ []));
+    bgVal = computed(() => {
+        const t = this.tone();
+        return t !== undefined ? iconToneMap[t].bg : null;
+    }, ...(ngDevMode ? [{ debugName: "bgVal" }] : /* istanbul ignore next */ []));
+    colorVal = computed(() => {
+        const t = this.tone();
+        return t !== undefined ? iconToneMap[t].color : null;
+    }, ...(ngDevMode ? [{ debugName: "colorVal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('[&_svg]:pointer-events-none [&_svg]:shrink-0', this.push() === 'end' && 'ml-auto', this.size() !== undefined && 'inline-flex items-center justify-center shrink-0'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbButtonTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbButtonTrailingIcon, isStandalone: true, selector: "[nbButtonTrailingIcon]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, push: { classPropertyName: "push", publicName: "push", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-button-trailing-icon": "\"\"", "style.width": "sizeVal()", "style.height": "sizeVal()", "style.borderRadius": "radiusVal()", "style.background": "bgVal()", "style.color": "colorVal()" } }, ngImport: i0, template: `
+    @if (icon(); as iconSrc) {
+      <span nbIcon [src]="iconSrc" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NbIcon, selector: "[nbIcon]", inputs: ["src", "mode", "size", "tone", "decorative", "label"], exportAs: ["nbIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbButtonTrailingIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[nbButtonTrailingIcon]',
+                    imports: [NbIcon],
+                    template: `
+    @if (icon(); as iconSrc) {
+      <span nbIcon [src]="iconSrc" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-button-trailing-icon]': '""',
+                        '[style.width]': 'sizeVal()',
+                        '[style.height]': 'sizeVal()',
+                        '[style.borderRadius]': 'radiusVal()',
+                        '[style.background]': 'bgVal()',
+                        '[style.color]': 'colorVal()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], push: [{ type: i0.Input, args: [{ isSignal: true, alias: "push", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 class NbCard {
-    classes = nbClass('[--nb-card-bg:var(--nb-background)]', '[--nb-card-fg:var(--nb-foreground)]', '[--nb-card-border:var(--nb-border)]', '[--nb-card-radius:18px]', '[--nb-card-shadow:var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]', 'flex flex-col gap-6 py-6', 'rounded-(--nb-card-radius) border-2 border-(--nb-card-border)', 'bg-(--nb-card-bg) text-(--nb-card-fg)', 'shadow-[var(--nb-card-shadow)] font-medium');
+    classes = nbClass('flex flex-col gap-6 py-6', 'font-medium');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NbCard, isStandalone: true, selector: "nb-card", host: { properties: { "class": "classes", "attr.data-slot": "\"card\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NbCard, isStandalone: true, selector: "nb-card", host: { properties: { "class": "classes", "attr.data-slot": "\"card\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'card' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'background',
+                    radius: 'lg',
+                    shadow: 'default',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCard, decorators: [{
             type: Component,
             args: [{
                     selector: 'nb-card',
                     template: `<ng-content />`,
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'card' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'background',
+                                radius: 'lg',
+                                shadow: 'default',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
                         '[class]': 'classes',
                         '[attr.data-slot]': '"card"',
@@ -482,10 +1251,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class NbImageCard {
     image = input.required(...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
     alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    classes = nbClass('[--nb-image-card-bg:var(--nb-background)]', '[--nb-image-card-fg:var(--nb-foreground)]', '[--nb-image-card-border:var(--nb-border)]', '[--nb-image-card-radius:var(--nb-radius)]', '[--nb-image-card-shadow:var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]', 'flex flex-col overflow-hidden', 'rounded-(--nb-image-card-radius) border-2 border-(--nb-image-card-border)', 'bg-(--nb-image-card-bg) text-(--nb-image-card-fg)', 'shadow-[var(--nb-image-card-shadow)] font-medium');
+    classes = nbClass('flex flex-col overflow-hidden', 'font-medium');
     imageClasses = nbClass('block w-full h-auto');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbImageCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbImageCard, isStandalone: true, selector: "nb-image-card", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "classes", "attr.data-slot": "\"image-card\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbImageCard, isStandalone: true, selector: "nb-image-card", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "classes", "attr.data-slot": "\"image-card\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'image-card' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'background',
+                    radius: 'md',
+                    shadow: 'default',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
     <img
       [src]="image()"
       [alt]="alt()"
@@ -510,6 +1290,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     />
     <ng-content select="nb-image-card-caption" />
   `,
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'image-card' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'background',
+                                radius: 'md',
+                                shadow: 'default',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
                         '[class]': 'classes',
                         '[attr.data-slot]': '"image-card"',
@@ -518,7 +1316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }] } });
 class NbImageCardCaption {
-    classes = nbClass('border-t-2 border-(--nb-image-card-border)', 'px-6 py-4 text-center font-bold text-base');
+    classes = nbClass('border-t-[length:var(--nb-border-width-token,var(--_nb-border-width-default))] border-t-[var(--_nb-tone-border-color-token,var(--_nb-tone-border-color-default))]', 'px-6 py-4 text-center font-bold text-base');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbImageCardCaption, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NbImageCardCaption, isStandalone: true, selector: "nb-image-card-caption", host: { properties: { "class": "classes", "attr.data-slot": "\"image-card-caption\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -653,7 +1451,7 @@ const NB_INPUT_PREFIX = new InjectionToken('NB_INPUT_PREFIX');
 const NB_INPUT_SUFFIX = new InjectionToken('NB_INPUT_SUFFIX');
 
 class NbInput {
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     group = inject(NB_INPUT_GROUP, { optional: true });
     classes = computed(() => {
         const inGroup = this.group !== null;
@@ -702,7 +1500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class NbTitle {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NbTitle, isStandalone: true, selector: "[nbTitle]", host: { properties: { "attr.data-nb-title": "\"\"" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NbTitle, isStandalone: true, selector: "[nbTitle]", host: { properties: { "attr.data-nb-title": "\"\"", "attr.data-underline": "\"wave\"" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbTitle, decorators: [{
             type: Directive,
@@ -710,12 +1508,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[nbTitle]',
                     host: {
                         '[attr.data-nb-title]': '""',
+                        '[attr.data-underline]': '"wave"',
                     },
                 }]
         }] });
 
+const SIZE_MAP = {
+    sm: '2rem',
+    md: '3rem',
+    lg: '3.75rem',
+    xl: '4.75rem',
+};
+// Fluid scale: each size becomes a viewport-based clamp whose max matches the
+// fixed size above. Viewport units (vw) are used rather than container query
+// units so the scale is safe with or without an explicit container — the
+// library owns the min/preferred/max formula; users only opt in with `fluid`.
+const FLUID_MAP = {
+    sm: 'clamp(1.75rem, 1.2rem + 2.75vw, 2rem)',
+    md: 'clamp(2.25rem, 1.5rem + 3.75vw, 3rem)',
+    lg: 'clamp(2.75rem, 1.8rem + 4.75vw, 3.75rem)',
+    xl: 'clamp(3.25rem, 2rem + 6.25vw, 4.75rem)',
+};
+const TRACKING_MAP = {
+    normal: '0',
+    tight: '-0.025em',
+    tighter: '-0.08em',
+};
+const LEADING_MAP = {
+    none: '1',
+    tight: '0.9',
+    display: '0.84',
+};
+class NbDisplay {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    weight = input('black', ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    tracking = input('tight', ...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
+    leading = input('none', ...(ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []));
+    // underline / underlineGap / underlineWidth / reset → composed capabilities
+    fontSize = computed(() => {
+        const base = this.fluid() ? FLUID_MAP[this.size()] : SIZE_MAP[this.size()];
+        return `var(--nb-display-size, ${base})`;
+    }, ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    weightValue = computed(() => nbFontWeightValue(this.weight()), ...(ngDevMode ? [{ debugName: "weightValue" }] : /* istanbul ignore next */ []));
+    trackingValue = computed(() => TRACKING_MAP[this.tracking()], ...(ngDevMode ? [{ debugName: "trackingValue" }] : /* istanbul ignore next */ []));
+    leadingValue = computed(() => LEADING_MAP[this.leading()], ...(ngDevMode ? [{ debugName: "leadingValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbDisplay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbDisplay, isStandalone: true, selector: "[nbDisplay]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, tracking: { classPropertyName: "tracking", publicName: "tracking", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.font-size": "fontSize()", "style.font-weight": "weightValue()", "style.color": "\"var(--nb-display-color, currentColor)\"", "style.letter-spacing": "trackingValue()", "style.line-height": "leadingValue()", "attr.data-nb-display": "\"\"" } }, hostDirectives: [{ directive: NbUnderlineCapability, inputs: ["underline", "underline", "underlineGap", "underlineGap", "underlineWidth", "underlineWidth"] }, { directive: NbResetMarginCapability, inputs: ["reset", "reset"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbDisplay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbDisplay]',
+                    hostDirectives: [
+                        // underline variant + optional gap/width overrides → data-underline + CSS vars
+                        {
+                            directive: NbUnderlineCapability,
+                            inputs: ['underline', 'underlineGap', 'underlineWidth'],
+                        },
+                        // reset input → margin: 0 (removes native heading margin)
+                        { directive: NbResetMarginCapability, inputs: ['reset'] },
+                    ],
+                    host: {
+                        '[style.font-size]': 'fontSize()',
+                        '[style.font-weight]': 'weightValue()',
+                        '[style.color]': '"var(--nb-display-color, currentColor)"',
+                        '[style.letter-spacing]': 'trackingValue()',
+                        '[style.line-height]': 'leadingValue()',
+                        '[attr.data-nb-display]': '""',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], tracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracking", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }] } });
+
+/**
+ * Typography context. Picks a font *role* and writes the resolved stack as
+ * `font-family` on the host so every descendant primitive (nbText, nbDisplay,
+ * nbButton, nbChip, nbMediaItemTitle, …) inherits it through the cascade — no
+ * raw font-family strings in templates.
+ *
+ * Precedence falls out of the cascade: a nested context overrides an outer one
+ * (closest wins), and an inline token override (`--nb-font-accent: …`) wins over
+ * the preset because the resolved value reads that token first.
+ *
+ * Also available as the `typography` input on nbSurface, which composes this
+ * directive directly.
+ */
+class NbTypography {
+    font = input('inherit', ...(ngDevMode ? [{ debugName: "font" }] : /* istanbul ignore next */ []));
+    fontValue = computed(() => nbTypographyFontValue(this.font()), ...(ngDevMode ? [{ debugName: "fontValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbTypography, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbTypography, isStandalone: true, selector: "[nbTypography]", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-nb-typography": "font()", "style.--nb-typography-font": "fontValue()", "style.font-family": "fontValue()" } }, exportAs: ["nbTypography"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbTypography, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbTypography]',
+                    exportAs: 'nbTypography',
+                    host: {
+                        '[attr.data-nb-typography]': 'font()',
+                        '[style.--nb-typography-font]': 'fontValue()',
+                        '[style.font-family]': 'fontValue()',
+                    },
+                }]
+        }], propDecorators: { font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }] } });
+
+const THICKNESS = {
+    solid: '2px',
+    dashed: '2px',
+    thick: '4px',
+};
+class NbSeparator {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    isHorizontal = computed(() => this.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+    borderLine = computed(() => {
+        const v = this.variant();
+        const thickness = `var(--nb-separator-thickness, ${THICKNESS[v]})`;
+        const style = v === 'dashed' ? 'dashed' : 'solid';
+        return `${thickness} ${style} var(--nb-separator-color, var(--nb-border))`;
+    }, ...(ngDevMode ? [{ debugName: "borderLine" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbSeparator, isStandalone: true, selector: "hr[nbSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-nb-separator": "\"\"", "attr.aria-orientation": "orientation()", "style.margin": "\"0\"", "style.border-top": "isHorizontal() ? borderLine() : \"none\"", "style.border-bottom": "\"none\"", "style.border-left": "isVertical() ? borderLine() : \"none\"", "style.border-right": "\"none\"", "style.width": "isVertical() ? \"0\" : \"100%\"", "style.height": "isVertical() ? \"auto\" : \"0\"", "style.align-self": "isVertical() ? \"stretch\" : \"auto\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hr[nbSeparator]',
+                    host: {
+                        '[attr.data-nb-separator]': '""',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[style.margin]': '"0"',
+                        '[style.border-top]': 'isHorizontal() ? borderLine() : "none"',
+                        '[style.border-bottom]': '"none"',
+                        '[style.border-left]': 'isVertical() ? borderLine() : "none"',
+                        '[style.border-right]': '"none"',
+                        '[style.width]': 'isVertical() ? "0" : "100%"',
+                        '[style.height]': 'isVertical() ? "auto" : "0"',
+                        '[style.align-self]': 'isVertical() ? "stretch" : "auto"',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
 class NbTextarea {
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     group = inject(NB_INPUT_GROUP, { optional: true });
     classes = computed(() => {
         const inGroup = this.group !== null;
@@ -1134,38 +2070,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NbSelectOption), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 
 class NbBadge {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    classes = computed(() => nbClass('inline-flex items-center rounded-(--nb-badge-radius) border-2 border-(--nb-badge-border)', 'bg-(--nb-badge-bg) text-(--nb-badge-fg)', '[--nb-badge-bg:#fff]', '[--nb-badge-fg:var(--nb-foreground)]', '[--nb-badge-border:var(--nb-border)]', '[--nb-badge-radius:9999px]', '[--nb-badge-shadow:2px_2px_0_var(--nb-shadow)]', 'px-2.5 py-0.5 text-xs font-bold', 'shadow-[var(--nb-badge-shadow)]', this.variantClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    variantClass() {
-        const map = {
-            default: '',
-            secondary: '[--nb-badge-bg:var(--nb-accent)] [--nb-badge-fg:var(--nb-accent-foreground)]',
-            success: '[--nb-badge-bg:var(--nb-success)] [--nb-badge-fg:var(--nb-success-foreground)]',
-            warning: '[--nb-badge-bg:var(--nb-warning)] [--nb-badge-fg:var(--nb-warning-foreground)]',
-            danger: '[--nb-badge-bg:var(--nb-danger)] [--nb-badge-fg:var(--nb-danger-foreground)]',
-        };
-        return map[this.variant()];
-    }
+    classes = nbClass('inline-flex items-center gap-1.5', 'px-2.5 py-0.5 text-xs font-bold');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbBadge, isStandalone: true, selector: "span[nbBadge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-variant": "variant()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NbBadge, isStandalone: true, selector: "span[nbBadge]", host: { properties: { "class": "classes", "attr.data-nb-badge": "\"\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'badge' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'white',
+                    radius: 'full',
+                    shadow: 'sm',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbBadge, decorators: [{
             type: Directive,
             args: [{
                     selector: 'span[nbBadge]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'badge' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'white',
+                                radius: 'full',
+                                shadow: 'sm',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
-                        '[class]': 'classes()',
-                        '[attr.data-variant]': 'variant()',
+                        '[class]': 'classes',
+                        '[attr.data-nb-badge]': '""',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }] });
 
 class NbAvatar {
     src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    classes = nbClass('[--nb-avatar-bg:var(--nb-secondary-background)]', '[--nb-avatar-fg:var(--nb-foreground)]', '[--nb-avatar-border:var(--nb-border)]', '[--nb-avatar-radius:9999px]', '[--nb-avatar-shadow:2px_2px_0_0_var(--nb-shadow)]', 'relative inline-flex h-10 w-10 shrink-0 overflow-hidden', 'rounded-(--nb-avatar-radius) border-2 border-(--nb-avatar-border)', 'bg-(--nb-avatar-bg) text-(--nb-avatar-fg)', 'shadow-[var(--nb-avatar-shadow)]', 'font-bold text-sm items-center justify-center');
+    classes = nbClass('relative inline-flex h-10 w-10 shrink-0 overflow-hidden', 'font-bold text-sm items-center justify-center');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbAvatar, isStandalone: true, selector: "nb-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes", "attr.data-slot": "\"avatar\"", "attr.role": "\"img\"", "attr.aria-label": "alt()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbAvatar, isStandalone: true, selector: "nb-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes", "attr.data-slot": "\"avatar\"", "attr.role": "\"img\"", "attr.aria-label": "alt()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'avatar' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'surface',
+                    radius: 'full',
+                    shadow: 'sm',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
     @if (src()) {
     <img [src]="src()" [alt]="alt()" class="h-full w-full object-cover" />
     } @else {
@@ -1184,6 +2149,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <ng-content />
     }
   `,
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'avatar' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'surface',
+                                radius: 'full',
+                                shadow: 'sm',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: {
                         '[class]': 'classes',
                         '[attr.data-slot]': '"avatar"',
@@ -1194,12 +2177,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }] } });
 
+class NbMediaFrame {
+    ratio = input('auto', ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    fit = input('cover', ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('relative isolate block overflow-hidden', '[&>img]:h-full [&>img]:w-full', '[&>video]:h-full [&>video]:w-full', '[&>picture]:block [&>picture]:h-full [&>picture]:w-full', '[&>picture>img]:h-full [&>picture>img]:w-full', this.ratioClass(), this.fitClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ratioClass() {
+        const map = {
+            auto: '',
+            '1/1': 'aspect-square',
+            '3/4': 'aspect-[3/4]',
+            '4/3': 'aspect-[4/3]',
+            '3/2': 'aspect-[3/2]',
+            '16/9': 'aspect-video',
+            '21/9': 'aspect-[21/9]',
+        };
+        return map[this.ratio()];
+    }
+    fitClass() {
+        const map = {
+            cover: '[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover',
+            contain: '[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain',
+            fill: '[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill',
+        };
+        return map[this.fit()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaFrame, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbMediaFrame, isStandalone: true, selector: "[nbMediaFrame]", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-media-frame": "\"\"", "attr.data-ratio": "ratio()", "attr.data-fit": "fit()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'media-frame' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'default',
+                    radius: 'lg',
+                    shadow: 'none',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaFrame, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbMediaFrame]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'media-frame' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'default',
+                                radius: 'lg',
+                                shadow: 'none',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-media-frame]': '""',
+                        '[attr.data-ratio]': 'ratio()',
+                        '[attr.data-fit]': 'fit()',
+                    },
+                }]
+        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }] } });
+
+class NbStat {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    direction = input('column', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('[--nb-stat-value-size:1.5rem]', '[--nb-stat-label-size:0.625rem]', '[--nb-stat-label-fg:var(--nb-foreground)]', 'inline-flex items-center gap-2', this.direction() === 'row' ? 'flex-row' : 'flex-col'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbStat, isStandalone: true, selector: "nb-stat", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"stat\"" } }, ngImport: i0, template: `
+    <ng-content select="[slot=icon]" />
+    <span class="flex flex-col gap-0.5">
+      <span class="text-[length:var(--nb-stat-value-size)] font-black leading-none tracking-tight">
+        {{ value() }}
+      </span>
+      <span class="text-[length:var(--nb-stat-label-size)] font-bold text-(--nb-stat-label-fg) uppercase tracking-wide">
+        {{ label() }}
+      </span>
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStat, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nb-stat',
+                    template: `
+    <ng-content select="[slot=icon]" />
+    <span class="flex flex-col gap-0.5">
+      <span class="text-[length:var(--nb-stat-value-size)] font-black leading-none tracking-tight">
+        {{ value() }}
+      </span>
+      <span class="text-[length:var(--nb-stat-label-size)] font-bold text-(--nb-stat-label-fg) uppercase tracking-wide">
+        {{ label() }}
+      </span>
+    </span>
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"stat"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
+
+class NbRating {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    count = input(undefined, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    stars = computed(() => Array.from({ length: this.max() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
+    filled = computed(() => Math.round(Math.min(Math.max(this.value(), 0), this.max())), ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => `${this.value()} out of ${this.max()} stars`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    classes = nbClass('[--nb-rating-filled:#f59e0b]', '[--nb-rating-empty:var(--nb-border)]', '[--nb-rating-size:1.25rem]', 'inline-flex items-center gap-0.5');
+    filledClass = nbClass('text-(--nb-rating-filled)', 'text-[length:var(--nb-rating-size)]', 'leading-none');
+    emptyClass = nbClass('text-(--nb-rating-empty)', 'text-[length:var(--nb-rating-size)]', 'leading-none');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbRating, isStandalone: true, selector: "nb-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes", "attr.aria-label": "ariaLabel()", "attr.role": "\"img\"" } }, ngImport: i0, template: `
+    @for (i of stars(); track i) {
+      <span [class]="i <= filled() ? filledClass : emptyClass">{{ i <= filled() ? '★' : '☆' }}</span>
+    }
+    @if (count() !== undefined) {
+      <span class="text-xs font-bold text-(--nb-rating-empty) ml-0.5">({{ count() }})</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbRating, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nb-rating',
+                    template: `
+    @for (i of stars(); track i) {
+      <span [class]="i <= filled() ? filledClass : emptyClass">{{ i <= filled() ? '★' : '☆' }}</span>
+    }
+    @if (count() !== undefined) {
+      <span class="text-xs font-bold text-(--nb-rating-empty) ml-0.5">({{ count() }})</span>
+    }
+  `,
+                    host: {
+                        '[class]': 'classes',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.role]': '"img"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
+
 const NB_DIALOG = new InjectionToken('NB_DIALOG');
 
 class NbDialog {
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     dialogEl = viewChild.required('dialogEl');
-    classes = nbClass('[--nb-dialog-bg:#fff]', '[--nb-dialog-fg:var(--nb-foreground)]', '[--nb-dialog-border:var(--nb-border)]', '[--nb-dialog-radius:0.5rem]', '[--nb-dialog-shadow:8px_8px_0_0_var(--nb-shadow)]', 'w-[calc(100vw-2rem)] max-w-2xl rounded-(--nb-dialog-radius)', 'border-2 border-(--nb-dialog-border)', 'bg-(--nb-dialog-bg) text-(--nb-dialog-fg)', 'shadow-[var(--nb-dialog-shadow)]', 'm-auto p-0 max-h-[90vh] overflow-x-hidden', 'open:flex open:flex-col');
+    classes = nbClass('w-[calc(100vw-2rem)] max-w-2xl', 'nb-tone', 'm-auto p-0 max-h-[90vh] overflow-x-hidden', 'open:flex open:flex-col');
     open() {
         if (this.isBrowser) {
             this.dialogEl().nativeElement.showModal();
@@ -1216,7 +2350,19 @@ class NbDialog {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: NbDialog, isStandalone: true, selector: "nb-dialog", host: { properties: { "attr.data-slot": "\"dialog\"" } }, providers: [{ provide: NB_DIALOG, useExisting: NbDialog }], viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: NbDialog, isStandalone: true, selector: "nb-dialog", host: { properties: { "attr.data-slot": "\"dialog\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'dialog' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'white',
+                    radius: 'sm',
+                    shadow: 'hard',
+                    border: 'default',
+                },
+            },
+            { provide: NB_DIALOG, useExisting: NbDialog },
+        ], viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
     <dialog
       #dialogEl
       data-nb-dialog
@@ -1241,8 +2387,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <ng-content />
     </dialog>
   `,
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'dialog' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'white',
+                                radius: 'sm',
+                                shadow: 'hard',
+                                border: 'default',
+                            },
+                        },
+                        { provide: NB_DIALOG, useExisting: NbDialog },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
                     host: { '[attr.data-slot]': '"dialog"' },
-                    providers: [{ provide: NB_DIALOG, useExisting: NbDialog }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }] } });
@@ -1326,11 +2490,1464 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+const STATUS_DOT_SIZE_MAP = {
+    xs: '8px',
+    sm: '10px',
+    md: '12px',
+    lg: '16px',
+};
+class NbStatusDot {
+    state = input('online', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('inline-block shrink-0 rounded-full border-2 border-(--nb-border)', 'w-(--nb-status-dot-size) h-(--nb-status-dot-size)', this.stateClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => `Status: ${this.state()}`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    sizeVar = computed(() => STATUS_DOT_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "sizeVar" }] : /* istanbul ignore next */ []));
+    stateClass() {
+        const map = {
+            online: 'bg-(--nb-success)',
+            offline: 'bg-(--nb-secondary-background)',
+            live: 'bg-(--nb-danger) animate-pulse',
+        };
+        return map[this.state()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStatusDot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbStatusDot, isStandalone: true, selector: "span[nbStatusDot]", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.--nb-status-dot-size": "sizeVar()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()", "attr.data-state": "state()", "attr.data-size": "size()", "attr.data-nb-status-dot": "\"\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'status-dot' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { radius: 'md' },
+            },
+        ], hostDirectives: [{ directive: NbRadiusCapability, inputs: ["radius", "radius"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStatusDot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[nbStatusDot]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'status-dot' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { radius: 'md' },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.--nb-status-dot-size]': 'sizeVar()',
+                        '[attr.role]': '"img"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-state]': 'state()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-nb-status-dot]': '""',
+                    },
+                }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const paddingMap = {
+    none: 'px-0 py-0',
+    sm: 'px-2 py-0.5',
+    md: 'px-2.5 py-0.5',
+    lg: 'px-4 py-2',
+    xl: 'px-5 py-2.5',
+};
+class NbChip {
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    // Optional leading icon, given as an SVG/image URL. Rendered through nbIcon
+    // in mask mode so it tints to the chip's foreground color. For full-color
+    // or labeled icons, compose an `nbIcon` (or any element) as projected
+    // content instead — the leading slot is only used when `icon` is set.
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('inline-flex items-center gap-1.5', 'text-xs font-bold', paddingMap[this.padding()], '[&_svg]:size-[var(--nb-chip-icon-size,0.75rem)] [&_svg]:shrink-0'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbChip, isStandalone: true, selector: "span[nbChip]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-padding": "padding()", "attr.data-nb-chip": "\"\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'chip' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'default',
+                    radius: 'none',
+                    shadow: 'sm',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
+    @if (icon()) {
+      <span nbIcon [src]="icon()!" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NbIcon, selector: "[nbIcon]", inputs: ["src", "mode", "size", "tone", "decorative", "label"], exportAs: ["nbIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbChip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[nbChip]',
+                    imports: [NbIcon],
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'chip' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'default',
+                                radius: 'none',
+                                shadow: 'sm',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
+                    template: `
+    @if (icon()) {
+      <span nbIcon [src]="icon()!" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-padding]': 'padding()',
+                        '[attr.data-nb-chip]': '""',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
+const chipGroupAlignMap = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+};
+const chipGroupTrackingMap = {
+    tight: '-0.025em',
+    normal: null,
+    wide: '0.025em',
+    wider: '0.05em',
+};
+/**
+ * Layout + shared style context for a set of chips. Owns the row/column layout
+ * (direction, gap, align) and broadcasts chip-level styling — radius, shadow,
+ * text transform, tracking — to every child `nbChip` through CSS variables and
+ * inherited text properties, so chips don't repeat the same inputs. Individual
+ * `nbChip` inputs still override the group (explicit input beats context token).
+ */
+class NbChipGroup {
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    gap = input('sm', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    radius = input(undefined, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    transform = input('none', ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    tracking = input('normal', ...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('flex min-w-0', this.direction() === 'vertical' ? 'flex-col' : 'flex-wrap', chipGroupAlignMap[this.align()]), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    gapValue = computed(() => nbSpacingValue(this.gap()), ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
+    chipRadiusValue = computed(() => {
+        const radius = this.radius();
+        return radius ? nbRadiusValue(radius) : null;
+    }, ...(ngDevMode ? [{ debugName: "chipRadiusValue" }] : /* istanbul ignore next */ []));
+    chipShadowValue = computed(() => {
+        const shadow = this.shadow();
+        return shadow ? nbShadowValue(shadow) : null;
+    }, ...(ngDevMode ? [{ debugName: "chipShadowValue" }] : /* istanbul ignore next */ []));
+    transformValue = computed(() => {
+        const transform = this.transform();
+        return transform === 'none' ? null : transform;
+    }, ...(ngDevMode ? [{ debugName: "transformValue" }] : /* istanbul ignore next */ []));
+    trackingValue = computed(() => chipGroupTrackingMap[this.tracking()], ...(ngDevMode ? [{ debugName: "trackingValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbChipGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbChipGroup, isStandalone: true, selector: "[nbChipGroup]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, tracking: { classPropertyName: "tracking", publicName: "tracking", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.gap": "gapValue()", "style.--nb-chip-radius": "chipRadiusValue()", "style.--nb-chip-shadow": "chipShadowValue()", "style.text-transform": "transformValue()", "style.letter-spacing": "trackingValue()", "attr.data-nb-chip-group": "\"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbChipGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbChipGroup]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.gap]': 'gapValue()',
+                        '[style.--nb-chip-radius]': 'chipRadiusValue()',
+                        '[style.--nb-chip-shadow]': 'chipShadowValue()',
+                        '[style.text-transform]': 'transformValue()',
+                        '[style.letter-spacing]': 'trackingValue()',
+                        '[attr.data-nb-chip-group]': '""',
+                    },
+                }]
+        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], tracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracking", required: false }] }] } });
+
+// Each size sets the square touch target plus a matching glyph size. The glyph
+// size feeds both the projected `<svg>` (via `[&_svg]:size-*`) and the internal
+// `nbIcon` (via `iconSize`) so the two authoring styles render identically.
+const sizeMap$1 = {
+    sm: 'size-8 [&_svg]:size-4',
+    md: 'size-10 [&_svg]:size-5',
+    lg: 'size-12 [&_svg]:size-6',
+    xl: 'size-14 [&_svg]:size-8',
+};
+const iconSizeMap = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+class NbIconButton {
+    shape = input('square', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // Optional icon, given as an SVG/image URL. Rendered through nbIcon in mask
+    // mode so it tints to the button's foreground color and sizes to match the
+    // button. For full-color or custom icons, project an `<svg>`/`nbIcon` as
+    // content instead — the internal slot is only used when `icon` is set.
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => iconSizeMap[this.size()], ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('inline-flex items-center justify-center shrink-0 select-none', 'hover:translate-x-(--nb-shadow-offset-x) hover:translate-y-(--nb-shadow-offset-y) hover:shadow-none', 'transition-all duration-150 ease-out', '[&_svg]:pointer-events-none [&_svg]:shrink-0', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--nb-border) focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none', sizeMap$1[this.size()], this.shape() === 'circle' && 'rounded-full'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbIconButton, isStandalone: true, selector: "button[nbIconButton]", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-shape": "shape()", "attr.data-nb-icon-button": "\"\"" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'icon-button' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'default',
+                    radius: 'none',
+                    shadow: 'default',
+                    border: 'default',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }], ngImport: i0, template: `
+    @if (icon(); as iconSrc) {
+      <span nbIcon [src]="iconSrc" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NbIcon, selector: "[nbIcon]", inputs: ["src", "mode", "size", "tone", "decorative", "label"], exportAs: ["nbIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbIconButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[nbIconButton]',
+                    imports: [NbIcon],
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'icon-button' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'default',
+                                radius: 'none',
+                                shadow: 'default',
+                                border: 'default',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                    ],
+                    template: `
+    @if (icon(); as iconSrc) {
+      <span nbIcon [src]="iconSrc" [size]="iconSize()" decorative></span>
+    }
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-shape]': 'shape()',
+                        '[attr.data-nb-icon-button]': '""',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class NbProgress {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => Math.min(Math.max(this.value(), 0), this.max()), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    percentage = computed(() => (this.clampedValue() / this.max()) * 100, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => nbClass('block h-3 w-full overflow-hidden', 'border-2 border-(--nb-border)', 'bg-(--nb-secondary-background)', 'shadow-[var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_var(--nb-shadow)]'), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    fillClass = computed(() => {
+        const map = {
+            default: 'bg-(--nb-main)',
+            success: 'bg-(--nb-success)',
+            warning: 'bg-(--nb-warning)',
+            danger: 'bg-(--nb-danger)',
+            accent: 'bg-(--nb-accent)',
+        };
+        return map[this.tone()];
+    }, ...(ngDevMode ? [{ debugName: "fillClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbProgress, isStandalone: true, selector: "nb-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.data-tone": "tone()", "attr.data-nb-progress": "\"\"" } }, ngImport: i0, template: `
+    <div
+      role="progressbar"
+      [attr.aria-valuenow]="clampedValue()"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-label]="label() || 'Progress'"
+      class="relative h-full w-full overflow-hidden"
+    >
+      <div
+        class="h-full transition-all duration-300 ease-out"
+        [class]="fillClass()"
+        [style.width.%]="percentage()"
+      ></div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nb-progress',
+                    template: `
+    <div
+      role="progressbar"
+      [attr.aria-valuenow]="clampedValue()"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-label]="label() || 'Progress'"
+      class="relative h-full w-full overflow-hidden"
+    >
+      <div
+        class="h-full transition-all duration-300 ease-out"
+        [class]="fillClass()"
+        [style.width.%]="percentage()"
+      ></div>
+    </div>
+  `,
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.data-nb-progress]': '""',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+class NbAvatarGroup {
+    overflow = input(0, ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbAvatarGroup, isStandalone: true, selector: "nb-avatar-group", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"flex items-center [&>*]:-ml-3 [&>*:first-child]:ml-0\"", "attr.data-nb-avatar-group": "\"\"" } }, ngImport: i0, template: `
+    <ng-content />
+    @if (overflow() > 0) {
+      <span
+        class="relative inline-flex h-10 w-10 shrink-0 items-center justify-center
+               rounded-full border-2 border-(--nb-border) bg-(--nb-surface)
+               font-bold text-xs shadow-[2px_2px_0_0_var(--nb-shadow)]"
+        [attr.aria-label]="overflow() + ' more'"
+      >+{{ overflow() }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbAvatarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nb-avatar-group',
+                    template: `
+    <ng-content />
+    @if (overflow() > 0) {
+      <span
+        class="relative inline-flex h-10 w-10 shrink-0 items-center justify-center
+               rounded-full border-2 border-(--nb-border) bg-(--nb-surface)
+               font-bold text-xs shadow-[2px_2px_0_0_var(--nb-shadow)]"
+        [attr.aria-label]="overflow() + ' more'"
+      >+{{ overflow() }}</span>
+    }
+  `,
+                    host: {
+                        '[class]': '"flex items-center [&>*]:-ml-3 [&>*:first-child]:ml-0"',
+                        '[attr.data-nb-avatar-group]': '""',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }] } });
+
+const NB_STICKER_PATHS = {
+    burst: {
+        viewBox: '0 0 160 160',
+        shadowTransform: 'translate(7 7)',
+        path: `
+      M80 12
+      L96 35
+      L125 23
+      L121 52
+      L149 62
+      L128 80
+      L148 103
+      L117 104
+      L119 139
+      L92 122
+      L76 151
+      L62 121
+      L31 137
+      L36 105
+      L10 101
+      L32 79
+      L14 58
+      L45 50
+      L42 22
+      L68 38
+      Z
+    `,
+    },
+    'burst-wide': {
+        viewBox: '0 0 220 160',
+        shadowTransform: 'translate(8 8)',
+        path: `
+      M108 10
+      L126 38
+      L164 20
+      L162 50
+      L211 58
+      L179 78
+      L211 101
+      L169 105
+      L172 143
+      L135 126
+      L112 153
+      L92 126
+      L53 145
+      L57 108
+      L12 103
+      L43 81
+      L12 59
+      L57 50
+      L53 21
+      L91 39
+      Z
+    `,
+    },
+    star: {
+        viewBox: '65 105 858 780',
+        shadowTransform: 'translate(34 38)',
+        path: `
+      M296 178
+      L512 302
+      L724 182
+      L690 392
+      L884 510
+      L680 610
+      L670 866
+      L482 692
+      L250 788
+      L304 564
+      L120 468
+      L314 386
+      Z
+    `,
+    },
+    splat: {
+        viewBox: '0 0 108 108',
+        shadowTransform: 'translate(6 6)',
+        path: 'M50 5 L61 25 L84 15 L77 39 L97 50 L77 61 L86 86 L61 75 L50 98 L39 76 L15 86 L23 62 L3 50 L24 39 L15 14 L39 25 Z',
+    },
+};
+
+class NbSticker {
+    shape = input('burst', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    tone = input('mint', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    decorative = input(false, { ...(ngDevMode ? { debugName: "decorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    rotate = input(0, { ...(ngDevMode ? { debugName: "rotate" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    size = input(1, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    config = computed(() => NB_STICKER_PATHS[this.shape()], ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    toneTokens = computed(() => {
+        const tokens = nbToneTokens(this.tone());
+        return {
+            fill: tokens.bg,
+            ink: tokens.fg,
+            shadow: 'var(--nb-shadow, #050505)',
+        };
+    }, ...(ngDevMode ? [{ debugName: "toneTokens" }] : /* istanbul ignore next */ []));
+    rotateStyle = computed(() => `${this.rotate()}deg`, ...(ngDevMode ? [{ debugName: "rotateStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSticker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: NbSticker, isStandalone: true, selector: "nb-sticker", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-shape": "shape()", "attr.data-tone": "tone()", "attr.data-nb-sticker": "\"\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.role": "decorative() ? null : \"img\"", "style.--nb-sticker-fill": "toneTokens().fill", "style.--nb-sticker-ink": "toneTokens().ink", "style.--nb-sticker-shadow": "toneTokens().shadow", "style.--nb-sticker-rotate": "rotateStyle()", "style.--nb-sticker-scale": "size()" }, classAttribute: "nb-sticker" }, ngImport: i0, template: `
+    <span class="nb-sticker__root">
+      <svg
+        class="nb-sticker__svg"
+        [attr.viewBox]="config().viewBox"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          class="nb-sticker__shadow"
+          [attr.d]="config().path"
+          [attr.transform]="config().shadowTransform"
+        />
+        <path class="nb-sticker__shape" [attr.d]="config().path" />
+      </svg>
+
+      <span class="nb-sticker__content">
+        <ng-content />
+      </span>
+    </span>
+  `, isInline: true, styles: [":host{--nb-sticker-min-block-size: 8.75rem;--nb-sticker-padding-inline: 3.5rem;--nb-sticker-padding-block: 3rem;--nb-sticker-fill: var(--nb-mint, #9af7b5);--nb-sticker-ink: var(--nb-black, #050505);--nb-sticker-shadow: var(--nb-shadow, var(--nb-black, #050505));--nb-sticker-stroke-width: 5px;--nb-sticker-rotate: -6deg;--nb-sticker-font-size: 1.5rem;display:inline-block;vertical-align:middle}:host([data-shape=\"burst-wide\"]){--nb-sticker-padding-inline: 4rem;--nb-sticker-padding-block: 3rem;--nb-sticker-font-size: 1.5rem}:host([data-shape=\"star\"]){--nb-sticker-min-block-size: 7.5rem;--nb-sticker-padding-inline: 2.5rem;--nb-sticker-padding-block: 2.5rem;--nb-sticker-face-size: 3.5rem;--nb-sticker-rotate: 0deg;--nb-sticker-stroke-width: 5px}:host([data-shape=\"splat\"]){--nb-sticker-size: 6rem;--nb-sticker-shadow-x: 6px;--nb-sticker-shadow-y: 6px;--nb-sticker-stroke-width: 4px;--nb-sticker-rotate: -10deg}.nb-sticker__root{position:relative;isolation:isolate;display:inline-grid;place-items:center;box-sizing:border-box;min-block-size:var(--nb-sticker-min-block-size);inline-size:max-content;block-size:max-content;transform:rotate(var(--nb-sticker-rotate)) scale(var(--nb-sticker-scale, 1));transform-origin:center}:host([data-shape=\"splat\"]) .nb-sticker__root{inline-size:var(--nb-sticker-size);block-size:var(--nb-sticker-size);min-block-size:var(--nb-sticker-size)}.nb-sticker__svg{position:absolute;inset:0;z-index:-1;inline-size:100%;block-size:100%;overflow:visible}.nb-sticker__shadow{fill:var(--nb-sticker-shadow)}:host([data-shape=\"splat\"]) .nb-sticker__shadow{transform:translate(var(--nb-sticker-shadow-x),var(--nb-sticker-shadow-y))}.nb-sticker__shape{fill:var(--nb-sticker-fill);stroke:var(--nb-sticker-ink);stroke-width:var(--nb-sticker-stroke-width);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.nb-sticker__content{color:var(--nb-sticker-ink);display:block;max-width:300px;padding-inline:var(--nb-sticker-padding-inline);padding-block:var(--nb-sticker-padding-block);overflow-wrap:break-word;font-family:var(--nb-font-display, system-ui, sans-serif);font-size:var(--nb-sticker-font-size);font-weight:950;line-height:.9;letter-spacing:0;text-align:center;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}:host([data-shape=\"splat\"]) .nb-sticker__content{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSticker, decorators: [{
+            type: Component,
+            args: [{ selector: 'nb-sticker', template: `
+    <span class="nb-sticker__root">
+      <svg
+        class="nb-sticker__svg"
+        [attr.viewBox]="config().viewBox"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          class="nb-sticker__shadow"
+          [attr.d]="config().path"
+          [attr.transform]="config().shadowTransform"
+        />
+        <path class="nb-sticker__shape" [attr.d]="config().path" />
+      </svg>
+
+      <span class="nb-sticker__content">
+        <ng-content />
+      </span>
+    </span>
+  `, host: {
+                        class: 'nb-sticker',
+                        '[attr.data-shape]': 'shape()',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.data-nb-sticker]': '""',
+                        '[attr.aria-hidden]': 'decorative() ? "true" : null',
+                        '[attr.role]': 'decorative() ? null : "img"',
+                        '[style.--nb-sticker-fill]': 'toneTokens().fill',
+                        '[style.--nb-sticker-ink]': 'toneTokens().ink',
+                        '[style.--nb-sticker-shadow]': 'toneTokens().shadow',
+                        '[style.--nb-sticker-rotate]': 'rotateStyle()',
+                        '[style.--nb-sticker-scale]': 'size()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--nb-sticker-min-block-size: 8.75rem;--nb-sticker-padding-inline: 3.5rem;--nb-sticker-padding-block: 3rem;--nb-sticker-fill: var(--nb-mint, #9af7b5);--nb-sticker-ink: var(--nb-black, #050505);--nb-sticker-shadow: var(--nb-shadow, var(--nb-black, #050505));--nb-sticker-stroke-width: 5px;--nb-sticker-rotate: -6deg;--nb-sticker-font-size: 1.5rem;display:inline-block;vertical-align:middle}:host([data-shape=\"burst-wide\"]){--nb-sticker-padding-inline: 4rem;--nb-sticker-padding-block: 3rem;--nb-sticker-font-size: 1.5rem}:host([data-shape=\"star\"]){--nb-sticker-min-block-size: 7.5rem;--nb-sticker-padding-inline: 2.5rem;--nb-sticker-padding-block: 2.5rem;--nb-sticker-face-size: 3.5rem;--nb-sticker-rotate: 0deg;--nb-sticker-stroke-width: 5px}:host([data-shape=\"splat\"]){--nb-sticker-size: 6rem;--nb-sticker-shadow-x: 6px;--nb-sticker-shadow-y: 6px;--nb-sticker-stroke-width: 4px;--nb-sticker-rotate: -10deg}.nb-sticker__root{position:relative;isolation:isolate;display:inline-grid;place-items:center;box-sizing:border-box;min-block-size:var(--nb-sticker-min-block-size);inline-size:max-content;block-size:max-content;transform:rotate(var(--nb-sticker-rotate)) scale(var(--nb-sticker-scale, 1));transform-origin:center}:host([data-shape=\"splat\"]) .nb-sticker__root{inline-size:var(--nb-sticker-size);block-size:var(--nb-sticker-size);min-block-size:var(--nb-sticker-size)}.nb-sticker__svg{position:absolute;inset:0;z-index:-1;inline-size:100%;block-size:100%;overflow:visible}.nb-sticker__shadow{fill:var(--nb-sticker-shadow)}:host([data-shape=\"splat\"]) .nb-sticker__shadow{transform:translate(var(--nb-sticker-shadow-x),var(--nb-sticker-shadow-y))}.nb-sticker__shape{fill:var(--nb-sticker-fill);stroke:var(--nb-sticker-ink);stroke-width:var(--nb-sticker-stroke-width);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.nb-sticker__content{color:var(--nb-sticker-ink);display:block;max-width:300px;padding-inline:var(--nb-sticker-padding-inline);padding-block:var(--nb-sticker-padding-block);overflow-wrap:break-word;font-family:var(--nb-font-display, system-ui, sans-serif);font-size:var(--nb-sticker-font-size);font-weight:950;line-height:.9;letter-spacing:0;text-align:center;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}:host([data-shape=\"splat\"]) .nb-sticker__content{display:none}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class NbStickerFace {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStickerFace, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NbStickerFace, isStandalone: true, selector: "nb-sticker-face", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-nb-sticker-face": "\"\"" }, classAttribute: "nb-sticker-face" }, ngImport: i0, template: `
+    <svg
+      class="nb-sticker-face__svg"
+      viewBox="13 5 320 220"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <ellipse class="nb-sticker-face__eye" cx="126" cy="64" rx="20" ry="35" />
+      <ellipse class="nb-sticker-face__eye" cx="214" cy="64" rx="20" ry="35" />
+      <path
+        class="nb-sticker-face__smile"
+        d="M78 132 C116 202 226 206 268 150"
+      />
+    </svg>
+  `, isInline: true, styles: [":host{--nb-sticker-face-ink: var(--nb-sticker-ink, #050505);display:block;width:var(--nb-sticker-face-size, 5.55rem);height:calc(var(--nb-sticker-face-size, 5.55rem) * .64)}.nb-sticker-face__svg{display:block;width:100%;height:100%;overflow:visible}.nb-sticker-face__eye{fill:var(--nb-sticker-face-ink)}.nb-sticker-face__smile{fill:none;stroke:var(--nb-sticker-face-ink);stroke-width:36;stroke-linecap:round}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStickerFace, decorators: [{
+            type: Component,
+            args: [{ selector: 'nb-sticker-face', template: `
+    <svg
+      class="nb-sticker-face__svg"
+      viewBox="13 5 320 220"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <ellipse class="nb-sticker-face__eye" cx="126" cy="64" rx="20" ry="35" />
+      <ellipse class="nb-sticker-face__eye" cx="214" cy="64" rx="20" ry="35" />
+      <path
+        class="nb-sticker-face__smile"
+        d="M78 132 C116 202 226 206 268 150"
+      />
+    </svg>
+  `, host: {
+                        class: 'nb-sticker-face',
+                        'aria-hidden': 'true',
+                        '[attr.data-nb-sticker-face]': '""',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--nb-sticker-face-ink: var(--nb-sticker-ink, #050505);display:block;width:var(--nb-sticker-face-size, 5.55rem);height:calc(var(--nb-sticker-face-size, 5.55rem) * .64)}.nb-sticker-face__svg{display:block;width:100%;height:100%;overflow:visible}.nb-sticker-face__eye{fill:var(--nb-sticker-face-ink)}.nb-sticker-face__smile{fill:none;stroke:var(--nb-sticker-face-ink);stroke-width:36;stroke-linecap:round}\n"] }]
+        }] });
+
+const DEFAULT_SHAPE = 'square';
+const DEFAULT_ROWS = 7;
+const DEFAULT_COLUMNS = 7;
+const DEFAULT_DOT_SIZE = 6;
+const DEFAULT_DOT_GAP = 5;
+const RECTANGLE_DEFAULT_ROWS = 3;
+const RECTANGLE_DEFAULT_COLUMNS = 13;
+class NbHalftone {
+    shape = input(DEFAULT_SHAPE, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(null, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    gap = input(null, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    gapX = input(null, { ...(ngDevMode ? { debugName: "gapX" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    gapY = input(null, { ...(ngDevMode ? { debugName: "gapY" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    rows = input(null, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    columns = input(null, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    resolvedColor = computed(() => this.color() ?? 'var(--nb-border)', ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? DEFAULT_DOT_SIZE, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedGap = computed(() => this.gap() ?? DEFAULT_DOT_GAP, ...(ngDevMode ? [{ debugName: "resolvedGap" }] : /* istanbul ignore next */ []));
+    resolvedGapXInput = computed(() => this.gapX() ?? this.gap(), ...(ngDevMode ? [{ debugName: "resolvedGapXInput" }] : /* istanbul ignore next */ []));
+    resolvedGapYInput = computed(() => this.gapY() ?? this.gap(), ...(ngDevMode ? [{ debugName: "resolvedGapYInput" }] : /* istanbul ignore next */ []));
+    resolvedRows = computed(() => this.rows() ??
+        (this.shape() === 'rectangle' ? RECTANGLE_DEFAULT_ROWS : DEFAULT_ROWS), ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
+    resolvedColumns = computed(() => this.columns() ??
+        (this.shape() === 'rectangle' ? RECTANGLE_DEFAULT_COLUMNS : DEFAULT_COLUMNS), ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
+    svgW = computed(() => this.resolvedColumns() * (this.resolvedSize() + this.resolvedGap()) -
+        this.resolvedGap(), ...(ngDevMode ? [{ debugName: "svgW" }] : /* istanbul ignore next */ []));
+    svgH = computed(() => this.resolvedRows() * (this.resolvedSize() + this.resolvedGap()) -
+        this.resolvedGap(), ...(ngDevMode ? [{ debugName: "svgH" }] : /* istanbul ignore next */ []));
+    dotR = computed(() => this.resolvedSize() / 2, ...(ngDevMode ? [{ debugName: "dotR" }] : /* istanbul ignore next */ []));
+    dots = computed(() => {
+        const s = this.resolvedSize();
+        const g = this.resolvedGap();
+        const rows = this.resolvedRows();
+        const cols = this.resolvedColumns();
+        const total = s + g;
+        const r = s / 2;
+        const result = [];
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                result.push({ cx: col * total + r, cy: row * total + r });
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbHalftone, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbHalftone, isStandalone: true, selector: "nb-halftone, [nbHalftone]", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, gapX: { classPropertyName: "gapX", publicName: "gapX", isSignal: true, isRequired: false, transformFunction: null }, gapY: { classPropertyName: "gapY", publicName: "gapY", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.pointer-events-none": "true", "class.nb-halftone--square": "shape() === \"square\"", "class.nb-halftone--circle": "shape() === \"circle\"", "class.nb-halftone--rectangle": "shape() === \"rectangle\"", "attr.aria-hidden": "\"true\"", "attr.data-shape": "shape()", "attr.data-nb-halftone": "\"\"", "style.--nb-halftone-color": "color()", "style.--nb-halftone-dot-size.px": "size()", "style.--nb-halftone-gap-x.px": "resolvedGapXInput()", "style.--nb-halftone-gap-y.px": "resolvedGapYInput()", "style.--nb-halftone-rows": "resolvedRows()", "style.--nb-halftone-columns": "resolvedColumns()" }, classAttribute: "nb-halftone" }, ngImport: i0, template: `
+    @if (shape() !== 'rectangle') {
+    <svg [attr.width]="svgW()" [attr.height]="svgH()" aria-hidden="true">
+      @for (dot of dots(); track $index) {
+        <circle [attr.cx]="dot.cx" [attr.cy]="dot.cy" [attr.r]="dotR()" [attr.fill]="resolvedColor()" />
+      }
+    </svg>
+    }
+  `, isInline: true, styles: [":host{pointer-events:none}:host(.nb-halftone--rectangle){--nb-halftone-color: var(--nb-border);--nb-halftone-dot-size: 8px;--nb-halftone-gap-x: 28px;--nb-halftone-gap-y: 27px;display:block;overflow:hidden;width:calc(var(--nb-halftone-columns) * var(--nb-halftone-gap-x));height:calc(var(--nb-halftone-rows) * var(--nb-halftone-gap-y));background-image:radial-gradient(circle at center,var(--nb-halftone-color) 0 calc(var(--nb-halftone-dot-size) / 2),transparent calc((var(--nb-halftone-dot-size) / 2) + 1px));background-size:var(--nb-halftone-gap-x) var(--nb-halftone-gap-y);background-repeat:repeat;background-position:0 0}:host(.nb-halftone--circle){border-radius:9999px;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbHalftone, decorators: [{
+            type: Component,
+            args: [{ selector: 'nb-halftone, [nbHalftone]', template: `
+    @if (shape() !== 'rectangle') {
+    <svg [attr.width]="svgW()" [attr.height]="svgH()" aria-hidden="true">
+      @for (dot of dots(); track $index) {
+        <circle [attr.cx]="dot.cx" [attr.cy]="dot.cy" [attr.r]="dotR()" [attr.fill]="resolvedColor()" />
+      }
+    </svg>
+    }
+  `, host: {
+                        'class': 'nb-halftone',
+                        '[class.pointer-events-none]': 'true',
+                        '[class.nb-halftone--square]': 'shape() === "square"',
+                        '[class.nb-halftone--circle]': 'shape() === "circle"',
+                        '[class.nb-halftone--rectangle]': 'shape() === "rectangle"',
+                        '[attr.aria-hidden]': '"true"',
+                        '[attr.data-shape]': 'shape()',
+                        '[attr.data-nb-halftone]': '""',
+                        '[style.--nb-halftone-color]': 'color()',
+                        '[style.--nb-halftone-dot-size.px]': 'size()',
+                        '[style.--nb-halftone-gap-x.px]': 'resolvedGapXInput()',
+                        '[style.--nb-halftone-gap-y.px]': 'resolvedGapYInput()',
+                        '[style.--nb-halftone-rows]': 'resolvedRows()',
+                        '[style.--nb-halftone-columns]': 'resolvedColumns()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{pointer-events:none}:host(.nb-halftone--rectangle){--nb-halftone-color: var(--nb-border);--nb-halftone-dot-size: 8px;--nb-halftone-gap-x: 28px;--nb-halftone-gap-y: 27px;display:block;overflow:hidden;width:calc(var(--nb-halftone-columns) * var(--nb-halftone-gap-x));height:calc(var(--nb-halftone-rows) * var(--nb-halftone-gap-y));background-image:radial-gradient(circle at center,var(--nb-halftone-color) 0 calc(var(--nb-halftone-dot-size) / 2),transparent calc((var(--nb-halftone-dot-size) / 2) + 1px));background-size:var(--nb-halftone-gap-x) var(--nb-halftone-gap-y);background-repeat:repeat;background-position:0 0}:host(.nb-halftone--circle){border-radius:9999px;overflow:hidden}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], gapX: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapX", required: false }] }], gapY: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapY", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+
+class NbSurface {
+    size = input('auto', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    layout = input('block', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    padding = input('none', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    edge = input('none', ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
+    clip = input(false, { ...(ngDevMode ? { debugName: "clip" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Tone, radius, shadow, and border-width are written as `--nb-surface-*`
+    // variables by the composed capabilities; here we only *consume* them.
+    classes = computed(() => nbClass('relative', this.clip() && 'overflow-hidden', this.sizeClass(), this.layoutClass(), this.edgeClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    sizeClass() {
+        const map = {
+            auto: '',
+            sm: 'size-8 shrink-0',
+            md: 'size-10 shrink-0',
+            lg: 'size-11 shrink-0',
+            xl: 'size-12 shrink-0',
+        };
+        return map[this.size()];
+    }
+    layoutClass() {
+        const map = {
+            block: '',
+            center: 'inline-flex items-center justify-center',
+            row: 'flex items-center',
+            stack: 'flex flex-col',
+        };
+        return map[this.layout()];
+    }
+    edgeClass() {
+        const map = {
+            none: '',
+            top: '[--nb-surface-edge-width:2px] [--nb-surface-edge-color:var(--nb-border)] border-t-(length:--nb-surface-edge-width) border-t-(--nb-surface-edge-color)',
+            bottom: '[--nb-surface-edge-width:2px] [--nb-surface-edge-color:var(--nb-border)] border-b-(length:--nb-surface-edge-width) border-b-(--nb-surface-edge-color)',
+        };
+        return map[this.edge()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSurface, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbSurface, isStandalone: true, selector: "[nbSurface]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, edge: { classPropertyName: "edge", publicName: "edge", isSignal: true, isRequired: false, transformFunction: null }, clip: { classPropertyName: "clip", publicName: "clip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-surface": "\"\"", "attr.data-size": "size()", "attr.data-layout": "layout()", "attr.data-padding": "padding()", "attr.data-edge": "edge()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'surface' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: {
+                    tone: 'default',
+                    radius: 'md',
+                    shadow: 'default',
+                    border: 'default',
+                    padding: 'none',
+                },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbRadiusCapability, inputs: ["radius", "radius"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }, { directive: NbBorderCapability, inputs: ["border", "border"] }, { directive: NbPaddingCapability, inputs: ["padding", "padding"] }, { directive: NbTypography, inputs: ["font", "typography"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSurface, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbSurface]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'surface' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: {
+                                tone: 'default',
+                                radius: 'md',
+                                shadow: 'default',
+                                border: 'default',
+                                padding: 'none',
+                            },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbRadiusCapability, inputs: ['radius'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                        { directive: NbBorderCapability, inputs: ['border'] },
+                        { directive: NbPaddingCapability, inputs: ['padding'] },
+                        // Typography context — exposes nbTypography's `font` input as `typography`.
+                        { directive: NbTypography, inputs: ['font: typography'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-surface]': '""',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-padding]': 'padding()',
+                        '[attr.data-edge]': 'edge()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], edge: [{ type: i0.Input, args: [{ isSignal: true, alias: "edge", required: false }] }], clip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clip", required: false }] }] } });
+
+class NbStack {
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    justify = input('start', ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    separator = input('none', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('flex min-w-0 flex-col', this.alignClass(), this.justifyClass(), this.separatorClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    alignClass() {
+        const map = {
+            stretch: 'items-stretch',
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+        };
+        return map[this.align()];
+    }
+    justifyClass() {
+        const map = {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+            between: 'justify-between',
+        };
+        return map[this.justify()];
+    }
+    separatorClass() {
+        const map = {
+            none: '',
+            solid: nbClass('[&>*+*]:border-t-(length:--nb-border-width)', '[&>*+*]:border-solid', '[&>*+*]:[border-top-color:var(--nb-border)]', '[&>*+*]:pt-[var(--nb-stack-gap)]'),
+            dashed: nbClass('[&>*+*]:border-t-(length:--nb-border-width)', '[&>*+*]:border-dashed', '[&>*+*]:[border-top-color:var(--nb-border)]', '[&>*+*]:pt-[var(--nb-stack-gap)]'),
+            thick: nbClass('[&>*+*]:border-t-4', '[&>*+*]:border-solid', '[&>*+*]:[border-top-color:var(--nb-border)]', '[&>*+*]:pt-[var(--nb-stack-gap)]'),
+        };
+        return map[this.separator()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbStack, isStandalone: true, selector: "[nbStack]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-stack": "\"\"", "attr.data-align": "align()", "attr.data-justify": "justify()", "attr.data-separator": "separator()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'stack' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { gap: 'md' },
+            },
+        ], hostDirectives: [{ directive: NbGapCapability, inputs: ["gap", "gap"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbStack, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbStack]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'stack' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { gap: 'md' },
+                        },
+                    ],
+                    hostDirectives: [{ directive: NbGapCapability, inputs: ['gap'] }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-stack]': '""',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-justify]': 'justify()',
+                        '[attr.data-separator]': 'separator()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+
+class NbCluster {
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    justify = input('start', ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    wrap = input('wrap', ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    separator = input('none', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    separatorColumnGapStyle = computed(() => this.separator() === 'none' ? null : '0px', ...(ngDevMode ? [{ debugName: "separatorColumnGapStyle" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('flex min-w-0', this.gapClass(), this.alignClass(), this.justifyClass(), this.wrapClass(), this.separatorClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    gapClass() {
+        // With a separator, gap collapses on the inline axis (the separator owns
+        // the inline spacing) and survives only on the block axis for wrapped rows.
+        if (this.separator() !== 'none') {
+            return 'gap-x-0';
+        }
+        return '';
+    }
+    alignClass() {
+        const map = {
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+            baseline: 'items-baseline',
+            stretch: 'items-stretch',
+        };
+        return map[this.align()];
+    }
+    justifyClass() {
+        const map = {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+            between: 'justify-between',
+        };
+        return map[this.justify()];
+    }
+    wrapClass() {
+        const map = {
+            wrap: 'flex-wrap',
+            nowrap: 'flex-nowrap',
+        };
+        return map[this.wrap()];
+    }
+    separatorClass() {
+        const separator = this.separator();
+        if (separator === 'none')
+            return '';
+        return nbClass(separatorBaseClass$1, separatorStyleClass$1[separator]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCluster, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbCluster, isStandalone: true, selector: "[nbCluster]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-cluster": "\"\"", "attr.data-align": "align()", "attr.data-justify": "justify()", "attr.data-wrap": "wrap()", "attr.data-separator": "separator()", "style.column-gap": "separatorColumnGapStyle()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'cluster' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { gap: 'md', padding: 'none' },
+            },
+        ], hostDirectives: [{ directive: NbGapCapability, inputs: ["gap", "gap"] }, { directive: NbPaddingCapability, inputs: ["padding", "padding"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCluster, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbCluster]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'cluster' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { gap: 'md', padding: 'none' },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbGapCapability, inputs: ['gap'] },
+                        { directive: NbPaddingCapability, inputs: ['padding'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-cluster]': '""',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-justify]': 'justify()',
+                        '[attr.data-wrap]': 'wrap()',
+                        '[attr.data-separator]': 'separator()',
+                        '[style.column-gap]': 'separatorColumnGapStyle()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+// Written as module-level constants so Tailwind's static scanner emits the classes.
+const separatorBaseClass$1 = nbClass('[--nb-cluster-separator-gap:calc(var(--_nb-gap-resolved)*0.5)]', '[--nb-cluster-separator-color:var(--nb-border)]', '[&>*+*]:[margin-inline-start:var(--nb-cluster-separator-gap)]', '[&>*+*]:[padding-inline-start:var(--nb-cluster-separator-gap)]', '[&>*+*]:[border-inline-start-color:var(--nb-cluster-separator-color)]');
+const separatorStyleClass$1 = {
+    solid: nbClass('[--nb-cluster-separator-thickness:2px]', '[&>*+*]:[border-inline-start-width:var(--nb-cluster-separator-thickness)]', '[&>*+*]:[border-inline-start-style:solid]'),
+    dashed: nbClass('[--nb-cluster-separator-thickness:2px]', '[&>*+*]:[border-inline-start-width:var(--nb-cluster-separator-thickness)]', '[&>*+*]:[border-inline-start-style:dashed]'),
+    thick: nbClass('[--nb-cluster-separator-thickness:4px]', '[&>*+*]:[border-inline-start-width:var(--nb-cluster-separator-thickness)]', '[&>*+*]:[border-inline-start-style:solid]'),
+};
+
+class NbSplit {
+    ratio = input('1:1', ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    collapse = input('md', ...(ngDevMode ? [{ debugName: "collapse" }] : /* istanbul ignore next */ []));
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    separator = input('none', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('grid min-w-0', this.alignClass(), this.ratioClass(), this.collapseClass(), this.separatorClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    alignClass() {
+        const map = {
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+            stretch: 'items-stretch',
+        };
+        return map[this.align()];
+    }
+    ratioClass() {
+        const map = {
+            '1:1': '[--nb-split-columns:minmax(0,1fr)_minmax(0,1fr)]',
+            '2:1': '[--nb-split-columns:minmax(0,2fr)_minmax(0,1fr)]',
+            '3:1': '[--nb-split-columns:minmax(0,3fr)_minmax(0,1fr)]',
+            '1:2': '[--nb-split-columns:minmax(0,1fr)_minmax(0,2fr)]',
+            '1:3': '[--nb-split-columns:minmax(0,1fr)_minmax(0,3fr)]',
+            'fill:auto': '[--nb-split-columns:minmax(0,1fr)_auto]',
+            'auto:fill': '[--nb-split-columns:auto_minmax(0,1fr)]',
+        };
+        return map[this.ratio()];
+    }
+    collapseClass() {
+        const map = {
+            none: 'grid-cols-[var(--nb-split-columns)]',
+            sm: 'grid-cols-1 sm:grid-cols-[var(--nb-split-columns)]',
+            md: 'grid-cols-1 md:grid-cols-[var(--nb-split-columns)]',
+            lg: 'grid-cols-1 lg:grid-cols-[var(--nb-split-columns)]',
+        };
+        return map[this.collapse()];
+    }
+    separatorClass() {
+        const separator = this.separator();
+        if (separator === 'none') {
+            return '';
+        }
+        return nbClass(separatorBaseClass, separatorStyleClass[separator], separatorVisibilityClass[this.collapse()]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSplit, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbSplit, isStandalone: true, selector: "[nbSplit]", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, collapse: { classPropertyName: "collapse", publicName: "collapse", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-split": "\"\"", "attr.data-ratio": "ratio()", "attr.data-collapse": "collapse()", "attr.data-align": "align()", "attr.data-separator": "separator()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'split' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { gap: 'lg', padding: 'none' },
+            },
+        ], hostDirectives: [{ directive: NbGapCapability, inputs: ["gap", "gap"] }, { directive: NbPaddingCapability, inputs: ["padding", "padding"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSplit, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbSplit]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'split' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { gap: 'lg', padding: 'none' },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbGapCapability, inputs: ['gap'] },
+                        { directive: NbPaddingCapability, inputs: ['padding'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-split]': '""',
+                        '[attr.data-ratio]': 'ratio()',
+                        '[attr.data-collapse]': 'collapse()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-separator]': 'separator()',
+                    },
+                }]
+        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], collapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
+// A `::after` pseudo-element on the first column draws the vertical line,
+// centered in the gap. These class strings are written out literally (rather
+// than assembled at runtime) so Tailwind's static scanner can emit them.
+const separatorBaseClass = nbClass('[&>*:first-child]:relative', '[&>*:first-child]:after:pointer-events-none', '[&>*:first-child]:after:absolute', '[&>*:first-child]:after:inset-y-0', '[&>*:first-child]:after:[inset-inline-end:calc(var(--_nb-gap-resolved)/-2)]', '[&>*:first-child]:after:[border-inline-end-color:var(--nb-border)]', '[&>*:first-child]:after:content-[""]');
+const separatorStyleClass = {
+    solid: nbClass('[&>*:first-child]:after:[border-inline-end-width:var(--nb-border-width)]', '[&>*:first-child]:after:border-solid'),
+    dashed: nbClass('[&>*:first-child]:after:[border-inline-end-width:var(--nb-border-width)]', '[&>*:first-child]:after:border-dashed'),
+    thick: nbClass('[&>*:first-child]:after:[border-inline-end-width:4px]', '[&>*:first-child]:after:border-solid'),
+};
+// Hide the separator while the split is stacked into a single column, then
+// reveal it at the same breakpoint where the columns appear, so the line stays
+// in sync with `collapse` (and tracks Tailwind's breakpoint config).
+const separatorVisibilityClass = {
+    none: '',
+    sm: '[&>*:first-child]:after:hidden sm:[&>*:first-child]:after:block',
+    md: '[&>*:first-child]:after:hidden md:[&>*:first-child]:after:block',
+    lg: '[&>*:first-child]:after:hidden lg:[&>*:first-child]:after:block',
+};
+
+class NbSection {
+    divider = input('none', ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
+    dividerStyle = input('solid', ...(ngDevMode ? [{ debugName: "dividerStyle" }] : /* istanbul ignore next */ []));
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => nbClass('box-border min-w-0', this.layoutClass(), this.alignClass(), this.dividerClass(), this.flush() &&
+        'mx-[calc(var(--nb-padding-token,var(--_nb-padding-default))*-1)]'), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    layoutClass() {
+        const map = {
+            default: 'block',
+            center: 'flex justify-center gap-[var(--nb-spacing-md,1rem)]',
+            between: 'flex justify-between gap-[var(--nb-spacing-md,1rem)]',
+        };
+        return map[this.layout()];
+    }
+    alignClass() {
+        if (this.layout() === 'default') {
+            return '';
+        }
+        const map = {
+            stretch: 'items-stretch',
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+        };
+        return map[this.align()];
+    }
+    dividerClass() {
+        const side = this.divider();
+        if (side === 'none') {
+            return '';
+        }
+        const style = this.dividerStyleClass();
+        const widthMap = {
+            top: 'border-t-(length:--nb-border-width)',
+            right: 'border-r-(length:--nb-border-width)',
+            bottom: 'border-b-(length:--nb-border-width)',
+            left: 'border-l-(length:--nb-border-width)',
+            block: 'border-y-(length:--nb-border-width)',
+            inline: 'border-x-(length:--nb-border-width)',
+            all: 'border-(length:--nb-border-width)',
+        };
+        return nbClass(widthMap[side], 'border-(--nb-border)', style);
+    }
+    dividerStyleClass() {
+        const map = {
+            solid: 'border-solid',
+            dashed: 'border-dashed',
+            dotted: 'border-dotted',
+        };
+        return map[this.dividerStyle()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbSection, isStandalone: true, selector: "[nbSection]", inputs: { divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, dividerStyle: { classPropertyName: "dividerStyle", publicName: "dividerStyle", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-section": "\"\"", "attr.data-divider": "divider()", "attr.data-divider-style": "dividerStyle()", "attr.data-layout": "layout()", "attr.data-align": "align()", "attr.data-flush": "flush() ? \"\" : null" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'section' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { padding: 'md' },
+            },
+        ], exportAs: ["nbSection"], hostDirectives: [{ directive: NbPaddingCapability, inputs: ["padding", "padding"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbSection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbSection]',
+                    exportAs: 'nbSection',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'section' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { padding: 'md' },
+                        },
+                    ],
+                    hostDirectives: [{ directive: NbPaddingCapability, inputs: ['padding'] }],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-section]': '""',
+                        '[attr.data-divider]': 'divider()',
+                        '[attr.data-divider-style]': 'dividerStyle()',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-flush]': 'flush() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], dividerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerStyle", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
+
+class NbCallout {
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    layout = input('inline', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    radius = input(undefined, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('relative inline-flex items-center gap-3', 'border-(length:--nb-callout-border-width)', 'rounded-(--nb-callout-radius)', 'font-black uppercase leading-none', this.sizeClass(), this.layoutClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // Inline style wins over the size-derived `--nb-callout-radius` class, so an
+    // explicit `radius` always takes precedence; null leaves the size default.
+    radiusStyle = computed(() => {
+        const r = this.radius();
+        return r !== undefined ? nbRadiusValue(r) : null;
+    }, ...(ngDevMode ? [{ debugName: "radiusStyle" }] : /* istanbul ignore next */ []));
+    sizeClass() {
+        const map = {
+            sm: 'min-h-9 px-3 py-2 text-sm [--nb-callout-radius:0.5rem] [--nb-callout-border-width:2px]',
+            md: 'min-h-11 px-4 py-2 text-base [--nb-callout-radius:0.625rem] [--nb-callout-border-width:2px]',
+            lg: 'min-h-14 px-5 py-3 text-2xl [--nb-callout-radius:0.75rem] [--nb-callout-border-width:3px]',
+            xl: 'min-h-20 px-6 py-4 text-5xl [--nb-callout-radius:0.875rem] [--nb-callout-border-width:4px]',
+        };
+        return map[this.size()];
+    }
+    layoutClass() {
+        const map = {
+            inline: 'justify-start',
+            between: 'w-full justify-between',
+            center: 'justify-center text-center',
+        };
+        return map[this.layout()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCallout, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbCallout, isStandalone: true, selector: "[nbCallout]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-callout": "\"\"", "attr.data-size": "size()", "attr.data-layout": "layout()", "attr.data-radius": "radius() ?? null", "style.--nb-callout-radius": "radiusStyle()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'callout' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { tone: 'yellow', shadow: 'hard' },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }, { directive: NbShadowCapability, inputs: ["shadow", "shadow"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbCallout, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbCallout]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'callout' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { tone: 'yellow', shadow: 'hard' },
+                        },
+                    ],
+                    hostDirectives: [
+                        { directive: NbToneCapability, inputs: ['tone'] },
+                        { directive: NbShadowCapability, inputs: ['shadow'] },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-callout]': '""',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-layout]': 'layout()',
+                        '[attr.data-radius]': 'radius() ?? null',
+                        '[style.--nb-callout-radius]': 'radiusStyle()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
+
+class NbMediaItem {
+    variant = input('plain', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconAlt = input('', ...(ngDevMode ? [{ debugName: "iconAlt" }] : /* istanbul ignore next */ []));
+    iconBackground = input(undefined, ...(ngDevMode ? [{ debugName: "iconBackground" }] : /* istanbul ignore next */ []));
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('relative min-w-0', 'inline-flex font-bold leading-tight', '[--nb-media-item-description-opacity:0.7]', '[&_svg]:shrink-0 [&_img]:shrink-0 [&_[data-nb-media-item-icon]]:shrink-0 [&_[nbSurface]]:shrink-0', '[&_svg]:rounded-[calc(var(--nb-media-item-radius)-0.25rem)]', '[&_img]:rounded-[calc(var(--nb-media-item-radius)-0.25rem)]', '[&_svg]:h-[var(--nb-media-item-icon-size)] [&_svg]:max-w-[var(--nb-media-item-icon-size)] [&_svg]:w-auto', '[&_img]:h-[var(--nb-media-item-icon-size)] [&_img]:max-w-[var(--nb-media-item-icon-size)] [&_img]:w-auto [&_img]:object-contain', '[&_[data-nb-media-item-title]]:block', '[&_[data-nb-media-item-title]]:[font-family:var(--nb-media-item-title-font-family,inherit)]', '[&_[data-nb-media-item-title]]:font-black', '[&_[data-nb-media-item-title]]:leading-none', '[&_[data-nb-media-item-title]]:text-[length:var(--nb-media-item-title-size,var(--nb-media-item-title-default-size))]', '[&_[data-nb-media-item-description]]:mt-1', '[&_[data-nb-media-item-description]]:block', '[&_[data-nb-media-item-description]]:text-[length:var(--nb-media-item-description-size,var(--nb-media-item-description-default-size))]', '[&_[data-nb-media-item-description]]:font-bold', '[&_[data-nb-media-item-description]]:leading-none', '[&_[data-nb-media-item-description]]:opacity-[var(--nb-media-item-description-opacity)]', this.variantClass(), this.orientationClass(), this.alignClass(), this.sizeClass()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => mediaItemIconClasses(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    variantClass() {
+        const map = {
+            plain: '[--nb-media-item-radius:var(--nb-radius)] bg-transparent',
+            boxed: 'border-[var(--nb-border-width)] border-[var(--nb-media-item-border-color)] bg-[var(--nb-media-item-bg)] shadow-[var(--nb-shadow-offset-x)_var(--nb-shadow-offset-y)_0_0_var(--nb-shadow)] [--nb-media-item-radius:var(--nb-radius)] rounded-[var(--nb-media-item-radius)]',
+            chip: 'border-[var(--nb-border-width)] border-[var(--nb-media-item-border-color)] bg-[var(--nb-media-item-bg)] [--nb-media-item-radius:9999px] rounded-[var(--nb-media-item-radius)]',
+        };
+        return map[this.variant()];
+    }
+    orientationClass() {
+        const map = {
+            horizontal: 'flex-row items-center',
+            vertical: 'flex-col',
+        };
+        return map[this.orientation()];
+    }
+    alignClass() {
+        const map = {
+            start: 'justify-start text-left',
+            center: 'justify-center text-center',
+            between: 'w-full justify-between',
+        };
+        return map[this.align()];
+    }
+    sizeClass() {
+        const map = {
+            xs: nbClass('gap-[var(--nb-media-item-gap)] text-[0.6875rem]', '[--nb-media-item-gap:0.375rem]', '[--nb-media-item-icon-size:1rem]', '[--nb-media-item-surface-size:2rem]', '[--nb-media-item-title-default-size:0.75rem]', '[--nb-media-item-description-default-size:0.5625rem]', this.variant() === 'plain' ? '' : 'px-2 py-1'),
+            sm: nbClass('gap-[var(--nb-media-item-gap)] text-xs', '[--nb-media-item-gap:0.5rem]', '[--nb-media-item-icon-size:1rem]', '[--nb-media-item-surface-size:2.25rem]', '[--nb-media-item-title-default-size:0.75rem]', '[--nb-media-item-description-default-size:0.625rem]', this.variant() === 'plain' ? '' : 'px-2.5 py-1.5'),
+            md: nbClass('gap-[var(--nb-media-item-gap)] text-sm', '[--nb-media-item-gap:0.75rem]', '[--nb-media-item-icon-size:1.25rem]', '[--nb-media-item-surface-size:2.75rem]', '[--nb-media-item-title-default-size:0.875rem]', '[--nb-media-item-description-default-size:0.65625rem]', this.variant() === 'plain' ? '' : 'px-3 py-2'),
+            lg: nbClass('gap-[var(--nb-media-item-gap)] text-base', '[--nb-media-item-gap:1rem]', '[--nb-media-item-icon-size:1.5rem]', '[--nb-media-item-surface-size:3.25rem]', '[--nb-media-item-title-default-size:1rem]', '[--nb-media-item-description-default-size:0.75rem]', this.variant() === 'plain' ? '' : 'px-4 py-3'),
+        };
+        return map[this.size()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NbMediaItem, isStandalone: true, selector: "nb-media-item, [nbMediaItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, iconBackground: { classPropertyName: "iconBackground", publicName: "iconBackground", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-media-item": "\"\"", "attr.data-variant": "variant()", "attr.data-orientation": "orientation()", "attr.data-align": "align()", "attr.data-size": "size()" } }, providers: [
+            { provide: NB_STYLE_NAMESPACE, useValue: 'media-item' },
+            {
+                provide: NB_STYLE_DEFAULTS,
+                useValue: { tone: 'default' },
+            },
+        ], hostDirectives: [{ directive: NbToneCapability, inputs: ["tone", "tone"] }], ngImport: i0, template: `
+    @if (icon()) {
+      @if (iconBackground()) {
+        <span
+          data-nb-media-item-icon
+          data-surface="true"
+          [attr.data-background]="iconBackground()"
+          [class]="iconClasses()"
+          [style.--nb-media-item-icon-bg]="iconBackground()"
+        >
+          <img [src]="icon()" [alt]="iconAlt()" />
+        </span>
+      } @else {
+        <img [src]="icon()" [alt]="iconAlt()" />
+      }
+    } @else {
+      <ng-content select="nb-media-item-icon, [nbMediaItemIcon], [nbSurface], img, svg" />
+    }
+
+    <div data-nb-media-item-content class="min-w-0">
+      @if (title()) {
+        <span data-nb-media-item-title>{{ title() }}</span>
+      } @else {
+        <ng-content select="nb-media-item-title, [nbMediaItemTitle]" />
+      }
+      @if (description()) {
+        <span data-nb-media-item-description>{{ description() }}</span>
+      } @else {
+        <ng-content select="nb-media-item-description, [nbMediaItemDescription]" />
+      }
+      @if (!title() && !description()) {
+        <ng-content />
+      }
+    </div>
+
+    <ng-content select="nb-media-item-action, [nbMediaItemAction]" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nb-media-item, [nbMediaItem]',
+                    providers: [
+                        { provide: NB_STYLE_NAMESPACE, useValue: 'media-item' },
+                        {
+                            provide: NB_STYLE_DEFAULTS,
+                            useValue: { tone: 'default' },
+                        },
+                    ],
+                    hostDirectives: [{ directive: NbToneCapability, inputs: ['tone'] }],
+                    template: `
+    @if (icon()) {
+      @if (iconBackground()) {
+        <span
+          data-nb-media-item-icon
+          data-surface="true"
+          [attr.data-background]="iconBackground()"
+          [class]="iconClasses()"
+          [style.--nb-media-item-icon-bg]="iconBackground()"
+        >
+          <img [src]="icon()" [alt]="iconAlt()" />
+        </span>
+      } @else {
+        <img [src]="icon()" [alt]="iconAlt()" />
+      }
+    } @else {
+      <ng-content select="nb-media-item-icon, [nbMediaItemIcon], [nbSurface], img, svg" />
+    }
+
+    <div data-nb-media-item-content class="min-w-0">
+      @if (title()) {
+        <span data-nb-media-item-title>{{ title() }}</span>
+      } @else {
+        <ng-content select="nb-media-item-title, [nbMediaItemTitle]" />
+      }
+      @if (description()) {
+        <span data-nb-media-item-description>{{ description() }}</span>
+      } @else {
+        <ng-content select="nb-media-item-description, [nbMediaItemDescription]" />
+      }
+      @if (!title() && !description()) {
+        <ng-content />
+      }
+    </div>
+
+    <ng-content select="nb-media-item-action, [nbMediaItemAction]" />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-media-item]': '""',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-size]': 'size()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], iconBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBackground", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+class NbMediaItemIcon {
+    surface = input(false, { ...(ngDevMode ? { debugName: "surface" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    background = input('var(--nb-surface)', ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    classes = computed(() => nbClass('shrink-0', this.surface() && mediaItemIconClasses()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbMediaItemIcon, isStandalone: true, selector: "nb-media-item-icon, [nbMediaItemIcon]", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-nb-media-item-icon": "\"\"", "attr.data-surface": "surface()", "attr.data-background": "surface() ? background() : null", "style.--nb-media-item-icon-bg": "surface() ? background() : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nb-media-item-icon, [nbMediaItemIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-nb-media-item-icon]': '""',
+                        '[attr.data-surface]': 'surface()',
+                        '[attr.data-background]': 'surface() ? background() : null',
+                        '[style.--nb-media-item-icon-bg]': 'surface() ? background() : null',
+                    },
+                }]
+        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }] } });
+class NbMediaItemTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NbMediaItemTitle, isStandalone: true, selector: "nb-media-item-title, [nbMediaItemTitle]", host: { properties: { "attr.data-nb-media-item-title": "\"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nb-media-item-title, [nbMediaItemTitle]',
+                    host: {
+                        '[attr.data-nb-media-item-title]': '""',
+                    },
+                }]
+        }] });
+class NbMediaItemDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NbMediaItemDescription, isStandalone: true, selector: "nb-media-item-description, [nbMediaItemDescription]", host: { properties: { "attr.data-nb-media-item-description": "\"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbMediaItemDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nb-media-item-description, [nbMediaItemDescription]',
+                    host: {
+                        '[attr.data-nb-media-item-description]': '""',
+                    },
+                }]
+        }] });
+function mediaItemIconClasses() {
+    return nbClass('relative inline-flex size-[var(--nb-media-item-surface-size)] items-center justify-center', 'rounded-lg border-[var(--nb-border-width)] border-[var(--nb-border)]', 'bg-(--nb-media-item-icon-bg) text-black');
+}
+
+const sizeMap = {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+};
+const defaultLineHeightMap = {
+    xs: '1rem',
+    sm: '1.25rem',
+    md: '1.5rem',
+    lg: '1.75rem',
+    xl: '1.875rem',
+    '2xl': '2rem',
+    '3xl': '2.25rem',
+};
+const leadingMap = {
+    none: '1',
+    tight: '1.15',
+    normal: null,
+    relaxed: '1.65',
+};
+const toneMap = {
+    default: 'var(--nb-foreground)',
+    muted: 'color-mix(in srgb, var(--nb-foreground) 80%, transparent)',
+    subtle: 'color-mix(in srgb, var(--nb-foreground) 65%, transparent)',
+    inverse: 'var(--nb-background)',
+    primary: 'var(--nb-primary)',
+    secondary: 'var(--nb-secondary)',
+    accent: 'var(--nb-accent)',
+    danger: 'var(--nb-danger)',
+    success: 'var(--nb-success)',
+    warning: 'var(--nb-warning)',
+};
+const trackingMap = {
+    tight: '-0.025em',
+    // Explicit 'normal' resets any inherited letter-spacing; do not collapse to null.
+    normal: 'normal',
+    wide: '0.025em',
+    wider: '0.05em',
+};
+const measureMap = {
+    none: 'none',
+    xs: '20rem',
+    sm: '28rem',
+    md: '36rem',
+    lg: '44rem',
+};
+class NbText {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    weight = input('normal', ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    transform = input('none', ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    tracking = input('normal', ...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
+    measure = input('none', ...(ngDevMode ? [{ debugName: "measure" }] : /* istanbul ignore next */ []));
+    leading = input('normal', ...(ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []));
+    // underline / underlineGap / underlineWidth / reset → composed capabilities
+    sizeValue = computed(() => sizeMap[this.size()], ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    lineHeightValue = computed(() => {
+        const explicitLeading = leadingMap[this.leading()];
+        return explicitLeading ?? defaultLineHeightMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "lineHeightValue" }] : /* istanbul ignore next */ []));
+    weightValue = computed(() => nbFontWeightValue(this.weight()), ...(ngDevMode ? [{ debugName: "weightValue" }] : /* istanbul ignore next */ []));
+    colorValue = computed(() => toneMap[this.tone()], ...(ngDevMode ? [{ debugName: "colorValue" }] : /* istanbul ignore next */ []));
+    transformValue = computed(() => this.transform(), ...(ngDevMode ? [{ debugName: "transformValue" }] : /* istanbul ignore next */ []));
+    trackingValue = computed(() => trackingMap[this.tracking()], ...(ngDevMode ? [{ debugName: "trackingValue" }] : /* istanbul ignore next */ []));
+    measureValue = computed(() => {
+        const val = measureMap[this.measure()];
+        return val === 'none' ? null : val;
+    }, ...(ngDevMode ? [{ debugName: "measureValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NbText, isStandalone: true, selector: "[nbText]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, tracking: { classPropertyName: "tracking", publicName: "tracking", isSignal: true, isRequired: false, transformFunction: null }, measure: { classPropertyName: "measure", publicName: "measure", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-nb-text": "\"\"", "attr.data-size": "size()", "attr.data-weight": "weight()", "attr.data-tone": "tone()", "attr.data-transform": "transform()", "attr.data-tracking": "tracking()", "attr.data-measure": "measure()", "attr.data-leading": "leading()", "style.color": "colorValue()", "style.font-size": "sizeValue()", "style.line-height": "lineHeightValue()", "style.font-weight": "weightValue()", "style.text-transform": "transformValue()", "style.letter-spacing": "trackingValue()", "style.max-width": "measureValue()" } }, exportAs: ["nbText"], hostDirectives: [{ directive: NbUnderlineCapability, inputs: ["underline", "underline", "underlineGap", "underlineGap", "underlineWidth", "underlineWidth"] }, { directive: NbResetMarginCapability, inputs: ["reset", "reset"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NbText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nbText]',
+                    standalone: true,
+                    exportAs: 'nbText',
+                    hostDirectives: [
+                        // underline variant + optional gap/width overrides → data-underline + CSS vars
+                        {
+                            directive: NbUnderlineCapability,
+                            inputs: ['underline', 'underlineGap', 'underlineWidth'],
+                        },
+                        // reset input → margin: 0 (removes native paragraph/heading margin)
+                        { directive: NbResetMarginCapability, inputs: ['reset'] },
+                    ],
+                    host: {
+                        '[attr.data-nb-text]': '""',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-weight]': 'weight()',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.data-transform]': 'transform()',
+                        '[attr.data-tracking]': 'tracking()',
+                        '[attr.data-measure]': 'measure()',
+                        '[attr.data-leading]': 'leading()',
+                        '[style.color]': 'colorValue()',
+                        '[style.font-size]': 'sizeValue()',
+                        '[style.line-height]': 'lineHeightValue()',
+                        '[style.font-weight]': 'weightValue()',
+                        '[style.text-transform]': 'transformValue()',
+                        '[style.letter-spacing]': 'trackingValue()',
+                        '[style.max-width]': 'measureValue()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], tracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracking", required: false }] }], measure: [{ type: i0.Input, args: [{ isSignal: true, alias: "measure", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }] } });
+
 // Foundation
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NB_THEME_CONFIG, NbAccordion, NbAccordionContent, NbAccordionItem, NbAccordionTrigger, NbAvatar, NbBadge, NbButton, NbCard, NbCardActions, NbCardContent, NbCardDescription, NbCardFooter, NbCardHeader, NbCardTitle, NbCheckbox, NbDialog, NbDialogActions, NbDialogClose, NbDialogContent, NbDialogDescription, NbDialogTitle, NbImageCard, NbImageCardCaption, NbInput, NbInputGroup, NbInputPrefix, NbInputSuffix, NbLabel, NbMarquee, NbMarqueeItem, NbNativeSelect, NbSelect, NbSelectOption, NbTextarea, NbTitle, nbClass, provideNgBrutalism };
+export { NB_THEME_CONFIG, NbAccordion, NbAccordionContent, NbAccordionItem, NbAccordionTrigger, NbAvatar, NbAvatarGroup, NbBadge, NbButton, NbButtonTrailingIcon, NbCallout, NbCard, NbCardActions, NbCardContent, NbCardDescription, NbCardFooter, NbCardHeader, NbCardTitle, NbCheckbox, NbChip, NbChipGroup, NbCluster, NbDialog, NbDialogActions, NbDialogClose, NbDialogContent, NbDialogDescription, NbDialogTitle, NbDisplay, NbHalftone, NbIcon, NbIconButton, NbImageCard, NbImageCardCaption, NbInput, NbInputGroup, NbInputPrefix, NbInputSuffix, NbLabel, NbMarquee, NbMarqueeItem, NbMediaFrame, NbMediaItem, NbMediaItemDescription, NbMediaItemIcon, NbMediaItemTitle, NbNativeSelect, NbProgress, NbRating, NbSection, NbSelect, NbSelectOption, NbSeparator, NbSplit, NbStack, NbStat, NbStatusDot, NbSticker, NbStickerFace, NbSurface, NbText, NbTextarea, NbTitle, NbTypography, nbBorderWidthValue, nbClass, nbFontWeightValue, nbPaddingValue, nbRadiusValue, nbShadowValue, nbSpacingValue, nbToneTokens, nbToneVars, nbTypographyFontValue, nbUnderlineGapValue, nbUnderlineWidthValue, provideNgBrutalism, NB_STYLE_DEFAULTS as ɵNB_STYLE_DEFAULTS, NB_STYLE_NAMESPACE as ɵNB_STYLE_NAMESPACE, NbBorderCapability as ɵNbBorderCapability, NbGapCapability as ɵNbGapCapability, NbPaddingCapability as ɵNbPaddingCapability, NbRadiusCapability as ɵNbRadiusCapability, NbResetMarginCapability as ɵNbResetMarginCapability, NbShadowCapability as ɵNbShadowCapability, NbToneCapability as ɵNbToneCapability, NbUnderlineCapability as ɵNbUnderlineCapability };
 //# sourceMappingURL=ng-brutalism-ui.mjs.map