@ship-ui/core 0.19.2 → 0.19.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",
@@ -30,6 +30,7 @@
   },
   "bin": {
     "ship-fg": "./bin/ship-fg.mjs",
+    "ship-fg-ts": "./bin/ship-fg.ts",
     "ship-mcp": "./bin/mcp/index.js"
   },
   "libraryIcons": [

package/styles/components/ship-datepicker.scss

@@ -11,6 +11,13 @@ $shipDatepicker: true !default;
           display: grid;
           grid-template-columns: 1fr auto auto;
           align-items: center;
+
+          &.active-start input:first-of-type {
+            color: var(--primary-8);
+          }
+          &.active-end input:last-of-type {
+            color: var(--primary-8);
+          }
         }
 
         [suffix] {
@@ -21,6 +28,16 @@ $shipDatepicker: true !default;
       .masked-value {
         font: var(--paragraph-30B);
         color: var(--base-8);
+        display: flex;
+        gap: p2r(4);
+
+        &.active-start .start-val {
+          color: var(--primary-8);
+        }
+
+        &.active-end .end-val {
+          color: var(--primary-8);
+        }
 
         + input + input,
         + input {
@@ -103,10 +120,12 @@ $shipDatepicker: true !default;
 
     &.as-range {
       section {
-        .days > div {
+        .days > div,
+        .days > button {
           &.sel {
             background: var(--dp-sel-bg);
             opacity: 0.5;
+            border-radius: 0;
           }
 
           &.month-start,
@@ -129,7 +148,8 @@ $shipDatepicker: true !default;
         }
       }
 
-      .month .days > div.out-of-scope {
+      .month .days > div.out-of-scope,
+      .month .days > button.out-of-scope {
         opacity: 0;
         pointer-events: none;
       }
@@ -194,7 +214,13 @@ $shipDatepicker: true !default;
           z-index: 0;
         }
 
-        > div {
+        > div,
+        > button {
+          appearance: none;
+          background: transparent;
+          border: none;
+          padding: 0;
+          margin: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -205,6 +231,12 @@ $shipDatepicker: true !default;
           color: var(--dp-day-c);
           font: var(--dp-day-f);
           user-select: none;
+          border-radius: var(--dp-sel-s);
+
+          &:focus-visible {
+            outline: 2px solid var(--primary-10, #005fcc);
+            outline-offset: -2px;
+          }
 
           &.sel {
             color: var(--dp-sel-c);

package/styles/components/ship-form-field.scss

@@ -186,6 +186,7 @@ $shipFormFieldShadow: false !default;
       min-width: var(--ff-mw);
       width: 100%;
 
+      &.is-open,
       &:has(textarea:focus-visible),
       &:has(input:focus-visible) {
         outline: 2px solid var(--primary-8);

package/types/ship-ui-core.d.ts

@@ -1,20 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, QueryList, TemplateRef, OutputEmitterRef, InputSignal, ComponentRef, EmbeddedViewRef, OutputRefSubscription, Type, AfterViewInit, OnDestroy, AfterContentInit, WritableSignal, OnInit, InjectionToken } from '@angular/core';
-import { NgModel } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-type ShipColor = 'primary' | 'accent' | 'warn' | 'error' | 'success' | (string & {});
-type ShipSize = 'small' | 'xsmall' | (string & {});
-type ShipButtonSize = 'small' | 'xsmall' | (string & {});
-type ShipIconSize = 'small' | 'large' | (string & {});
-type ShipSheetVariant = 'simple' | 'outlined' | 'flat' | 'raised' | (string & {});
-type ShipTypeVariant = 'type-a' | 'type-b' | 'type-c' | 'type-d' | (string & {});
-type ShipTableVariant = 'type-a' | 'type-b' | (string & {});
-type ShipCardVariant = 'type-a' | 'type-b' | 'type-c' | (string & {});
-type ShipButtonGroupVariant = 'type-a' | 'type-b' | (string & {});
-type ShipFormFieldVariant = 'base' | 'horizontal' | (string & {});
-type ShipVariant = ShipSheetVariant | ShipTypeVariant;
-
 type ShipAlertItem = {
     type: ShipAlertType;
     title: string;
@@ -45,8 +33,8 @@ declare class ShipAlertService {
 
 type ShipAlertType = 'error' | 'success' | 'warn' | 'primary' | 'accent' | 'question';
 declare class ShipAlert {
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     hostClasses: _angular_core.Signal<string>;
     _el: ElementRef<any>;
     alertService: _angular_core.InputSignal<ShipAlertService | null>;
@@ -149,6 +137,30 @@ declare class ShipDialogService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShipDialogService>;
 }
 
+declare const __SHIP_COLORS: readonly ["primary", "accent", "warn", "error", "success", ""];
+type ShipColor = (typeof __SHIP_COLORS)[number];
+declare const __SHIP_SIZES: readonly ["small", "xsmall", ""];
+type ShipSize = (typeof __SHIP_SIZES)[number];
+declare const __SHIP_BUTTON_SIZES: readonly ["small", "xsmall", ""];
+type ShipButtonSize = (typeof __SHIP_BUTTON_SIZES)[number];
+declare const __SHIP_ICON_SIZES: readonly ["small", "large", ""];
+type ShipIconSize = (typeof __SHIP_ICON_SIZES)[number];
+declare const __SHIP_SHEET_VARIANTS: readonly ["simple", "outlined", "flat", "raised", ""];
+type ShipSheetVariant = (typeof __SHIP_SHEET_VARIANTS)[number];
+declare const __SHIP_TYPE_VARIANTS: readonly ["type-a", "type-b", "type-c", "type-d", ""];
+type ShipTypeVariant = (typeof __SHIP_TYPE_VARIANTS)[number];
+declare const __SHIP_TABLE_VARIANTS: readonly ["type-a", "type-b", ""];
+type ShipTableVariant = (typeof __SHIP_TABLE_VARIANTS)[number];
+declare const __SHIP_CARD_VARIANTS: readonly ["type-a", "type-b", "type-c", ""];
+type ShipCardVariant = (typeof __SHIP_CARD_VARIANTS)[number];
+declare const __SHIP_BUTTON_GROUP_VARIANTS: readonly ["type-a", "type-b", ""];
+type ShipButtonGroupVariant = (typeof __SHIP_BUTTON_GROUP_VARIANTS)[number];
+declare const __SHIP_FORM_FIELD_VARIANTS: readonly ["base", "horizontal", "auto-width", "autosize", ""];
+type ShipFormFieldVariant = (typeof __SHIP_FORM_FIELD_VARIANTS)[number];
+declare const __SHIP_RANGE_SLIDER_VARIANTS: readonly ["simple", "base", "thick", "outlined", "flat", "raised", ""];
+type ShipRangeSliderVariant = (typeof __SHIP_RANGE_SLIDER_VARIANTS)[number];
+type ShipVariant = ShipSheetVariant | ShipTypeVariant;
+
 declare class ShipAccordion {
     private selfElement;
     readonly name: _angular_core.InputSignal<string>;
@@ -265,22 +277,30 @@ declare class ShipBlueprint implements AfterViewInit, OnDestroy {
 declare abstract class ShipSelectionGroup<T = any> {
     protected readonly itemSelector: string;
     protected readonly activeClass: string;
+    protected readonly options?: {
+        hostRole?: string;
+        itemRole?: string;
+    } | undefined;
     protected readonly hostElement: any;
     protected items: _angular_core.Signal<HTMLElement[]>;
     readonly value: _angular_core.ModelSignal<T | null>;
     readonly closable: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
-    constructor(itemSelector: string, activeClass: string);
+    readonly manualActivation: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    constructor(itemSelector: string, activeClass: string, options?: {
+        hostRole?: string;
+        itemRole?: string;
+    } | undefined);
     protected onClick(target: EventTarget | null): void;
     protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSelectionGroup<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSelectionGroup<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSelectionGroup<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "manualActivation": { "alias": "manualActivation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 declare class ShipButtonGroup extends ShipSelectionGroup<string> {
     id: string;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipButtonGroupVariant | null>;
-    size: _angular_core.InputSignal<ShipSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "type-a" | "type-b" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButtonGroup, never>;
@@ -288,9 +308,9 @@ declare class ShipButtonGroup extends ShipSelectionGroup<string> {
 }
 
 declare class ShipButton {
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
-    size: _angular_core.InputSignal<ShipButtonSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButton, never>;
@@ -298,8 +318,8 @@ declare class ShipButton {
 }
 
 declare class ShipCard {
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipCardVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "type-a" | "type-b" | "type-c" | null>;
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipCard, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCard, "sh-card", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -311,8 +331,8 @@ declare class ShipCheckbox {
     projectedInputs: _angular_core.Signal<HTMLInputElement[]>;
     checked: _angular_core.ModelSignal<boolean>;
     currentClassList: _angular_core.Signal<string>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     noInternalInput: _angular_core.InputSignal<boolean>;
@@ -324,9 +344,9 @@ declare class ShipCheckbox {
 }
 
 declare class ShipChip {
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
-    size: _angular_core.InputSignal<ShipSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     sharp: _angular_core.InputSignal<boolean | undefined>;
     dynamic: _angular_core.InputSignal<boolean | undefined>;
     readonly: _angular_core.InputSignal<boolean>;
@@ -408,9 +428,9 @@ declare class ShipColorPickerInput {
     #private;
     renderingType: _angular_core.InputSignal<"hsl" | "grid" | "hue" | "rgb" | "saturation" | "alpha">;
     format: _angular_core.InputSignal<"hsl" | "rgb" | "rgba" | "hex" | "hex8" | "hsla">;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipFormFieldVariant | null>;
-    size: _angular_core.InputSignal<ShipSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "base" | "horizontal" | "auto-width" | "autosize" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     closed: _angular_core.OutputEmitterRef<string>;
     isOpen: _angular_core.ModelSignal<boolean>;
@@ -441,8 +461,10 @@ declare class ShipDatepicker {
     date: _angular_core.ModelSignal<Date | null>;
     endDate: _angular_core.ModelSignal<Date | null>;
     asRange: _angular_core.InputSignal<boolean>;
+    activeRangeSelection: _angular_core.InputSignal<"start" | "end" | null>;
     monthsToShow: _angular_core.InputSignal<number>;
     disabled: _angular_core.InputSignal<boolean>;
+    tabbedOut: _angular_core.OutputEmitterRef<void>;
     startOfWeek: _angular_core.InputSignal<number>;
     weekdayLabels: _angular_core.InputSignal<string[]>;
     daysRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
@@ -461,35 +483,44 @@ declare class ShipDatepicker {
     ngOnInit(): void;
     nextMonth(): void;
     previousMonth(): void;
-    setDate(newDate: Date, selectedElement: HTMLDivElement): void;
+    setDate(newDate: Date, selectedElement: HTMLElement): void;
     isDateSelected(date: Date): string | null;
-    setSelectedDateStylePosition(selectedElement: HTMLDivElement): void;
+    setSelectedDateStylePosition(selectedElement: HTMLElement): void;
     getMonthName(date: Date): string;
     getFullYear(date: Date): number;
     isCurrentMonth(date: Date, monthOffset: number): boolean;
+    focusedDate: _angular_core.WritableSignal<Date | null>;
+    isSameDay(d1: Date | null | undefined, d2: Date | null | undefined): boolean;
+    getAriaLabel(date: Date): string;
+    getTabIndex(date: Date): number;
+    isDateSelectedBool(date: Date): boolean;
+    onKeydown(event: KeyboardEvent, date: Date): void;
+    ensureDateVisible(date: Date): void;
+    focusActiveDate(): void;
+    onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDatepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDatepicker, "sh-datepicker", never, { "date": { "alias": "date"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "asRange": { "alias": "asRange"; "required": false; "isSignal": true; }; "monthsToShow": { "alias": "monthsToShow"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "startOfWeek": { "alias": "startOfWeek"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; }, { "date": "dateChange"; "endDate": "endDateChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDatepicker, "sh-datepicker", never, { "date": { "alias": "date"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "asRange": { "alias": "asRange"; "required": false; "isSignal": true; }; "activeRangeSelection": { "alias": "activeRangeSelection"; "required": false; "isSignal": true; }; "monthsToShow": { "alias": "monthsToShow"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "startOfWeek": { "alias": "startOfWeek"; "required": false; "isSignal": true; }; "weekdayLabels": { "alias": "weekdayLabels"; "required": false; "isSignal": true; }; }, { "date": "dateChange"; "endDate": "endDateChange"; "tabbedOut": "tabbedOut"; }, never, never, true, never>;
 }
 
 declare class ShipDatepickerInput {
     #private;
-    ngModels: _angular_core.Signal<NgModel | undefined>;
+    ngControl: _angular_core.Signal<NgControl | undefined>;
     masking: _angular_core.InputSignal<string>;
     closed: _angular_core.OutputEmitterRef<Date | null>;
     _maskedDate: _angular_core.Signal<string | Date | null>;
     internalDate: _angular_core.WritableSignal<Date | null>;
     isOpen: _angular_core.ModelSignal<boolean>;
     currentClass: _angular_core.Signal<string>;
+    datepicker: _angular_core.Signal<ShipDatepicker | undefined>;
+    onFocusOut(event: FocusEvent): void;
     onDateChange(date: Date | null): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDatepickerInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDatepickerInput, "sh-datepicker-input", never, { "masking": { "alias": "masking"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, ["ngModels"], ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDatepickerInput, "sh-datepicker-input", never, { "masking": { "alias": "masking"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, ["ngControl"], ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
 }
 
 declare class ShipDaterangeInput {
     #private;
-    startDateInputs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
-    endDateInputs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
     monthsToShow: _angular_core.InputSignal<number>;
     masking: _angular_core.InputSignal<string>;
     closed: _angular_core.OutputEmitterRef<{
@@ -498,19 +529,22 @@ declare class ShipDaterangeInput {
     }>;
     startDate: _angular_core.WritableSignal<Date | null>;
     endDate: _angular_core.WritableSignal<Date | null>;
+    activeInput: _angular_core.WritableSignal<"start" | "end">;
     isOpen: _angular_core.ModelSignal<boolean>;
+    datepicker: _angular_core.Signal<ShipDatepicker | undefined>;
     get classes(): string;
     _maskedStartDate: _angular_core.Signal<string | null>;
     _maskedEndDate: _angular_core.Signal<string | null>;
     constructor();
     private setupInput;
+    onFocusOut(event: FocusEvent): void;
     onStartDateChange(date: Date | null): void;
     onEndDateChange(date: Date | null): void;
     private updateInputValue;
     private dispatchInputEvent;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDaterangeInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDaterangeInput, "sh-daterange-input", never, { "monthsToShow": { "alias": "monthsToShow"; "required": false; "isSignal": true; }; "masking": { "alias": "masking"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, ["startDateInputs", "endDateInputs"], ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDaterangeInput, "sh-daterange-input", never, { "monthsToShow": { "alias": "monthsToShow"; "required": false; "isSignal": true; }; "masking": { "alias": "masking"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, never, ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
 }
 
 declare class ShipDivider {
@@ -519,8 +553,8 @@ declare class ShipDivider {
 }
 
 declare class ShipEventCard {
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipEventCard, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipEventCard, "sh-event-card", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]", "button"], true, never>;
@@ -544,9 +578,9 @@ declare class ShipFileUpload {
 
 declare class ShipFormField {
     #private;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipFormFieldVariant | null>;
-    size: _angular_core.InputSignal<ShipSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "base" | "horizontal" | "auto-width" | "autosize" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     hostClasses: _angular_core.Signal<string>;
     onClick(): void;
@@ -557,8 +591,8 @@ declare class ShipFormField {
 
 declare class ShipIcon implements AfterContentInit {
     #private;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    size: _angular_core.InputSignal<ShipIconSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "large" | null>;
     hostClasses: _angular_core.Signal<string>;
     ngAfterContentInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipIcon, never>;
@@ -651,8 +685,8 @@ declare class ShipPopover {
 type ShipProgressBarMode = 'determinate' | 'indeterminate';
 declare class ShipProgressBar {
     value: _angular_core.InputSignal<number | undefined>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipProgressBar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipProgressBar, "sh-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -664,8 +698,8 @@ declare class ShipRadio {
     projectedInputs: _angular_core.Signal<HTMLInputElement[]>;
     checked: _angular_core.ModelSignal<boolean>;
     currentClassList: _angular_core.Signal<string>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     noInternalInput: _angular_core.InputSignal<boolean>;
@@ -685,9 +719,9 @@ declare class ShipRangeSlider {
         max: number;
         step: number;
     }>;
-    readonly color: _angular_core.InputSignal<ShipColor | null>;
-    readonly variant: _angular_core.InputSignal<ShipVariant | null>;
-    readonly size: _angular_core.InputSignal<ShipSize | null>;
+    readonly color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    readonly variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | "base" | "thick" | null>;
+    readonly size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     readonly sharp: _angular_core.InputSignal<boolean | undefined>;
     readonly alwaysShow: _angular_core.InputSignal<boolean | undefined>;
     hostClasses: _angular_core.Signal<string>;
@@ -710,9 +744,9 @@ declare class ShipSelect {
     value: _angular_core.InputSignal<string | undefined>;
     label: _angular_core.InputSignal<string | undefined>;
     asFreeText: _angular_core.InputSignal<boolean>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipFormFieldVariant | null>;
-    size: _angular_core.InputSignal<ShipSize | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "base" | "horizontal" | "auto-width" | "autosize" | null>;
+    size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
     optionTitle: _angular_core.InputSignal<string | null>;
     freeTextTitle: _angular_core.InputSignal<string | null>;
     freeTextPlaceholder: _angular_core.InputSignal<string | null>;
@@ -736,6 +770,7 @@ declare class ShipSelect {
     selectedOptions: _angular_core.ModelSignal<unknown[]>;
     cleared: _angular_core.OutputEmitterRef<void>;
     onAddNewFreeTextOption: _angular_core.OutputEmitterRef<string>;
+    spacedSelectedOptions: _angular_core.Signal<string>;
     computedFreeTextOption: _angular_core.Signal<string | Record<string, any>>;
     inlineTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     optionsWrapRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
@@ -750,6 +785,7 @@ declare class ShipSelect {
     placeholderText: _angular_core.Signal<string | null>;
     selectedOptionValues: _angular_core.Signal<unknown[]>;
     filteredOptions: _angular_core.Signal<unknown[]>;
+    componentId: string;
     inputRefEl: _angular_core.Signal<HTMLInputElement | null | undefined>;
     focusEffect: _angular_core.EffectRef;
     openAbortController: AbortController | null;
@@ -766,7 +802,7 @@ declare class ShipSelect {
     setInputValueFromOptions(options: unknown[]): void;
     getValue(option: unknown): unknown;
     getLabel(option: unknown): unknown;
-    getLabelAsSlug(option: unknown): string;
+    getOptionId(index: number): string;
     toggleOptionByIndex(optionIndex: number, event?: MouseEvent, enterKey?: boolean): void;
     removeSelectedOptionByIndex($event: MouseEvent, optionRemoveIndex: number): void;
     isSelected(optionIndex: number): boolean;
@@ -877,14 +913,14 @@ declare function moveIndex<T = any>(array: T[], event: Pick<ShipDropEvent, 'prev
 declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
 
 declare class ShipSpinner {
-    color: _angular_core.InputSignal<ShipColor | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSpinner, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipSpinner, "sh-spinner", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class ShipStepper extends ShipSelectionGroup<string> {
-    color: _angular_core.InputSignal<ShipColor | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
     constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipStepper, never>;
@@ -915,7 +951,7 @@ declare class ShipSort {
 }
 declare class ShipStickyColumns {
     #private;
-    shStickyColumns: _angular_core.InputSignal<(string & {}) | "end" | "start">;
+    shStickyColumns: _angular_core.InputSignal<"start" | "end" | (string & {})>;
     ngAfterContentInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipStickyColumns, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipStickyColumns, "[shStickyColumns]", never, { "shStickyColumns": { "alias": "shStickyColumns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -927,8 +963,8 @@ declare class ShipTable {
     data: _angular_core.InputSignal<any>;
     dataChange: _angular_core.OutputEmitterRef<any>;
     sortByColumn: _angular_core.ModelSignal<string | null>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipTableVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "type-a" | "type-b" | null>;
     hostClasses: _angular_core.Signal<string>;
     thead: _angular_core.Signal<ElementRef<HTMLTableSectionElement> | undefined>;
     tbody: _angular_core.Signal<ElementRef<HTMLTableSectionElement> | undefined>;
@@ -957,8 +993,8 @@ declare class ShipTable {
 
 declare class ShipTabs extends ShipSelectionGroup<string> {
     id: string;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTabs, never>;
@@ -980,8 +1016,8 @@ declare class ShipToggleCard {
     #private;
     disableToggle: _angular_core.InputSignal<boolean>;
     isActive: _angular_core.ModelSignal<boolean | undefined>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipCardVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "type-a" | "type-b" | "type-c" | null>;
     hostClasses: _angular_core.Signal<string>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipToggleCard, never>;
@@ -993,8 +1029,8 @@ declare class ShipToggle {
     internalInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     projectedInputs: _angular_core.Signal<HTMLInputElement[]>;
     checked: _angular_core.ModelSignal<boolean>;
-    color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
+    variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
     readonly: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
     noInternalInput: _angular_core.InputSignal<boolean>;
@@ -1185,5 +1221,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-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 type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, CrossDropResponse, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipConfigColors, ShipConfigDistributions, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipDropEvent, ShipFormFieldVariant, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipRangeSliderConfig, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant, SortableManagerConfig };
+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 };
+export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, CrossDropResponse, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipConfigColors, ShipConfigDistributions, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipDropEvent, ShipFormFieldVariant, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipRangeSliderConfig, ShipRangeSliderVariant, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant, SortableManagerConfig };