@ship-ui/core 0.18.5 → 0.18.10

package/styles/components/ship-sortable.scss

@@ -32,7 +32,7 @@ $shipSortable: true !default;
       &.active {
         z-index: 1;
         background-color: var(--base-6);
-        border: 1px solid var(--base-8);
+        border: var(--border-20);
         opacity: 0.5;
       }
     }

package/styles/components/ship-table.scss

@@ -162,7 +162,7 @@ $shipTable: true !default;
       grid-auto-flow: column;
       grid-auto-columns: max-content;
       padding: p2r(8);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       border-width: p2r(1 0);
       opacity: 1;
 

package/styles/components/ship-tabs.scss

@@ -14,7 +14,7 @@ $shipTabs: true !default;
 
     display: flex;
     gap: p2r(16);
-    border-bottom: 1px solid var(--base-4);
+    border-bottom: var(--border-10);
     position: relative;
 
     button,

package/styles/components/ship-toggle-card.scss

@@ -11,7 +11,7 @@ $shipToggleCard: true !default;
 
     &.type-a {
       background-color: transparent;
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
     }
 
     &.active {

package/styles/core/apexcharts/apexcharts.scss

@@ -32,25 +32,25 @@ $useApexcharts: true !default;
     .apexcharts-menu {
       background-color: var(--base-1);
       color: var(--base-12);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
     }
 
     .apexcharts-tooltip.apexcharts-theme-light {
       background-color: var(--base-1);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       box-shadow: var(--base-2);
       color: var(--base-8);
 
       .apexcharts-tooltip-title {
         background-color: var(--base-2);
-        border-bottom: 1px solid var(--base-4);
+        border-bottom: var(--border-10);
       }
     }
 
     .apexcharts-xaxistooltip,
     .apexcharts-yaxistooltip {
       background-color: var(--base-1);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       box-shadow: var(--base-2);
       color: var(--base-8);
     }

package/styles/core/core/variables.scss

@@ -15,6 +15,8 @@
 :root {
   --font-size: 16px;
   font-size: var(--font-size);
+  --border-width: 1px;
+  --shape-scale: 1;
 }
 
 html {
@@ -30,35 +32,38 @@ html {
 }
 
 html body {
-  --primary-1: light-dark(oklch(0.95 0.02 260), oklch(0.17 0.05 260));
-  --primary-2: light-dark(oklch(0.9 0.04 260), oklch(0.25 0.09 260));
-  --primary-3: light-dark(oklch(0.86 0.07 260), oklch(0.32 0.12 260));
-  --primary-4: light-dark(oklch(0.81 0.09 260), oklch(0.38 0.15 260));
-  --primary-5: light-dark(oklch(0.76 0.11 260), oklch(0.45 0.18 260));
-  --primary-6: light-dark(oklch(0.71 0.14 260), oklch(0.51 0.21 260));
-  --primary-7: light-dark(oklch(0.67 0.16 260), oklch(0.57 0.22 260));
-  --primary-8: light-dark(oklch(0.63 0.19 260), oklch(0.63 0.19 260));
-  --primary-9: light-dark(oklch(0.52 0.21 260), oklch(0.71 0.14 260));
-  --primary-10: light-dark(oklch(0.41 0.16 260), oklch(0.81 0.09 260));
-  --primary-11: light-dark(oklch(0.29 0.11 260), oklch(0.9 0.04 260));
-  --primary-12: light-dark(oklch(0.15 0.04 260), oklch(0.95 0.02 260));
-  --primary-g2: linear-gradient(180deg, oklch(0.71 0.14 260) 0%, oklch(0.63 0.19 260) 50%);
-  --primary-g3: linear-gradient(180deg, oklch(0.81 0.09 260.01) 0%, oklch(0.63 0.19 260) 50%);
-
-  // --primary-1: light-dark(hsl(217, 91%, 95%), hsl(217, 91%, 9.5%));
-  // --primary-2: light-dark(hsl(217, 91%, 90%), hsl(217, 91%, 15%));
-  // --primary-3: light-dark(hsl(217, 91%, 85%), hsl(217, 91%, 22.5%));
-  // --primary-4: light-dark(hsl(217, 91%, 80%), hsl(217, 91%, 30%));
-  // --primary-5: light-dark(hsl(217, 91%, 75%), hsl(217, 91%, 37.5%));
-  // --primary-6: light-dark(hsl(217, 91%, 70%), hsl(217, 91%, 45%));
-  // --primary-7: light-dark(hsl(217, 91%, 65%), hsl(217, 91%, 52.5%));
-  // --primary-8: light-dark(hsl(217, 91%, 60%), hsl(217, 91%, 60%));
-  // --primary-9: light-dark(hsl(217, 91%, 46.5%), hsl(217, 91%, 70%));
-  // --primary-10: light-dark(hsl(217, 91%, 33%), hsl(217, 91%, 80%));
-  // --primary-11: light-dark(hsl(217, 91%, 19.5%), hsl(217, 91%, 90%));
-  // --primary-12: light-dark(hsl(217, 91%, 6%), hsl(217, 91%, 100%));
-  // --primary-g2: linear-gradient(180deg, hsl(217, 91%, 70%) 0%, hsl(217, 91%, 60%) 50%);
-  // --primary-g3: linear-gradient(180deg, hsl(217, 91%, 80%) 0%, hsl(217, 91%, 60%) 50%);
+  --border-10: var(--border-width) solid var(--base-4);
+  --border-20: var(--border-width) solid var(--base-8);
+
+  // --primary-1: light-dark(oklch(0.95 0.02 260), oklch(0.17 0.05 260));
+  // --primary-2: light-dark(oklch(0.9 0.04 260), oklch(0.25 0.09 260));
+  // --primary-3: light-dark(oklch(0.86 0.07 260), oklch(0.32 0.12 260));
+  // --primary-4: light-dark(oklch(0.81 0.09 260), oklch(0.38 0.15 260));
+  // --primary-5: light-dark(oklch(0.76 0.11 260), oklch(0.45 0.18 260));
+  // --primary-6: light-dark(oklch(0.71 0.14 260), oklch(0.51 0.21 260));
+  // --primary-7: light-dark(oklch(0.67 0.16 260), oklch(0.57 0.22 260));
+  // --primary-8: light-dark(oklch(0.63 0.19 260), oklch(0.63 0.19 260));
+  // --primary-9: light-dark(oklch(0.52 0.21 260), oklch(0.71 0.14 260));
+  // --primary-10: light-dark(oklch(0.41 0.16 260), oklch(0.81 0.09 260));
+  // --primary-11: light-dark(oklch(0.29 0.11 260), oklch(0.9 0.04 260));
+  // --primary-12: light-dark(oklch(0.15 0.04 260), oklch(0.95 0.02 260));
+  // --primary-g2: linear-gradient(180deg, oklch(0.71 0.14 260) 0%, oklch(0.63 0.19 260) 50%);
+  // --primary-g3: linear-gradient(180deg, oklch(0.81 0.09 260.01) 0%, oklch(0.63 0.19 260) 50%);
+
+  --primary-1: light-dark(hsl(217, 91%, 95%), hsl(217, 91%, 9.5%));
+  --primary-2: light-dark(hsl(217, 91%, 90%), hsl(217, 91%, 15%));
+  --primary-3: light-dark(hsl(217, 91%, 85%), hsl(217, 91%, 22.5%));
+  --primary-4: light-dark(hsl(217, 91%, 80%), hsl(217, 91%, 30%));
+  --primary-5: light-dark(hsl(217, 91%, 75%), hsl(217, 91%, 37.5%));
+  --primary-6: light-dark(hsl(217, 91%, 70%), hsl(217, 91%, 45%));
+  --primary-7: light-dark(hsl(217, 91%, 65%), hsl(217, 91%, 52.5%));
+  --primary-8: light-dark(hsl(217, 91%, 60%), hsl(217, 91%, 60%));
+  --primary-9: light-dark(hsl(217, 91%, 46.5%), hsl(217, 91%, 70%));
+  --primary-10: light-dark(hsl(217, 91%, 33%), hsl(217, 91%, 80%));
+  --primary-11: light-dark(hsl(217, 91%, 19.5%), hsl(217, 91%, 90%));
+  --primary-12: light-dark(hsl(217, 91%, 6%), hsl(217, 91%, 100%));
+  --primary-g2: linear-gradient(180deg, hsl(217, 91%, 70%) 0%, hsl(217, 91%, 60%) 50%);
+  --primary-g3: linear-gradient(180deg, hsl(217, 91%, 80%) 0%, hsl(217, 91%, 60%) 50%);
 
   --accent-1: light-dark(hsl(258, 90%, 95.75%), hsl(258, 90%, 9.25%));
   --accent-2: light-dark(hsl(258, 90%, 91.5%), hsl(258, 90%, 16.5%));
@@ -173,11 +178,11 @@ html body {
   --code-20: 500 #{p2r(14)} / normal monospace;
   --code-30: 500 #{p2r(12)} / normal monospace;
 
-  --shape-1: #{p2r(4)};
-  --shape-2: #{p2r(8)};
-  --shape-3: #{p2r(12)};
-  --shape-4: #{p2r(16)};
-  --shape-5: #{p2r(20)};
+  --shape-1: calc(#{p2r(4)} * var(--shape-scale));
+  --shape-2: calc(#{p2r(8)} * var(--shape-scale));
+  --shape-3: calc(#{p2r(12)} * var(--shape-scale));
+  --shape-4: calc(#{p2r(16)} * var(--shape-scale));
+  --shape-5: calc(#{p2r(20)} * var(--shape-scale));
 
   --box-shadow-10: 0 1px 2px 0 rgba(18, 18, 23, 0.07);
   --box-shadow-20: 0 1px 3px 0 rgba(18, 18, 23, 0.1);

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

@@ -3,7 +3,7 @@ import { ElementRef, QueryList, TemplateRef, OutputEmitterRef, InputSignal, Comp
 import { NgModel } from '@angular/forms';
 
 type ShipColor = 'primary' | 'accent' | 'warn' | 'error' | 'success' | (string & {});
-type ShipSize = 'small' | (string & {});
+type ShipSize = 'small' | 'xsmall' | (string & {});
 type ShipButtonSize = 'small' | 'xsmall' | (string & {});
 type ShipIconSize = 'small' | 'large' | (string & {});
 type ShipSheetVariant = 'simple' | 'outlined' | 'flat' | 'raised' | (string & {});
@@ -11,6 +11,7 @@ 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 = {
@@ -147,6 +148,21 @@ declare class ShipDialogService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShipDialogService>;
 }
 
+declare class ShipAccordion {
+    private selfElement;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<string | null>;
+    readonly allowMultiple: _angular_core.InputSignal<boolean>;
+    readonly variant: _angular_core.InputSignal<ShipVariant | null>;
+    readonly size: _angular_core.InputSignal<string | null>;
+    hostClasses: _angular_core.Signal<string>;
+    protected items: _angular_core.Signal<HTMLDetailsElement[]>;
+    constructor();
+    onToggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipAccordion, "sh-accordion", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+
 type Port = {
     id: string;
     name: string;
@@ -320,22 +336,27 @@ declare class ShipChip {
 type R = number;
 type G = number;
 type B = number;
+type A = number;
 declare class ShipColorPicker {
     #private;
     readonly canvasRef: _angular_core.Signal<ElementRef<HTMLCanvasElement>>;
-    private canvasData;
     showDarkColors: _angular_core.InputSignal<boolean>;
-    renderingType: _angular_core.InputSignal<"hsl" | "grid" | "hue" | "rgb" | "saturation">;
+    renderingType: _angular_core.InputSignal<"hsl" | "grid" | "hue" | "rgb" | "saturation" | "alpha">;
     gridSize: _angular_core.InputSignal<number>;
-    hue: _angular_core.InputSignal<number>;
+    hue: _angular_core.ModelSignal<number>;
     direction: _angular_core.InputSignal<"horizontal" | "vertical">;
-    selectedColor: _angular_core.ModelSignal<[number, number, number]>;
+    selectedColor: _angular_core.ModelSignal<[number, number, number, (number | undefined)?]>;
+    alpha: _angular_core.ModelSignal<number>;
     currentColor: _angular_core.OutputEmitterRef<{
         rgb: string;
+        rgba: string;
         hex: string;
+        hex8: string;
         hsl: string;
+        hsla: string;
         hue: number;
         saturation: number;
+        alpha: number;
     }>;
     centerLightness: _angular_core.Signal<200 | 100>;
     isDragging: _angular_core.WritableSignal<boolean>;
@@ -351,27 +372,66 @@ declare class ShipColorPicker {
     selectedColorRgb: _angular_core.Signal<string>;
     selectedColorHex: _angular_core.Signal<string>;
     selectedColorHsl: _angular_core.Signal<string>;
+    alphaEffect: _angular_core.EffectRef;
+    _prevColorStr: string;
     selectedColorEffect: _angular_core.EffectRef;
+    private alphaColorRedrawEffect;
     onResize(): void;
+    private previousLayoutHash;
+    private previousHue;
+    private getLayoutHash;
     private renderingTypeEffect;
-    initColor: [R, G, B] | null;
+    initColor: [R, G, B, A?] | null;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     private updateMarkerFromColor;
     private findPositionByColor;
     private adjustMarkerPosition;
     private initCanvasEvents;
     private setCanvasSize;
+    private getColorAtPosition;
     private updateColorAndMarker;
     private drawColorPicker;
+    private drawAlpha;
     private drawRgb;
     private drawSaturation;
     private drawHue;
     private drawColorWheel;
     private drawGrid;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipColorPicker, "sh-color-picker", never, { "showDarkColors": { "alias": "showDarkColors"; "required": false; "isSignal": true; }; "renderingType": { "alias": "renderingType"; "required": false; "isSignal": true; }; "gridSize": { "alias": "gridSize"; "required": false; "isSignal": true; }; "hue": { "alias": "hue"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "selectedColor": { "alias": "selectedColor"; "required": false; "isSignal": true; }; "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; }, { "hue": "hueChange"; "selectedColor": "selectedColorChange"; "alpha": "alphaChange"; "currentColor": "currentColor"; }, never, never, true, never>;
+}
+
+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>;
+    readonly: _angular_core.InputSignal<boolean>;
+    closed: _angular_core.OutputEmitterRef<string>;
+    isOpen: _angular_core.ModelSignal<boolean>;
+    currentClass: _angular_core.Signal<string>;
+    isEyeDropperSupported: boolean;
+    showEyeDropper: _angular_core.InputSignal<boolean>;
+    internalHue: _angular_core.WritableSignal<number>;
+    internalAlpha: _angular_core.WritableSignal<number>;
+    internalColorTuple: _angular_core.WritableSignal<[number, number, number, (number | undefined)?]>;
+    hasAlpha: _angular_core.Signal<boolean>;
+    formattedColorString: _angular_core.Signal<string>;
+    pureHueColor: _angular_core.Signal<[number, number, number]>;
+    onMainColorChange(colorObj: any): void;
+    onHuePickerChange(colorObj: any): void;
+    openEyeDropper(event: MouseEvent): Promise<void>;
+    close(): void;
+    private parseAndSetColor;
+    private hslToRgbExact;
     private rgbToHex;
+    private rgbaToHex8;
     private rgbToHsl;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipColorPicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipColorPicker, "sh-color-picker", never, { "showDarkColors": { "alias": "showDarkColors"; "required": false; "isSignal": true; }; "renderingType": { "alias": "renderingType"; "required": false; "isSignal": true; }; "gridSize": { "alias": "gridSize"; "required": false; "isSignal": true; }; "hue": { "alias": "hue"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "selectedColor": { "alias": "selectedColor"; "required": false; "isSignal": true; }; }, { "selectedColor": "selectedColorChange"; "currentColor": "currentColor"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipColorPickerInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipColorPickerInput, "sh-color-picker-input", never, { "renderingType": { "alias": "renderingType"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "showEyeDropper": { "alias": "showEyeDropper"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, never, ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
 }
 
 declare class ShipDatepicker {
@@ -483,7 +543,7 @@ declare class ShipFileUpload {
 declare class ShipFormField {
     #private;
     color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    variant: _angular_core.InputSignal<ShipFormFieldVariant | null>;
     size: _angular_core.InputSignal<ShipSize | null>;
     readonly: _angular_core.InputSignal<boolean>;
     hostClasses: _angular_core.Signal<string>;
@@ -493,21 +553,6 @@ declare class ShipFormField {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipFormField, "sh-form-field", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, {}, never, ["label", "[boxPrefix]", "[prefix]", "[textPrefix]", "input", "textarea", "[textSuffix]", "[suffix]", "[boxSuffix]", "[error]", "[hint]"], true, never>;
 }
 
-declare class ShipAccordion {
-    private selfElement;
-    readonly name: _angular_core.InputSignal<string>;
-    readonly value: _angular_core.ModelSignal<string | null>;
-    readonly allowMultiple: _angular_core.InputSignal<boolean>;
-    readonly variant: _angular_core.InputSignal<"outlined" | "flat" | "base" | null>;
-    readonly size: _angular_core.InputSignal<string | null>;
-    hostClasses: _angular_core.Signal<string>;
-    protected items: _angular_core.Signal<HTMLDetailsElement[]>;
-    constructor();
-    onToggle(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipAccordion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipAccordion, "sh-accordion", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
-}
-
 declare class ShipIcon implements AfterContentInit {
     #private;
     color: _angular_core.InputSignal<ShipColor | null>;
@@ -637,6 +682,12 @@ 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 sharp: _angular_core.InputSignal<boolean | undefined>;
+    readonly alwaysShow: _angular_core.InputSignal<boolean | undefined>;
+    hostClasses: _angular_core.Signal<string>;
     valuePercentage: _angular_core.Signal<number>;
     trackFilledPercentage: _angular_core.Signal<number>;
     thumbPositionPercentage: _angular_core.Signal<number>;
@@ -647,7 +698,7 @@ declare class ShipRangeSlider {
     trackEvent(e: MouseEvent): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipRangeSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRangeSlider, "sh-range-slider", never, { "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["label", "input[type=range]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRangeSlider, "sh-range-slider", never, { "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "sharp": { "alias": "sharp"; "required": false; "isSignal": true; }; "alwaysShow": { "alias": "alwaysShow"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["label", "input[type=range]"], true, never>;
 }
 
 type ValidateFreeText = (value: string) => boolean;
@@ -657,7 +708,7 @@ declare class ShipSelect {
     label: _angular_core.InputSignal<string | undefined>;
     asFreeText: _angular_core.InputSignal<boolean>;
     color: _angular_core.InputSignal<ShipColor | null>;
-    variant: _angular_core.InputSignal<ShipSheetVariant | null>;
+    variant: _angular_core.InputSignal<ShipFormFieldVariant | null>;
     size: _angular_core.InputSignal<ShipSize | null>;
     optionTitle: _angular_core.InputSignal<string | null>;
     freeTextTitle: _angular_core.InputSignal<string | null>;
@@ -1011,6 +1062,7 @@ declare class ShipTooltip implements OnDestroy {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipTooltip, "[shTooltip]", never, { "shTooltip": { "alias": "shTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare const defaultThemeColors: Record<string, string>;
 declare const SHIP_CONFIG: InjectionToken<ShipConfig>;
 interface ShipComponentConfig {
     variant?: ShipVariant | string;
@@ -1021,7 +1073,32 @@ interface ShipChipConfig extends ShipComponentConfig {
     sharp?: boolean;
     dynamic?: boolean;
 }
+interface ShipRangeSliderConfig extends ShipComponentConfig {
+    sharp?: boolean;
+    alwaysShow?: boolean;
+}
+interface ShipConfigColors {
+    primary?: string;
+    accent?: string;
+    warn?: string;
+    error?: string;
+    success?: string;
+    base?: string;
+}
+interface ShipConfigDistributions {
+    primary?: number;
+    accent?: number;
+    warn?: number;
+    error?: number;
+    success?: number;
+    base?: number;
+}
 interface ShipConfig {
+    fontSize?: number;
+    colors?: ShipConfigColors;
+    distribution?: ShipConfigDistributions;
+    borderRadius?: number;
+    borderWidth?: number;
     button?: ShipComponentConfig;
     chip?: ShipChipConfig;
     alert?: ShipComponentConfig;
@@ -1041,6 +1118,7 @@ interface ShipConfig {
     tabs?: ShipComponentConfig;
     'event-card'?: ShipComponentConfig;
     datepicker?: ShipComponentConfig;
+    rangeSlider?: ShipRangeSliderConfig;
     alertVariant?: '' | 'simple' | 'outlined' | 'flat' | 'raised';
     cardType?: '' | 'type-b' | 'type-c';
     dialogType?: 'type-b';
@@ -1048,5 +1126,31 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-export { GridSortable, SHIP_CONFIG, ShipAccordion, 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, ShipDialogTemplateInstance, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };
+declare function hslToRgbExact(h: number, s: number, l: number): [number, number, number];
+declare function hsvToRgbExact(h: number, s: number, v: number): [number, number, number];
+declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+declare function rgbToHex(r: number, g: number, b: number): string;
+declare function rgbaToHex8(r: number, g: number, b: number, a: number): string;
+declare function rgbToHsl(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    l: number;
+    string: string;
+};
+declare function rgbToOklch(r: number, g: number, b: number): {
+    l: number;
+    c: number;
+    h: number;
+};
+declare function hslToOklch(h: number, s: number, l: number): {
+    l: number;
+    c: number;
+    h: number;
+};
+
+export { GridSortable, 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, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, watchHostClass };
+export type { AfterDropResponse, BlueprintNode, ComponentClosedType, ComponentDataType, Coordinates, Exact, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipButtonGroupVariant, ShipButtonSize, ShipCardVariant, ShipChipConfig, ShipColor, ShipComponentConfig, ShipConfig, ShipConfigColors, ShipConfigDistributions, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipDialogTemplateInstance, ShipFormFieldVariant, ShipIconSize, ShipPopoverOptions, ShipProgressBarMode, ShipRangeSliderConfig, ShipSheetVariant, ShipSidenavType, ShipSize, ShipTableVariant, ShipTypeVariant, ShipVariant };