@ship-ui/core 0.17.21 → 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() {
@@ -2285,7 +2461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class ShipDatepicker {
     constructor() {
-        this.#INIT_DATE = this.#getUTCDate(new Date());
+        this.#INIT_DATE = new Date(new Date().setHours(0, 0, 0, 0));
         this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : []));
         this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
         this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : []));
@@ -2351,26 +2527,25 @@ class ShipDatepicker {
         });
     }
     #generateMonthDates(date, startOfWeek) {
-        const year = date.getUTCFullYear();
-        const month = date.getUTCMonth();
-        const firstDay = new Date(Date.UTC(year, month)).getUTCDay();
-        const daysInMonth = 32 - new Date(Date.UTC(year, month, 32)).getUTCDate();
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
         const dates = [];
         let offset = firstDay - startOfWeek;
         if (offset < 0) {
             offset += 7;
         }
-        const lastDayOfPrevMonth = new Date(Date.UTC(year, month, 0)).getUTCDate();
+        const lastDayOfPrevMonth = new Date(year, month, 0).getDate();
         for (let i = offset - 1; i >= 0; i--) {
-            const prevMonthDate = new Date(Date.UTC(year, month - 1, lastDayOfPrevMonth - i));
-            dates.push(prevMonthDate);
+            dates.push(new Date(year, month - 1, lastDayOfPrevMonth - i, 0, 0, 0, 0));
         }
         for (let i = 1; i <= daysInMonth; i++) {
-            dates.push(new Date(Date.UTC(year, month, i)));
+            dates.push(new Date(year, month, i, 0, 0, 0, 0));
         }
         let nextMonthDay = 1;
         while (dates.length % 7 !== 0) {
-            dates.push(new Date(Date.UTC(year, month + 1, nextMonthDay++)));
+            dates.push(new Date(year, month + 1, nextMonthDay++, 0, 0, 0, 0));
         }
         return dates;
     }
@@ -2392,11 +2567,11 @@ class ShipDatepicker {
     }
     setDate(newDate, selectedElement) {
         const createDateWithExistingTime = (newDate, existingDate) => {
-            const hours = existingDate?.getUTCHours() ?? 0;
-            const minutes = existingDate?.getUTCMinutes() ?? 0;
-            const seconds = existingDate?.getUTCSeconds() ?? 0;
-            const milliseconds = existingDate?.getUTCMilliseconds() ?? 0;
-            return this.#getUTCDate(new Date(Date.UTC(newDate.getUTCFullYear(), newDate.getUTCMonth(), newDate.getUTCDate(), hours, minutes, seconds, milliseconds)));
+            const hours = existingDate?.getHours() ?? 0;
+            const minutes = existingDate?.getMinutes() ?? 0;
+            const seconds = existingDate?.getSeconds() ?? 0;
+            const milliseconds = existingDate?.getMilliseconds() ?? 0;
+            return new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), hours, minutes, seconds, milliseconds);
         };
         if (!this.asRange()) {
             this.date.set(createDateWithExistingTime(newDate, this.date()));
@@ -2433,10 +2608,10 @@ class ShipDatepicker {
         if (startDate === null)
             return null;
         const startOfDay = (date) => {
-            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 0, 0, 0, 0));
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         };
         const endOfDay = (date) => {
-            return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999));
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
         };
         const currentDate = startOfDay(date);
         const rangeStart = startOfDay(startDate);
@@ -2457,7 +2632,7 @@ class ShipDatepicker {
                 }
                 if (currentDate >= rangeStart && currentDate <= rangeEnd) {
                     classes.push('sel');
-                    const dayOfWeek = currentDate.getUTCDay();
+                    const dayOfWeek = currentDate.getDay();
                     const startOfWeek = this.startOfWeek();
                     if (dayOfWeek === startOfWeek) {
                         classes.push('week-start');
@@ -2468,11 +2643,11 @@ class ShipDatepicker {
                     }
                 }
                 const nextDate = new Date(currentDate);
-                nextDate.setUTCDate(currentDate.getUTCDate() + 1);
+                nextDate.setDate(currentDate.getDate() + 1);
                 const prevDate = new Date(currentDate);
-                prevDate.setUTCDate(currentDate.getUTCDate() - 1);
-                const isFirstOfMonth = currentDate.getUTCDate() === 1;
-                const isLastOfMonth = nextDate.getUTCMonth() !== currentDate.getUTCMonth();
+                prevDate.setDate(currentDate.getDate() - 1);
+                const isFirstOfMonth = currentDate.getDate() === 1;
+                const isLastOfMonth = nextDate.getMonth() !== currentDate.getMonth();
                 if (isFirstOfMonth) {
                     classes.push('month-start');
                 }
@@ -2505,11 +2680,6 @@ class ShipDatepicker {
         const offsetDate = this.getOffsetDate(monthOffset);
         return date.getMonth() === offsetDate.getMonth();
     }
-    #getUTCDate(date) {
-        const offsetMinutes = date.getTimezoneOffset();
-        const timeDiffMillis = offsetMinutes * 60 * 1000;
-        return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) + timeDiffMillis);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ShipDatepicker, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange" }, host: { properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <header>
@@ -2916,32 +3086,31 @@ class ShipFormFieldPopover {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
-    <div class="input-wrap">
-      <div class="prefix">
-        <ng-content select="[prefix]"></ng-content>
-        <ng-content select="[textPrefix]"></ng-content>
-      </div>
-
-      <div class="prefix-space"></div>
+    <sh-popover
+      [(isOpen)]="isOpen"
+      (closed)="close()"
+      [options]="{
+        closeOnButton: false,
+        closeOnEsc: true,
+      }">
+      <div trigger class="input-wrap">
+        <div class="prefix">
+          <ng-content select="[prefix]"></ng-content>
+          <ng-content select="[textPrefix]"></ng-content>
+        </div>
 
-      <sh-popover
-        [(isOpen)]="isOpen"
-        (closed)="close()"
-        [options]="{
-          closeOnButton: false,
-          closeOnEsc: true,
-        }">
-        <ng-content trigger select="input"></ng-content>
+        <div class="prefix-space"></div>
 
-        <ng-content select="[popoverContent]"></ng-content>
-      </sh-popover>
+        <ng-content select="input"></ng-content>
 
-      <ng-content select="textarea"></ng-content>
+        <ng-content select="textarea"></ng-content>
 
-      <ng-content select="[textSuffix]"></ng-content>
-      <div class="suffix-space"></div>
-      <ng-content select="[suffix]"></ng-content>
-    </div>
+        <ng-content select="[textSuffix]"></ng-content>
+        <div class="suffix-space"></div>
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+      <ng-content select="[popoverContent]"></ng-content>
+    </sh-popover>
 
     <div class="helpers">
       <div class="error-wrap">
@@ -2962,32 +3131,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     template: `
     <ng-content select="label"></ng-content>
 
-    <div class="input-wrap">
-      <div class="prefix">
-        <ng-content select="[prefix]"></ng-content>
-        <ng-content select="[textPrefix]"></ng-content>
-      </div>
+    <sh-popover
+      [(isOpen)]="isOpen"
+      (closed)="close()"
+      [options]="{
+        closeOnButton: false,
+        closeOnEsc: true,
+      }">
+      <div trigger class="input-wrap">
+        <div class="prefix">
+          <ng-content select="[prefix]"></ng-content>
+          <ng-content select="[textPrefix]"></ng-content>
+        </div>
 
-      <div class="prefix-space"></div>
+        <div class="prefix-space"></div>
 
-      <sh-popover
-        [(isOpen)]="isOpen"
-        (closed)="close()"
-        [options]="{
-          closeOnButton: false,
-          closeOnEsc: true,
-        }">
-        <ng-content trigger select="input"></ng-content>
+        <ng-content select="input"></ng-content>
 
-        <ng-content select="[popoverContent]"></ng-content>
-      </sh-popover>
+        <ng-content select="textarea"></ng-content>
 
-      <ng-content select="textarea"></ng-content>
-
-      <ng-content select="[textSuffix]"></ng-content>
-      <div class="suffix-space"></div>
-      <ng-content select="[suffix]"></ng-content>
-    </div>
+        <ng-content select="[textSuffix]"></ng-content>
+        <div class="suffix-space"></div>
+        <ng-content select="[suffix]"></ng-content>
+      </div>
+      <ng-content select="[popoverContent]"></ng-content>
+    </sh-popover>
 
     <div class="helpers">
       <div class="error-wrap">
@@ -3006,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());
@@ -3057,7 +3204,7 @@ class ShipDatepickerInput {
                 return;
             this.#createCustomInputEventListener(input);
             input.addEventListener('inputValueChanged', (event) => {
-                this.internalDate.set(event.detail.value ? this.#getUTCDate(new Date(event.detail.value)) : null);
+                this.internalDate.set(event.detail.value ? new Date(event.detail.value) : null);
             });
             input.addEventListener('focus', () => {
                 this.isOpen.set(true);
@@ -3066,7 +3213,7 @@ class ShipDatepickerInput {
             this.#inputRef.set(input);
             input.autocomplete = 'off';
             if (typeof input.value === 'string') {
-                this.internalDate.set(input.value ? this.#getUTCDate(new Date(input.value)) : null);
+                this.internalDate.set(input.value ? new Date(input.value) : null);
             }
         }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : []));
     }
@@ -3108,11 +3255,6 @@ class ShipDatepickerInput {
         });
         return input;
     }
-    #getUTCDate(date) {
-        const offsetMinutes = date.getTimezoneOffset();
-        const timeDiffMillis = offsetMinutes * 60 * 1000;
-        return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) + timeDiffMillis);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ShipDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ShipDatepickerInput, isStandalone: true, selector: "sh-datepicker-input", inputs: { masking: { classPropertyName: "masking", publicName: "masking", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, providers: [DatePipe], queries: [{ propertyName: "ngModels", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
@@ -3927,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 = [];
@@ -4106,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);
@@ -4287,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: [{
@@ -4313,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() {
@@ -5294,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) {
@@ -5306,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,
@@ -5454,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) {
@@ -6000,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 }); }
 }
@@ -6025,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() {
@@ -6420,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" }] : []));
@@ -6431,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 }); }
 }
@@ -6449,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', {
@@ -6628,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: [{
@@ -6657,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() {