@ngstarter-ui/components 21.0.18 → 21.0.19

package/ai/component-registry.json

@@ -1603,7 +1603,7 @@
           "name": "chips-autocomplete-example",
           "title": "Chips autocomplete",
           "file": "projects/docs/src/app/components/chips/_examples/chips-autocomplete-example/chips-autocomplete-example.html",
-          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite Fruits</ngs-label>\n  <ngs-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits; track fruit) {\n      <ngs-chip-row (removed)=\"remove(fruit)\">\n        {{fruit}}\n        <button ngsChipRemove>\n          <ngs-icon name=\"fluent:dismiss-20-regular\"/>\n        </button>\n      </ngs-chip-row>\n    }\n  </ngs-chip-grid>\n  <input ngsInput\n         placeholder=\"New Fruit...\" #fruitInput\n         [formControl]=\"fruitCtrl\"\n         [ngsChipInputFor]=\"chipGrid\"\n         [ngsAutocomplete]=\"auto\"\n         [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n         (chipInputTokenEnd)=\"add($event)\">\n  <ngs-autocomplete #auto=\"ngsAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits | async; track fruit) {\n      <ngs-option [value]=\"fruit\">{{ fruit }}</ngs-option>\n    }\n  </ngs-autocomplete>\n</ngs-form-field>"
+          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite Fruits</ngs-label>\n  <ngs-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits; track fruit) {\n      <ngs-chip-row (removed)=\"remove(fruit)\">\n        {{fruit}}\n        <button ngsChipRemove>\n          <ngs-icon name=\"fluent:dismiss-20-regular\"/>\n        </button>\n      </ngs-chip-row>\n    }\n    <input ngsInput\n           placeholder=\"New Fruit...\" #fruitInput\n           [formControl]=\"fruitCtrl\"\n           [ngsChipInputFor]=\"chipGrid\"\n           [ngsAutocomplete]=\"auto\"\n           [ngsChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n           (chipInputTokenEnd)=\"add($event)\">\n  </ngs-chip-grid>\n  <ngs-autocomplete #auto=\"ngsAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits | async; track fruit) {\n      <ngs-option [value]=\"fruit\">{{ fruit }}</ngs-option>\n    }\n  </ngs-autocomplete>\n</ngs-form-field>"
         }
       ],
       "previewAsset": "projects/components/chips/preview.svg",
@@ -1663,15 +1663,18 @@
         "valueChange"
       ],
       "cssTokens": [
-        "--ngs-chip-bg",
+        "--ngs-avatar-size",
+        "--ngs-chip-background",
+        "--ngs-chip-border-color",
         "--ngs-chip-color",
         "--ngs-chip-font-size",
         "--ngs-chip-font-weight",
         "--ngs-chip-height",
+        "--ngs-chip-input-height",
         "--ngs-chip-outline-color",
         "--ngs-chip-padding",
         "--ngs-chip-radius",
-        "--ngs-chip-selected-bg",
+        "--ngs-chip-selected-background",
         "--ngs-chip-selected-color",
         "--ngs-chip-set-gap",
         "--ngs-chip-set-spacing",
@@ -1681,7 +1684,9 @@
         "--ngs-color-outline-variant",
         "--ngs-color-primary",
         "--ngs-color-surface-container-high",
+        "--ngs-field-input-height",
         "--ngs-font-size-xs",
+        "--ngs-form-field-input-height",
         "--ngs-icon-size",
         "--ngs-radius-xl"
       ],
@@ -4149,6 +4154,7 @@
       ],
       "inputs": [
         "align",
+        "sameHeightAsButton",
         "subscriptHiddenIfEmpty"
       ],
       "outputs": [],
@@ -7531,6 +7537,7 @@
       "useWhen": "Use ngs-select inside one ngs-form-field when a form, filter, setting, table filter, DataView filter, or admin configuration field should choose from predefined options. Use ngs-option for options, ngs-optgroup for visible grouping, multiple for array values, placeholder, required, disabled, Angular forms, value, and selectionChange for state. Use ngs-select-trigger to customize the closed label, and ngs-select-header, ngs-select-body, or ngs-select-footer when the dropdown panel needs search, custom scrolling, or supporting controls. Do not use Select as a command menu or action list; use Menu. Do not use for route or page navigation; use Navigation, Tabs, Sidebar, Sidenav, or RailNav. Do not use for compact visible mode switching; use Segmented. Do not use for simple visible choices or rich card choices; use Radio or RadioCard. Do not use for arbitrary free text or large remote search suggestion flows; use Autocomplete or a dedicated async picker. Do not use generic Select when a domain-specific control exists, such as CountrySelect, CurrencySelect, DateFormatSelect, or TimezoneSelect.",
       "exampleTopics": [
         "Basic Select",
+        "Clearable Select",
         "Getting and setting the select value",
         "Form Field Features",
         "Disabled",
@@ -7544,25 +7551,25 @@
         "Custom trigger",
         "Select search"
       ],
-      "minimalExample": "<p>Basic mat-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>",
+      "minimalExample": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>",
       "exampleFiles": [
         {
           "name": "basic-select-example",
           "title": "Basic select",
           "file": "projects/docs/src/app/forms/select/_examples/basic-select-example/basic-select-example.html",
-          "source": "<p>Basic mat-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
+          "source": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
+        },
+        {
+          "name": "clearable-select-example",
+          "title": "Clearable select",
+          "file": "projects/docs/src/app/forms/select/_examples/clearable-select-example/clearable-select-example.html",
+          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Status</ngs-label>\n  <ngs-select [formControl]=\"status()\" clearable>\n    @for (statusOption of statuses(); track statusOption.value) {\n      <ngs-option [value]=\"statusOption.value\">{{ statusOption.label }}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
         },
         {
           "name": "custom-trigger-example",
           "title": "Custom trigger",
           "file": "projects/docs/src/app/forms/select/_examples/custom-trigger-example/custom-trigger-example.html",
           "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Toppings</ngs-label>\n  <ngs-select [formControl]=\"toppings\" multiple>\n    <ngs-select-trigger>\n      {{ toppings.value?.[0] || '' }}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"opacity-75 text-sm\">\n          (+{{ (toppings.value?.length || 0) - 1 }} {{ toppings.value?.length === 2 ? 'other' : 'others' }})\n        </span>\n      }\n    </ngs-select-trigger>\n    @for (topping of toppingList; track topping) {\n      <ngs-option [value]=\"topping\">{{topping}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
-        },
-        {
-          "name": "disabled-example",
-          "title": "Disabled",
-          "file": "projects/docs/src/app/forms/select/_examples/disabled-example/disabled-example.html",
-          "source": "<p>\n  <ngs-checkbox [formControl]=\"disableSelect\">Disable select</ngs-checkbox>\n</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Choose an option</ngs-label>\n  <ngs-select [disabled]=\"disableSelect.value\">\n    <ngs-option value=\"option1\">Option 1</ngs-option>\n    <ngs-option value=\"option2\" disabled>Option 2 (disabled)</ngs-option>\n    <ngs-option value=\"option3\">Option 3</ngs-option>\n  </ngs-select>\n</ngs-form-field>"
         }
       ],
       "previewAsset": "projects/components/select/preview.svg",
@@ -7590,6 +7597,7 @@
       "inputs": [
         "aria-describedby",
         "aria-label",
+        "clearable",
         "disabled",
         "hideCheckIcon",
         "id",
@@ -7607,6 +7615,7 @@
         "selectionChange"
       ],
       "cssTokens": [
+        "--ngs-color-danger",
         "--ngs-color-on-primary",
         "--ngs-color-on-surface",
         "--ngs-color-on-surface-variant",
@@ -7640,6 +7649,11 @@
         "--ngs-select-arrow-container-width",
         "--ngs-select-arrow-size",
         "--ngs-select-border-color",
+        "--ngs-select-clear-color",
+        "--ngs-select-clear-container-width",
+        "--ngs-select-clear-hover-color",
+        "--ngs-select-clear-icon-size",
+        "--ngs-select-clear-overlap",
         "--ngs-select-content-padding",
         "--ngs-select-font-size",
         "--ngs-select-min-width",

package/fesm2022/ngstarter-ui-components-chips.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, signal, forwardRef, computed, contentChildren, effect, Directive } from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, output, ChangeDetectionStrategy, Component, ChangeDetectorRef, viewChild, signal, forwardRef, computed, contentChildren, effect, ViewEncapsulation, Directive } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AutoFocusDirective } from '@ngstarter-ui/components/core';
@@ -26,18 +26,18 @@ class Chip {
     _handleBlur() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Chip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Chip, isStandalone: true, selector: "ngs-chip", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { destroyed: "destroyed", removed: "removed" }, host: { properties: { "class.ngs-chip-disabled": "disabled()", "attr.appearance": "appearance()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip" }, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: Chip, isStandalone: true, selector: "ngs-chip", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { destroyed: "destroyed", removed: "removed" }, host: { properties: { "class.ngs-chip-disabled": "disabled()", "attr.appearance": "appearance()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip" }, exportAs: ["ngsChip"], ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Chip, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-chip', host: {
+            args: [{ selector: 'ngs-chip', exportAs: 'ngsChip', imports: [
+                        AutoFocusDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-chip',
                         '[class.ngs-chip-disabled]': 'disabled()',
                         '[attr.appearance]': 'appearance()',
                         '[attr.aria-disabled]': 'disabled()',
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        AutoFocusDirective
-                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], destroyed: [{ type: i0.Output, args: ["destroyed"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 class ChipRow extends Chip {
@@ -99,7 +99,7 @@ class ChipRow extends Chip {
                 provide: Chip,
                 useExisting: forwardRef(() => ChipRow)
             }
-        ], viewQueries: [{ propertyName: "_editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "_editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipRow, decorators: [{
             type: Component,
@@ -114,14 +114,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'role': 'row',
                         '(keydown)': '_handleKeydown($event)',
                         '(click)': '_handleClick($event)',
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AutoFocusDirective
                     ], providers: [
                         {
                             provide: Chip,
                             useExisting: forwardRef(() => ChipRow)
                         }
-                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _editInput: [{ type: i0.ViewChild, args: ['editInput', { isSignal: true }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }] } });
 
 let nextId = 0;
@@ -146,6 +146,7 @@ class ChipGrid {
     stateChanges = signal(undefined, ...(ngDevMode ? [{ debugName: "stateChanges" }] : /* istanbul ignore next */ []));
     _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
     get focused() { return this._focused(); }
+    get multiline() { return this._chipsLength() > 0; }
     _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
     get errorState() { return this._errorState(); }
     _chipsLength = signal(0, ...(ngDevMode ? [{ debugName: "_chipsLength" }] : /* istanbul ignore next */ []));
@@ -235,7 +236,7 @@ class ChipGrid {
                 provide: FormFieldControl,
                 useExisting: forwardRef(() => ChipGrid),
             },
-        ], queries: [{ propertyName: "_chips", predicate: ChipRow, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_chips", predicate: ChipRow, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));--ngs-chip-input-height: var(--ngs-form-field-input-height, var(--ngs-field-input-height, 1.25rem));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ngs-chip-set-gap);width:100%}:host ::ng-deep .ngs-chip-input{outline:none;flex:1 0 100%;min-width:0;max-width:100%;width:100%!important;height:var(--ngs-chip-input-height);min-height:var(--ngs-chip-input-height);box-sizing:border-box}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipGrid, decorators: [{
             type: Component,
@@ -249,12 +250,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                             provide: FormFieldControl,
                             useExisting: forwardRef(() => ChipGrid),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));display:flex;flex-wrap:wrap;gap:var(--ngs-chip-set-gap)}:host ::ng-deep .ngs-chip-input{outline:none;width:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{--ngs-chip-set-gap: var(--ngs-chip-set-spacing, calc(var(--spacing, .25rem) * 2));--ngs-chip-input-height: var(--ngs-form-field-input-height, var(--ngs-field-input-height, 1.25rem));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ngs-chip-set-gap);width:100%}:host ::ng-deep .ngs-chip-input{outline:none;flex:1 0 100%;min-width:0;max-width:100%;width:100%!important;height:var(--ngs-chip-input-height);min-height:var(--ngs-chip-input-height);box-sizing:border-box}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { _id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], _disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _chips: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ChipRow), { ...{ descendants: true }, isSignal: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class ChipOption extends Chip {
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _internalSelected = false;
+    _internalSelected = signal(false, ...(ngDevMode ? [{ debugName: "_internalSelected" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
@@ -262,10 +263,10 @@ class ChipOption extends Chip {
         });
     }
     get isSelected() {
-        return this._internalSelected;
+        return this._internalSelected();
     }
     _setSelected(value) {
-        this._internalSelected = value;
+        this._internalSelected.set(value);
     }
     selectionChange = output();
     toggleSelected() {
@@ -280,11 +281,18 @@ class ChipOption extends Chip {
                 provide: Chip,
                 useExisting: forwardRef(() => ChipOption)
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], exportAs: ["ngsChipOption"], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[ngsAutoFocus]", inputs: ["ngsAutoFocus"], exportAs: ["ngsAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipOption, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-chip-option', host: {
+            args: [{ selector: 'ngs-chip-option', exportAs: 'ngsChipOption', imports: [
+                        AutoFocusDirective
+                    ], providers: [
+                        {
+                            provide: Chip,
+                            useExisting: forwardRef(() => ChipOption)
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-chip ngs-chip-option',
                         '[class.ngs-chip-selected]': 'isSelected',
                         '[class.ngs-chip-disabled]': 'disabled()',
@@ -293,21 +301,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[attr.aria-selected]': 'isSelected',
                         '[attr.aria-disabled]': 'disabled()',
                         '(click)': 'toggleSelected()',
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        AutoFocusDirective
-                    ], providers: [
-                        {
-                            provide: Chip,
-                            useExisting: forwardRef(() => ChipOption)
-                        }
-                    ], template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [".ngs-chip{--ngs-chip-bg: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}.ngs-chip[appearance=filled]{background:var(--ngs-chip-bg);color:var(--ngs-chip-color)}.ngs-chip[appearance=outlined]{background:transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-outline-color, var(--ngs-color-outline-variant))}.ngs-chip[appearance=outlined].ngs-chip-selected{border-color:var(--ngs-chip-selected-bg, var(--ngs-color-primary))}.ngs-chip:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}.ngs-chip:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1.5)}.ngs-chip .avatar:empty{display:none}.ngs-chip .avatar img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}.ngs-chip .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}.ngs-chip .shape:empty{display:none}.ngs-chip.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}.ngs-chip .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ngs-chip .controls:empty{display:none}.ngs-chip .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-chip .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}.ngs-chip .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}.ngs-chip .ngs-chip-edit,.ngs-chip .ngs-chip-remove{line-height:0;--ngs-icon-size: calc(var(--spacing, .25rem) * 5);cursor:pointer;opacity:.55}.ngs-chip .ngs-chip-edit:hover,.ngs-chip .ngs-chip-remove:hover{opacity:1}.ngs-chip .ngs-chip-remove:hover{color:var(--ngs-color-danger)}.ngs-chip.ngs-chip-editing .avatar,.ngs-chip.ngs-chip-editing .controls{display:none}.ngs-chip.ngs-chip-selected{--ngs-chip-bg: var(--ngs-chip-selected-bg, var(--ngs-color-primary));--ngs-chip-color: var(--ngs-chip-selected-color, var(--ngs-color-on-primary))}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ngs-chip-content\">\n  <span class=\"avatar\">\n    <ng-content select=\"ngs-chip-avatar, [ngsChipAvatar]\"/>\n  </span>\n  <span class=\"shape\">\n    <ng-content select=\"ngs-chip-shape, [ngsChipShape]\"/>\n  </span>\n  <span\n    #editInput\n    class=\"ngs-chip-label\"\n    [attr.contenteditable]=\"_editing || null\"\n    (blur)=\"_handleBlur()\"\n    (keydown)=\"_handleKeydown($event)\"\n    [ngsAutoFocus]=\"_editing\"\n  >\n    <ng-content/>\n  </span>\n  <div class=\"controls\">\n    <ng-content select=\"ngs-chip-remove, [ngsChipRemove], [ngsChipControl], [ngsChipEdit]\"/>\n  </div>\n</div>\n", styles: [":host{--ngs-chip-background: var(--ngs-color-surface-container-high);--ngs-chip-color: var(--ngs-color-on-surface);--ngs-chip-radius: var(--ngs-radius-xl);--ngs-chip-padding: 0 calc(var(--spacing, .25rem) * 3);--ngs-chip-font-size: var(--ngs-font-size-xs);--ngs-chip-font-weight: 500;--ngs-chip-height: calc(var(--spacing, .25rem) * 8);--ngs-chip-border-color: var(--ngs-chip-outline-color, var(--ngs-color-outline-variant));--ngs-chip-selected-background: var(--ngs-color-primary);--ngs-chip-selected-color: var(--ngs-color-on-primary);display:inline-flex;align-items:center;border-radius:var(--ngs-chip-radius);padding:var(--ngs-chip-padding);font-size:var(--ngs-chip-font-size);font-weight:var(--ngs-chip-font-weight);height:var(--ngs-chip-height);box-sizing:border-box;vertical-align:middle;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}:host[appearance=filled],:host.ngs-chip-filled{background:var(--ngs-chip-background);color:var(--ngs-chip-color)}:host[appearance=outlined],:host.ngs-chip-outlined{--ngs-chip-background: transparent;color:var(--ngs-chip-color);border:1px solid var(--ngs-chip-border-color)}:host[appearance=outlined].ngs-chip-selected,:host.ngs-chip-outlined.ngs-chip-selected{border-color:var(--ngs-chip-selected-background)}:host:not(.ngs-chip-selected):not(.ngs-chip-editing):hover{filter:brightness(97%)}:host:has(.avatar:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.shape:not(:empty)){padding-left:calc(var(--spacing, .25rem) * 1.5)}:host:has(.ngs-chip-remove:not(:empty)){padding-right:calc(var(--spacing, .25rem) * 1.5)}:host .avatar{position:relative;margin-right:calc(var(--spacing, .25rem) * 1);display:flex;height:100%;justify-content:center;align-items:center}:host .avatar:empty{display:none}:host .avatar ::ng-deep ngs-avatar,:host .avatar ::ng-deep ngs-dicebear{--ngs-avatar-size: calc(var(--spacing, .25rem) * 6)}:host .avatar ::ng-deep img{width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);border-radius:50%}:host .shape{position:relative;max-height:max-content;display:flex;align-items:center;justify-content:center}:host .shape:empty{display:none}:host.ngs-chip-disabled{opacity:.4;cursor:default;pointer-events:none}:host .ngs-chip-content{display:flex;align-items:center;width:100%;height:100%;gap:calc(var(--spacing, .25rem) * 1)}:host .controls{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}:host .controls:empty{display:none}:host .controls ::ng-deep .ngs-chip-edit,:host .controls ::ng-deep .ngs-chip-remove{--ngs-icon-size: calc(var(--spacing, .25rem) * 4);appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(var(--spacing, .25rem) * 5);height:calc(var(--spacing, .25rem) * 5);padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;line-height:1;vertical-align:middle;cursor:pointer;opacity:.65}:host .controls ::ng-deep .ngs-chip-edit:hover,:host .controls ::ng-deep .ngs-chip-remove:hover{opacity:1}:host .controls ::ng-deep .ngs-chip-remove:hover{color:var(--ngs-color-danger)}:host .ngs-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .ngs-chip-label[contenteditable=true]{display:inline-block;min-width:calc(var(--spacing, .25rem) * 5);outline:none;margin-inline-end:calc(var(--spacing, .25rem) * 2)}:host .ngs-chip-avatar{margin-right:calc(var(--spacing, .25rem) * 2);display:flex;align-items:center;justify-content:center}:host.ngs-chip-editing .avatar,:host.ngs-chip-editing .controls{display:none}:host.ngs-chip-selected{--ngs-chip-background: var(--ngs-chip-selected-background);--ngs-chip-color: var(--ngs-chip-selected-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class ChipListbox {
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _disabledByControl = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByControl" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByControl(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     _chips = contentChildren(ChipOption, { ...(ngDevMode ? { debugName: "_chips" } : /* istanbul ignore next */ {}), descendants: true });
     _chips$ = toObservable(this._chips);
+    _chipSelectionSubscriptions = [];
+    _syncTimeout = null;
     _value;
     onChange = () => { };
     onTouched = () => { };
@@ -316,11 +321,11 @@ class ChipListbox {
     }
     set value(value) {
         this._value = value;
-        this._updateChips();
+        this._syncChipsAsync();
     }
     writeValue(value) {
         this._value = value;
-        this._updateChips();
+        this._syncChipsAsync();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -329,10 +334,11 @@ class ChipListbox {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
+        this._disabledByControl.set(isDisabled);
     }
     ngAfterContentInit() {
         this._chips$.subscribe(() => {
-            this._updateChips();
+            this._syncChipsAsync();
         });
         if (this._value === undefined) {
             const selectedChips = this._chips().filter(chip => chip.isSelected);
@@ -344,16 +350,20 @@ class ChipListbox {
                 this._value = lastSelected ? (lastSelected.value() !== undefined ? lastSelected.value() : lastSelected) : undefined;
             }
         }
-        Promise.resolve().then(() => {
-            this._updateChips();
-        });
-        this._chips().forEach(chip => {
-            chip.selectionChange.subscribe(() => {
-                this._onSelectionChange(chip);
-            });
-        });
+        this._syncChipsAsync();
+    }
+    ngOnDestroy() {
+        if (this._syncTimeout !== null) {
+            clearTimeout(this._syncTimeout);
+            this._syncTimeout = null;
+        }
+        this._clearChipSelectionSubscriptions();
     }
     _onSelectionChange(chip) {
+        if (this.isDisabled()) {
+            this._updateChips();
+            return;
+        }
         const value = chip.value() !== undefined ? chip.value() : chip;
         if (this.multiple()) {
             if (!Array.isArray(this._value)) {
@@ -383,6 +393,26 @@ class ChipListbox {
         this.onChange(this._value);
         this.onTouched();
     }
+    _watchChips() {
+        this._clearChipSelectionSubscriptions();
+        this._chipSelectionSubscriptions = this._chips().map(chip => chip.selectionChange.subscribe(() => {
+            this._onSelectionChange(chip);
+        }));
+    }
+    _clearChipSelectionSubscriptions() {
+        this._chipSelectionSubscriptions.forEach(subscription => subscription.unsubscribe());
+        this._chipSelectionSubscriptions = [];
+    }
+    _syncChipsAsync() {
+        if (this._syncTimeout !== null) {
+            clearTimeout(this._syncTimeout);
+        }
+        this._syncTimeout = setTimeout(() => {
+            this._syncTimeout = null;
+            this._watchChips();
+            this._updateChips();
+        });
+    }
     _updateChips() {
         const _chips = this._chips();
         if (!_chips || this._value === undefined) {
@@ -399,7 +429,7 @@ class ChipListbox {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ChipListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ChipListbox, isStandalone: true, selector: "ngs-chip-listbox", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "attr.aria-multiselectable": "multiple()", "attr.aria-disabled": "disabled()" }, classAttribute: "ngs-chip-listbox ngs-chip-set" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ChipListbox, isStandalone: true, selector: "ngs-chip-listbox", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "attr.aria-multiselectable": "multiple()", "attr.aria-disabled": "isDisabled()" }, classAttribute: "ngs-chip-listbox ngs-chip-set" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ChipListbox),
@@ -413,7 +443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-chip-listbox ngs-chip-set',
                         'role': 'listbox',
                         '[attr.aria-multiselectable]': 'multiple()',
-                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.aria-disabled]': 'isDisabled()',
                     }, standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -531,7 +561,11 @@ class ChipInput {
         if (event.defaultPrevented) {
             return;
         }
-        if (this.chipInputSeparatorKeyCodes() && this.chipInputSeparatorKeyCodes().includes(event.keyCode)) {
+        const separatorKeyCodes = this.chipInputSeparatorKeyCodes();
+        const isSeparatorKey = Array.isArray(separatorKeyCodes)
+            ? separatorKeyCodes.includes(event.keyCode)
+            : !!separatorKeyCodes && 'has' in separatorKeyCodes && separatorKeyCodes.has(event.keyCode);
+        if (isSeparatorKey) {
             this.chipInputTokenEnd.emit({
                 chipInput: this,
                 value: this._elementRef.nativeElement.value,