@ship-ui/core 0.16.9 → 0.16.10

package/index.d.ts

@@ -764,6 +764,17 @@ declare class ShipTabs {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTabs, "sh-tabs", never, {}, {}, never, ["*"], true, never>;
 }
 
+type ShipThemeOption = 'light' | 'dark' | null;
+
+declare class ShipThemeToggle {
+    #private;
+    theme: _angular_core.Signal<ShipThemeOption>;
+    toggleTheme(): void;
+    setTheme(theme: ShipThemeOption): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipThemeToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipThemeToggle, "ship-theme-toggle", never, {}, {}, never, never, true, never>;
+}
+
 declare class ShipToggleCard {
     isActive: _angular_core.ModelSignal<boolean>;
     disallowToggle: _angular_core.InputSignal<boolean>;
@@ -870,5 +881,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-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, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
+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, ShipConfig, ShipDialogInstance, ShipDialogOptions, ShipDialogServiceOptions, ShipPopoverOptions, ShipProgressBarMode, ShipSidenavType };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.16.9",
+  "version": "0.16.10",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20"
@@ -41,6 +41,8 @@
     "calendar",
     "minus-bold",
     "info",
+    "moon-bold",
+    "sun-bold",
     "list",
     "trash",
     "tree-structure",

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

@@ -0,0 +1,41 @@
+@use '../helpers.scss' as *;
+
+$shipThemeToggle: true !default;
+
+@if $shipThemeToggle == true {
+  ship-theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    [shButton].small sh-icon.small-icon {
+      font-size: p2r(10);
+    }
+
+    &:has(sh-icon.small-icon) {
+      [shButton].small {
+        gap: 0;
+      }
+
+      sh-icon:first-child {
+        transform: translate(p2r(-1), p2r(-4));
+      }
+
+      sh-icon:last-child {
+        transform: translate(p2r(1), p2r(4));
+      }
+
+      &:after {
+        content: '';
+        height: p2r(16);
+        width: 1px;
+        background: var(--base-12);
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        transform: rotate(30deg);
+      }
+    }
+  }
+}

package/styles/core/core/variables.scss

@@ -18,6 +18,8 @@
 }
 
 html {
+  color-scheme: light dark;
+
   &.dark {
     color-scheme: dark;
   }

package/styles/index.scss

@@ -38,6 +38,7 @@ $shipRadio: true !default;
 $shipButtonGroup: true !default;
 $shipRangeSlider: true !default;
 $shipTooltip: true !default;
+$shipThemeToggle: true !default;
 $shipVirtualScroll: false !default;
 $shipSelect: true !default;
 $shipCard: true !default;
@@ -62,6 +63,9 @@ $shipFileUpload: true !default;
 @use './components/ship-toggle.scss' with (
   $shipToggle: $shipToggle
 );
+@use './components/ship-theme-toggle.scss' with (
+  $shipThemeToggle: $shipThemeToggle
+);
 @use './components/ship-button.scss' with (
   $shipButton: $shipButton,
   $shipButtonShadow: $shipButtonShadow