@ngstarter-ui/components 1.0.28 → 1.0.31

package/styles/themes/modern.scss

@@ -0,0 +1,352 @@
+@use "../_common";
+@use "../_global";
+
+:root {
+  color-scheme: light;
+}
+
+:root,
+[data-ngs-theme='modern']:not([data-ngs-color-scheme='dark']):not(.dark) {
+  --ngs-font-family-base: "Inter", "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ngs-radius-xs: 0.5rem;
+  --ngs-radius-sm: 0.75rem;
+  --ngs-radius-md: 1rem;
+  --ngs-radius-lg: 1.25rem;
+  --ngs-radius-xl: 1.5rem;
+  --ngs-shadow-sm: 0 4px 14px rgba(79, 70, 229, 0.08);
+  --ngs-shadow-md: 0 16px 42px rgba(39, 52, 105, 0.14);
+  --ngs-shadow-lg: 0 28px 70px rgba(39, 52, 105, 0.20);
+
+  --ngs-color-primary: #4f46e5;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #e6e9ff;
+  --ngs-color-on-primary-container: #27226e;
+  --ngs-color-secondary: #0f766e;
+  --ngs-color-on-secondary: #ffffff;
+  --ngs-color-secondary-container: #ccfbf1;
+  --ngs-color-on-secondary-container: #134e4a;
+  --ngs-color-tertiary: #db2777;
+  --ngs-color-on-tertiary: #ffffff;
+  --ngs-color-tertiary-container: #fce7f3;
+  --ngs-color-on-tertiary-container: #831843;
+  --ngs-color-danger: #e11d48;
+  --ngs-color-on-danger: #ffffff;
+  --ngs-color-danger-container: #ffe4e6;
+  --ngs-color-on-danger-container: #9f1239;
+  --ngs-color-info: #2563eb;
+  --ngs-color-on-info: #ffffff;
+  --ngs-color-info-container: #dbeafe;
+  --ngs-color-on-info-container: #1e3a8a;
+  --ngs-color-success: #059669;
+  --ngs-color-on-success: #ffffff;
+  --ngs-color-success-container: #d1fae5;
+  --ngs-color-on-success-container: #065f46;
+  --ngs-color-warning: #d97706;
+  --ngs-color-on-warning: #ffffff;
+  --ngs-color-warning-container: #fef3c7;
+  --ngs-color-on-warning-container: #92400e;
+  --ngs-color-background: #f7f8ff;
+  --ngs-color-on-background: #172033;
+  --ngs-color-surface: #f9fbff;
+  --ngs-color-surface-bright: #ffffff;
+  --ngs-color-on-surface: #172033;
+  --ngs-color-on-surface-variant: #667085;
+  --ngs-color-neutral-50: #fafbff;
+  --ngs-color-neutral-100: #f3f5fb;
+  --ngs-color-neutral-200: #e8ecf6;
+  --ngs-color-neutral-300: #d7deee;
+  --ngs-color-neutral-400: #a9b4cc;
+  --ngs-color-neutral-500: #74809a;
+  --ngs-color-neutral-600: #566176;
+  --ngs-color-neutral-650: #495466;
+  --ngs-color-neutral-700: #384254;
+  --ngs-color-neutral-800: #20283a;
+  --ngs-color-neutral-900: #111827;
+  --ngs-color-neutral-950: #070b15;
+  --ngs-color-surface-container-lowest: #ffffff;
+  --ngs-color-surface-container-low: #fbfcff;
+  --ngs-color-surface-container: #f3f5ff;
+  --ngs-color-surface-container-high: #e9edff;
+  --ngs-color-surface-container-highest: #dde5ff;
+  --ngs-color-outline: #8c96b3;
+  --ngs-color-outline-variant: #d7deee;
+  --ngs-color-border: #e1e7f4;
+  --ngs-color-faint: #f1f5ff;
+  --ngs-color-subtle: #e7ecfb;
+  --ngs-color-muted: #d7deee;
+  --ngs-color-emphasis: #9aa6c0;
+  --ngs-color-strong: #566176;
+
+  --ngs-state-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
+  --ngs-state-active-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(15, 118, 110, 0.12));
+  --ngs-state-selected-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-state-selected-color: #3730a3;
+  --ngs-state-focus-ring: rgba(79, 70, 229, 0.22);
+  --ngs-state-disabled-bg: #edf1f8;
+  --ngs-state-disabled-color: #9aa6c0;
+  --ngs-state-disabled-border: #d7deee;
+
+  --ngs-control-height-sm: calc(2.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-md: calc(3rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-lg: calc(3.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-padding-x: --spacing(5);
+  --ngs-control-gap: --spacing(2.5);
+  --ngs-control-radius: var(--ngs-radius-xl);
+  --ngs-icon-size: --spacing(6);
+  --ngs-button-font-size: 0.9375rem;
+  --ngs-button-font-weight: 700;
+  --ngs-button-tonal-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-button-tonal-color: #27226e;
+  --ngs-button-outlined-border: #c7d2fe;
+  --ngs-field-bg: rgba(255, 255, 255, 0.92);
+  --ngs-field-disabled-bg: #edf1f8;
+  --ngs-field-border-color: #ccd5ea;
+  --ngs-field-border-focus-color: #4f46e5;
+  --ngs-field-radius: var(--ngs-radius-lg);
+  --ngs-field-font-size: 0.9375rem;
+  --ngs-field-container-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-infix-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-padding-x: --spacing(4);
+  --ngs-field-filled-bg: #f3f5ff;
+  --ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
+  --ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
+  --ngs-dropdown-radius: var(--ngs-radius-xl);
+  --ngs-dropdown-border: 1px solid rgba(215, 222, 238, 0.9);
+  --ngs-dialog-radius: 1.75rem;
+  --ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
+  --ngs-overlay-backdrop-bg: rgba(23, 32, 51, 0.30);
+  --ngs-overlay-backdrop-blur: 8px;
+
+  --ngs-table-bg: #ffffff;
+  --ngs-table-header-bg: linear-gradient(135deg, #f3f5ff, #eefcf9);
+  --ngs-table-row-bg: #ffffff;
+  --ngs-table-border-color: #e1e7f4;
+  --ngs-table-row-height: calc(3.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-header-row-height: calc(3.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-cell-padding: --spacing(2) --spacing(5);
+  --ngs-table-cell-font-size: 0.9375rem;
+  --ngs-table-header-cell-font-size: 0.75rem;
+  --ngs-table-header-cell-font-weight: 800;
+
+  --ngs-nav-item-height: calc(2.875rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-items-gap: --spacing(1.5);
+  --ngs-nav-item-padding: 0 --spacing(4);
+  --ngs-nav-item-radius: var(--ngs-radius-full);
+  --ngs-nav-item-font-size: 0.9375rem;
+  --ngs-nav-item-font-weight: 700;
+  --ngs-nav-item-color: #566176;
+  --ngs-nav-item-hover-color: #172033;
+  --ngs-nav-item-active-color: #3730a3;
+  --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
+  --ngs-nav-item-active-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-nav-item-icon-color: #74809a;
+  --ngs-nav-item-hover-icon-color: #4f46e5;
+  --ngs-nav-item-active-icon-color: #4f46e5;
+  --ngs-nav-item-icon-font-size: 1.375rem;
+  --ngs-nav-heading-font-size: 0.75rem;
+  --ngs-nav-heading-font-weight: 800;
+  --ngs-nav-heading-margin-top: --spacing(7);
+  --ngs-nav-heading-margin-bottom: --spacing(2);
+  --ngs-nav-divider-margin: --spacing(6) 0;
+  --ngs-nav-nested-item-margin: 0 0 0 52px;
+  --ngs-sidebar-width: var(--ngs-sidenav-width, 18.5rem);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-ngs-color-scheme='light']) {
+    color-scheme: dark;
+
+    --ngs-color-primary: #a5b4fc;
+    --ngs-color-on-primary: #111827;
+    --ngs-color-primary-container: #3730a3;
+    --ngs-color-on-primary-container: #e0e7ff;
+    --ngs-color-secondary: #5eead4;
+    --ngs-color-on-secondary: #042f2e;
+    --ngs-color-secondary-container: #115e59;
+    --ngs-color-on-secondary-container: #ccfbf1;
+    --ngs-color-tertiary: #f9a8d4;
+    --ngs-color-on-tertiary: #500724;
+    --ngs-color-tertiary-container: #9d174d;
+    --ngs-color-on-tertiary-container: #fce7f3;
+    --ngs-color-danger: #fb7185;
+    --ngs-color-on-danger: #4c0519;
+    --ngs-color-danger-container: #9f1239;
+    --ngs-color-on-danger-container: #ffe4e6;
+    --ngs-color-info: #93c5fd;
+    --ngs-color-on-info: #0f1e46;
+    --ngs-color-info-container: #1d4ed8;
+    --ngs-color-on-info-container: #dbeafe;
+    --ngs-color-success: #6ee7b7;
+    --ngs-color-on-success: #042f2e;
+    --ngs-color-success-container: #047857;
+    --ngs-color-on-success-container: #d1fae5;
+    --ngs-color-warning: #fbbf24;
+    --ngs-color-on-warning: #451a03;
+    --ngs-color-warning-container: #92400e;
+    --ngs-color-on-warning-container: #fef3c7;
+    --ngs-color-background: #090d1a;
+    --ngs-color-on-background: #eef2ff;
+    --ngs-color-surface: #11162a;
+    --ngs-color-surface-bright: #1b2138;
+    --ngs-color-on-surface: #eef2ff;
+    --ngs-color-on-surface-variant: #b6c0d6;
+    --ngs-color-neutral-50: #090d1a;
+    --ngs-color-neutral-100: #11162a;
+    --ngs-color-neutral-200: #1b2138;
+    --ngs-color-neutral-300: #28304a;
+    --ngs-color-neutral-400: #3c4664;
+    --ngs-color-neutral-500: #697491;
+    --ngs-color-neutral-600: #8d98b5;
+    --ngs-color-neutral-650: #a3aec7;
+    --ngs-color-neutral-700: #b6c0d6;
+    --ngs-color-neutral-800: #d5dcf0;
+    --ngs-color-neutral-900: #eef2ff;
+    --ngs-color-neutral-950: #ffffff;
+    --ngs-color-surface-container-lowest: #090d1a;
+    --ngs-color-surface-container-low: #11162a;
+    --ngs-color-surface-container: #1b2138;
+    --ngs-color-surface-container-high: #28304a;
+    --ngs-color-surface-container-highest: #3c4664;
+    --ngs-color-outline: #8d98b5;
+    --ngs-color-outline-variant: #3c4664;
+    --ngs-color-border: #28304a;
+    --ngs-color-faint: #11162a;
+    --ngs-color-subtle: #1b2138;
+    --ngs-color-muted: #28304a;
+    --ngs-color-emphasis: #8d98b5;
+    --ngs-color-strong: #d5dcf0;
+    --ngs-state-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+    --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
+    --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
+    --ngs-state-selected-color: #eef2ff;
+    --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
+    --ngs-state-disabled-bg: #1b2138;
+    --ngs-state-disabled-color: #697491;
+    --ngs-state-disabled-border: #28304a;
+    --ngs-button-tonal-bg: linear-gradient(135deg, #3730a3, #115e59);
+    --ngs-button-tonal-color: #eef2ff;
+    --ngs-button-outlined-border: #4f5d82;
+    --ngs-field-bg: rgba(17, 22, 42, 0.92);
+    --ngs-field-disabled-bg: #1b2138;
+    --ngs-field-border-color: #4f5d82;
+    --ngs-field-border-focus-color: #a5b4fc;
+    --ngs-field-filled-bg: #1b2138;
+    --ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
+    --ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
+    --ngs-dropdown-border: 1px solid #28304a;
+    --ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
+    --ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
+    --ngs-table-bg: #11162a;
+    --ngs-table-header-bg: linear-gradient(135deg, #1b2138, #102f35);
+    --ngs-table-row-bg: #11162a;
+    --ngs-table-border-color: #28304a;
+    --ngs-nav-item-color: #b6c0d6;
+    --ngs-nav-item-hover-color: #eef2ff;
+    --ngs-nav-item-active-color: #eef2ff;
+    --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+    --ngs-nav-item-active-bg: linear-gradient(135deg, #3730a3, #115e59);
+    --ngs-nav-item-icon-color: #8d98b5;
+    --ngs-nav-item-hover-icon-color: #a5b4fc;
+    --ngs-nav-item-active-icon-color: #ccfbf1;
+  }
+}
+
+:root.dark,
+:root[data-ngs-color-scheme='dark'],
+.dark[data-ngs-theme='modern'],
+[data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
+  color-scheme: dark;
+
+  --ngs-color-primary: #a5b4fc;
+  --ngs-color-on-primary: #111827;
+  --ngs-color-primary-container: #3730a3;
+  --ngs-color-on-primary-container: #e0e7ff;
+  --ngs-color-secondary: #5eead4;
+  --ngs-color-on-secondary: #042f2e;
+  --ngs-color-secondary-container: #115e59;
+  --ngs-color-on-secondary-container: #ccfbf1;
+  --ngs-color-tertiary: #f9a8d4;
+  --ngs-color-on-tertiary: #500724;
+  --ngs-color-tertiary-container: #9d174d;
+  --ngs-color-on-tertiary-container: #fce7f3;
+  --ngs-color-danger: #fb7185;
+  --ngs-color-on-danger: #4c0519;
+  --ngs-color-danger-container: #9f1239;
+  --ngs-color-on-danger-container: #ffe4e6;
+  --ngs-color-info: #93c5fd;
+  --ngs-color-on-info: #0f1e46;
+  --ngs-color-info-container: #1d4ed8;
+  --ngs-color-on-info-container: #dbeafe;
+  --ngs-color-success: #6ee7b7;
+  --ngs-color-on-success: #042f2e;
+  --ngs-color-success-container: #047857;
+  --ngs-color-on-success-container: #d1fae5;
+  --ngs-color-warning: #fbbf24;
+  --ngs-color-on-warning: #451a03;
+  --ngs-color-warning-container: #92400e;
+  --ngs-color-on-warning-container: #fef3c7;
+  --ngs-color-background: #090d1a;
+  --ngs-color-on-background: #eef2ff;
+  --ngs-color-surface: #11162a;
+  --ngs-color-surface-bright: #1b2138;
+  --ngs-color-on-surface: #eef2ff;
+  --ngs-color-on-surface-variant: #b6c0d6;
+  --ngs-color-neutral-50: #090d1a;
+  --ngs-color-neutral-100: #11162a;
+  --ngs-color-neutral-200: #1b2138;
+  --ngs-color-neutral-300: #28304a;
+  --ngs-color-neutral-400: #3c4664;
+  --ngs-color-neutral-500: #697491;
+  --ngs-color-neutral-600: #8d98b5;
+  --ngs-color-neutral-650: #a3aec7;
+  --ngs-color-neutral-700: #b6c0d6;
+  --ngs-color-neutral-800: #d5dcf0;
+  --ngs-color-neutral-900: #eef2ff;
+  --ngs-color-neutral-950: #ffffff;
+  --ngs-color-surface-container-lowest: #090d1a;
+  --ngs-color-surface-container-low: #11162a;
+  --ngs-color-surface-container: #1b2138;
+  --ngs-color-surface-container-high: #28304a;
+  --ngs-color-surface-container-highest: #3c4664;
+  --ngs-color-outline: #8d98b5;
+  --ngs-color-outline-variant: #3c4664;
+  --ngs-color-border: #28304a;
+  --ngs-color-faint: #11162a;
+  --ngs-color-subtle: #1b2138;
+  --ngs-color-muted: #28304a;
+  --ngs-color-emphasis: #8d98b5;
+  --ngs-color-strong: #d5dcf0;
+  --ngs-state-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+  --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
+  --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-state-selected-color: #eef2ff;
+  --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
+  --ngs-state-disabled-bg: #1b2138;
+  --ngs-state-disabled-color: #697491;
+  --ngs-state-disabled-border: #28304a;
+  --ngs-button-tonal-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-button-tonal-color: #eef2ff;
+  --ngs-button-outlined-border: #4f5d82;
+  --ngs-field-bg: rgba(17, 22, 42, 0.92);
+  --ngs-field-disabled-bg: #1b2138;
+  --ngs-field-border-color: #4f5d82;
+  --ngs-field-border-focus-color: #a5b4fc;
+  --ngs-field-filled-bg: #1b2138;
+  --ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
+  --ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
+  --ngs-dropdown-border: 1px solid #28304a;
+  --ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
+  --ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
+  --ngs-table-bg: #11162a;
+  --ngs-table-header-bg: linear-gradient(135deg, #1b2138, #102f35);
+  --ngs-table-row-bg: #11162a;
+  --ngs-table-border-color: #28304a;
+  --ngs-nav-item-color: #b6c0d6;
+  --ngs-nav-item-hover-color: #eef2ff;
+  --ngs-nav-item-active-color: #eef2ff;
+  --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+  --ngs-nav-item-active-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-nav-item-icon-color: #8d98b5;
+  --ngs-nav-item-hover-icon-color: #a5b4fc;
+  --ngs-nav-item-active-icon-color: #ccfbf1;
+}

package/types/ngstarter-ui-components-chips.d.ts

@@ -20,7 +20,7 @@ declare class Chip {
     _handleKeydown(event: KeyboardEvent): void;
     _handleBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "ngs-chip", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "destroyed": "destroyed"; "removed": "removed"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "[ngsChipTrailingAction]", "ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "ngs-chip", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "destroyed": "destroyed"; "removed": "removed"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]"], true, never>;
 }
 
 interface ChipEditedEvent {
@@ -44,7 +44,7 @@ declare class ChipRow extends Chip {
     _startEditing(): void;
     private _stopEditing;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipRow, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipRow, "ngs-chip-row", never, { "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "edited": "edited"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "[ngsChipTrailingAction]", "ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipRow, "ngs-chip-row", never, { "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "edited": "edited"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]"], true, never>;
 }
 
 declare class ChipGrid implements ControlValueAccessor, AfterContentInit, FormFieldControl<any[]> {
@@ -109,7 +109,7 @@ declare class ChipOption extends Chip {
     }>;
     toggleSelected(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipOption, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipOption, "ngs-chip-option", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "[ngsChipTrailingAction]", "ngs-chip-remove, [ngsChipRemove], [ngsChipTrailingAction], [ngsChipEdit]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipOption, "ngs-chip-option", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["ngs-chip-avatar, [ngsChipAvatar]", "*", "ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]"], true, never>;
 }
 
 declare class ChipListbox implements ControlValueAccessor, AfterContentInit {
@@ -185,5 +185,10 @@ declare class ChipInput implements DoCheck {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ChipInput, "input[ngsChipInputFor]", never, { "chipGridInput": { "alias": "ngsChipInputFor"; "required": false; "isSignal": true; }; "chipInputSeparatorKeyCodes": { "alias": "ngsChipInputSeparatorKeyCodes"; "required": false; "isSignal": true; }; "chipInputAddOnBlur": { "alias": "ngsChipInputAddOnBlur"; "required": false; "isSignal": true; }; }, { "chipInputTokenEnd": "chipInputTokenEnd"; }, never, never, true, never>;
 }
 
-export { Chip, ChipAvatar, ChipEdit, ChipGrid, ChipInput, ChipListbox, ChipOption, ChipRemove, ChipRow, ChipSet };
+declare class ChipControl {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipControl, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ChipControl, "[ngsChipControl]", never, {}, {}, never, never, true, never>;
+}
+
+export { Chip, ChipAvatar, ChipControl, ChipEdit, ChipGrid, ChipInput, ChipListbox, ChipOption, ChipRemove, ChipRow, ChipSet };
 export type { ChipEditedEvent, ChipInputEvent };

package/types/ngstarter-ui-components-core.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, OnChanges, SimpleChanges, OnDestroy, ElementRef, Renderer2, InjectionToken, OnInit, NgZone, PipeTransform } from '@angular/core';
+import { AfterViewInit, OnChanges, SimpleChanges, OnDestroy, ElementRef, Renderer2, InjectionToken, OnInit, NgZone, PipeTransform, Provider } from '@angular/core';
 import { ControlValueAccessor, AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { Platform } from '@angular/cdk/platform';
 import { Observable, SchedulerLike } from 'rxjs';
@@ -323,18 +323,54 @@ declare class SeoService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SeoService>;
 }
 
+type NgsThemeName = 'default' | 'enterprise' | 'modern' | string;
+type NgsColorScheme = 'light' | 'dark' | 'auto';
+type NgsDensity = 'compact' | 'comfortable' | 'spacious';
+type NgsRadius = 'none' | 'small' | 'medium' | 'large';
+interface NgsThemeOptions {
+    theme?: NgsThemeName;
+    colorScheme?: NgsColorScheme;
+    density?: NgsDensity;
+    radius?: NgsRadius;
+    primaryColor?: string;
+    persist?: boolean;
+    storageKey?: string;
+}
+declare const NGS_THEME_OPTIONS: InjectionToken<NgsThemeOptions>;
+declare function provideNgsTheme(options?: NgsThemeOptions): Provider;
+
 declare class ThemeManagerService {
     private _document;
     private _window;
-    private _colorScheme;
+    private _options;
+    private readonly _theme;
+    private readonly _colorScheme;
+    private readonly _density;
+    private readonly _radius;
+    private readonly _primaryColor;
+    readonly theme: i0.Signal<string>;
+    readonly colorScheme: i0.Signal<"light" | "dark">;
+    readonly density: i0.Signal<NgsDensity>;
+    readonly radius: i0.Signal<NgsRadius>;
+    readonly primaryColor: i0.Signal<string | null>;
     constructor();
     getColorScheme(): 'dark' | 'light';
     toggleColorScheme(): void;
     changeColorScheme(colorScheme: 'dark' | 'light'): void;
+    setTheme(theme: NgsThemeName, persist?: boolean): void;
+    setDensity(density: NgsDensity, persist?: boolean): void;
+    setRadius(radius: NgsRadius, persist?: boolean): void;
+    setPrimaryColor(primaryColor: string | null, persist?: boolean): void;
+    applyTheme(options: NgsThemeOptions, persist?: boolean): void;
     private _getStoredColorScheme;
+    private _getStoredState;
+    private _persist;
     private _setStoredColorScheme;
     getPreferredColorScheme(): 'dark' | 'light';
-    setColorScheme(colorScheme: string): void;
+    setColorScheme(colorScheme: NgsColorScheme, persist?: boolean): void;
+    private _getInitialState;
+    private _syncDocumentAttributes;
+    private get _storageKey();
     static ɵfac: i0.ɵɵFactoryDeclaration<ThemeManagerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeManagerService>;
 }
@@ -417,5 +453,5 @@ declare function zonefreeScheduler(): SchedulerLike;
 
 declare function typedFromEvent<E extends Event>(target: EventTarget, event: string, options?: EventListenerOptions | boolean): Observable<E>;
 
-export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, getActualTarget, injectElement, isElement, px, typedFromEvent, zonefreeScheduler };
-export type { Autofocusable, GlobalState, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };
+export { AUTOFOCUSABLE, AnalyticsService, AutoFocusDirective, DebounceTimeDirective, ENVIRONMENT, EnvironmentService, ErrorStateMatcher, FilterByPropertyPipe, FocusElementDirective, FormatFileSizePipe, GlobalStore, InactivityTrackerService, InitialsPipe, MutationObserverService, NGS_THEME_OPTIONS, OrderByPipe, PageTitleStrategyService, RIPPLE_GLOBAL_OPTIONS, ResizeObserverService, Ripple, RippleRef, RippleRenderer, RippleState, SafeHtmlPipe, SafeResourceUrlPipe, ScreenLoaderService, SearchByPropertyPipe, SeoService, ShowOnDirtyErrorStateMatcher, SoundEffectDirective, TextareaAutoSize, ThemeManagerService, arrayShallowEquals, defaultRippleAnimationConfig, getActualTarget, injectElement, isElement, provideNgsTheme, px, typedFromEvent, zonefreeScheduler };
+export type { Autofocusable, GlobalState, NgsColorScheme, NgsDensity, NgsRadius, NgsThemeName, NgsThemeOptions, RippleAnimationConfig, RippleConfig, RippleGlobalOptions };