@ng-solid/design-system 22.2.0 → 22.2.2

package/fesm2022/ng-solid-design-system.mjs

@@ -2608,6 +2608,306 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 args: ['trigger']
             }] } });
 
+class NsDropdownItemDirective {
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ns-dropdown-item',
+                    standalone: true
+                }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class NsSkeletonComponent {
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSkeletonComponent, isStandalone: true, selector: "ns-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.ns-skeleton": "true", "class.ns-skeleton--animated": "animated()", "style.inline-size": "width()", "style.block-size": "height()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;overflow:hidden;border-radius:var(--ns-component-skeleton-radius);background:var(--ns-component-skeleton-background)}:host(.ns-skeleton--animated){background:linear-gradient(90deg,var(--ns-component-skeleton-background) 25%,var(--ns-component-skeleton-highlight) 50%,var(--ns-component-skeleton-background) 75%);background-size:200% 100%;animation:ns-skeleton-shimmer var(--ns-component-skeleton-duration) linear infinite}@keyframes ns-skeleton-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){:host(.ns-skeleton--animated){animation:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ns-skeleton', standalone: true, template: '', host: {
+                        'aria-hidden': 'true',
+                        '[class.ns-skeleton]': 'true',
+                        '[class.ns-skeleton--animated]': 'animated()',
+                        '[style.inline-size]': 'width()',
+                        '[style.block-size]': 'height()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow:hidden;border-radius:var(--ns-component-skeleton-radius);background:var(--ns-component-skeleton-background)}:host(.ns-skeleton--animated){background:linear-gradient(90deg,var(--ns-component-skeleton-background) 25%,var(--ns-component-skeleton-highlight) 50%,var(--ns-component-skeleton-background) 75%);background-size:200% 100%;animation:ns-skeleton-shimmer var(--ns-component-skeleton-duration) linear infinite}@keyframes ns-skeleton-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){:host(.ns-skeleton--animated){animation:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
+
+function normalizeNsDropdownLabel(value) {
+    return value
+        .toLocaleLowerCase()
+        .normalize('NFD')
+        .replace(/\p{Diacritic}/gu, '');
+}
+class NsDropdownComponent extends NsValueAccessor {
+    collection = input([], ...(ngDevMode ? [{ debugName: "collection" }] : /* istanbul ignore next */ []));
+    contentItems = contentChildren(NsDropdownItemDirective, ...(ngDevMode ? [{ debugName: "contentItems" }] : /* istanbul ignore next */ []));
+    selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchPlaceholder = input('Search', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyText = input('No results', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    trigger;
+    menu;
+    searchInput;
+    listbox;
+    overlay = inject(NsOverlayService);
+    destroyRef = inject(DestroyRef);
+    typeahead = new NsTypeaheadController();
+    overlayRef;
+    destroyed = false;
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    listboxId = `${this.id}-listbox`;
+    searchId = `${this.id}-search`;
+    skeletonRows = [0, 1, 2, 3];
+    items = computed(() => {
+        const projected = this.contentItems();
+        if (projected.length) {
+            return projected.map((item) => ({
+                key: item.key(),
+                label: item.label(),
+                disabled: item.disabled()
+            }));
+        }
+        return this.collection().map((item) => ({
+            key: item.key,
+            label: item.label,
+            disabled: item.disabled ?? false
+        }));
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    visibleItems = computed(() => {
+        const normalized = normalizeNsDropdownLabel(this.query());
+        const items = this.items();
+        if (!normalized) {
+            return items;
+        }
+        return items.filter((item) => normalizeNsDropdownLabel(item.label).includes(normalized));
+    }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    selectedKeys = computed(() => {
+        const value = this.value();
+        if (value === null || value === undefined) {
+            return new Set();
+        }
+        return new Set(Array.isArray(value) ? value : [value]);
+    }, ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const keys = this.selectedKeys();
+        if (!keys.size) {
+            return '';
+        }
+        return this.items()
+            .filter((item) => keys.has(item.key))
+            .map((item) => item.label)
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    activeId = computed(() => {
+        const item = this.visibleItems()[this.activeIndex()];
+        return item ? `${this.listboxId}-${String(item.key)}` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.overlayRef?.close('programmatic');
+        });
+    }
+    toggle() {
+        this.open() ? this.close() : this.show();
+    }
+    select(key) {
+        const item = this.items().find((candidate) => candidate.key === key);
+        if (!item || item.disabled || this.selectionMode() === 'none') {
+            return;
+        }
+        if (this.selectionMode() === 'multiple') {
+            const current = new Set(this.selectedKeys());
+            current.has(key) ? current.delete(key) : current.add(key);
+            this.setValue([...current]);
+            this.onTouched();
+        }
+        else {
+            this.setValue(key);
+            this.onTouched();
+            this.close();
+        }
+    }
+    onNativeChange(event) {
+        const select = event.target;
+        const items = this.items();
+        if (this.selectionMode() === 'multiple') {
+            const keys = Array.from(select.selectedOptions)
+                .map((option) => items.find((item) => String(item.key) === option.value)?.key)
+                .filter((key) => key !== undefined);
+            this.setValue(keys);
+            this.onTouched();
+            return;
+        }
+        const item = items.find((candidate) => String(candidate.key) === select.value);
+        if (item) {
+            this.select(item.key);
+        }
+    }
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.query.set(value);
+        this.activeIndex.set(this.visibleItems().length ? 0 : -1);
+    }
+    onTriggerKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+            event.preventDefault();
+            if (!this.open()) {
+                this.show();
+            }
+        }
+    }
+    onSearchKeydown(event) {
+        const items = this.visibleItems();
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const active = items[this.activeIndex()];
+            if (active) {
+                this.select(active.key);
+            }
+            return;
+        }
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            const next = getNsNextNavigableIndex(items.map((item) => ({ key: item.key, disabled: item.disabled })), this.activeIndex(), event.key);
+            if (next >= 0) {
+                event.preventDefault();
+                this.activeIndex.set(next);
+            }
+        }
+    }
+    onListboxKeydown(event) {
+        if (this.searchable()) {
+            return;
+        }
+        const items = this.visibleItems();
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const active = items[this.activeIndex()];
+            if (active) {
+                this.select(active.key);
+            }
+            return;
+        }
+        let next = -1;
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            next = getNsNextNavigableIndex(items.map((item) => ({ key: item.key, disabled: item.disabled })), this.activeIndex(), event.key);
+        }
+        else {
+            next = this.typeahead.find(items.map((item) => ({ label: item.label, disabled: item.disabled })), event.key, this.activeIndex());
+        }
+        if (next >= 0) {
+            event.preventDefault();
+            this.activeIndex.set(next);
+        }
+    }
+    show() {
+        if (this.disabled() || this.open() || !this.menu || !this.trigger) {
+            return;
+        }
+        this.open.set(true);
+        this.query.set('');
+        this.activeIndex.set(-1);
+        this.overlayRef = this.overlay.open({
+            origin: this.trigger.nativeElement,
+            placement: this.placement(),
+            matchOriginWidth: true,
+            restoreFocus: true
+        });
+        this.overlayRef.attach(this.menu.nativeElement);
+        this.overlayRef.onClose(() => {
+            const wasDestroyed = this.destroyed;
+            this.overlayRef = undefined;
+            if (!wasDestroyed) {
+                this.open.set(false);
+                this.query.set('');
+                this.closed.emit();
+            }
+        });
+        this.opened.emit();
+        queueMicrotask(() => {
+            if (this.searchable()) {
+                this.searchInput?.nativeElement.focus();
+            }
+            else {
+                this.listbox?.nativeElement.focus();
+            }
+        });
+    }
+    close() {
+        this.overlayRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDropdownComponent, isStandalone: true, selector: "ns-dropdown", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "class.ns-dropdown": "true", "class.ns-dropdown--open": "open()", "class.ns-dropdown--disabled": "disabled()", "class.ns-dropdown--invalid": "invalid()", "attr.data-state": "open() ? 'open' : 'closed'" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NsDropdownComponent,
+                multi: true
+            }
+        ], queries: [{ propertyName: "contentItems", predicate: NsDropdownItemDirective, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n  <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n    >{{ label() }}\n    @if (required()) {\n      <span aria-hidden=\"true\"> *</span>\n    }\n  </label>\n}\n<button\n  #trigger\n  type=\"button\"\n  class=\"ns-dropdown__trigger\"\n  role=\"combobox\"\n  [id]=\"controlId()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listboxId\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-invalid]=\"invalid() || null\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"onTouched()\"\n>\n  <span\n    class=\"ns-dropdown__trigger-value\"\n    [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n    >{{ selectedLabel() || placeholder() }}</span\n  >\n  <ns-icon\n    class=\"ns-dropdown__trigger-icon\"\n    name=\"chevron-down\"\n    size=\"18\"\n    aria-hidden=\"true\"\n  />\n</button>\n<select\n  class=\"ns-dropdown__native-control\"\n  [attr.name]=\"name()\"\n  [multiple]=\"selectionMode() === 'multiple'\"\n  [disabled]=\"disabled()\"\n  (change)=\"onNativeChange($event)\"\n  (blur)=\"onTouched()\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n>\n  @for (item of items(); track item.key) {\n    <option\n      [value]=\"item.key\"\n      [selected]=\"selectedKeys().has(item.key)\"\n      [disabled]=\"item.disabled\"\n    >\n      {{ item.label }}\n    </option>\n  }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n  @if (searchable()) {\n    <div class=\"ns-dropdown__search\">\n      <input\n        #searchInput\n        class=\"ns-dropdown__search-input\"\n        type=\"text\"\n        [id]=\"searchId\"\n        [attr.placeholder]=\"searchPlaceholder()\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [value]=\"query()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n      <ns-icon\n        class=\"ns-dropdown__search-icon\"\n        name=\"search\"\n        size=\"16\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  }\n  <div\n    #listbox\n    class=\"ns-dropdown__listbox\"\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.tabindex]=\"searchable() ? null : 0\"\n    (keydown)=\"onListboxKeydown($event)\"\n  >\n    @if (loading()) {\n      @for (row of skeletonRows; track row) {\n        <div class=\"ns-dropdown__skeleton-row\">\n          <ns-skeleton />\n        </div>\n      }\n    } @else if (visibleItems().length === 0) {\n      <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n    } @else {\n      @for (item of visibleItems(); track item.key; let index = $index) {\n        <div\n          class=\"ns-dropdown__option\"\n          role=\"option\"\n          [id]=\"listboxId + '-' + item.key\"\n          [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n          [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n          [class.ns-dropdown__option--disabled]=\"item.disabled\"\n          [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n          [attr.aria-disabled]=\"item.disabled\"\n          (click)=\"select(item.key)\"\n        >\n          {{ item.label }}\n        </div>\n      }\n    }\n  </div>\n</div>\n@if (description()) {\n  <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n    {{ description() }}\n  </p>\n}\n@if (invalid() && errorMessage()) {\n  <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n    {{ errorMessage() }}\n  </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsSkeletonComponent, selector: "ns-skeleton", inputs: ["width", "height", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ns-dropdown', standalone: true, imports: [NsIconsComponent, NsSkeletonComponent], host: {
+                        '[class.ns-dropdown]': 'true',
+                        '[class.ns-dropdown--open]': 'open()',
+                        '[class.ns-dropdown--disabled]': 'disabled()',
+                        '[class.ns-dropdown--invalid]': 'invalid()',
+                        '[attr.data-state]': "open() ? 'open' : 'closed'"
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NsDropdownComponent,
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <label class=\"ns-dropdown__label\" [attr.for]=\"controlId()\"\n    >{{ label() }}\n    @if (required()) {\n      <span aria-hidden=\"true\"> *</span>\n    }\n  </label>\n}\n<button\n  #trigger\n  type=\"button\"\n  class=\"ns-dropdown__trigger\"\n  role=\"combobox\"\n  [id]=\"controlId()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listboxId\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-invalid]=\"invalid() || null\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"onTouched()\"\n>\n  <span\n    class=\"ns-dropdown__trigger-value\"\n    [class.ns-dropdown__trigger-value--placeholder]=\"!selectedLabel()\"\n    >{{ selectedLabel() || placeholder() }}</span\n  >\n  <ns-icon\n    class=\"ns-dropdown__trigger-icon\"\n    name=\"chevron-down\"\n    size=\"18\"\n    aria-hidden=\"true\"\n  />\n</button>\n<select\n  class=\"ns-dropdown__native-control\"\n  [attr.name]=\"name()\"\n  [multiple]=\"selectionMode() === 'multiple'\"\n  [disabled]=\"disabled()\"\n  (change)=\"onNativeChange($event)\"\n  (blur)=\"onTouched()\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n>\n  @for (item of items(); track item.key) {\n    <option\n      [value]=\"item.key\"\n      [selected]=\"selectedKeys().has(item.key)\"\n      [disabled]=\"item.disabled\"\n    >\n      {{ item.label }}\n    </option>\n  }\n</select>\n<div #menu class=\"ns-dropdown__menu\" role=\"presentation\">\n  @if (searchable()) {\n    <div class=\"ns-dropdown__search\">\n      <input\n        #searchInput\n        class=\"ns-dropdown__search-input\"\n        type=\"text\"\n        [id]=\"searchId\"\n        [attr.placeholder]=\"searchPlaceholder()\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"activeId()\"\n        [value]=\"query()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n      <ns-icon\n        class=\"ns-dropdown__search-icon\"\n        name=\"search\"\n        size=\"16\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  }\n  <div\n    #listbox\n    class=\"ns-dropdown__listbox\"\n    role=\"listbox\"\n    [id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"selectionMode() === 'multiple'\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.tabindex]=\"searchable() ? null : 0\"\n    (keydown)=\"onListboxKeydown($event)\"\n  >\n    @if (loading()) {\n      @for (row of skeletonRows; track row) {\n        <div class=\"ns-dropdown__skeleton-row\">\n          <ns-skeleton />\n        </div>\n      }\n    } @else if (visibleItems().length === 0) {\n      <div class=\"ns-dropdown__empty\" role=\"status\">{{ emptyText() }}</div>\n    } @else {\n      @for (item of visibleItems(); track item.key; let index = $index) {\n        <div\n          class=\"ns-dropdown__option\"\n          role=\"option\"\n          [id]=\"listboxId + '-' + item.key\"\n          [class.ns-dropdown__option--selected]=\"selectedKeys().has(item.key)\"\n          [class.ns-dropdown__option--active]=\"index === activeIndex()\"\n          [class.ns-dropdown__option--disabled]=\"item.disabled\"\n          [attr.aria-selected]=\"selectedKeys().has(item.key)\"\n          [attr.aria-disabled]=\"item.disabled\"\n          (click)=\"select(item.key)\"\n        >\n          {{ item.label }}\n        </div>\n      }\n    }\n  </div>\n</div>\n@if (description()) {\n  <p class=\"ns-dropdown__description\" [id]=\"descriptionId\">\n    {{ description() }}\n  </p>\n}\n@if (invalid() && errorMessage()) {\n  <p class=\"ns-dropdown__error\" [id]=\"errorId\" role=\"alert\">\n    {{ errorMessage() }}\n  </p>\n}\n", styles: ["@layer properties;:host{display:block;width:100%}.ns-dropdown__label{margin-bottom:calc(var(--ns-primitive-space-1) * 2);display:block;--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-dropdown-label-color);font-size:var(--ns-component-dropdown-label-size);font-weight:var(--ns-component-dropdown-label-weight)}.ns-dropdown__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);box-sizing:border-box;min-height:var(--ns-component-dropdown-trigger-min-height);padding:var(--ns-component-dropdown-trigger-padding-block) var(--ns-component-dropdown-trigger-padding-inline);gap:var(--ns-component-dropdown-trigger-gap);border:var(--ns-component-dropdown-trigger-border-width) solid var(--ns-component-dropdown-trigger-border-color);border-radius:var(--ns-component-dropdown-trigger-radius);background:var(--ns-component-dropdown-trigger-background);color:var(--ns-component-dropdown-trigger-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}.ns-dropdown__trigger:hover:not(:disabled){border-color:var(--ns-component-dropdown-trigger-border-hover-color)}.ns-dropdown__trigger:focus-visible{outline:none;border-color:var(--ns-component-dropdown-trigger-border-focus-color);box-shadow:var(--ns-component-dropdown-trigger-focus-shadow)}.ns-dropdown__trigger:disabled{cursor:not-allowed;background:var(--ns-component-dropdown-trigger-disabled-background);color:var(--ns-component-dropdown-trigger-disabled-color)}:host(.ns-dropdown--invalid) .ns-dropdown__trigger{border-color:var(--ns-component-dropdown-trigger-invalid-border-color)}.ns-dropdown__trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ns-dropdown__trigger-value--placeholder{color:var(--ns-component-dropdown-trigger-placeholder-color)}.ns-dropdown__trigger-icon{flex-shrink:0;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);color:var(--ns-component-dropdown-trigger-icon-color);transition-duration:var(--ns-component-dropdown-trigger-duration);transition-timing-function:var(--ns-component-dropdown-trigger-easing)}:host(.ns-dropdown--open) .ns-dropdown__trigger-icon{rotate:180deg}.ns-dropdown__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-dropdown__menu{display:flex;flex-direction:column;overflow:hidden;max-height:var(--ns-component-dropdown-menu-max-height);padding:var(--ns-component-dropdown-menu-padding);gap:var(--ns-component-dropdown-menu-gap);border:var(--ns-component-dropdown-menu-border-width) solid var(--ns-component-dropdown-menu-border-color);border-radius:var(--ns-component-dropdown-menu-radius);background:var(--ns-component-dropdown-menu-background);color:var(--ns-component-dropdown-menu-color);box-shadow:var(--ns-component-dropdown-menu-shadow);animation:ns-dropdown-enter var(--ns-component-dropdown-menu-enter-duration) var(--ns-component-dropdown-menu-enter-easing)}:host.ns-dropdown:not(.ns-dropdown--open) .ns-dropdown__menu{display:none}.ns-dropdown__search{position:relative;display:flex;align-items:center}.ns-dropdown__search-input{width:100%;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;box-sizing:border-box;min-height:var(--ns-component-dropdown-search-min-height);padding:var(--ns-component-dropdown-search-padding-block) var(--ns-component-dropdown-search-padding-inline);border:var(--ns-component-dropdown-search-border-width) solid var(--ns-component-dropdown-search-border-color);border-radius:var(--ns-component-dropdown-search-radius);background:var(--ns-component-dropdown-search-background);color:var(--ns-component-dropdown-search-color);font:inherit}.ns-dropdown__search-input::placeholder{color:var(--ns-component-dropdown-search-placeholder-color)}.ns-dropdown__search-input:focus-visible{border-color:var(--ns-component-dropdown-search-border-focus-color);box-shadow:var(--ns-component-dropdown-search-focus-shadow)}.ns-dropdown__search-icon{pointer-events:none;position:absolute;inset-inline-end:var(--ns-component-dropdown-search-padding-inline);color:var(--ns-component-dropdown-search-icon-color)}.ns-dropdown__listbox{display:flex;flex-direction:column;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ns-dropdown__option{display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline);border-radius:var(--ns-component-dropdown-option-radius)}.ns-dropdown__option:hover:not(.ns-dropdown__option--disabled){background:var(--ns-component-dropdown-option-background-hover)}.ns-dropdown__option--active{background:var(--ns-component-dropdown-option-active-background)}.ns-dropdown__option--selected{background:var(--ns-component-dropdown-option-selected-background);color:var(--ns-component-dropdown-option-selected-color);font-weight:var(--ns-component-dropdown-option-selected-weight)}.ns-dropdown__option--disabled{cursor:not-allowed;opacity:50%}.ns-dropdown__skeleton-row{padding:var(--ns-component-dropdown-option-padding-block) var(--ns-component-dropdown-option-padding-inline)}.ns-dropdown__empty{text-align:center;padding:var(--ns-component-dropdown-empty-padding);color:var(--ns-component-dropdown-empty-color);font-size:var(--ns-component-dropdown-empty-size)}.ns-dropdown__description,.ns-dropdown__error{margin-top:calc(var(--ns-primitive-space-1) * 2);font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-dropdown__description{color:var(--ns-component-dropdown-description-color)}.ns-dropdown__error{color:var(--ns-component-dropdown-error-color)}@media(prefers-reduced-motion:reduce){.ns-dropdown__trigger-icon{transition:none}.ns-dropdown__menu{animation:none}}@keyframes ns-dropdown-enter{0%{opacity:0;transform:scale(.98) translateY(calc(var(--ns-component-dropdown-menu-padding) * -1))}to{opacity:1;transform:scale(1) translateY(0)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsDropdownItemDirective), { isSignal: true }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], menu: [{
+                type: ViewChild,
+                args: ['menu']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], listbox: [{
+                type: ViewChild,
+                args: ['listbox']
+            }] } });
+
 class NsInputComponent extends NsValueAccessor {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputComponent, isStandalone: true, selector: "ns-input", host: { properties: { "class.ns-input": "true", "class.ns-input--invalid": "invalid()", "class.ns-input--disabled": "disabled()" } }, providers: [
@@ -3471,7 +3771,7 @@ class NsSwitchComponent extends NsValueAccessor {
       <p class="ns-switch__error" [id]="errorId" role="alert">
         {{ errorMessage() }}
       </p>
-    }`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - 1px);top:calc(var(--ns-component-switch-thumb-inset) - 1px);width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    }`, isInline: true, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSwitchComponent, decorators: [{
             type: Component,
@@ -3510,7 +3810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                             useExisting: forwardRef(() => NsSwitchComponent),
                             multi: true
                         }
-                    ], host: { '[class.ns-switch]': 'true' }, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - 1px);top:calc(var(--ns-component-switch-thumb-inset) - 1px);width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], host: { '[class.ns-switch]': 'true' }, styles: ["@layer properties;:host{display:inline-flex;min-height:calc(var(--ns-primitive-space-1) * 10);flex-wrap:wrap;align-items:center}.ns-switch__input{position:relative;margin:0;cursor:pointer;appearance:none;border-style:var(--tw-border-style);border-width:1px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;width:var(--ns-component-switch-track-width);height:var(--ns-component-switch-track-height);border-color:transparent;border-radius:var(--ns-component-switch-radius);background:var(--ns-component-switch-background)}.ns-switch__input:after{position:absolute;border-radius:calc(infinity * 1px);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);content:\"\";inset-inline-start:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));top:calc(var(--ns-component-switch-thumb-inset) - var(--ns-component-switch-thumb-border-offset));width:var(--ns-component-switch-thumb-size);height:var(--ns-component-switch-thumb-size);background:var(--ns-component-switch-thumb-color)}.ns-switch__input:checked{background:var(--ns-component-switch-active-background)}.ns-switch__input:checked:after{transform:translate(var(--ns-component-switch-thumb-translate))}.ns-switch__input:focus-visible{box-shadow:var(--ns-component-switch-focus-shadow)}.ns-switch__input[aria-invalid=true]{border-color:var(--ns-component-switch-invalid-border-color)}.ns-switch__input:disabled{cursor:not-allowed;opacity:50%}.ns-switch__label{margin-inline-start:calc(var(--ns-primitive-space-1) * 3);--tw-leading: calc(var(--ns-primitive-space-1) * 5);line-height:calc(var(--ns-primitive-space-1) * 5);color:var(--ns-component-switch-color)}.ns-switch__description,.ns-switch__error{margin-inline-start:calc(var(--ns-primitive-space-1) * 14);margin-top:calc(var(--ns-primitive-space-1) * 2);flex-basis:100%;font-size:var(--ns-semantic-common-text-xs);--tw-leading: calc(var(--ns-primitive-space-1) * 4);line-height:calc(var(--ns-primitive-space-1) * 4)}.ns-switch__description{color:var(--ns-component-switch-description-color)}.ns-switch__error{color:var(--ns-component-switch-error-color)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class NsTextAreaComponent extends NsValueAccessor {
@@ -4199,275 +4499,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
             args: [{ selector: 'ns-editor-list', imports: [NsEditorLabelPipe], template: "<button\n  type=\"button\"\n  class=\"ns-editor__button\"\n  [attr.aria-label]=\"'bullet_list' | nsEditorLabel\"\n  (click)=\"command(commands.INSERT_UNORDERED_LIST)\"\n>\n  <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n    <path\n      d=\"M6 8c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 5c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm5-1h6a1 1 0 010 2h-6a1 1 0 010-2z\"\n      fill-rule=\"evenodd\"\n    ></path>\n  </svg>\n</button>\n\n<button\n  type=\"button\"\n  class=\"ns-editor__button\"\n  [attr.aria-label]=\"'ordered_list' | nsEditorLabel\"\n  (click)=\"command(commands.INSERT_ORDERED_LIST)\"\n>\n  <svg viewBox=\"0 0 24 24\" role=\"presentation\">\n    <path\n      d=\"M11 7h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm0 4h6a1 1 0 010 2h-6a1 1 0 010-2zm-5 0h3v1H6v-1zm0 2h3v1H6v-1zm1-9H6V7h2v3H7V8zm-1 3h3v1.333h-.6V13H7.2v-.667H6V11zm0 2h3v1H6v-1zm2 3h2v1H8v-1z\"\n      fill-rule=\"evenodd\"\n    ></path>\n  </svg>\n</button>\n", styles: ["@layer properties;:host{display:inline-flex;align-items:center;gap:var(--ns-component-editor-gap)}.ns-editor__button{position:relative;display:inline-flex;width:calc(var(--ns-primitive-space-1) * 10);height:calc(var(--ns-primitive-space-1) * 10);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-editor-radius);color:var(--ns-component-editor-color)}.ns-editor__button:hover,.ns-editor__button:focus-visible{background:var(--ns-component-editor-action-background)}.ns-editor__button:focus-visible{box-shadow:var(--ns-component-editor-action-focus-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
-class NsSelectorListItemComponent {
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    element = inject((ElementRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSelectorListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSelectorListItemComponent, isStandalone: true, selector: "ns-selector-list-item", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.data-ns-selector-key": "key()", "attr.aria-disabled": "disabled()", "class.ns-selector-list-item": "true", "class.ns-selector-list-item--disabled": "disabled()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer properties;:host.ns-selector-list{display:block}.ns-selector-list__label{display:block;margin-bottom:var(--ns-component-selector-list-label-gap);color:var(--ns-component-selector-list-label-color);font-size:var(--ns-component-selector-list-label-size);font-weight:var(--ns-component-selector-list-label-weight)}.ns-selector-list__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-selector-list-trigger-min-height);padding:var(--ns-component-selector-list-trigger-padding-block) var(--ns-component-selector-list-trigger-padding-inline);border-color:var(--ns-component-selector-list-trigger-border-color);border-radius:var(--ns-component-selector-list-trigger-radius);background:var(--ns-component-selector-list-trigger-background);color:var(--ns-component-selector-list-trigger-color)}.ns-selector-list__trigger:after{content:\"\";inline-size:var(--ns-component-selector-list-item-padding-block);block-size:var(--ns-component-selector-list-item-padding-block);margin-inline-start:auto;border-right:var(--ns-component-selector-list-trigger-border-width) solid currentColor;border-bottom:var(--ns-component-selector-list-trigger-border-width) solid currentColor;transform:rotate(45deg) translateY(-25%);transition:transform var(--ns-component-selector-list-trigger-duration) var(--ns-component-selector-list-trigger-easing)}.ns-selector-list__trigger:hover:not(:disabled){border-color:var(--ns-component-selector-list-trigger-border-hover-color)}.ns-selector-list__trigger:focus-visible{outline:none;border-color:var(--ns-component-selector-list-trigger-border-focus-color);box-shadow:var(--ns-component-selector-list-trigger-focus-shadow)}:host.ns-selector-list--open .ns-selector-list__trigger:after{transform:rotate(225deg) translateY(-25%)}.ns-selector-list__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-selector-list__menu{min-width:calc(var(--ns-primitive-space-1) * 48);overflow:auto;padding:var(--ns-primitive-space-1);max-height:var(--ns-component-selector-list-menu-max-height);border:var(--ns-component-selector-list-menu-border-width) solid var(--ns-component-selector-list-menu-border-color);border-radius:var(--ns-component-selector-list-menu-radius);background:var(--ns-component-selector-list-menu-background);color:var(--ns-component-selector-list-menu-color);box-shadow:var(--ns-component-selector-list-menu-shadow)}:host.ns-selector-list:not(.ns-selector-list--open) .ns-selector-list__menu{display:none}:host.ns-selector-list-item{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-selector-list-item-padding-block) var(--ns-component-selector-list-item-padding-inline);border-radius:var(--ns-component-selector-list-item-radius)}:host.ns-selector-list-item:hover,:host.ns-selector-list-item[aria-selected=true]{background:var(--ns-component-selector-list-item-active-background)}:host.ns-selector-list-item[aria-selected=true]{color:var(--ns-component-selector-list-item-selected-color);font-weight:var(--ns-component-selector-list-item-selected-weight)}:host.ns-selector-list-item.ns-selector-list-item--disabled{cursor:not-allowed;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-selector-list__trigger:after{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSelectorListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ns-selector-list-item', standalone: true, template: '<ng-content />', host: {
-                        role: 'option',
-                        '[attr.data-ns-selector-key]': 'key()',
-                        '[attr.aria-disabled]': 'disabled()',
-                        '[class.ns-selector-list-item]': 'true',
-                        '[class.ns-selector-list-item--disabled]': 'disabled()',
-                        '[attr.data-disabled]': 'disabled()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-selector-list{display:block}.ns-selector-list__label{display:block;margin-bottom:var(--ns-component-selector-list-label-gap);color:var(--ns-component-selector-list-label-color);font-size:var(--ns-component-selector-list-label-size);font-weight:var(--ns-component-selector-list-label-weight)}.ns-selector-list__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-selector-list-trigger-min-height);padding:var(--ns-component-selector-list-trigger-padding-block) var(--ns-component-selector-list-trigger-padding-inline);border-color:var(--ns-component-selector-list-trigger-border-color);border-radius:var(--ns-component-selector-list-trigger-radius);background:var(--ns-component-selector-list-trigger-background);color:var(--ns-component-selector-list-trigger-color)}.ns-selector-list__trigger:after{content:\"\";inline-size:var(--ns-component-selector-list-item-padding-block);block-size:var(--ns-component-selector-list-item-padding-block);margin-inline-start:auto;border-right:var(--ns-component-selector-list-trigger-border-width) solid currentColor;border-bottom:var(--ns-component-selector-list-trigger-border-width) solid currentColor;transform:rotate(45deg) translateY(-25%);transition:transform var(--ns-component-selector-list-trigger-duration) var(--ns-component-selector-list-trigger-easing)}.ns-selector-list__trigger:hover:not(:disabled){border-color:var(--ns-component-selector-list-trigger-border-hover-color)}.ns-selector-list__trigger:focus-visible{outline:none;border-color:var(--ns-component-selector-list-trigger-border-focus-color);box-shadow:var(--ns-component-selector-list-trigger-focus-shadow)}:host.ns-selector-list--open .ns-selector-list__trigger:after{transform:rotate(225deg) translateY(-25%)}.ns-selector-list__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-selector-list__menu{min-width:calc(var(--ns-primitive-space-1) * 48);overflow:auto;padding:var(--ns-primitive-space-1);max-height:var(--ns-component-selector-list-menu-max-height);border:var(--ns-component-selector-list-menu-border-width) solid var(--ns-component-selector-list-menu-border-color);border-radius:var(--ns-component-selector-list-menu-radius);background:var(--ns-component-selector-list-menu-background);color:var(--ns-component-selector-list-menu-color);box-shadow:var(--ns-component-selector-list-menu-shadow)}:host.ns-selector-list:not(.ns-selector-list--open) .ns-selector-list__menu{display:none}:host.ns-selector-list-item{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-selector-list-item-padding-block) var(--ns-component-selector-list-item-padding-inline);border-radius:var(--ns-component-selector-list-item-radius)}:host.ns-selector-list-item:hover,:host.ns-selector-list-item[aria-selected=true]{background:var(--ns-component-selector-list-item-active-background)}:host.ns-selector-list-item[aria-selected=true]{color:var(--ns-component-selector-list-item-selected-color);font-weight:var(--ns-component-selector-list-item-selected-weight)}:host.ns-selector-list-item.ns-selector-list-item--disabled{cursor:not-allowed;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-selector-list__trigger:after{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-class NsSelectorListComponent extends NsValueAccessor {
-    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    items = contentChildren(NsSelectorListItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    trigger;
-    menu;
-    overlay = inject(NsOverlayService);
-    destroyRef = inject(DestroyRef);
-    typeahead = new NsTypeaheadController();
-    overlayRef;
-    activeIndex = -1;
-    destroyed = false;
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    listboxId = `${this.id}-listbox`;
-    constructor() {
-        super();
-        effect(() => this.syncSelection());
-        this.destroyRef.onDestroy(() => {
-            this.destroyed = true;
-            this.menu?.nativeElement.removeEventListener('click', this.onMenuClickBound);
-            this.overlayRef?.close('programmatic');
-        });
-    }
-    get activeId() {
-        const item = this.items()[this.activeIndex];
-        return item ? `${this.listboxId}-${String(item.key())}` : undefined;
-    }
-    selectedLabel() {
-        return this.items()
-            .find((item) => item.key() === this.value())
-            ?.label();
-    }
-    toggle() {
-        this.open() ? this.close() : this.show();
-    }
-    select(key) {
-        const item = this.items().find((candidate) => candidate.key() === key);
-        if (!item || item.disabled()) {
-            return;
-        }
-        this.setValue(key);
-        this.onTouched();
-        this.close();
-    }
-    selectNative(event) {
-        const value = event.target.value;
-        const item = this.items().find((candidate) => String(candidate.key()) === value);
-        if (item) {
-            this.select(item.key());
-        }
-    }
-    onKeydown(event) {
-        const items = this.items();
-        if (event.key === 'Escape' && this.open()) {
-            event.preventDefault();
-            this.close();
-            return;
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            if (this.open() && this.activeIndex >= 0) {
-                this.select(items[this.activeIndex].key());
-            }
-            else {
-                this.show();
-            }
-            return;
-        }
-        let next = -1;
-        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-            next = getNsNextNavigableIndex(items.map((item) => ({ key: item.key(), disabled: item.disabled() })), this.activeIndex, event.key);
-        }
-        else {
-            next = this.typeahead.find(items.map((item) => ({
-                label: item.label(),
-                disabled: item.disabled()
-            })), event.key, this.activeIndex);
-        }
-        if (next >= 0) {
-            event.preventDefault();
-            this.activeIndex = next;
-            if (!this.open()) {
-                this.show();
-            }
-        }
-    }
-    onMenuClick(event) {
-        const target = event.target;
-        const item = this.items().find((candidate) => candidate.element.nativeElement.contains(target));
-        if (item) {
-            this.select(item.key());
-        }
-    }
-    show() {
-        if (this.disabled() || this.open() || !this.menu || !this.trigger) {
-            return;
-        }
-        this.open.set(true);
-        this.activeIndex = this.selectedIndex();
-        this.overlayRef = this.overlay.open({
-            origin: this.trigger.nativeElement,
-            placement: this.placement(),
-            restoreFocus: false
-        });
-        this.overlayRef.attach(this.menu.nativeElement);
-        this.menu.nativeElement.addEventListener('click', this.onMenuClickBound);
-        this.overlayRef.onClose(() => {
-            if (!this.destroyed) {
-                this.open.set(false);
-            }
-            this.menu?.nativeElement.removeEventListener('click', this.onMenuClickBound);
-            this.overlayRef = undefined;
-        });
-    }
-    close() {
-        this.overlayRef?.close();
-    }
-    selectedIndex() {
-        return this.items().findIndex((item) => item.key() === this.value());
-    }
-    syncSelection() {
-        const selected = this.value();
-        for (const item of this.items()) {
-            item.element.nativeElement.id = `${this.listboxId}-${String(item.key())}`;
-            item.element.nativeElement.setAttribute('aria-selected', String(item.key() === selected));
-        }
-    }
-    onMenuClickBound = (event) => this.onMenuClick(event);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsSelectorListComponent, isStandalone: true, selector: "ns-selector-list", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.ns-selector-list": "true", "class.ns-selector-list--open": "open()", "attr.data-state": "open() ? 'open' : 'closed'" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NsSelectorListComponent),
-                multi: true
-            }
-        ], queries: [{ propertyName: "items", predicate: NsSelectorListItemComponent, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-    @if (label()) {
-      <label class="ns-selector-list__label" [attr.for]="id">{{
-        label()
-      }}</label>
-    }
-    <button
-      #trigger
-      class="ns-selector-list__trigger"
-      type="button"
-      role="combobox"
-      [id]="id"
-      [attr.aria-expanded]="open()"
-      [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeId"
-      [disabled]="disabled()"
-      (click)="toggle()"
-      (keydown)="onKeydown($event)"
-    >
-      {{ selectedLabel() || placeholder() }}
-    </button>
-    <select
-      class="ns-selector-list__native-control"
-      [attr.name]="name()"
-      [value]="value()"
-      [disabled]="disabled()"
-      (change)="selectNative($event)"
-      (blur)="onTouched()"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      @for (item of items(); track item.key()) {
-        <option [value]="item.key()" [disabled]="item.disabled()">
-          {{ item.label() }}
-        </option>
-      }
-    </select>
-    <div
-      #menu
-      class="ns-selector-list__menu"
-      [id]="listboxId"
-      role="listbox"
-      [attr.aria-labelledby]="id"
-    >
-      <ng-content />
-    </div>
-  `, isInline: true, styles: ["@layer properties;:host.ns-selector-list{display:block}.ns-selector-list__label{display:block;margin-bottom:var(--ns-component-selector-list-label-gap);color:var(--ns-component-selector-list-label-color);font-size:var(--ns-component-selector-list-label-size);font-weight:var(--ns-component-selector-list-label-weight)}.ns-selector-list__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-selector-list-trigger-min-height);padding:var(--ns-component-selector-list-trigger-padding-block) var(--ns-component-selector-list-trigger-padding-inline);border-color:var(--ns-component-selector-list-trigger-border-color);border-radius:var(--ns-component-selector-list-trigger-radius);background:var(--ns-component-selector-list-trigger-background);color:var(--ns-component-selector-list-trigger-color)}.ns-selector-list__trigger:after{content:\"\";inline-size:var(--ns-component-selector-list-item-padding-block);block-size:var(--ns-component-selector-list-item-padding-block);margin-inline-start:auto;border-right:var(--ns-component-selector-list-trigger-border-width) solid currentColor;border-bottom:var(--ns-component-selector-list-trigger-border-width) solid currentColor;transform:rotate(45deg) translateY(-25%);transition:transform var(--ns-component-selector-list-trigger-duration) var(--ns-component-selector-list-trigger-easing)}.ns-selector-list__trigger:hover:not(:disabled){border-color:var(--ns-component-selector-list-trigger-border-hover-color)}.ns-selector-list__trigger:focus-visible{outline:none;border-color:var(--ns-component-selector-list-trigger-border-focus-color);box-shadow:var(--ns-component-selector-list-trigger-focus-shadow)}:host.ns-selector-list--open .ns-selector-list__trigger:after{transform:rotate(225deg) translateY(-25%)}.ns-selector-list__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-selector-list__menu{min-width:calc(var(--ns-primitive-space-1) * 48);overflow:auto;padding:var(--ns-primitive-space-1);max-height:var(--ns-component-selector-list-menu-max-height);border:var(--ns-component-selector-list-menu-border-width) solid var(--ns-component-selector-list-menu-border-color);border-radius:var(--ns-component-selector-list-menu-radius);background:var(--ns-component-selector-list-menu-background);color:var(--ns-component-selector-list-menu-color);box-shadow:var(--ns-component-selector-list-menu-shadow)}:host.ns-selector-list:not(.ns-selector-list--open) .ns-selector-list__menu{display:none}:host.ns-selector-list-item{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-selector-list-item-padding-block) var(--ns-component-selector-list-item-padding-inline);border-radius:var(--ns-component-selector-list-item-radius)}:host.ns-selector-list-item:hover,:host.ns-selector-list-item[aria-selected=true]{background:var(--ns-component-selector-list-item-active-background)}:host.ns-selector-list-item[aria-selected=true]{color:var(--ns-component-selector-list-item-selected-color);font-weight:var(--ns-component-selector-list-item-selected-weight)}:host.ns-selector-list-item.ns-selector-list-item--disabled{cursor:not-allowed;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-selector-list__trigger:after{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSelectorListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ns-selector-list', standalone: true, template: `
-    @if (label()) {
-      <label class="ns-selector-list__label" [attr.for]="id">{{
-        label()
-      }}</label>
-    }
-    <button
-      #trigger
-      class="ns-selector-list__trigger"
-      type="button"
-      role="combobox"
-      [id]="id"
-      [attr.aria-expanded]="open()"
-      [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeId"
-      [disabled]="disabled()"
-      (click)="toggle()"
-      (keydown)="onKeydown($event)"
-    >
-      {{ selectedLabel() || placeholder() }}
-    </button>
-    <select
-      class="ns-selector-list__native-control"
-      [attr.name]="name()"
-      [value]="value()"
-      [disabled]="disabled()"
-      (change)="selectNative($event)"
-      (blur)="onTouched()"
-      tabindex="-1"
-      aria-hidden="true"
-    >
-      @for (item of items(); track item.key()) {
-        <option [value]="item.key()" [disabled]="item.disabled()">
-          {{ item.label() }}
-        </option>
-      }
-    </select>
-    <div
-      #menu
-      class="ns-selector-list__menu"
-      [id]="listboxId"
-      role="listbox"
-      [attr.aria-labelledby]="id"
-    >
-      <ng-content />
-    </div>
-  `, host: {
-                        '[class.ns-selector-list]': 'true',
-                        '[class.ns-selector-list--open]': 'open()',
-                        '[attr.data-state]': "open() ? 'open' : 'closed'"
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NsSelectorListComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer properties;:host.ns-selector-list{display:block}.ns-selector-list__label{display:block;margin-bottom:var(--ns-component-selector-list-label-gap);color:var(--ns-component-selector-list-label-color);font-size:var(--ns-component-selector-list-label-size);font-weight:var(--ns-component-selector-list-label-weight)}.ns-selector-list__trigger{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:var(--tw-border-style);border-width:1px;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-height:var(--ns-component-selector-list-trigger-min-height);padding:var(--ns-component-selector-list-trigger-padding-block) var(--ns-component-selector-list-trigger-padding-inline);border-color:var(--ns-component-selector-list-trigger-border-color);border-radius:var(--ns-component-selector-list-trigger-radius);background:var(--ns-component-selector-list-trigger-background);color:var(--ns-component-selector-list-trigger-color)}.ns-selector-list__trigger:after{content:\"\";inline-size:var(--ns-component-selector-list-item-padding-block);block-size:var(--ns-component-selector-list-item-padding-block);margin-inline-start:auto;border-right:var(--ns-component-selector-list-trigger-border-width) solid currentColor;border-bottom:var(--ns-component-selector-list-trigger-border-width) solid currentColor;transform:rotate(45deg) translateY(-25%);transition:transform var(--ns-component-selector-list-trigger-duration) var(--ns-component-selector-list-trigger-easing)}.ns-selector-list__trigger:hover:not(:disabled){border-color:var(--ns-component-selector-list-trigger-border-hover-color)}.ns-selector-list__trigger:focus-visible{outline:none;border-color:var(--ns-component-selector-list-trigger-border-focus-color);box-shadow:var(--ns-component-selector-list-trigger-focus-shadow)}:host.ns-selector-list--open .ns-selector-list__trigger:after{transform:rotate(225deg) translateY(-25%)}.ns-selector-list__native-control{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.ns-selector-list__menu{min-width:calc(var(--ns-primitive-space-1) * 48);overflow:auto;padding:var(--ns-primitive-space-1);max-height:var(--ns-component-selector-list-menu-max-height);border:var(--ns-component-selector-list-menu-border-width) solid var(--ns-component-selector-list-menu-border-color);border-radius:var(--ns-component-selector-list-menu-radius);background:var(--ns-component-selector-list-menu-background);color:var(--ns-component-selector-list-menu-color);box-shadow:var(--ns-component-selector-list-menu-shadow)}:host.ns-selector-list:not(.ns-selector-list--open) .ns-selector-list__menu{display:none}:host.ns-selector-list-item{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-selector-list-item-padding-block) var(--ns-component-selector-list-item-padding-inline);border-radius:var(--ns-component-selector-list-item-radius)}:host.ns-selector-list-item:hover,:host.ns-selector-list-item[aria-selected=true]{background:var(--ns-component-selector-list-item-active-background)}:host.ns-selector-list-item[aria-selected=true]{color:var(--ns-component-selector-list-item-selected-color);font-weight:var(--ns-component-selector-list-item-selected-weight)}:host.ns-selector-list-item.ns-selector-list-item--disabled{cursor:not-allowed;opacity:50%}@media(prefers-reduced-motion:reduce){.ns-selector-list__trigger:after{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsSelectorListItemComponent), { isSignal: true }] }], trigger: [{
-                type: ViewChild,
-                args: ['trigger', { read: ElementRef }]
-            }], menu: [{
-                type: ViewChild,
-                args: ['menu', { read: ElementRef }]
-            }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
-
 class NsEditorParagraphComponent {
     editor = inject(NsEditorService);
     id = Guid.create();
@@ -4479,16 +4510,16 @@ class NsEditorParagraphComponent {
         this.editor.formatBlock(heading);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorParagraphComponent, isStandalone: true, selector: "ns-editor-paragraph", ngImport: i0, template: "<ns-selector-list [(ngModel)]=\"value\">\n  <ns-selector-list-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\">{{\n    'paragraph' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\">{{\n    'h1' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\">{{\n    'h2' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\">{{\n    'h3' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\">{{\n    'h4' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\">{{\n    'h5' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\">{{\n    'h6' | nsEditorLabel\n  }}</ns-selector-list-item>\n</ns-selector-list>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsSelectorListComponent, selector: "ns-selector-list", inputs: ["name", "placement", "open"], outputs: ["openChange"] }, { kind: "component", type: NsSelectorListItemComponent, selector: "ns-selector-list-item", inputs: ["key", "label", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorParagraphComponent, isStandalone: true, selector: "ns-editor-paragraph", ngImport: i0, template: "<ns-dropdown [searchable]=\"false\" [(ngModel)]=\"value\">\n  <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n  <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n  <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n  <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n  <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n  <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n  <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorParagraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ns-editor-paragraph', imports: [
-                        NsSelectorListComponent,
-                        NsSelectorListItemComponent,
+                        NsDropdownComponent,
+                        NsDropdownItemDirective,
                         FormsModule,
                         NsEditorLabelPipe
-                    ], template: "<ns-selector-list [(ngModel)]=\"value\">\n  <ns-selector-list-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\">{{\n    'paragraph' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\">{{\n    'h1' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\">{{\n    'h2' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\">{{\n    'h3' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\">{{\n    'h4' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\">{{\n    'h5' | nsEditorLabel\n  }}</ns-selector-list-item>\n  <ns-selector-list-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\">{{\n    'h6' | nsEditorLabel\n  }}</ns-selector-list-item>\n</ns-selector-list>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<ns-dropdown [searchable]=\"false\" [(ngModel)]=\"value\">\n  <ns-dropdown-item [label]=\"'paragraph' | nsEditorLabel\" key=\"p\" />\n  <ns-dropdown-item [label]=\"'h1' | nsEditorLabel\" key=\"h1\" />\n  <ns-dropdown-item [label]=\"'h2' | nsEditorLabel\" key=\"h2\" />\n  <ns-dropdown-item [label]=\"'h3' | nsEditorLabel\" key=\"h3\" />\n  <ns-dropdown-item [label]=\"'h4' | nsEditorLabel\" key=\"h4\" />\n  <ns-dropdown-item [label]=\"'h5' | nsEditorLabel\" key=\"h5\" />\n  <ns-dropdown-item [label]=\"'h6' | nsEditorLabel\" key=\"h6\" />\n</ns-dropdown>\n", styles: [":host{display:inline-block}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class NsEditorToggleCommandComponent {
@@ -4807,130 +4838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline}.ns-link__anchor{--tw-outline-style: none;outline-style:none;border-radius:var(--ns-component-link-radius);color:var(--ns-component-link-color);font-weight:var(--ns-component-link-font-weight);text-decoration:var(--ns-component-link-decoration);text-underline-offset:var(--ns-component-link-underline-offset);transition:color var(--ns-component-link-transition-duration),opacity var(--ns-component-link-transition-duration)}.ns-link__anchor:hover:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:active:not([aria-disabled=true]){opacity:var(--ns-component-link-hover-opacity)}.ns-link__anchor:focus-visible{outline:var(--ns-component-link-focus-outline);outline-offset:var(--ns-component-link-focus-offset)}:host(.ns-link--disabled) .ns-link__anchor{cursor:not-allowed;color:var(--ns-component-link-disabled-color)}:host(.ns-link--success) .ns-link__anchor{color:var(--ns-component-link-success-color)}:host(.ns-link--warning) .ns-link__anchor{color:var(--ns-component-link-warning-color)}:host(.ns-link--danger) .ns-link__anchor{color:var(--ns-component-link-danger-color)}@media(prefers-reduced-motion:reduce){.ns-link__anchor{transition:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class NsListBoxOptionComponent {
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    element = inject((ElementRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsListBoxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsListBoxOptionComponent, isStandalone: true, selector: "ns-list-box-option", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.data-ns-list-box-key": "key()", "attr.aria-disabled": "disabled()", "attr.aria-selected": "selected()", "attr.tabindex": "active() ? 0 : -1", "class.ns-list-box-option": "true", "class.ns-list-box-option--selected": "selected()", "class.ns-list-box-option--disabled": "disabled()", "attr.data-selected": "selected()", "attr.data-disabled": "disabled()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host.ns-list-box{display:block;overflow:auto;padding:var(--ns-primitive-space-1);border:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color);border-radius:var(--ns-component-list-box-radius);background:var(--ns-component-list-box-background);color:var(--ns-component-list-box-color)}:host.ns-list-box-option{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-list-box-option-padding-block) var(--ns-component-list-box-option-padding-inline);border-radius:var(--ns-component-list-box-radius)}:host.ns-list-box-option:not(:last-child){border-bottom:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color)}:host.ns-list-box-option:focus-visible{outline:none;box-shadow:var(--ns-component-list-box-option-focus-shadow)}:host.ns-list-box-option:hover:not(.ns-list-box-option--disabled):not(.ns-list-box-option--selected){background:var(--ns-component-list-box-option-background-hover)}:host.ns-list-box-option.ns-list-box-option--selected{background:var(--ns-component-list-box-option-selected-background);color:var(--ns-component-list-box-option-selected-color);font-weight:var(--ns-component-list-box-option-selected-weight)}:host.ns-list-box-option.ns-list-box-option--disabled{cursor:not-allowed;opacity:50%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsListBoxOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ns-list-box-option', standalone: true, template: '<ng-content />', host: {
-                        role: 'option',
-                        '[attr.data-ns-list-box-key]': 'key()',
-                        '[attr.aria-disabled]': 'disabled()',
-                        '[attr.aria-selected]': 'selected()',
-                        '[attr.tabindex]': 'active() ? 0 : -1',
-                        '[class.ns-list-box-option]': 'true',
-                        '[class.ns-list-box-option--selected]': 'selected()',
-                        '[class.ns-list-box-option--disabled]': 'disabled()',
-                        '[attr.data-selected]': 'selected()',
-                        '[attr.data-disabled]': 'disabled()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.ns-list-box{display:block;overflow:auto;padding:var(--ns-primitive-space-1);border:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color);border-radius:var(--ns-component-list-box-radius);background:var(--ns-component-list-box-background);color:var(--ns-component-list-box-color)}:host.ns-list-box-option{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-list-box-option-padding-block) var(--ns-component-list-box-option-padding-inline);border-radius:var(--ns-component-list-box-radius)}:host.ns-list-box-option:not(:last-child){border-bottom:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color)}:host.ns-list-box-option:focus-visible{outline:none;box-shadow:var(--ns-component-list-box-option-focus-shadow)}:host.ns-list-box-option:hover:not(.ns-list-box-option--disabled):not(.ns-list-box-option--selected){background:var(--ns-component-list-box-option-background-hover)}:host.ns-list-box-option.ns-list-box-option--selected{background:var(--ns-component-list-box-option-selected-background);color:var(--ns-component-list-box-option-selected-color);font-weight:var(--ns-component-list-box-option-selected-weight)}:host.ns-list-box-option.ns-list-box-option--disabled{cursor:not-allowed;opacity:50%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-class NsListBoxComponent {
-    label = input('Options', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-    selectedKeys = model([], ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
-    options = contentChildren(NsListBoxOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    typeahead = new NsTypeaheadController();
-    activeIndex = -1;
-    ngAfterContentInit() {
-        this.syncState();
-    }
-    onClick(event) {
-        const option = this.optionFor(event.target);
-        if (option) {
-            this.select(option.key());
-        }
-    }
-    onKeydown(event) {
-        const options = this.options();
-        if (!options.length) {
-            return;
-        }
-        if (event.key === ' ' || event.key === 'Enter') {
-            const option = options[this.activeIndex] ?? options.find((item) => !item.disabled());
-            if (option) {
-                event.preventDefault();
-                this.select(option.key());
-            }
-            return;
-        }
-        let next = -1;
-        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-            next = getNsNextNavigableIndex(options.map((option) => ({
-                key: option.key(),
-                disabled: option.disabled()
-            })), this.activeIndex, event.key);
-        }
-        else {
-            next = this.typeahead.find(options.map((option) => ({
-                label: option.label(),
-                disabled: option.disabled()
-            })), event.key, this.activeIndex);
-        }
-        if (next >= 0) {
-            event.preventDefault();
-            this.focus(next);
-        }
-    }
-    select(key) {
-        const option = this.options().find((candidate) => candidate.key() === key);
-        if (!option || option.disabled() || this.selectionMode() === 'none') {
-            return;
-        }
-        const selected = new Set(this.selectedKeys());
-        if (this.selectionMode() === 'multiple') {
-            selected.has(key) ? selected.delete(key) : selected.add(key);
-        }
-        else {
-            selected.clear();
-            selected.add(key);
-        }
-        this.selectedKeys.set([...selected]);
-        this.syncState();
-    }
-    optionFor(target) {
-        return this.options().find((option) => option.element.nativeElement.contains(target));
-    }
-    focus(index) {
-        this.activeIndex = index;
-        for (const [optionIndex, option] of this.options().entries()) {
-            option.active.set(optionIndex === index);
-        }
-        this.options()[index].element.nativeElement.focus();
-    }
-    syncState() {
-        const selected = new Set(this.selectedKeys());
-        for (const option of this.options()) {
-            option.selected.set(selected.has(option.key()));
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.21", type: NsListBoxComponent, isStandalone: true, selector: "ns-list-box", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedKeys: "selectedKeysChange" }, host: { attributes: { "role": "listbox" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "label()", "attr.aria-multiselectable": "selectionMode() === 'multiple'", "attr.tabindex": "0", "class.ns-list-box": "true" } }, queries: [{ propertyName: "options", predicate: NsListBoxOptionComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host.ns-list-box{display:block;overflow:auto;padding:var(--ns-primitive-space-1);border:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color);border-radius:var(--ns-component-list-box-radius);background:var(--ns-component-list-box-background);color:var(--ns-component-list-box-color)}:host.ns-list-box-option{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-list-box-option-padding-block) var(--ns-component-list-box-option-padding-inline);border-radius:var(--ns-component-list-box-radius)}:host.ns-list-box-option:not(:last-child){border-bottom:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color)}:host.ns-list-box-option:focus-visible{outline:none;box-shadow:var(--ns-component-list-box-option-focus-shadow)}:host.ns-list-box-option:hover:not(.ns-list-box-option--disabled):not(.ns-list-box-option--selected){background:var(--ns-component-list-box-option-background-hover)}:host.ns-list-box-option.ns-list-box-option--selected{background:var(--ns-component-list-box-option-selected-background);color:var(--ns-component-list-box-option-selected-color);font-weight:var(--ns-component-list-box-option-selected-weight)}:host.ns-list-box-option.ns-list-box-option--disabled{cursor:not-allowed;opacity:50%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsListBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ns-list-box', standalone: true, template: '<ng-content />', host: {
-                        role: 'listbox',
-                        '[attr.aria-label]': 'label()',
-                        '[attr.aria-multiselectable]': "selectionMode() === 'multiple'",
-                        '[attr.tabindex]': '0',
-                        '[class.ns-list-box]': 'true'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.ns-list-box{display:block;overflow:auto;padding:var(--ns-primitive-space-1);border:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color);border-radius:var(--ns-component-list-box-radius);background:var(--ns-component-list-box-background);color:var(--ns-component-list-box-color)}:host.ns-list-box-option{display:block;cursor:pointer;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s);min-block-size:var(--ns-semantic-common-size-control-md);padding:var(--ns-component-list-box-option-padding-block) var(--ns-component-list-box-option-padding-inline);border-radius:var(--ns-component-list-box-radius)}:host.ns-list-box-option:not(:last-child){border-bottom:var(--ns-component-list-box-border-width) solid var(--ns-component-list-box-border-color)}:host.ns-list-box-option:focus-visible{outline:none;box-shadow:var(--ns-component-list-box-option-focus-shadow)}:host.ns-list-box-option:hover:not(.ns-list-box-option--disabled):not(.ns-list-box-option--selected){background:var(--ns-component-list-box-option-background-hover)}:host.ns-list-box-option.ns-list-box-option--selected{background:var(--ns-component-list-box-option-selected-background);color:var(--ns-component-list-box-option-selected-color);font-weight:var(--ns-component-list-box-option-selected-weight)}:host.ns-list-box-option.ns-list-box-option--disabled{cursor:not-allowed;opacity:50%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NsListBoxOptionComponent), { isSignal: true }] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
 class NsMeterComponent {
     value = input(0, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -5704,7 +5611,7 @@ class NsScheduleComponent {
         this.selected.set(new Date(date.year, date.month - 1, date.day));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", selectedDay: "selectedDayChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n  <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n  <ns-date-picker\n    [ngModel]=\"selectedDay()\"\n    (ngModelChange)=\"selectDate($event)\"\n  />\n\n  <ns-selector-list\n    class=\"ns-schedule__view\"\n    [ngModel]=\"view()\"\n    (ngModelChange)=\"view.set($event)\"\n  >\n    <ns-selector-list-item label=\"Day\" key=\"day\">Day</ns-selector-list-item>\n    <ns-selector-list-item label=\"Work week\" key=\"workweek\"\n      >Work week</ns-selector-list-item\n    >\n    <ns-selector-list-item label=\"Week\" key=\"week\">Week</ns-selector-list-item>\n  </ns-selector-list>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <ns-schedule-day\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @case ('week') {\n    <ns-schedule-week\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @default {\n    <ns-schedule-workweek\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n}\n", styles: ["@layer properties;:host{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;min-height:calc(var(--ns-primitive-space-1) * 24);flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["minDate", "maxDate", "unavailableDates", "firstDayOfWeek"] }, { kind: "component", type: NsSelectorListComponent, selector: "ns-selector-list", inputs: ["name", "placement", "open"], outputs: ["openChange"] }, { kind: "component", type: NsSelectorListItemComponent, selector: "ns-selector-list-item", inputs: ["key", "label", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectedDay: { classPropertyName: "selectedDay", publicName: "selectedDay", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", selectedDay: "selectedDayChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n  <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n  <ns-date-picker\n    [ngModel]=\"selectedDay()\"\n    (ngModelChange)=\"selectDate($event)\"\n  />\n\n  <ns-dropdown\n    class=\"ns-schedule__view\"\n    [searchable]=\"false\"\n    [ngModel]=\"view()\"\n    (ngModelChange)=\"view.set($event)\"\n  >\n    <ns-dropdown-item label=\"Day\" key=\"day\" />\n    <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n    <ns-dropdown-item label=\"Week\" key=\"week\" />\n  </ns-dropdown>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <ns-schedule-day\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @case ('week') {\n    <ns-schedule-week\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @default {\n    <ns-schedule-workweek\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n}\n", styles: ["@layer properties;:host{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;min-height:calc(var(--ns-primitive-space-1) * 24);flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["type", "variant", "size", "icon", "iconOnly", "ariaLabel", "block", "disabled", "loading", "selected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["minDate", "maxDate", "unavailableDates", "firstDayOfWeek"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["collection", "selectionMode", "loading", "searchable", "searchPlaceholder", "emptyText", "placement", "open"], outputs: ["openChange", "opened", "closed"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["key", "label", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, decorators: [{
             type: Component,
@@ -5715,11 +5622,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         WeekComponent,
                         NsWorkweekComponent,
                         NsDatePickerComponent,
-                        NsSelectorListComponent,
-                        NsSelectorListItemComponent
+                        NsDropdownComponent,
+                        NsDropdownItemDirective
                     ], encapsulation: ViewEncapsulation.None, host: {
                         '[class.ns-schedule]': 'true'
-                    }, template: "<div class=\"ns-schedule__tools\">\n  <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n  <ns-date-picker\n    [ngModel]=\"selectedDay()\"\n    (ngModelChange)=\"selectDate($event)\"\n  />\n\n  <ns-selector-list\n    class=\"ns-schedule__view\"\n    [ngModel]=\"view()\"\n    (ngModelChange)=\"view.set($event)\"\n  >\n    <ns-selector-list-item label=\"Day\" key=\"day\">Day</ns-selector-list-item>\n    <ns-selector-list-item label=\"Work week\" key=\"workweek\"\n      >Work week</ns-selector-list-item\n    >\n    <ns-selector-list-item label=\"Week\" key=\"week\">Week</ns-selector-list-item>\n  </ns-selector-list>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <ns-schedule-day\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @case ('week') {\n    <ns-schedule-week\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @default {\n    <ns-schedule-workweek\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n}\n", styles: ["@layer properties;:host{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;min-height:calc(var(--ns-primitive-space-1) * 24);flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ns-schedule__tools\">\n  <ns-button class=\"ns-schedule__today\" (click)=\"goToday()\">Hoy</ns-button>\n\n  <ns-date-picker\n    [ngModel]=\"selectedDay()\"\n    (ngModelChange)=\"selectDate($event)\"\n  />\n\n  <ns-dropdown\n    class=\"ns-schedule__view\"\n    [searchable]=\"false\"\n    [ngModel]=\"view()\"\n    (ngModelChange)=\"view.set($event)\"\n  >\n    <ns-dropdown-item label=\"Day\" key=\"day\" />\n    <ns-dropdown-item label=\"Work week\" key=\"workweek\" />\n    <ns-dropdown-item label=\"Week\" key=\"week\" />\n  </ns-dropdown>\n</div>\n\n@switch (view()) {\n  @case ('day') {\n    <ns-schedule-day\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @case ('week') {\n    <ns-schedule-week\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n  @default {\n    <ns-schedule-workweek\n      [currentDate]=\"selected()\"\n      [schedules]=\"data()\"\n      [style.height.px]=\"height()\"\n    />\n  }\n}\n", styles: ["@layer properties;:host{display:block;width:100%;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;border-color:var(--ns-component-schedule-border-color);border-radius:var(--ns-component-schedule-border-radius);background:var(--ns-component-schedule-surface);color:var(--ns-component-schedule-color);box-shadow:var(--ns-component-schedule-shadow)}.ns-schedule__tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;gap:var(--ns-component-schedule-gap);padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-divider-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__view{grid-column:span 4 / span 4;margin-inline-start:auto}.ns-schedule__header-wrap{position:sticky;top:0;z-index:10;display:grid;background:var(--ns-component-schedule-surface)}.ns-schedule__header{display:flex;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;padding:var(--ns-component-schedule-padding);border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface-muted)}.ns-schedule__header-date{font-size:var(--ns-semantic-common-text-sm);--tw-font-weight: var(--ns-semantic-common-font-weight-semibold);font-weight:var(--ns-semantic-common-font-weight-semibold);color:var(--ns-component-schedule-color)}.ns-schedule__timeline{display:grid}.ns-schedule__timeline-day{position:relative;display:flex;min-height:calc(var(--ns-primitive-space-1) * 24);flex-direction:column;border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:0px;border-color:var(--ns-component-schedule-border-color);background:var(--ns-component-schedule-surface)}.ns-schedule__timeline-cell{flex:1;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, ease);transition-duration:var(--tw-duration, 0s)}.ns-schedule__timeline-cell:hover:not(:disabled){background:var(--ns-component-schedule-surface-muted)}.ns-schedule__selected{background:var(--ns-component-schedule-selected-background);color:var(--ns-component-schedule-primary)}@media(prefers-reduced-motion:reduce){.ns-schedule__timeline-cell{transition:none}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], selectedDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDay", required: false }] }, { type: i0.Output, args: ["selectedDayChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
 class NsSchemaMarkupComponent {
@@ -5746,24 +5653,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                 args: ['innerHTML']
             }] } });
 
-class NsSkeletonComponent {
-    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSkeletonComponent, isStandalone: true, selector: "ns-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class.ns-skeleton": "true", "class.ns-skeleton--animated": "animated()", "style.inline-size": "width()", "style.block-size": "height()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;overflow:hidden;border-radius:var(--ns-component-skeleton-radius);background:var(--ns-component-skeleton-background)}:host(.ns-skeleton--animated){background:linear-gradient(90deg,var(--ns-component-skeleton-background) 25%,var(--ns-component-skeleton-highlight) 50%,var(--ns-component-skeleton-background) 75%);background-size:200% 100%;animation:ns-skeleton-shimmer var(--ns-component-skeleton-duration) linear infinite}@keyframes ns-skeleton-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){:host(.ns-skeleton--animated){animation:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ns-skeleton', standalone: true, template: '', host: {
-                        'aria-hidden': 'true',
-                        '[class.ns-skeleton]': 'true',
-                        '[class.ns-skeleton--animated]': 'animated()',
-                        '[style.inline-size]': 'width()',
-                        '[style.block-size]': 'height()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow:hidden;border-radius:var(--ns-component-skeleton-radius);background:var(--ns-component-skeleton-background)}:host(.ns-skeleton--animated){background:linear-gradient(90deg,var(--ns-component-skeleton-background) 25%,var(--ns-component-skeleton-highlight) 50%,var(--ns-component-skeleton-background) 75%);background-size:200% 100%;animation:ns-skeleton-shimmer var(--ns-component-skeleton-duration) linear infinite}@keyframes ns-skeleton-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){:host(.ns-skeleton--animated){animation:none}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
-
 class TemplateDirective {
     name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'nsTemplate' });
     styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
@@ -5966,7 +5855,7 @@ const Arvisfy = {
             modalXl: '71.25rem',
             modalViewportInset: '2rem',
             popover: '12rem',
-            selectorListMenu: '15rem',
+            dropdownMenu: '15rem',
             tooltip: '20rem',
             toastMaxWidth: '25rem',
             toastMinHeight: '3.5rem'
@@ -6073,7 +5962,7 @@ const Arvisfy = {
                 modalXl: '{primitive.size.modalXl}',
                 modalViewportInset: '{primitive.size.modalViewportInset}',
                 popover: '{primitive.size.popover}',
-                selectorListMenu: '{primitive.size.selectorListMenu}',
+                dropdownMenu: '{primitive.size.dropdownMenu}',
                 tooltip: '{primitive.size.tooltip}',
                 toastMaxWidth: '{primitive.size.toastMaxWidth}',
                 toastMinHeight: '{primitive.size.toastMinHeight}'
@@ -6633,7 +6522,8 @@ const Arvisfy = {
             trackHeight: '{semantic.size.switchTrackHeight}',
             thumbSize: '{semantic.size.switchThumbSize}',
             thumbInset: '{semantic.size.switchThumbInset}',
-            thumbTranslate: '{semantic.size.switchThumbTranslate}'
+            thumbTranslate: '{semantic.size.switchThumbTranslate}',
+            thumbBorderOffset: '{semantic.border.thin}'
         },
         textarea: {
             labelColor: '{semantic.color.text}',
@@ -6907,13 +6797,7 @@ const Arvisfy = {
             valueTransitionDuration: '{semantic.motion.normal}',
             backgroundTransitionDuration: '{semantic.motion.fast}'
         },
-        selectorList: {
-            menuMaxHeight: '{semantic.size.selectorListMenu}',
-            menuBackground: '{semantic.color.surface}',
-            menuColor: '{semantic.color.text}',
-            itemPaddingBlock: '{semantic.space.sm}',
-            itemPaddingInline: '{semantic.space.md}',
-            itemActiveBackground: '{semantic.color.surfaceMuted}',
+        dropdown: {
             labelGap: '{semantic.space.sm}',
             labelColor: '{semantic.color.text}',
             labelSize: '{semantic.text.sm}',
@@ -6921,23 +6805,58 @@ const Arvisfy = {
             triggerMinHeight: '{semantic.size.controlMd}',
             triggerPaddingBlock: '{semantic.space.sm}',
             triggerPaddingInline: '{semantic.space.md}',
+            triggerGap: '{semantic.space.sm}',
+            triggerBorderWidth: '{semantic.border.thin}',
             triggerBorderColor: '{semantic.color.border}',
             triggerBorderHoverColor: '{semantic.color.borderStrong}',
             triggerBorderFocusColor: '{semantic.color.focus}',
             triggerRadius: '{semantic.radius.control}',
             triggerBackground: '{semantic.color.surface}',
             triggerColor: '{semantic.color.text}',
+            triggerPlaceholderColor: '{semantic.color.textMuted}',
             triggerFocusShadow: '{semantic.shadow.focus}',
-            triggerBorderWidth: '{semantic.border.thin}',
+            triggerDisabledBackground: '{semantic.color.surfaceMuted}',
+            triggerDisabledColor: '{semantic.color.textMuted}',
+            triggerInvalidBorderColor: '{semantic.status.danger}',
+            triggerIconColor: '{semantic.color.textMuted}',
             triggerDuration: '{semantic.motion.normal}',
             triggerEasing: '{semantic.motion.easing}',
+            menuMaxHeight: '{semantic.size.dropdownMenu}',
+            menuPadding: '{semantic.space.md}',
+            menuGap: '{semantic.space.sm}',
             menuBorderWidth: '{semantic.border.thin}',
             menuBorderColor: '{semantic.color.border}',
             menuRadius: '{semantic.radius.overlay}',
+            menuBackground: '{semantic.color.surface}',
+            menuColor: '{semantic.color.text}',
             menuShadow: '{semantic.shadow.overlay}',
-            itemRadius: '{semantic.radius.control}',
-            itemSelectedColor: '{semantic.color.primary}',
-            itemSelectedWeight: '{semantic.fontWeight.semibold}'
+            menuEnterDuration: '{semantic.motion.enter}',
+            menuEnterEasing: '{semantic.motion.easing}',
+            searchMinHeight: '{semantic.size.controlMd}',
+            searchPaddingBlock: '{semantic.space.sm}',
+            searchPaddingInline: '{semantic.space.md}',
+            searchBorderWidth: '{semantic.border.thin}',
+            searchBorderColor: '{semantic.color.border}',
+            searchBorderFocusColor: '{semantic.color.focus}',
+            searchRadius: '{semantic.radius.control}',
+            searchBackground: '{semantic.color.surface}',
+            searchColor: '{semantic.color.text}',
+            searchPlaceholderColor: '{semantic.color.textMuted}',
+            searchIconColor: '{semantic.color.textMuted}',
+            searchFocusShadow: '{semantic.shadow.focus}',
+            optionPaddingBlock: '{semantic.space.sm}',
+            optionPaddingInline: '{semantic.space.md}',
+            optionRadius: '{semantic.radius.control}',
+            optionBackgroundHover: '{semantic.color.surfaceMuted}',
+            optionActiveBackground: '{semantic.color.surfaceMuted}',
+            optionSelectedBackground: '{semantic.color.surfaceMuted}',
+            optionSelectedColor: '{semantic.color.primary}',
+            optionSelectedWeight: '{semantic.fontWeight.semibold}',
+            emptyPadding: '{semantic.space.md}',
+            emptyColor: '{semantic.color.textMuted}',
+            emptySize: '{semantic.text.sm}',
+            descriptionColor: '{semantic.color.textMuted}',
+            errorColor: '{semantic.status.danger}'
         },
         skeleton: {
             background: '{semantic.color.surfaceMuted}',
@@ -6983,20 +6902,6 @@ const Arvisfy = {
             closeBackgroundHover: '{semantic.color.surfaceMuted}',
             closeFocusShadow: '{semantic.shadow.focus}'
         },
-        listBox: {
-            borderWidth: '{semantic.border.thin}',
-            borderColor: '{semantic.color.border}',
-            radius: '{semantic.radius.surface}',
-            background: '{semantic.color.surface}',
-            color: '{semantic.color.text}',
-            optionPaddingBlock: '{semantic.space.sm}',
-            optionPaddingInline: '{semantic.space.md}',
-            optionFocusShadow: '{semantic.shadow.focus}',
-            optionBackgroundHover: '{semantic.color.surfaceMuted}',
-            optionSelectedBackground: '{semantic.color.surfaceMuted}',
-            optionSelectedColor: '{semantic.color.primary}',
-            optionSelectedWeight: '{semantic.fontWeight.semibold}'
-        },
         pagination: {
             gap: '{semantic.space.sm}',
             minWidth: '{semantic.size.buttonMin}',
@@ -8045,5 +7950,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsListBoxComponent, NsListBoxOptionComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSelectorListComponent, NsSelectorListItemComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
+export { Arvisfy, NS_THEME_OPTIONS, NS_TOAST_OPTIONS, NsAccordionComponent, NsAccordionItemComponent, NsAlertComponent, NsAvatarComponent, NsBadgeComponent, NsBreadcrumbItemComponent, NsBreadcrumbsComponent, NsButtonComponent, NsButtonGroupComponent, NsCardBodyComponent, NsCardComponent, NsCardFooterComponent, NsCardHeaderComponent, NsCheckboxComponent, NsChipComponent, NsCollectionController, NsCommentComponent, NsContentEditableComponent, NsDatePickerComponent, NsDateRangePickerComponent, NsDescriptionComponent, NsDividerComponent, NsDrawerComponent, NsDrawerRef, NsDrawerService, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsFieldContext, NsFieldDirective, NsImageUploadComponent, NsInputCodeComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsInputSearchComponent, NsLinkComponent, NsMeterComponent, NsModalComponent, NsModalRef, NsModalService, NsOverlayRef, NsOverlayService, NsPaginationComponent, NsPasswordComponent, NsPopoverComponent, NsProgressBarComponent, NsRadioComponent, NsRadioGroupComponent, NsSchedule, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSkeletonComponent, NsSliderComponent, NsSurfaceComponent, NsSwitchComponent, NsTabComponent, NsTabsComponent, NsTagComponent, NsTagGroupComponent, NsTextAreaComponent, NsThemeService, NsToastComponent, NsToastHandle, NsToastService, NsTooltipComponent, NsTooltipDirective, NsValueAccessor, TemplateDirective, defineNsPreset, flattenTokens, getNsOverlayPosition, provideNsTheme, referenceToCssVariable, tokenPathToCssVariable, validateNsPreset };
 //# sourceMappingURL=ng-solid-design-system.mjs.map