@ship-ui/core 0.19.3 → 0.19.4

package/fesm2022/ship-ui-core.mjs

@@ -1,7 +1,7 @@
 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, OutputEmitterRef, TemplateRef, createComponent, isSignal, DestroyRef, PLATFORM_ID, ViewChild, booleanAttribute, Directive, untracked, contentChild, contentChildren, afterNextRender, Injector, HostBinding, runInInjectionContext, ChangeDetectorRef, viewChildren, 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, booleanAttribute, Directive, untracked, contentChild, afterNextRender, Injector, HostBinding, runInInjectionContext, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
-import { NgModel } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { isObservable, firstValueFrom } from 'rxjs';
 
 const defaultThemeColors = {
@@ -100,7 +100,7 @@ class ShipIcon {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: ShipIcon, isStandalone: true, selector: "sh-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: ShipIcon, isStandalone: true, selector: "sh-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -116,6 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
+                        '[attr.aria-hidden]': '"true"',
                     },
                 }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -1942,12 +1943,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             }] } });
 
 class ShipSelectionGroup {
-    constructor(itemSelector, activeClass) {
+    constructor(itemSelector, activeClass, options) {
         this.itemSelector = itemSelector;
         this.activeClass = activeClass;
+        this.options = options;
         this.hostElement = inject((ElementRef)).nativeElement;
         this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.manualActivation = input(false, { ...(ngDevMode ? { debugName: "manualActivation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        if (this.options?.hostRole) {
+            this.hostElement.setAttribute('role', this.options.hostRole);
+        }
         this.items = contentProjectionSignal(this.itemSelector, {
             childList: true,
             subtree: true,
@@ -1956,7 +1962,20 @@ class ShipSelectionGroup {
         effect(() => {
             const selectedValue = this.value();
             const activeClass = this.activeClass;
-            this.items().forEach((item) => {
+            const items = this.items();
+            let hasSelection = false;
+            items.forEach((item) => {
+                const itemValue = item.getAttribute('value');
+                if (itemValue === null && !item.hasAttribute('value'))
+                    return;
+                if (itemValue === String(selectedValue) || (itemValue === '' && (selectedValue === null || selectedValue === ''))) {
+                    hasSelection = true;
+                }
+            });
+            items.forEach((item) => {
+                if (this.options?.itemRole && !item.hasAttribute('role')) {
+                    item.setAttribute('role', this.options.itemRole);
+                }
                 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'))
@@ -1964,9 +1983,18 @@ class ShipSelectionGroup {
                 // Exact match or handle empty string matching properly
                 if (itemValue === String(selectedValue) || (itemValue === '' && (selectedValue === null || selectedValue === ''))) {
                     item.classList.add(activeClass);
+                    item.setAttribute('aria-selected', 'true');
+                    item.setAttribute('tabindex', '0');
                 }
                 else {
                     item.classList.remove(activeClass);
+                    item.setAttribute('aria-selected', 'false');
+                    if (hasSelection) {
+                        item.setAttribute('tabindex', '-1');
+                    }
+                    else {
+                        item.removeAttribute('tabindex');
+                    }
                 }
             });
         });
@@ -1989,19 +2017,41 @@ class ShipSelectionGroup {
         }
     }
     onKeyDown(event) {
+        const targetEl = event.target;
+        if (event.key === 'Enter' || event.key === ' ') {
+            const item = targetEl?.closest?.(this.itemSelector);
+            if (item && this.hostElement.contains(item) && item.hasAttribute('value')) {
+                // Only prevent default for space to avoid scrolling, let enter naturally click if it's a link/button
+                if (event.key === ' ')
+                    event.preventDefault();
+                const value = item.getAttribute('value');
+                if (this.closable() && String(this.value()) === String(value)) {
+                    this.value.set(null);
+                }
+                else {
+                    this.value.set(value);
+                }
+            }
+            return;
+        }
         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;
+        let activeIndex = items.findIndex((item) => item === document.activeElement || item.contains(document.activeElement));
+        if (activeIndex === -1) {
+            activeIndex = items.findIndex((item) => item.classList.contains(this.activeClass));
+        }
+        if (activeIndex === -1)
+            activeIndex = 0;
+        let nextIndex = activeIndex;
         switch (event.key) {
             case 'ArrowRight':
             case 'ArrowDown':
-                nextIndex = currentIndex >= items.length - 1 ? 0 : currentIndex + 1;
+                nextIndex = activeIndex >= items.length - 1 ? 0 : activeIndex + 1;
                 break;
             case 'ArrowLeft':
             case 'ArrowUp':
-                nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
+                nextIndex = activeIndex <= 0 ? items.length - 1 : activeIndex - 1;
                 break;
             default:
                 return; // Let other keys propagate natively
@@ -2009,17 +2059,19 @@ class ShipSelectionGroup {
         event.preventDefault();
         const nextItem = items[nextIndex];
         if (nextItem) {
-            const value = nextItem.getAttribute('value');
-            this.value.set(value);
+            if (!this.manualActivation()) {
+                const value = nextItem.getAttribute('value');
+                this.value.set(value);
+            }
             nextItem.focus();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipSelectionGroup, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: ShipSelectionGroup, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: ShipSelectionGroup, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, manualActivation: { classPropertyName: "manualActivation", publicName: "manualActivation", 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.2.6", 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"] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], onClick: [{
+        }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], manualActivation: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualActivation", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event.target']]
             }], onKeyDown: [{
@@ -2029,7 +2081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 
 class ShipButtonGroup extends ShipSelectionGroup {
     constructor() {
-        super('button', 'active');
+        super('button', 'active', { hostRole: 'group' });
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -2158,7 +2210,7 @@ class ShipCheckbox {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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)", "keydown.space": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.role": "noInternalInput() ? \"checkbox\" : null", "attr.aria-checked": "noInternalInput() ? checked() : null", "attr.tabindex": "noInternalInput() ? (disabled() ? \"-1\" : \"0\") : 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>
@@ -2208,11 +2260,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     host: {
                         '[class]': 'hostClasses()',
                         '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.role]': 'noInternalInput() ? "checkbox" : null',
+                        '[attr.aria-checked]': 'noInternalInput() ? checked() : null',
+                        '[attr.tabindex]': 'noInternalInput() ? (disabled() ? "-1" : "0") : null',
                     },
                 }]
         }], 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']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
             }] } });
 
 class ShipChip {
@@ -2956,8 +3014,8 @@ class ShipPopover {
         this.#originalOverflow = null;
         this.openEffect = effect(() => {
             const open = this.isOpen();
+            const popoverEl = this.popoverRef()?.nativeElement;
             queueMicrotask(() => {
-                const popoverEl = this.popoverRef()?.nativeElement;
                 if (!popoverEl) {
                     this.openAbort?.abort();
                     this.openAbort = null;
@@ -3213,12 +3271,15 @@ class ShipFormFieldPopover {
         });
     }
     #selfRef;
-    onClick() {
-        if (this.#selfRef.nativeElement.querySelector('input')) {
-            this.#selfRef.nativeElement.querySelector('input').focus();
-        }
-        if (this.#selfRef.nativeElement.querySelector('textarea')) {
-            this.#selfRef.nativeElement.querySelector('textarea').focus();
+    onClick(event) {
+        const target = event.target;
+        if (target.closest('.input-wrap')) {
+            if (this.#selfRef.nativeElement.querySelector('input')) {
+                this.#selfRef.nativeElement.querySelector('input').focus();
+            }
+            if (this.#selfRef.nativeElement.querySelector('textarea')) {
+                this.#selfRef.nativeElement.querySelector('textarea').focus();
+            }
         }
     }
     close() {
@@ -3250,7 +3311,7 @@ class ShipFormFieldPopover {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipFormFieldPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
     <sh-popover
@@ -3261,7 +3322,7 @@ class ShipFormFieldPopover {
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger class="input-wrap">
+      <div trigger class="input-wrap" [class.is-open]="isOpen()">
         <div class="prefix">
           <ng-content select="[prefix]"></ng-content>
           <ng-content select="[textPrefix]"></ng-content>
@@ -3307,7 +3368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         closeOnButton: false,
         closeOnEsc: true,
       }">
-      <div trigger class="input-wrap">
+      <div trigger class="input-wrap" [class.is-open]="isOpen()">
         <div class="prefix">
           <ng-content select="[prefix]"></ng-content>
           <ng-content select="[textPrefix]"></ng-content>
@@ -3343,7 +3404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onClick: [{
                 type: HostListener,
-                args: ['click']
+                args: ['click', ['$event']]
             }] } });
 
 class ShipColorPickerInput {
@@ -3601,15 +3662,14 @@ class ShipColorPickerInput {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipColorPickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ShipColorPickerInput, isStandalone: true, selector: "sh-color-picker-input", inputs: { renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showEyeDropper: { classPropertyName: "showEyeDropper", publicName: "showEyeDropper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, ngImport: i0, template: `
-    <sh-form-field-popover 
-      (closed)="close()" 
-      [(isOpen)]="isOpen" 
+    <sh-form-field-popover
+      (closed)="close()"
+      [(isOpen)]="isOpen"
       [class]="currentClass()"
       [variant]="variant()"
       [size]="size()"
       [color]="color()"
-      [readonly]="readonly()"
-    >
+      [readonly]="readonly()">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -3667,15 +3727,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     selector: 'sh-color-picker-input',
                     imports: [ShipFormFieldPopover, ShipColorPicker, ShipIcon, ShipButton],
                     template: `
-    <sh-form-field-popover 
-      (closed)="close()" 
-      [(isOpen)]="isOpen" 
+    <sh-form-field-popover
+      (closed)="close()"
+      [(isOpen)]="isOpen"
       [class]="currentClass()"
       [variant]="variant()"
       [size]="size()"
       [color]="color()"
-      [readonly]="readonly()"
-    >
+      [readonly]="readonly()">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
@@ -3736,8 +3795,10 @@ class ShipDatepicker {
         this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
         this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
         this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : /* istanbul ignore next */ []));
+        this.activeRangeSelection = input(null, ...(ngDevMode ? [{ debugName: "activeRangeSelection" }] : /* istanbul ignore next */ []));
         this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.tabbedOut = output();
         this.startOfWeek = input(1, ...(ngDevMode ? [{ debugName: "startOfWeek" }] : /* istanbul ignore next */ []));
         this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
         this.daysRef = viewChild('daysRef', ...(ngDevMode ? [{ debugName: "daysRef" }] : /* istanbul ignore next */ []));
@@ -3761,6 +3822,8 @@ class ShipDatepicker {
                 return;
             this.#setDateAsCurrent();
         }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : /* istanbul ignore next */ []));
+        this.focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+        this.#selfRef = inject(ElementRef);
     }
     #INIT_DATE;
     getLastVisibleMonth() {
@@ -3784,8 +3847,9 @@ class ShipDatepicker {
     }
     #setDateAsCurrent() {
         const newDate = this.date();
-        if (newDate)
+        if (newDate && !isNaN(newDate.getTime())) {
             this.currentDate.set(newDate);
+        }
         this.#findSelectedAndCalc();
     }
     #findSelectedAndCalc() {
@@ -3837,11 +3901,20 @@ class ShipDatepicker {
         this.#findSelectedAndCalc();
     }
     setDate(newDate, selectedElement) {
+        this.focusedDate.set(newDate);
         const createDateWithExistingTime = (newDate, existingDate) => {
-            const hours = existingDate?.getHours() ?? 0;
-            const minutes = existingDate?.getMinutes() ?? 0;
-            const seconds = existingDate?.getSeconds() ?? 0;
-            const milliseconds = existingDate?.getMilliseconds() ?? 0;
+            let hours = 0, minutes = 0, seconds = 0, milliseconds = 0;
+            if (existingDate) {
+                if (typeof existingDate === 'string' || typeof existingDate === 'number') {
+                    existingDate = new Date(existingDate);
+                }
+                if (existingDate instanceof Date && !isNaN(existingDate.getTime())) {
+                    hours = existingDate.getHours();
+                    minutes = existingDate.getMinutes();
+                    seconds = existingDate.getSeconds();
+                    milliseconds = existingDate.getMilliseconds();
+                }
+            }
             return new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), hours, minutes, seconds, milliseconds);
         };
         if (!this.asRange()) {
@@ -3851,22 +3924,46 @@ class ShipDatepicker {
         else {
             const startDate = this.date();
             const endDate = this.endDate();
-            const utcDate = createDateWithExistingTime(newDate, null);
-            if (!startDate) {
+            const selectionMode = this.activeRangeSelection();
+            if (selectionMode === 'start') {
+                const utcDate = createDateWithExistingTime(newDate, startDate);
                 this.date.set(utcDate);
+                if (endDate && utcDate > endDate) {
+                    this.endDate.set(null);
+                }
             }
-            else if (!endDate) {
-                if (utcDate < startDate) {
-                    this.date.set(utcDate);
+            else if (selectionMode === 'end') {
+                if (!startDate || newDate < startDate) {
+                    const newStart = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(newStart);
                     this.endDate.set(null);
                 }
                 else {
+                    const utcDate = createDateWithExistingTime(newDate, endDate);
                     this.endDate.set(utcDate);
                 }
             }
             else {
-                this.date.set(utcDate);
-                this.endDate.set(null);
+                if (!startDate) {
+                    const utcDate = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(utcDate);
+                }
+                else if (!endDate) {
+                    if (newDate < startDate) {
+                        const newStart = createDateWithExistingTime(newDate, startDate);
+                        this.date.set(newStart);
+                        this.endDate.set(null);
+                    }
+                    else {
+                        const utcDate = createDateWithExistingTime(newDate, endDate);
+                        this.endDate.set(utcDate);
+                    }
+                }
+                else {
+                    const utcDate = createDateWithExistingTime(newDate, startDate);
+                    this.date.set(utcDate);
+                    this.endDate.set(null);
+                }
             }
         }
         if (this.asRange())
@@ -3874,9 +3971,13 @@ class ShipDatepicker {
         this.setSelectedDateStylePosition(selectedElement);
     }
     isDateSelected(date) {
-        const startDate = this.date();
-        const endDate = this.endDate();
-        if (startDate === null)
+        let startDate = this.date();
+        let endDate = this.endDate();
+        if (typeof startDate === 'string' || typeof startDate === 'number')
+            startDate = new Date(startDate);
+        if (typeof endDate === 'string' || typeof endDate === 'number')
+            endDate = new Date(endDate);
+        if (!startDate || !(startDate instanceof Date) || isNaN(startDate.getTime()))
             return null;
         const startOfDay = (date) => {
             return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
@@ -3951,10 +4052,117 @@ class ShipDatepicker {
         const offsetDate = this.getOffsetDate(monthOffset);
         return date.getMonth() === offsetDate.getMonth();
     }
+    #selfRef;
+    isSameDay(d1, d2) {
+        if (!d1 || !d2)
+            return false;
+        return d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate();
+    }
+    getAriaLabel(date) {
+        return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    }
+    getTabIndex(date) {
+        const focused = this.focusedDate();
+        const selected = this.date();
+        const today = new Date();
+        if (focused) {
+            return this.isSameDay(date, focused) ? 0 : -1;
+        }
+        if (selected) {
+            return this.isSameDay(date, selected) ? 0 : -1;
+        }
+        return this.isSameDay(date, today) ? 0 : -1;
+    }
+    isDateSelectedBool(date) {
+        const classes = this.isDateSelected(date);
+        return classes ? classes.includes('sel') : false;
+    }
+    onKeydown(event, date) {
+        let newDate = new Date(date);
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+                newDate.setDate(date.getDate() + 1);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+                newDate.setDate(date.getDate() - 1);
+                handled = true;
+                break;
+            case 'ArrowDown':
+                newDate.setDate(date.getDate() + 7);
+                handled = true;
+                break;
+            case 'ArrowUp':
+                newDate.setDate(date.getDate() - 7);
+                handled = true;
+                break;
+            case 'PageDown':
+                newDate.setMonth(date.getMonth() + 1);
+                handled = true;
+                break;
+            case 'PageUp':
+                newDate.setMonth(date.getMonth() - 1);
+                handled = true;
+                break;
+            // Space and Enter are natively handled by the button's click event
+        }
+        if (handled) {
+            event.preventDefault();
+            this.ensureDateVisible(newDate);
+            this.focusedDate.set(newDate);
+            setTimeout(() => {
+                const buttons = this.#selfRef.nativeElement.querySelectorAll('button');
+                if (buttons) {
+                    const targetAria = this.getAriaLabel(newDate);
+                    for (let i = 0; i < buttons.length; i++) {
+                        if (buttons[i].getAttribute('aria-label') === targetAria) {
+                            buttons[i].focus();
+                            break;
+                        }
+                    }
+                }
+            });
+        }
+    }
+    ensureDateVisible(date) {
+        const start = this.currentDate();
+        const end = this.getLastVisibleMonth();
+        if (date < new Date(start.getFullYear(), start.getMonth(), 1)) {
+            this.currentDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
+            this.#findSelectedAndCalc();
+        }
+        else if (date > new Date(end.getFullYear(), end.getMonth() + 1, 0)) {
+            const newStart = new Date(date);
+            newStart.setMonth(newStart.getMonth() - this.monthsToShow() + 1);
+            newStart.setDate(1);
+            this.currentDate.set(newStart);
+            this.#findSelectedAndCalc();
+        }
+    }
+    focusActiveDate() {
+        setTimeout(() => {
+            const activeBtn = this.#selfRef.nativeElement.querySelector('button[tabindex="0"]');
+            if (activeBtn)
+                activeBtn.focus();
+        }, 50);
+    }
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.tabbedOut.emit();
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 }, activeRangeSelection: { classPropertyName: "activeRangeSelection", publicName: "activeRangeSelection", 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", tabbedOut: "tabbedOut" }, host: { listeners: { "focusout": "onFocusOut($event)" }, 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>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <button tabindex="-1" (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
       <div class="title">
         {{ getMonthName(currentDate()!) }}
         @if (monthsToShow() > 1) {
@@ -3962,7 +4170,7 @@ class ShipDatepicker {
         }
         {{ getFullYear(currentDate()!) }}
       </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+      <button tabindex="-1" (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
     </header>
 
     <section class="months-container">
@@ -3976,13 +4184,18 @@ class ShipDatepicker {
 
           <div class="days" #daysRef>
             @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
+              <button
+                type="button"
                 #elementRef
                 [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
                 [class]="isDateSelected(calDate)"
+                [attr.aria-label]="getAriaLabel(calDate)"
+                [attr.tabindex]="getTabIndex(calDate)"
+                [attr.aria-selected]="isDateSelectedBool(calDate)"
+                (keydown)="onKeydown($event, calDate)"
                 (click)="setDate(calDate, elementRef)">
                 {{ calDate.getDate() }}
-              </div>
+              </button>
             }
 
             @if (!asRange()) {
@@ -4003,7 +4216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     imports: [ShipIcon],
                     template: `
     <header>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <button tabindex="-1" (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
       <div class="title">
         {{ getMonthName(currentDate()!) }}
         @if (monthsToShow() > 1) {
@@ -4011,7 +4224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         }
         {{ getFullYear(currentDate()!) }}
       </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+      <button tabindex="-1" (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
     </header>
 
     <section class="months-container">
@@ -4025,13 +4238,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 
           <div class="days" #daysRef>
             @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
+              <button
+                type="button"
                 #elementRef
                 [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
                 [class]="isDateSelected(calDate)"
+                [attr.aria-label]="getAriaLabel(calDate)"
+                [attr.tabindex]="getTabIndex(calDate)"
+                [attr.aria-selected]="isDateSelectedBool(calDate)"
+                (keydown)="onKeydown($event, calDate)"
                 (click)="setDate(calDate, elementRef)">
                 {{ calDate.getDate() }}
-              </div>
+              </button>
             }
 
             @if (!asRange()) {
@@ -4051,12 +4269,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.disabled]': 'disabled()',
                     },
                 }]
-        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }] } });
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], activeRangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRangeSelection", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabbedOut: [{ type: i0.Output, args: ["tabbedOut"] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
 
 class ShipDatepickerInput {
     constructor() {
         // #INIT_DATE = this.#getUTCDate(new Date());
-        this.ngModels = contentChild(NgModel, ...(ngDevMode ? [{ debugName: "ngModels" }] : /* istanbul ignore next */ []));
+        this.#selfRef = inject(ElementRef);
+        this.ngControl = contentChild(NgControl, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
         this.#datePipe = inject(DatePipe);
         this.#inputRef = signal(null, ...(ngDevMode ? [{ debugName: "#inputRef" }] : /* istanbul ignore next */ []));
         this.masking = input('mediumDate', ...(ngDevMode ? [{ debugName: "masking" }] : /* istanbul ignore next */ []));
@@ -4074,6 +4296,14 @@ class ShipDatepickerInput {
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
         this.currentClass = classMutationSignal();
         this.#inputObserver = contentProjectionSignal('#input-wrap input');
+        this.datepicker = viewChild(ShipDatepicker, ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
+        this.#isOpenEffect = effect(() => {
+            if (this.isOpen()) {
+                setTimeout(() => {
+                    this.datepicker()?.focusActiveDate();
+                }, 50);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#isOpenEffect" }] : /* istanbul ignore next */ []));
         this.#inputRefEffect = effect(() => {
             const inputs = this.#inputObserver();
             if (!inputs.length)
@@ -4083,11 +4313,30 @@ class ShipDatepickerInput {
                 return;
             this.#createCustomInputEventListener(input);
             input.addEventListener('inputValueChanged', (event) => {
-                this.internalDate.set(event.detail.value ? new Date(event.detail.value) : null);
+                const val = event.detail.value;
+                if (!val) {
+                    this.internalDate.set(null);
+                    return;
+                }
+                let newD = new Date(val);
+                if (isNaN(newD.getTime())) {
+                    // If it's a time-only string like "14:30" or "14:30:00"
+                    if (typeof val === 'string' && /^(\d{2}):(\d{2})/.test(val)) {
+                        const match = val.match(/^(\d{2}):(\d{2})(?::(\d{2}))?/);
+                        if (match) {
+                            const current = this.internalDate() || new Date();
+                            newD = new Date(current);
+                            newD.setHours(parseInt(match[1], 10), parseInt(match[2], 10), match[3] ? parseInt(match[3], 10) : 0, 0);
+                        }
+                    }
+                }
+                if (!isNaN(newD.getTime())) {
+                    this.internalDate.set(newD);
+                }
             });
             input.addEventListener('focus', () => {
                 this.isOpen.set(true);
-                input.blur();
+                // Removed input.blur() so users can actually type or use Shift+Tab to navigate backward
             });
             this.#inputRef.set(input);
             input.autocomplete = 'off';
@@ -4096,15 +4345,34 @@ class ShipDatepickerInput {
             }
         }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
     }
+    // #INIT_DATE = this.#getUTCDate(new Date());
+    #selfRef;
     #datePipe;
     #inputRef;
     #inputObserver;
+    #isOpenEffect;
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.isOpen.set(false);
+            }
+        });
+    }
     onDateChange(date) {
         this.internalDate.set(date);
-        const input = this.#inputRef();
-        if (input) {
-            input.value = date ? date.toString() : '';
-            input.dispatchEvent(new Event('input'));
+        const control = this.ngControl()?.control;
+        if (control) {
+            control.setValue(date);
+        }
+        else {
+            const input = this.#inputRef();
+            if (input) {
+                input.value = date ? date.toString() : '';
+                input.dispatchEvent(new Event('input'));
+            }
         }
     }
     close() {
@@ -4135,7 +4403,7 @@ class ShipDatepickerInput {
         return input;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [DatePipe], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ShipDatepicker, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
@@ -4157,13 +4425,13 @@ class ShipDatepickerInput {
 
       <div popoverContent>
         @if (this.isOpen()) {
-          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" [class]="currentClass()" />
+          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" (tabbedOut)="isOpen.set(false)" [class]="currentClass()" />
         }
       </div>
     </sh-form-field-popover>
 
     <ng-template #defaultIndicator></ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "activeRangeSelection", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange", "tabbedOut"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDatepickerInput, decorators: [{
             type: Component,
@@ -4193,7 +4461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 
       <div popoverContent>
         @if (this.isOpen()) {
-          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" [class]="currentClass()" />
+          <sh-datepicker [date]="internalDate()" (dateChange)="onDateChange($event)" (tabbedOut)="isOpen.set(false)" [class]="currentClass()" />
         }
       </div>
     </sh-form-field-popover>
@@ -4202,25 +4470,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { ngModels: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgModel), { isSignal: true }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
+        }], propDecorators: { ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ShipDatepicker), { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
 
 class ShipDaterangeInput {
     #selfRef;
+    #inputObserver;
     #datePipe;
+    #isOpenEffect;
     get classes() {
         return `${this.#selfRef.nativeElement.classList.value}`;
     }
     constructor() {
         this.#selfRef = inject(ElementRef);
-        this.startDateInputs = contentChildren('startDate', ...(ngDevMode ? [{ debugName: "startDateInputs" }] : /* istanbul ignore next */ []));
-        this.endDateInputs = contentChildren('endDate', ...(ngDevMode ? [{ debugName: "endDateInputs" }] : /* istanbul ignore next */ []));
+        this.#inputObserver = contentProjectionSignal('input', {
+            childList: true,
+            subtree: true,
+        });
         this.#datePipe = inject(DatePipe);
         this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
         this.masking = input('mediumDate', ...(ngDevMode ? [{ debugName: "masking" }] : /* istanbul ignore next */ []));
         this.closed = output();
         this.startDate = signal(null, ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
         this.endDate = signal(null, ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+        this.activeInput = signal('start', ...(ngDevMode ? [{ debugName: "activeInput" }] : /* istanbul ignore next */ []));
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.datepicker = viewChild(ShipDatepicker, ...(ngDevMode ? [{ debugName: "datepicker" }] : /* istanbul ignore next */ []));
+        this.#isOpenEffect = effect(() => {
+            if (this.isOpen()) {
+                setTimeout(() => {
+                    this.datepicker()?.focusActiveDate();
+                }, 50);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#isOpenEffect" }] : /* istanbul ignore next */ []));
         this._maskedStartDate = computed(() => {
             const date = this.startDate();
             const mask = this.masking();
@@ -4236,22 +4520,32 @@ class ShipDaterangeInput {
             return this.#datePipe.transform(date, mask);
         }, ...(ngDevMode ? [{ debugName: "_maskedEndDate" }] : /* istanbul ignore next */ []));
         effect(() => {
-            // Setup start date inputs
-            this.startDateInputs().forEach((input) => {
-                this.setupInput(input, true);
-            });
-            // Setup end date inputs
-            this.endDateInputs().forEach((input) => {
-                this.setupInput(input, false);
-            });
+            const inputs = this.#inputObserver();
+            if (inputs.length === 0)
+                return;
+            if (inputs[0])
+                this.setupInput(inputs[0], true);
+            if (inputs[1])
+                this.setupInput(inputs[1], false);
         });
     }
-    setupInput(input, isStart) {
-        const element = input.nativeElement;
+    setupInput(element, isStart) {
+        if (element._hasCustomFocusEvent)
+            return;
+        element._hasCustomFocusEvent = true;
         element.autocomplete = 'off';
+        // Set tabindex -1 on the second input to prevent users from having to Shift+Tab 
+        // multiple times to exit the component when masking is enabled.
+        if (!isStart) {
+            element.tabIndex = -1;
+        }
         element.addEventListener('focus', () => {
+            this.activeInput.set(isStart ? 'start' : 'end');
+            if (element._ignoreNextFocus) {
+                element._ignoreNextFocus = false;
+                return;
+            }
             this.isOpen.set(true);
-            element.blur();
         });
         // Handle initial value
         if (element.value) {
@@ -4271,26 +4565,47 @@ class ShipDaterangeInput {
             }
         }
     }
+    onFocusOut(event) {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement !== document.body &&
+                !this.#selfRef.nativeElement.contains(activeElement)) {
+                this.isOpen.set(false);
+            }
+        });
+    }
     onStartDateChange(date) {
         this.startDate.set(date);
-        this.updateInputValue(this.startDateInputs(), date);
+        const inputs = this.#inputObserver();
+        if (inputs[0])
+            this.updateInputValue([inputs[0]], date);
+        // Automatically switch to end date selection
+        this.activeInput.set('end');
     }
     onEndDateChange(date) {
         this.endDate.set(date);
-        this.updateInputValue(this.endDateInputs(), date);
+        const inputs = this.#inputObserver();
+        if (inputs[1])
+            this.updateInputValue([inputs[1]], date);
         if (this.startDate() && date) {
             this.isOpen.set(false);
+            const inputs = this.#inputObserver();
+            if (inputs[0] && document.activeElement !== inputs[0]) {
+                inputs[0]._ignoreNextFocus = true;
+                inputs[0].focus();
+            }
         }
     }
     updateInputValue(inputs, date) {
         inputs.forEach((input) => {
             if (this.masking()) {
-                input.nativeElement.value = this.#datePipe.transform(date, this.masking()) ?? '';
+                input.value = this.#datePipe.transform(date, this.masking()) ?? '';
             }
             else {
-                input.nativeElement.value = date ? date.toUTCString() : '';
+                input.value = date ? date.toUTCString() : '';
             }
-            this.dispatchInputEvent(input.nativeElement);
+            this.dispatchInputEvent(input);
         });
     }
     dispatchInputEvent(input) {
@@ -4304,16 +4619,20 @@ class ShipDaterangeInput {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDaterangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ShipDaterangeInput, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, 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: "startDateInputs", predicate: ["startDate"], isSignal: true }, { propertyName: "endDateInputs", predicate: ["endDate"], isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ShipDaterangeInput, isStandalone: true, selector: "sh-daterange-input", inputs: { monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, 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" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ShipDatepicker, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sh-form-field-popover [class]="'columns-' + monthsToShow()" (closed)="close()" [(isOpen)]="isOpen">
       <ng-content select="label" ngProjectAs="label" />
 
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
       <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
 
-      <div class="input" ngProjectAs="input" #inputWrap>
+      <div class="input" ngProjectAs="input" #inputWrap [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
         @if (this.masking()) {
-          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
+          <div class="masked-value" [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+            <span class="start-val">{{ _maskedStartDate() ?? 'N/A' }}</span>
+            <span class="separator">-</span>
+            <span class="end-val">{{ _maskedEndDate() ?? 'N/A' }}</span>
+          </div>
         }
         <ng-content select="input" />
       </div>
@@ -4327,15 +4646,17 @@ class ShipDaterangeInput {
           <sh-datepicker
             [date]="startDate()"
             [endDate]="endDate()"
+            [activeRangeSelection]="activeInput()"
             [class]="classes"
             (dateChange)="onStartDateChange($event)"
             (endDateChange)="onEndDateChange($event)"
+            (tabbedOut)="isOpen.set(false)"
             [monthsToShow]="monthsToShow()"
             [asRange]="true" />
         }
       </div>
     </sh-form-field-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "activeRangeSelection", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange", "tabbedOut"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDaterangeInput, decorators: [{
             type: Component,
@@ -4350,9 +4671,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
       <ng-content select="[prefix]" ngProjectAs="[prefix]" />
       <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
 
-      <div class="input" ngProjectAs="input" #inputWrap>
+      <div class="input" ngProjectAs="input" #inputWrap [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
         @if (this.masking()) {
-          <div class="masked-value">{{ _maskedStartDate() ?? 'N/A' }} - {{ _maskedEndDate() ?? 'N/A' }}</div>
+          <div class="masked-value" [class.active-start]="isOpen() && activeInput() === 'start'" [class.active-end]="isOpen() && activeInput() === 'end'">
+            <span class="start-val">{{ _maskedStartDate() ?? 'N/A' }}</span>
+            <span class="separator">-</span>
+            <span class="end-val">{{ _maskedEndDate() ?? 'N/A' }}</span>
+          </div>
         }
         <ng-content select="input" />
       </div>
@@ -4366,9 +4691,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
           <sh-datepicker
             [date]="startDate()"
             [endDate]="endDate()"
+            [activeRangeSelection]="activeInput()"
             [class]="classes"
             (dateChange)="onStartDateChange($event)"
             (endDateChange)="onEndDateChange($event)"
+            (tabbedOut)="isOpen.set(false)"
             [monthsToShow]="monthsToShow()"
             [asRange]="true" />
         }
@@ -4377,7 +4704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { startDateInputs: [{ type: i0.ContentChildren, args: ['startDate', { isSignal: true }] }], endDateInputs: [{ type: i0.ContentChildren, args: ['endDate', { isSignal: true }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], masking: [{ type: i0.Input, args: [{ isSignal: true, alias: "masking", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ShipDatepicker), { isSignal: true }] }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
 
 class ShipDivider {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4464,6 +4794,33 @@ class ShipFormField {
             readonly: this.readonly,
         });
         afterNextRender(() => {
+            const el = this.#selfRef.nativeElement;
+            const inputEl = el.querySelector('input') || el.querySelector('textarea');
+            const labelEl = el.querySelector('label');
+            const errorEl = el.querySelector('[error]');
+            const hintEl = el.querySelector('[hint]');
+            if (inputEl) {
+                if (!inputEl.id) {
+                    inputEl.id = `sh-input-${Math.random().toString(36).substring(2, 9)}`;
+                }
+                if (labelEl && !labelEl.getAttribute('for')) {
+                    labelEl.setAttribute('for', inputEl.id);
+                }
+                const describedBy = [];
+                if (errorEl) {
+                    if (!errorEl.id)
+                        errorEl.id = `sh-error-${Math.random().toString(36).substring(2, 9)}`;
+                    describedBy.push(errorEl.id);
+                }
+                if (hintEl) {
+                    if (!hintEl.id)
+                        hintEl.id = `sh-hint-${Math.random().toString(36).substring(2, 9)}`;
+                    describedBy.push(hintEl.id);
+                }
+                if (describedBy.length > 0 && !inputEl.hasAttribute('aria-describedby')) {
+                    inputEl.setAttribute('aria-describedby', describedBy.join(' '));
+                }
+            }
             const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
             const text = this.#selfRef.nativeElement.querySelector('textarea');
             if (!supportFieldSizing && text !== null) {
@@ -5374,7 +5731,7 @@ class ShipRadio {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipRadio, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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)", "keydown.space": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.role": "noInternalInput() ? \"radio\" : null", "attr.aria-checked": "noInternalInput() ? checked() : null", "attr.tabindex": "noInternalInput() ? (disabled() ? \"-1\" : \"0\") : 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 />
@@ -5414,11 +5771,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     host: {
                         '[class]': 'hostClasses()',
                         '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.role]': 'noInternalInput() ? "radio" : null',
+                        '[attr.aria-checked]': 'noInternalInput() ? checked() : null',
+                        '[attr.tabindex]': 'noInternalInput() ? (disabled() ? "-1" : "0") : null',
                     },
                 }]
         }], 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']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
             }] } });
 
 class ShipRangeSlider {
@@ -5742,6 +6105,11 @@ class ShipSelect {
         this.selectedOptions = model([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
         this.cleared = output();
         this.onAddNewFreeTextOption = output();
+        this.spacedSelectedOptions = computed(() => {
+            const selectedOptions = this.selectedOptions();
+            const valueKey = this.value();
+            return selectedOptions.map((option) => (valueKey ? this.#getProperty(option, valueKey) : option)).join(', ');
+        }, ...(ngDevMode ? [{ debugName: "spacedSelectedOptions" }] : /* istanbul ignore next */ []));
         this.computedFreeTextOption = computed(() => {
             const inputValue = this.inputValue();
             const valueKey = this.value();
@@ -5820,7 +6188,7 @@ class ShipSelect {
             scoredOptions.sort((a, b) => b.score - a.score);
             return scoredOptions.map((scoredOption) => scoredOption.item);
         }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
-        this.#componentId = generateUniqueId();
+        this.componentId = generateUniqueId();
         this.inputRefEl = computed(() => {
             const inputRefInput = this.inputRefInput();
             if (inputRefInput === null)
@@ -5832,9 +6200,10 @@ class ShipSelect {
             }
             input.autocomplete = 'off';
             input.setAttribute('role', 'combobox');
-            input.setAttribute('id', `combobox-${this.#componentId}`);
+            input.setAttribute('id', `combobox-${this.componentId}`);
             input.setAttribute('aria-haspopup', 'listbox');
-            input.setAttribute('aria-owns', 'optionsWrapId');
+            input.setAttribute('aria-owns', `optionsWrapId-${this.componentId}`);
+            input.setAttribute('aria-controls', `optionsWrapId-${this.componentId}`);
             this.#createCustomInputEventListener(input);
             input.addEventListener('focus', () => {
                 if (this.readonly())
@@ -5866,9 +6235,9 @@ class ShipSelect {
             const input = this.inputRefEl();
             if (!input)
                 return;
-            const focusedId = this.getLabelAsSlug(this.filteredOptions()[this.focusedOptionIndex()]);
-            if (focusedId) {
-                input.setAttribute('aria-activedescendant', focusedId);
+            const index = this.focusedOptionIndex();
+            if (index >= 0 || (index === -1 && this.asFreeText())) {
+                input.setAttribute('aria-activedescendant', this.getOptionId(index));
             }
             else {
                 input.removeAttribute('aria-activedescendant');
@@ -6017,7 +6386,6 @@ class ShipSelect {
         score += matchCount * 20;
         return score;
     }
-    #componentId;
     #selectedOptionsEffect;
     ngOnInit() {
         this.setInitInput();
@@ -6089,11 +6457,8 @@ class ShipSelect {
             return option;
         return this.#getProperty(option, label);
     }
-    getLabelAsSlug(option) {
-        const label = this.getLabel(option);
-        if (!label || typeof label !== 'string')
-            return '';
-        return label.replaceAll(' ', '-');
+    getOptionId(index) {
+        return `opt-${this.componentId}-${index}`;
     }
     toggleOptionByIndex(optionIndex, event, enterKey = false) {
         let option = this.filteredOptions()[optionIndex];
@@ -6201,7 +6566,7 @@ class ShipSelect {
         this.isOpen.set(false);
         const prevInputValue = this.prevInputValue();
         const prevSelectedOptions = this.#previousSelectedOptions();
-        if (this.asFreeText()) {
+        if (this.asFreeText() && !this.selectMultiple()) {
             this.updateInputElValue();
             return;
         }
@@ -6292,7 +6657,7 @@ class ShipSelect {
     @let _selOptionTemplate = _selectedOptionTemplate || _optionTemplate || _inlineTemplate;
     @let _listOptionTemplate = _optionTemplate || _inlineTemplate;
     @let _asChips = !asText() && selectMultiple();
-    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > -1);
+    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > 0);
 
     <sh-popover
       #formFieldWrapper
@@ -6319,7 +6684,7 @@ class ShipSelect {
         <div class="input" [class.show-search-text]="_showSearchText" ngProjectAs="input">
           <div class="selected-value" [class.is-selected]="_inputState === 'selected'">
             @if (asFreeText() && inputValue().length > 0 && !isOpen()) {
-              {{ inputValue() }}
+              {{ spacedSelectedOptions() }}
             } @else if (_selectedOptions.length > 0) {
               @for (selectedOption of _selectedOptions; track $index) {
                 @if (selectedOption) {
@@ -6379,7 +6744,7 @@ class ShipSelect {
         }
       </sh-form-field>
 
-      <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
+      <div class="ship-options" #optionsWrap [id]="'optionsWrapId-' + componentId" role="listbox">
         @if (asFreeText()) {
           @let freeTextOption = computedFreeTextOption();
           @let freeTextOptionValue = getValue(freeTextOption);
@@ -6392,7 +6757,8 @@ class ShipSelect {
             <li
               (click)="toggleOptionByIndex(-1)"
               class="option"
-              [id]="this.getLabelAsSlug(freeTextOption)"
+              role="option"
+              [id]="this.getOptionId(-1)"
               [attr.aria-selected]="isSelected(-1)"
               [class.selected]="isSelected(-1)"
               [class.focused]="-1 === focusedOptionIndex()">
@@ -6419,7 +6785,8 @@ class ShipSelect {
           <li
             (click)="toggleOptionByIndex($index)"
             class="option"
-            [id]="this.getLabelAsSlug(option)"
+            role="option"
+            [id]="this.getOptionId($index)"
             [attr.aria-selected]="isSelected($index)"
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
@@ -6455,7 +6822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
     @let _selOptionTemplate = _selectedOptionTemplate || _optionTemplate || _inlineTemplate;
     @let _listOptionTemplate = _optionTemplate || _inlineTemplate;
     @let _asChips = !asText() && selectMultiple();
-    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > -1);
+    @let _showSearchText = isOpen() && hasSearch() && (_asChips || inputValue().length > 0);
 
     <sh-popover
       #formFieldWrapper
@@ -6482,7 +6849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         <div class="input" [class.show-search-text]="_showSearchText" ngProjectAs="input">
           <div class="selected-value" [class.is-selected]="_inputState === 'selected'">
             @if (asFreeText() && inputValue().length > 0 && !isOpen()) {
-              {{ inputValue() }}
+              {{ spacedSelectedOptions() }}
             } @else if (_selectedOptions.length > 0) {
               @for (selectedOption of _selectedOptions; track $index) {
                 @if (selectedOption) {
@@ -6542,7 +6909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
         }
       </sh-form-field>
 
-      <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
+      <div class="ship-options" #optionsWrap [id]="'optionsWrapId-' + componentId" role="listbox">
         @if (asFreeText()) {
           @let freeTextOption = computedFreeTextOption();
           @let freeTextOptionValue = getValue(freeTextOption);
@@ -6555,7 +6922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
             <li
               (click)="toggleOptionByIndex(-1)"
               class="option"
-              [id]="this.getLabelAsSlug(freeTextOption)"
+              role="option"
+              [id]="this.getOptionId(-1)"
               [attr.aria-selected]="isSelected(-1)"
               [class.selected]="isSelected(-1)"
               [class.focused]="-1 === focusedOptionIndex()">
@@ -6582,7 +6950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
           <li
             (click)="toggleOptionByIndex($index)"
             class="option"
-            [id]="this.getLabelAsSlug(option)"
+            role="option"
+            [id]="this.getOptionId($index)"
             [attr.aria-selected]="isSelected($index)"
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
@@ -7310,7 +7679,7 @@ function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex)
 
 class ShipStepper extends ShipSelectionGroup {
     constructor() {
-        super('[value], [step], [routerLinkActive], button, a', 'active');
+        super('[value], [step], [routerLinkActive], button, a', 'active', { hostRole: 'tablist', itemRole: 'tab' });
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.hostClasses = shipComponentClasses('stepper', {
             color: this.color,
@@ -7743,7 +8112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 
 class ShipTabs extends ShipSelectionGroup {
     constructor() {
-        super('[value], [tab], button, a', 'active');
+        super('[value], [tab], button, a', 'active', { hostRole: 'tablist', itemRole: 'tab' });
         this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
         this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -7985,7 +8354,7 @@ class ShipToggle {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ShipToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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)", "keydown.space": "onEnter($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.role": "noInternalInput() ? \"switch\" : null", "attr.aria-checked": "noInternalInput() ? checked() : null", "attr.tabindex": "noInternalInput() ? (disabled() ? \"-1\" : \"0\") : null" } }, viewQueries: [{ propertyName: "internalInput", first: true, predicate: ["internalInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="box">
       <div class="knob"></div>
     </div>
@@ -8029,11 +8398,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     host: {
                         '[class]': 'hostClasses()',
                         '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.role]': 'noInternalInput() ? "switch" : null',
+                        '[attr.aria-checked]': 'noInternalInput() ? checked() : null',
+                        '[attr.tabindex]': 'noInternalInput() ? (disabled() ? "-1" : "0") : null',
                     },
                 }]
         }], 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']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
             }] } });
 
 class ShipVirtualScroll {
@@ -8674,6 +9049,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 args: ['mouseleave', ['$event']]
             }] } });
 
+const __SHIP_COLORS = ['primary', 'accent', 'warn', 'error', 'success', ''];
+const __SHIP_SIZES = ['small', 'xsmall', ''];
+const __SHIP_BUTTON_SIZES = ['small', 'xsmall', ''];
+const __SHIP_ICON_SIZES = ['small', 'large', ''];
+const __SHIP_SHEET_VARIANTS = ['simple', 'outlined', 'flat', 'raised', ''];
+const __SHIP_TYPE_VARIANTS = ['type-a', 'type-b', 'type-c', 'type-d', ''];
+const __SHIP_TABLE_VARIANTS = ['type-a', 'type-b', ''];
+const __SHIP_CARD_VARIANTS = ['type-a', 'type-b', 'type-c', ''];
+const __SHIP_BUTTON_GROUP_VARIANTS = ['type-a', 'type-b', ''];
+const __SHIP_FORM_FIELD_VARIANTS = ['base', 'horizontal', 'auto-width', 'autosize', ''];
+const __SHIP_RANGE_SLIDER_VARIANTS = ['simple', 'base', 'thick', 'outlined', 'flat', 'raised', ''];
+
 /*
  * Public API Surface of ship-ui
  */
@@ -8682,5 +9069,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipColorPickerInput, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, createSortableManager, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, transferArrayItem, watchHostClass };
+export { SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipColorPickerInput, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, __SHIP_BUTTON_GROUP_VARIANTS, __SHIP_BUTTON_SIZES, __SHIP_CARD_VARIANTS, __SHIP_COLORS, __SHIP_FORM_FIELD_VARIANTS, __SHIP_ICON_SIZES, __SHIP_RANGE_SLIDER_VARIANTS, __SHIP_SHEET_VARIANTS, __SHIP_SIZES, __SHIP_TABLE_VARIANTS, __SHIP_TYPE_VARIANTS, createSortableManager, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, transferArrayItem, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map