@ship-ui/core 0.17.23 → 0.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.17.23",
+  "version": "0.18.0",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",

package/styles/components/ship-button-group.scss

@@ -38,6 +38,10 @@ $shipButtonGroup: true !default;
         border-radius: p2r(6);
         border: 0;
 
+        &:focus-visible {
+          outline-offset: -2px;
+        }
+
         @supports not (anchor-name: --anchor) {
           --btng-item-bg: var(--base-3);
         }
@@ -86,6 +90,11 @@ $shipButtonGroup: true !default;
         transform 125ms linear;
       transform: scale(1);
 
+      &:focus-visible {
+        outline: 2px solid var(--primary-8);
+        outline-offset: -4px;
+      }
+
       &:active {
         transform: scale(0.96);
       }

package/styles/components/ship-checkbox.scss

@@ -18,20 +18,34 @@ $shipCheckbox: true !default;
     position: relative;
     border: 0;
 
-    .label {
-      &:empty {
-        display: none;
+    &:focus-visible > .box,
+    &:has(input:focus-visible) > .box {
+      outline: 2px solid var(--primary-8);
+      outline-offset: 2px;
+    }
+
+    > input.internal-input,
+    .label > input {
+      appearance: none;
+      position: absolute;
+      inset: 0;
+      cursor: pointer;
+      z-index: 0;
+      margin: 0;
+
+      &:focus,
+      &:focus-visible {
+        outline: none;
       }
+    }
 
-      > input {
-        appearance: none;
-        position: absolute;
-        inset: 0;
-        cursor: pointer;
+    &:has(.label > input) > input.internal-input {
+      display: none;
+    }
 
-        &:focus {
-          outline: none;
-        }
+    .label {
+      &:empty {
+        display: none;
       }
     }
 
@@ -66,18 +80,9 @@ $shipCheckbox: true !default;
 
     &.raised,
     &.flat {
-      &:has(input) {
-        &:not(:has(input:checked)) .box {
-          background: transparent;
-          border: 1px solid var(--box-bc);
-        }
-      }
-
-      &:not(:has(input)) {
-        .box:not(.active) {
-          background: transparent;
-          border: 1px solid var(--box-bc);
-        }
+      &:not(:has(input:checked)):not(.active) .box {
+        background: transparent;
+        border: 1px solid var(--box-bc);
       }
     }
 

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

@@ -185,6 +185,12 @@ $shipFormFieldShadow: false !default;
       min-width: var(--ff-mw);
       width: 100%;
 
+      &:has(textarea:focus-visible),
+      &:has(input:focus-visible) {
+        outline: 2px solid var(--primary-8);
+        outline-offset: 2px;
+      }
+
       sh-popover,
       .input {
         flex: 1 0;

package/styles/components/ship-list.scss

@@ -80,6 +80,11 @@ $shipList: true !default;
         outline: none;
       }
 
+      &:focus-visible {
+        outline: 2px solid var(--primary-8);
+        outline-offset: 2px;
+      }
+
       [suffix] {
         margin-left: auto;
         color: var(--base-8);

package/styles/components/ship-radio.scss

@@ -3,6 +3,7 @@
 $shipRadio: true !default;
 
 @if $shipRadio == true {
+  .sh-radio,
   sh-radio {
     --radiod-c: var(--base-8);
     --radiod-o: 0;
@@ -15,17 +16,28 @@ $shipRadio: true !default;
     user-select: none;
     position: relative;
 
+    &:focus-visible > .radio,
+    &:has(input:focus-visible) > .radio {
+      outline: 2px solid var(--primary-8);
+      outline-offset: 2px;
+    }
+
     > input {
       appearance: none;
       position: absolute;
       inset: 0;
       cursor: pointer;
 
-      &:focus {
+      &:focus,
+      &:focus-visible {
         outline: none;
       }
     }
 
+    &:has(> input:not(.internal-input)) > input.internal-input {
+      display: none;
+    }
+
     &:has(input[disabled]),
     &[disabled]:not([disabled='false']) {
       opacity: 0.5;
@@ -91,18 +103,9 @@ $shipRadio: true !default;
 
     &.raised,
     &.flat {
-      &:has(input) {
-        &:not(:has(input:checked)) .radio {
-          background: transparent;
-          border: 1px solid var(--radio-bc);
-        }
-      }
-
-      &:not(:has(input)) {
-        .radio:not(.active) {
-          background: transparent;
-          border: 1px solid var(--radio-bc);
-        }
+      &:not(:has(input:checked)):not(.active) .radio {
+        background: transparent;
+        border: 1px solid var(--radio-bc);
       }
     }
   }

package/styles/components/ship-sheet.utility.scss

@@ -211,6 +211,11 @@ $shipSheet: true !default;
       }
     }
 
+    &:focus-visible {
+      outline: 2px solid var(--primary-8);
+      outline-offset: 2px;
+    }
+
     // &.experimental-border {
     //   --sheet-bc: transparent;
 

package/styles/components/ship-stepper.scss

@@ -58,7 +58,9 @@ $shipStepper: true !default;
     }
 
     button,
-    [step] {
+    [routerLinkActive],
+    [step],
+    [value] {
       flex: 2 0;
       display: flex;
       flex-direction: column;
@@ -69,6 +71,13 @@ $shipStepper: true !default;
       color: var(--base-8);
       cursor: pointer;
       user-select: none;
+      outline: none;
+
+      &:focus-visible .sh-radio {
+        outline: 2px solid var(--primary-8);
+        outline-offset: 2px;
+        border-radius: 50%;
+      }
 
       &:first-child {
         align-items: flex-start;
@@ -81,13 +90,15 @@ $shipStepper: true !default;
         text-align: end;
       }
 
-      &:not(.active) sh-radio {
+      &:not(.active) .sh-radio {
         z-index: 10;
       }
 
       &:has(~ button.active),
-      &:has(~ [step].active) {
-        sh-radio {
+      &:has(~ [step].active),
+      &:has(~ [routerLinkActive].active),
+      &:has(~ [value].active) {
+        .sh-radio {
           --radiod-o: 1;
 
           .radio {
@@ -97,7 +108,7 @@ $shipStepper: true !default;
         }
       }
 
-      sh-radio {
+      .sh-radio {
         .radio {
           --radiod-c: var(--step-radio-cbg);
 
@@ -110,7 +121,7 @@ $shipStepper: true !default;
         color: var(--step-active-c);
         outline: none;
 
-        sh-radio {
+        .sh-radio {
           z-index: 0;
           --radiod-o: 1;
 

package/styles/components/ship-tabs.scss

@@ -18,7 +18,8 @@ $shipTabs: true !default;
     position: relative;
 
     button,
-    [tab] {
+    [tab],
+    [value] {
       display: flex;
       align-items: center;
       gap: p2r(8);
@@ -35,12 +36,14 @@ $shipTabs: true !default;
       transition: transform 125ms linear;
       transform: scale(1);
 
-      &:active {
-        transform: scale(0.98);
+      &:focus-visible {
+        outline: 2px solid var(--primary-8);
+        outline-offset: -2px;
+        border-radius: var(--shape-1);
       }
 
-      &:focus {
-        outline: none;
+      &:active {
+        transform: scale(0.98);
       }
 
       &:hover {

package/styles/components/ship-toggle.scss

@@ -16,6 +16,12 @@ $shipToggle: true !default;
     user-select: none;
     position: relative;
 
+    &:focus-visible > .box,
+    &:has(input:focus-visible) > .box {
+      outline: 2px solid var(--primary-8);
+      outline-offset: 2px;
+    }
+
     label {
       display: flex;
       align-items: center;
@@ -27,6 +33,7 @@ $shipToggle: true !default;
     .box {
       display: block;
       width: p2r(34);
+      min-width: p2r(34);
       height: p2r(20);
       cursor: pointer;
       position: relative;
@@ -42,6 +49,16 @@ $shipToggle: true !default;
       inset: 0;
       cursor: pointer;
       z-index: 0;
+      margin: 0;
+
+      &:focus,
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &:has(> input:not(.internal-input)) > input.internal-input {
+      display: none;
     }
 
     &:has(input[disabled]),

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, QueryList, OutputEmitterRef, InputSignal, ComponentRef, OutputRefSubscription, Type, AfterViewInit, OnDestroy, AfterContentInit, TemplateRef, WritableSignal, InjectionToken } from '@angular/core';
+import { ElementRef, QueryList, TemplateRef, Type, OutputEmitterRef, InputSignal, ComponentRef, EmbeddedViewRef, OutputRefSubscription, AfterViewInit, OnDestroy, AfterContentInit, WritableSignal, InjectionToken } from '@angular/core';
 import { NgModel } from '@angular/forms';
 
 type ShipColor = 'primary' | 'accent' | 'warn' | 'error' | 'success' | (string & {});
@@ -110,12 +110,16 @@ declare class ShipDialog {
 }
 
 type Exact<T, U> = U extends T ? (keyof U extends keyof T ? U : never) : never;
-type ComponentDataType<T> = T extends {
+type ComponentDataType<T> = T extends TemplateRef<infer C> ? C extends {
+    $implicit: infer K;
+} ? K : void : T extends Type<infer I> ? I extends {
     data: InputSignal<infer K>;
-} ? K : void;
-type ComponentClosedType<T> = T extends {
+} ? K : void : void;
+type ComponentClosedType<T> = T extends TemplateRef<infer C> ? C extends {
+    close: (res?: infer U) => void;
+} ? U : undefined : T extends Type<infer I> ? I extends {
     closed: OutputEmitterRef<infer U>;
-} ? U : undefined;
+} ? U : undefined : undefined;
 interface ShipDialogServiceOptions<TData = any, TResult = undefined> extends ShipDialogOptions {
     data?: TData extends void ? void : TData & Exact<TData, TData>;
     closed?: (res: TResult) => void;
@@ -125,20 +129,19 @@ type ShipDialogInstance<T> = {
     close: (res?: ComponentClosedType<T> | undefined) => void;
     closed: OutputEmitterRef<ComponentClosedType<T> | undefined>;
 };
+type ShipDialogTemplateInstance<T> = {
+    component: undefined;
+    close: (res?: ComponentClosedType<T> | undefined) => void;
+    closed: OutputEmitterRef<ComponentClosedType<T> | undefined>;
+};
 declare class ShipDialogService {
     #private;
     compRef: ComponentRef<ShipDialog> | null;
     insertedCompRef: ComponentRef<unknown> | null;
+    insertedTemplateRef: EmbeddedViewRef<unknown> | null;
     closedFieldSub: OutputRefSubscription | null;
     compClosedSub: OutputRefSubscription | null;
-    open<T extends {
-        data?: InputSignal<any>;
-        closed?: OutputEmitterRef<any>;
-    } | {
-        data?: InputSignal<any>;
-    } | {
-        closed?: OutputEmitterRef<any>;
-    } | {}, K = ComponentDataType<T>, U = ComponentClosedType<T>, _Options extends ShipDialogServiceOptions<K, U | undefined> = ShipDialogServiceOptions<K, U | undefined>>(component: Type<T>, options?: _Options): ShipDialogInstance<T>;
+    open<T extends TemplateRef<any> | Type<any>, K = ComponentDataType<T>, U = ComponentClosedType<T>, _Options extends ShipDialogServiceOptions<K, U | undefined> = ShipDialogServiceOptions<K, U | undefined>>(componentOrTemplate: T, options?: _Options): T extends TemplateRef<any> ? ShipDialogTemplateInstance<T> : T extends Type<infer I> ? ShipDialogInstance<I> : never;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDialogService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShipDialogService>;
@@ -242,11 +245,25 @@ declare class ShipBlueprint implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipBlueprint, "sh-blueprint", never, { "forceUnique": { "alias": "forceUnique"; "required": false; "isSignal": true; }; "autoLayout": { "alias": "autoLayout"; "required": false; "isSignal": true; }; "gridSize": { "alias": "gridSize"; "required": false; "isSignal": true; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; "isSignal": true; }; "gridColor": { "alias": "gridColor"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; }, never, ["*"], true, never>;
 }
 
-declare class ShipButtonGroup {
+declare abstract class ShipSelectionGroup<T = any> {
+    protected readonly itemSelector: string;
+    protected readonly activeClass: string;
+    protected readonly hostElement: any;
+    protected items: _angular_core.Signal<HTMLElement[]>;
+    readonly value: _angular_core.ModelSignal<T | null>;
+    constructor(itemSelector: string, activeClass: string);
+    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; }; }, { "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>;
+    constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButtonGroup, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipButtonGroup, "sh-button-group", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -271,13 +288,21 @@ declare class ShipCard {
 }
 
 declare class ShipCheckbox {
+    private readonly _elementRef;
+    internalInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    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>;
     readonly: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    noInternalInput: _angular_core.InputSignal<boolean>;
+    protected onInternalInputChange(event: Event): void;
     hostClasses: _angular_core.Signal<string>;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCheckbox, "sh-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCheckbox, "sh-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "noInternalInput": { "alias": "noInternalInput"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 declare class ShipChip {
@@ -572,13 +597,21 @@ declare class ShipProgressBar {
 }
 
 declare class ShipRadio {
+    private readonly _elementRef;
+    internalInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    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>;
     readonly: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    noInternalInput: _angular_core.InputSignal<boolean>;
+    protected onInternalInputChange(event: Event): void;
     hostClasses: _angular_core.Signal<string>;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipRadio, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRadio, "sh-radio", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRadio, "sh-radio", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "noInternalInput": { "alias": "noInternalInput"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 declare class ShipRangeSlider {
@@ -748,8 +781,9 @@ declare class ShipSpinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipSpinner, "sh-spinner", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class ShipStepper {
+declare class ShipStepper extends ShipSelectionGroup<string> {
     color: _angular_core.InputSignal<ShipColor | null>;
+    constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipStepper, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipStepper, "sh-stepper", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -819,10 +853,11 @@ declare class ShipTable {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTable, "sh-table", never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "sortByColumn": { "alias": "sortByColumn"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "dataChange": "dataChange"; "sortByColumn": "sortByColumnChange"; }, never, ["[actionbar]", "th", "[thead]", "*", "[table-no-rows]"], true, never>;
 }
 
-declare class ShipTabs {
+declare class ShipTabs extends ShipSelectionGroup<string> {
     id: string;
     color: _angular_core.InputSignal<ShipColor | null>;
     variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    constructor();
     hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTabs, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTabs, "sh-tabs", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -852,12 +887,20 @@ declare class ShipToggleCard {
 }
 
 declare class ShipToggle {
+    private readonly _elementRef;
+    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>;
     readonly: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    noInternalInput: _angular_core.InputSignal<boolean>;
+    protected onInternalInputChange(event: Event): void;
     hostClasses: _angular_core.Signal<string>;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipToggle, "sh-toggle", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipToggle, "sh-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "noInternalInput": { "alias": "noInternalInput"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 declare class ShipVirtualScroll {
@@ -984,4 +1027,4 @@ interface ShipConfig {
 }
 
 export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, 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, moveIndex, watchHostClass };
-export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };
+export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };