@ship-ui/core 0.14.21 → 0.14.23

package/index.d.ts

@@ -144,7 +144,6 @@ declare class ShipCardComponent {
 
 declare class ShipCheckboxComponent {
     currentClassList: _angular_core.Signal<string>;
-    showClasses: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipCheckboxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCheckboxComponent, "sh-checkbox", never, {}, {}, never, ["*"], true, never>;
 }
@@ -410,8 +409,7 @@ declare class ShipProgressBarComponent {
 }
 
 declare class ShipRadioComponent {
-    #private;
-    onClick(): void;
+    currentClassList: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipRadioComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipRadioComponent, "sh-radio", never, {}, {}, never, ["*"], true, never>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.14.21",
+  "version": "0.14.23",
   "peerDependencies": {
     "@angular/common": ">=19",
     "@angular/core": ">=19"

package/styles/components/ship-checkbox.component.scss

@@ -6,9 +6,7 @@ $shipCheckbox: true !default;
   sh-checkbox {
     .sh-sheet {
       --box-bw: #{p2r(1)};
-      --box-c: var(--sheet-c);
       --box-bc: var(--sheet-bc);
-      --box-bg: var(--sheet-bg);
       --sheet-s: var(--shape-1);
     }
 
@@ -20,7 +18,7 @@ $shipCheckbox: true !default;
     position: relative;
     border: 0;
 
-    > input[type='checkbox'] {
+    > input {
       appearance: none;
       position: absolute;
       inset: 0;
@@ -47,11 +45,7 @@ $shipCheckbox: true !default;
       height: p2r(20);
       cursor: pointer;
       position: relative;
-      border-radius: var(--shape-1);
       border: var(--box-bw) solid var(--box-bc);
-      background: var(--box-bg);
-      font-size: p2r(12);
-      color: var(--box-c);
 
       sh-icon {
         opacity: 0;
@@ -93,7 +87,7 @@ $shipCheckbox: true !default;
       }
     }
 
-    &:has(input[type='checkbox']:checked),
+    &:has(input:checked),
     &.indeterminate,
     &.active {
       .box sh-icon {

package/styles/components/ship-list.component.scss

@@ -34,6 +34,10 @@ $shipList: true !default;
       line-height: p2r(24);
     }
 
+    &[shsortable] [item]:active {
+      transform: scale(1);
+    }
+
     > [action],
     > [item] {
       border-radius: var(--list-s);
@@ -69,16 +73,13 @@ $shipList: true !default;
       }
     }
 
-    :has(input[type='checkbox']),
-    :has(input[type='radio']),
+    :has(input),
     > [action] {
       cursor: pointer;
     }
 
-    > [item]:has(input[type='checkbox']:checked),
-    > [action]:has(input[type='checkbox']:checked),
-    > [item]:has(input[type='radio']:checked),
-    > [action]:has(input[type='radio']:checked),
+    > [item]:has(input:checked),
+    > [action]:has(input:checked),
     > [action].active,
     > [action].selected {
       --list-color: var(--base-12);
@@ -88,10 +89,8 @@ $shipList: true !default;
     }
 
     &.primary {
-      > [item]:has(input[type='checkbox']:checked),
-      > [action]:has(input[type='checkbox']:checked),
-      > [item]:has(input[type='radio']:checked),
-      > [action]:has(input[type='radio']:checked),
+      > [item]:has(input:checked),
+      > [action]:has(input:checked),
       > [action].active,
       > [action].selected {
         sh-icon:first-child {
@@ -101,10 +100,8 @@ $shipList: true !default;
     }
 
     &.accent {
-      > [item]:has(input[type='checkbox']:checked),
-      > [action]:has(input[type='checkbox']:checked),
-      > [item]:has(input[type='radio']:checked),
-      > [action]:has(input[type='radio']:checked),
+      > [item]:has(input:checked),
+      > [action]:has(input:checked),
       > [action].active,
       > [action].selected {
         sh-icon:first-child {
@@ -114,10 +111,8 @@ $shipList: true !default;
     }
 
     &.warn {
-      > [item]:has(input[type='checkbox']:checked),
-      > [action]:has(input[type='checkbox']:checked),
-      > [item]:has(input[type='radio']:checked),
-      > [action]:has(input[type='radio']:checked),
+      > [item]:has(input:checked),
+      > [action]:has(input:checked),
       > [action].active,
       > [action].selected {
         sh-icon:first-child {
@@ -127,10 +122,8 @@ $shipList: true !default;
     }
 
     &.error {
-      > [item]:has(input[type='checkbox']:checked),
-      > [action]:has(input[type='checkbox']:checked),
-      > [item]:has(input[type='radio']:checked),
-      > [action]:has(input[type='radio']:checked),
+      > [item]:has(input:checked),
+      > [action]:has(input:checked),
       > [action].active,
       > [action].selected {
         sh-icon:first-child {
@@ -140,10 +133,8 @@ $shipList: true !default;
     }
 
     &.success {
-      > [item]:has(input[type='checkbox']:checked),
-      > [action]:has(input[type='checkbox']:checked),
-      > [item]:has(input[type='radio']:checked),
-      > [action]:has(input[type='radio']:checked),
+      > [item]:has(input:checked),
+      > [action]:has(input:checked),
       > [action].active,
       > [action].selected {
         sh-icon:first-child {

package/styles/components/ship-radio.component.scss

@@ -4,12 +4,9 @@ $shipRadio: true !default;
 
 @if $shipRadio == true {
   sh-radio {
-    --radio-bw: #{p2r(1)};
-    --radio-bg: var(--base-2);
-    --radio-bc: var(--base-4);
-    --radio-c: var(--base-8);
-    --radiod-o: 0;
     --radiod-c: var(--base-8);
+    --radiod-o: 0;
+    --radio-bc: var(--base-4);
 
     display: flex;
     align-items: center;
@@ -18,7 +15,7 @@ $shipRadio: true !default;
     user-select: none;
     position: relative;
 
-    > input[type='radio'] {
+    > input {
       appearance: none;
       position: absolute;
       inset: 0;
@@ -37,7 +34,7 @@ $shipRadio: true !default;
       cursor: initial;
     }
 
-    &:has(input[type='radio']:checked),
+    &:has(input:checked),
     &.active {
       --radiod-o: 1;
     }
@@ -51,10 +48,6 @@ $shipRadio: true !default;
       cursor: pointer;
       position: relative;
       border-radius: 50%;
-      border: var(--radio-bw) solid var(--radio-bc);
-      background: var(--radio-bg);
-      font-size: p2r(12);
-      color: var(--radio-c);
 
       &:after {
         content: '';
@@ -72,110 +65,44 @@ $shipRadio: true !default;
     }
 
     &.primary {
-      --radio-c: var(--primary-8);
       --radiod-c: var(--primary-8);
-      --radio-bg: var(--primary-3);
-      --radio-bc: var(--primary-4);
     }
 
     &.accent {
-      --radio-c: var(--accent-8);
       --radiod-c: var(--accent-8);
-      --radio-bg: var(--accent-3);
-      --radio-bc: var(--accent-4);
     }
 
     &.warn {
-      --radio-c: var(--warn-8);
       --radiod-c: var(--warn-8);
-      --radio-bg: var(--warn-3);
-      --radio-bc: var(--warn-4);
     }
 
     &.error {
-      --radio-c: var(--error-8);
       --radiod-c: var(--error-8);
-      --radio-bg: var(--error-3);
-      --radio-bc: var(--error-4);
     }
 
     &.success {
-      --radio-c: var(--success-8);
       --radiod-c: var(--success-8);
-      --radio-bg: var(--success-3);
-      --radio-bc: var(--success-4);
-    }
-
-    &.outlined {
-      --radio-bg: var(--base-1);
-
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --radio-bc: var(--base-4);
-      }
     }
 
     &.flat,
     &.raised {
-      --radio-c: #fff;
-      --radio-bc: var(--base-4);
-      --radio-bg: var(--base-2);
-      --radiod-c: #fff;
-    }
-
-    &.flat:has(input[type='radio']:checked),
-    &.flat.active {
-      --radio-bw: 0;
-      --radio-bg: var(--base-8);
       --radiod-c: #fff;
-
-      &.primary {
-        --radio-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --radio-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --radio-bg: var(--warn-8);
-      }
-
-      &.error {
-        --radio-bg: var(--error-8);
-      }
-
-      &.success {
-        --radio-bg: var(--success-8);
-      }
     }
 
-    &.raised:has(input[type='radio']:checked),
-    &.raised.active {
-      --radio-bw: 0;
-      --radio-bg: var(--base-g2);
-
-      &.primary {
-        --radio-bg: var(--primary-g2);
-      }
-
-      &.accent {
-        --radio-bg: var(--accent-g2);
-      }
-
-      &.warn {
-        --radio-bg: var(--warn-g2);
-      }
-
-      &.error {
-        --radio-bg: var(--error-g2);
+    &.raised,
+    &.flat {
+      &:has(input) {
+        &:not(:has(input:checked)) .radio {
+          background: transparent;
+          border: 1px solid var(--radio-bc);
+        }
       }
 
-      &.success {
-        --radio-bg: var(--success-g2);
+      &:not(:has(input)) {
+        .radio:not(.active) {
+          background: transparent;
+          border: 1px solid var(--radio-bc);
+        }
       }
     }
   }