@ship-ui/core 0.17.23 → 0.18.0

package/fesm2022/ship-ui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, ElementRef, Renderer2, input, ChangeDetectionStrategy, Component, viewChild, effect, HostListener, NgModule, signal, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, DestroyRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, untracked, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Renderer2, input, ChangeDetectionStrategy, Component, viewChild, effect, HostListener, NgModule, signal, Injectable, DOCUMENT, model, output, ApplicationRef, OutputEmitterRef, TemplateRef, createComponent, isSignal, DestroyRef, PLATFORM_ID, ViewChild, Directive, contentChild, contentChildren, afterNextRender, Injector, HostBinding, runInInjectionContext, ChangeDetectorRef, viewChildren, untracked, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
@@ -524,56 +524,22 @@ class ShipDialogService {
         this.#appRef = inject(ApplicationRef);
         this.compRef = null;
         this.insertedCompRef = null;
+        this.insertedTemplateRef = null;
         this.closedFieldSub = null;
         this.compClosedSub = null;
     }
     #document;
     #bodyEl;
     #appRef;
-    open(component, options) {
+    open(componentOrTemplate, options) {
         const environmentInjector = this.#appRef.injector;
         const hostElement = this.#createEl();
         let closingCalled = false;
+        let closedField;
         const { data, closed, ...rest } = options || {};
         if (this.compRef) {
             this.#cleanupRefs(true);
         }
-        this.insertedCompRef = createComponent(component, {
-            environmentInjector,
-        });
-        this.compRef = createComponent(ShipDialog, {
-            hostElement,
-            environmentInjector,
-            projectableNodes: [[this.insertedCompRef.location.nativeElement]],
-        });
-        const insertedInstance = this.insertedCompRef.instance;
-        const dataField = insertedInstance.data;
-        const closedField = insertedInstance.closed;
-        if (data) {
-            if (isSignal(dataField)) {
-                this.insertedCompRef.setInput('data', data);
-            }
-            else if (!isSignal(dataField)) {
-                throw new Error('data is not an input signal on the passed component');
-            }
-        }
-        if (closedField instanceof OutputEmitterRef) {
-            this.closedFieldSub = closedField.subscribe((arg) => {
-                this.#cleanupRefs();
-                if (closingCalled)
-                    return;
-                closingCalled = true;
-                closed?.(arg);
-                (this.compRef?.instance.closed).emit(arg);
-            });
-        }
-        this.#appRef.attachView(this.insertedCompRef.hostView);
-        this.#appRef.attachView(this.compRef.hostView);
-        this.insertedCompRef.changeDetectorRef.detectChanges();
-        this.compRef.changeDetectorRef.detectChanges();
-        this.compRef.instance.isOpen.set(true);
-        this.compRef.setInput('options', rest);
-        this.compClosedSub = this.compRef.instance.closed.subscribe(() => closeAction());
         const _self = this;
         function closeAction(arg = undefined) {
             _self.#cleanupRefs();
@@ -585,8 +551,61 @@ class ShipDialogService {
             }
             closed?.(arg);
         }
+        let projectableNodes = [];
+        if (componentOrTemplate instanceof TemplateRef) {
+            this.insertedTemplateRef = componentOrTemplate.createEmbeddedView({
+                $implicit: data,
+                close: (res) => closeAction(res),
+            });
+            projectableNodes = [this.insertedTemplateRef.rootNodes];
+        }
+        else {
+            this.insertedCompRef = createComponent(componentOrTemplate, {
+                environmentInjector,
+            });
+            projectableNodes = [[this.insertedCompRef.location.nativeElement]];
+            const insertedInstance = this.insertedCompRef.instance;
+            const dataField = insertedInstance.data;
+            closedField = insertedInstance.closed;
+            if (data) {
+                if (isSignal(dataField)) {
+                    this.insertedCompRef.setInput('data', data);
+                }
+                else if (!isSignal(dataField)) {
+                    throw new Error('data is not an input signal on the passed component');
+                }
+            }
+            if (closedField && closedField instanceof OutputEmitterRef) {
+                this.closedFieldSub = closedField.subscribe((arg) => {
+                    this.#cleanupRefs();
+                    if (closingCalled)
+                        return;
+                    closingCalled = true;
+                    closed?.(arg);
+                    (this.compRef?.instance.closed).emit(arg);
+                });
+            }
+        }
+        this.compRef = createComponent(ShipDialog, {
+            hostElement,
+            environmentInjector,
+            projectableNodes,
+        });
+        if (this.insertedCompRef) {
+            this.#appRef.attachView(this.insertedCompRef.hostView);
+            this.insertedCompRef.changeDetectorRef.detectChanges();
+        }
+        if (this.insertedTemplateRef) {
+            this.#appRef.attachView(this.insertedTemplateRef);
+            this.insertedTemplateRef.detectChanges();
+        }
+        this.#appRef.attachView(this.compRef.hostView);
+        this.compRef.changeDetectorRef.detectChanges();
+        this.compRef.instance.isOpen.set(true);
+        this.compRef.setInput('options', rest);
+        this.compClosedSub = this.compRef.instance.closed.subscribe(() => closeAction());
         return {
-            component: this.insertedCompRef.instance,
+            component: this.insertedCompRef?.instance,
             close: closeAction,
             closed: this.compRef.instance.closed,
         };
@@ -607,6 +626,12 @@ class ShipDialogService {
                 _self.#appRef.detachView(_self.insertedCompRef.hostView);
                 _self.closedFieldSub?.unsubscribe();
                 _self.insertedCompRef.destroy();
+                _self.insertedCompRef = null;
+            }
+            if (_self.insertedTemplateRef) {
+                _self.#appRef.detachView(_self.insertedTemplateRef);
+                _self.insertedTemplateRef.destroy();
+                _self.insertedTemplateRef = null;
             }
             if (!_self.compRef)
                 return;
@@ -1762,8 +1787,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 args: ['document:touchend', ['$event']]
             }] } });
 
-class ShipButtonGroup {
+function contentProjectionSignal(querySelector, options = { childList: true }) {
+    const hostElement = inject((ElementRef)).nativeElement;
+    const destroyRef = inject(DestroyRef);
+    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : []));
+    const updateElements = () => {
+        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
+    };
+    updateElements();
+    if (typeof MutationObserver === 'undefined')
+        return projectedElementsSignal.asReadonly();
+    const observer = new MutationObserver((mutations) => {
+        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
+        if (hasChildListChanges) {
+            updateElements();
+        }
+    });
+    observer.observe(hostElement, options);
+    destroyRef.onDestroy(() => observer.disconnect());
+    return projectedElementsSignal.asReadonly();
+}
+
+class ShipSelectionGroup {
+    constructor(itemSelector, activeClass) {
+        this.itemSelector = itemSelector;
+        this.activeClass = activeClass;
+        this.hostElement = inject((ElementRef)).nativeElement;
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.items = contentProjectionSignal(this.itemSelector, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        effect(() => {
+            const selectedValue = this.value();
+            const activeClass = this.activeClass;
+            this.items().forEach((item) => {
+                const itemValue = item.getAttribute('value');
+                // If the item doesn't have a value attribute, it's not participate in the selection
+                if (itemValue === null && !item.hasAttribute('value'))
+                    return;
+                // Exact match or handle empty string matching properly
+                if (itemValue === String(selectedValue) || (itemValue === '' && (selectedValue === null || selectedValue === ''))) {
+                    item.classList.add(activeClass);
+                }
+                else {
+                    item.classList.remove(activeClass);
+                }
+            });
+        });
+    }
+    onClick(target) {
+        const targetEl = target;
+        if (!targetEl || !targetEl.closest)
+            return;
+        const item = targetEl.closest(this.itemSelector);
+        if (item && this.hostElement.contains(item)) {
+            if (item.hasAttribute('value')) {
+                const value = item.getAttribute('value');
+                this.value.set(value);
+            }
+        }
+    }
+    onKeyDown(event) {
+        const items = this.items().filter(item => item.hasAttribute('value'));
+        if (!items.length)
+            return;
+        const currentIndex = items.findIndex((item) => item.classList.contains(this.activeClass));
+        let nextIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = currentIndex >= items.length - 1 ? 0 : currentIndex + 1;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
+                break;
+            default:
+                return; // Let other keys propagate natively
+        }
+        event.preventDefault();
+        const nextItem = items[nextIndex];
+        if (nextItem) {
+            const value = nextItem.getAttribute('value');
+            this.value.set(value);
+            nextItem.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipSelectionGroup, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ShipSelectionGroup, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipSelectionGroup, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }, { type: undefined }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class ShipButtonGroup extends ShipSelectionGroup {
     constructor() {
+        super('button', 'active');
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
@@ -1775,7 +1902,7 @@ class ShipButtonGroup {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipButtonGroup, isStandalone: true, selector: "sh-button-group", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--btng-id": "id" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipButtonGroup, isStandalone: true, selector: "sh-button-group", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--btng-id": "id" } }, usesInheritance: true, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1793,7 +1920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         '[style.--btng-id]': 'id',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class ShipButton {
     constructor() {
@@ -1856,18 +1983,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class ShipCheckbox {
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this.internalInput = viewChild('internalInput', ...(ngDevMode ? [{ debugName: "internalInput" }] : []));
+        this.projectedInputs = contentProjectionSignal('input:not(.internal-input)', {
+            childList: true,
+            attributes: true,
+        });
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
         this.currentClassList = classMutationSignal();
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.noInternalInput = input(false, ...(ngDevMode ? [{ debugName: "noInternalInput" }] : []));
         this.hostClasses = shipComponentClasses('checkbox', {
             color: this.color,
             variant: this.variant,
             readonly: this.readonly,
         });
     }
+    onInternalInputChange(event) {
+        if (this.disabled())
+            return;
+        const input = event.target;
+        this.checked.set(input.checked);
+    }
+    onEnter(event) {
+        const inputEl = this.internalInput()?.nativeElement;
+        if (inputEl && getComputedStyle(inputEl).display !== 'none') {
+            inputEl.click();
+        }
+        else {
+            this._elementRef.nativeElement.click();
+        }
+        event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipCheckbox, isStandalone: true, selector: "sh-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ShipCheckbox, isStandalone: true, selector: "sh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, noInternalInput: { classPropertyName: "noInternalInput", publicName: "noInternalInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "keydown.enter": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null" } }, viewQueries: [{ propertyName: "internalInput", first: true, predicate: ["internalInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="box sh-sheet" [class]="currentClassList()">
       <sh-icon class="inherit default-indicator">check-bold</sh-icon>
       <sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
@@ -1876,6 +2028,16 @@ class ShipCheckbox {
     <div class="label">
       <ng-content />
     </div>
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="checkbox"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipCheckbox, decorators: [{
@@ -1892,13 +2054,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <div class="label">
       <ng-content />
     </div>
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="checkbox"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+        }], propDecorators: { internalInput: [{ type: i0.ViewChild, args: ['internalInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], noInternalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noInternalInput", required: false }] }], onEnter: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
 
 class ShipChip {
     constructor() {
@@ -2998,27 +3174,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 args: ['click']
             }] } });
 
-function contentProjectionSignal(querySelector) {
-    const hostElement = inject((ElementRef)).nativeElement;
-    const destroyRef = inject(DestroyRef);
-    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : []));
-    const updateElements = () => {
-        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
-    };
-    updateElements();
-    if (typeof MutationObserver === 'undefined')
-        return projectedElementsSignal.asReadonly();
-    const observer = new MutationObserver((mutations) => {
-        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
-        if (hasChildListChanges) {
-            updateElements();
-        }
-    });
-    observer.observe(hostElement, { childList: true });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return projectedElementsSignal.asReadonly();
-}
-
 class ShipDatepickerInput {
     constructor() {
         // #INIT_DATE = this.#getUTCDate(new Date());
@@ -3914,13 +4069,39 @@ class ShipMenu {
                     }
                     else {
                         el.click();
-                        queueMicrotask(() => this.close('active'));
+                        if (!el.querySelector('sh-checkbox')) {
+                            queueMicrotask(() => this.close('active'));
+                        }
                     }
                 }
             }
             else if (e.key === 'Tab') {
-                e.preventDefault();
-                this.close('closed');
+                let optionElements = this.activeElements();
+                if (!optionElements.length) {
+                    const newOptionElements = this.optionsEl();
+                    this.activeElements.set(newOptionElements);
+                    optionElements = newOptionElements;
+                }
+                if (e.shiftKey) {
+                    if (activeOptionIndex <= 0) {
+                        e.preventDefault();
+                        this.close('closed');
+                    }
+                    else {
+                        e.preventDefault();
+                        this.activeOptionIndex.set(this.prevActiveIndex(activeOptionIndex));
+                    }
+                }
+                else {
+                    if (activeOptionIndex >= optionElements.length - 1) {
+                        e.preventDefault();
+                        this.close('closed');
+                    }
+                    else {
+                        e.preventDefault();
+                        this.activeOptionIndex.set(this.nextActiveIndex(activeOptionIndex));
+                    }
+                }
             }
         };
         this._lastElementList = [];
@@ -4093,6 +4274,10 @@ class ShipMenu {
     }
     close(action = 'closed', event) {
         this.inputValue.set('');
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = '';
+        }
         if (this.closeOnClick()) {
             (!this.keepClickedOptionActive() || action === 'closed') && this.#resetActiveOption();
             this.isOpen.set(false);
@@ -4274,21 +4459,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class ShipRadio {
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this.internalInput = viewChild('internalInput', ...(ngDevMode ? [{ debugName: "internalInput" }] : []));
+        this.projectedInputs = contentProjectionSignal('input:not(.internal-input)', {
+            childList: true,
+            attributes: true,
+        });
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
         this.currentClassList = classMutationSignal();
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.noInternalInput = input(false, ...(ngDevMode ? [{ debugName: "noInternalInput" }] : []));
         this.hostClasses = shipComponentClasses('radio', {
             color: this.color,
             variant: this.variant,
             readonly: this.readonly,
         });
     }
+    onInternalInputChange(event) {
+        if (this.disabled())
+            return;
+        const input = event.target;
+        this.checked.set(input.checked);
+    }
+    onEnter(event) {
+        const inputEl = this.internalInput()?.nativeElement;
+        if (inputEl && getComputedStyle(inputEl).display !== 'none') {
+            inputEl.click();
+        }
+        else {
+            this._elementRef.nativeElement.click();
+        }
+        event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipRadio, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipRadio, isStandalone: true, selector: "sh-radio", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ShipRadio, isStandalone: true, selector: "sh-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, noInternalInput: { classPropertyName: "noInternalInput", publicName: "noInternalInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "keydown.enter": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null" } }, viewQueries: [{ propertyName: "internalInput", first: true, predicate: ["internalInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="radio sh-sheet" [class]="currentClassList()"></div>
 
     <ng-content />
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="radio"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipRadio, decorators: [{
@@ -4300,13 +4520,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     <div class="radio sh-sheet" [class]="currentClassList()"></div>
 
     <ng-content />
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="radio"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+        }], propDecorators: { internalInput: [{ type: i0.ViewChild, args: ['internalInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], noInternalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noInternalInput", required: false }] }], onEnter: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
 
 class ShipRangeSlider {
     constructor() {
@@ -5281,7 +5515,7 @@ class ShipSelect {
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
             @if (selectMultiple()) {
-              <sh-checkbox [class]="selectClasses()" [class.active]="isSelected($index)" />
+              <sh-checkbox [class]="selectClasses()" [checked]="isSelected($index)" />
             }
 
             @if (_listOptionTemplate) {
@@ -5293,7 +5527,7 @@ class ShipSelect {
         }
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["color", "variant", "readonly"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipSelect, decorators: [{
             type: Component,
@@ -5441,7 +5675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
             @if (selectMultiple()) {
-              <sh-checkbox [class]="selectClasses()" [class.active]="isSelected($index)" />
+              <sh-checkbox [class]="selectClasses()" [checked]="isSelected($index)" />
             }
 
             @if (_listOptionTemplate) {
@@ -5987,15 +6221,28 @@ function moveIndex(array, event) {
     return newArray;
 }
 
-class ShipStepper {
+class ShipStepper extends ShipSelectionGroup {
     constructor() {
+        super('[value], [step], [routerLinkActive], button, a', 'active');
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.hostClasses = shipComponentClasses('stepper', {
             color: this.color,
         });
+        effect(() => {
+            this.items().forEach((item) => {
+                if (!item.querySelector('.sh-radio')) {
+                    const shRadio = document.createElement('div');
+                    shRadio.className = 'sh-radio';
+                    const shRadioContent = document.createElement('div');
+                    shRadioContent.className = 'radio sh-sheet';
+                    shRadio.append(shRadioContent);
+                    item.prepend(shRadio);
+                }
+            });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipStepper, isStandalone: true, selector: "sh-stepper", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipStepper, isStandalone: true, selector: "sh-stepper", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, usesInheritance: true, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -6012,7 +6259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         '[class]': 'hostClasses()',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class ShipResize {
     constructor() {
@@ -6407,8 +6654,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-class ShipTabs {
+class ShipTabs extends ShipSelectionGroup {
     constructor() {
+        super('[value], [tab], button, a', 'active');
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
@@ -6418,7 +6666,7 @@ class ShipTabs {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipTabs, isStandalone: true, selector: "sh-tabs", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--tabs-id": "id" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipTabs, isStandalone: true, selector: "sh-tabs", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--tabs-id": "id" } }, usesInheritance: true, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -6436,7 +6684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         '[style.--tabs-id]': 'id',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const THEME_ORDER = ['light', 'dark', null];
 const WINDOW = new InjectionToken('WindowToken', {
@@ -6615,22 +6863,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class ShipToggle {
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this.internalInput = viewChild('internalInput', ...(ngDevMode ? [{ debugName: "internalInput" }] : []));
+        this.projectedInputs = contentProjectionSignal('input:not(.internal-input)', {
+            childList: true,
+            attributes: true,
+        });
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.noInternalInput = input(false, ...(ngDevMode ? [{ debugName: "noInternalInput" }] : []));
         this.hostClasses = shipComponentClasses('toggle', {
             color: this.color,
             variant: this.variant,
             readonly: this.readonly,
         });
     }
+    onInternalInputChange(event) {
+        if (this.disabled())
+            return;
+        const input = event.target;
+        this.checked.set(input.checked);
+    }
+    onEnter(event) {
+        const inputEl = this.internalInput()?.nativeElement;
+        if (inputEl && getComputedStyle(inputEl).display !== 'none') {
+            inputEl.click();
+        }
+        else {
+            this._elementRef.nativeElement.click();
+        }
+        event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipToggle, isStandalone: true, selector: "sh-toggle", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ShipToggle, isStandalone: true, selector: "sh-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, noInternalInput: { classPropertyName: "noInternalInput", publicName: "noInternalInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "keydown.enter": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null" } }, viewQueries: [{ propertyName: "internalInput", first: true, predicate: ["internalInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="box">
       <div class="knob"></div>
     </div>
 
     <ng-content />
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="checkbox"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipToggle, decorators: [{
@@ -6644,13 +6927,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     </div>
 
     <ng-content />
+
+    @if (projectedInputs().length === 0 && !noInternalInput()) {
+      <input
+        #internalInput
+        type="checkbox"
+        class="internal-input"
+        [attr.disabled]="disabled() ? '' : null"
+        [checked]="checked()"
+        (change)="onInternalInputChange($event)" />
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+        }], propDecorators: { internalInput: [{ type: i0.ViewChild, args: ['internalInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], noInternalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "noInternalInput", required: false }] }], onEnter: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
 
 class ShipVirtualScroll {
     constructor() {