@ship-ui/core 0.18.5 → 0.18.10

package/styles/components/ship-accordion.scss

@@ -11,9 +11,11 @@ $shipAccordion: true !default;
 
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--acc-bc);
+    border: var(--border-10);
+    border-color: var(--acc-bc);
     border-radius: var(--acc-s);
     overflow: hidden;
+    background: var(--base-1);
 
     &:empty {
       display: none;
@@ -24,11 +26,32 @@ $shipAccordion: true !default;
       --acc-f: var(--paragraph-40);
     }
 
+    &.type-b {
+      --acc-s: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      overflow: auto;
+
+      > details:last-child {
+        border-bottom: var(--border-10);
+      }
+    }
+
     details {
       width: 100%;
 
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+
+        summary {
+          cursor: not-allowed;
+        }
+      }
+
       // Hide standard browser marker
-      & > summary {
+      > summary {
         list-style: none;
 
         &::-webkit-details-marker {
@@ -36,7 +59,7 @@ $shipAccordion: true !default;
         }
       }
 
-      summary {
+      > summary {
         display: flex;
         align-items: center;
         padding: var(--acc-pad);
@@ -45,7 +68,8 @@ $shipAccordion: true !default;
         transition: background-color 0.2s;
         font-weight: 500;
         font-size: var(--acc-f);
-        border-bottom: 1px solid var(--acc-bc);
+        border-bottom: var(--border-10);
+        border-color: var(--acc-bc);
 
         &:focus-visible {
           outline: 2px solid var(--primary-8);
@@ -60,9 +84,14 @@ $shipAccordion: true !default;
         }
       }
 
+      &:last-child > summary {
+        border-bottom: 0;
+      }
+
       &[open] {
-        summary {
-          border-bottom: 1px solid var(--acc-bc);
+        > summary {
+          border-bottom: var(--border-10);
+          border-color: var(--acc-bc);
 
           sh-icon {
             transform: rotate(180deg);
@@ -70,7 +99,8 @@ $shipAccordion: true !default;
         }
 
         + details {
-          border-top: 1px solid var(--acc-bc);
+          border-top: var(--border-10);
+          border-color: var(--acc-bc);
         }
       }
 

package/styles/components/ship-blueprint.scss

@@ -37,7 +37,7 @@ $shipBlueprint: true !default;
     .midpoint-div {
       position: absolute;
       background-color: var(--base-2);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       padding: p2r(8);
       gap: p2r(8);
       border-radius: var(--shape-2);
@@ -138,7 +138,7 @@ $shipBlueprint: true !default;
         align-items: center;
         justify-content: space-between;
         background-color: var(--base-2);
-        border-bottom: 1px solid var(--base-4);
+        border-bottom: var(--border-10);
         cursor: grab;
         user-select: none;
 
@@ -194,7 +194,7 @@ $shipBlueprint: true !default;
       height: p2r(12);
       background-color: var(--bp-stroke-c);
       border-radius: 50%;
-      border: 1px solid var(--base-8);
+      border: var(--border-20);
       cursor: pointer;
       position: relative;
     }

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

@@ -14,11 +14,13 @@ $shipButtonGroup: true !default;
     --btng-f: var(--paragraph-30);
 
     display: inline-flex;
-    border: 1px solid var(--btng-bc);
+    border: var(--border-10);
+    border-color: var(--btng-bc);
     border-radius: var(--btng-s);
     height: var(--btng-h);
     background: var(--btng-bg);
     overflow: hidden;
+    position: relative;
 
     &.small {
       --btng-h: #{p2r(32)};
@@ -35,7 +37,7 @@ $shipButtonGroup: true !default;
       border: 0;
 
       button {
-        border-radius: p2r(6);
+        border-radius: calc((var(--btng-s) / 3) * 2);
         border: 0;
 
         &:focus-visible {
@@ -60,6 +62,10 @@ $shipButtonGroup: true !default;
           }
         }
       }
+
+      &:after {
+        border-radius: calc((var(--btng-s) / 3) * 2);
+      }
     }
 
     button {
@@ -140,20 +146,20 @@ $shipButtonGroup: true !default;
         transition:
           left 0.175s ease-out,
           right 0.175s ease-out;
-        border-radius: var(--btng-s-a);
-      }
-
-      &:not(.type-b):has(button:first-child.active) {
-        &:after {
-          --btng-s-a: #{p2r(4 0 0 4)};
-        }
+        // border-radius: var(--btng-s-a);
       }
 
-      &:not(.type-b):has(button:last-child.active) {
-        &:after {
-          --btng-s-a: #{p2r(0 4 4 0)};
-        }
-      }
+      // &:not(.type-b):has(button:first-child.active) {
+      //   &:after {
+      //     --btng-s-a: var(--btng-s) 0 0 var(--btng-s);
+      //   }
+      // }
+
+      // &:not(.type-b):has(button:last-child.active) {
+      //   &:after {
+      //     --btng-s-a: 0 var(--btng-s) var(--btng-s) 0;
+      //   }
+      // }
     }
   }
 }

package/styles/components/ship-card.scss

@@ -15,7 +15,8 @@ $shipCard: true !default;
     padding: var(--card-p);
     position: relative;
     z-index: 0;
-    border: 1px solid var(--card-bc);
+    border: var(--border-10);
+    border-color: var(--card-bc);
     box-shadow: var(--card-sh);
     border-radius: var(--shape-3);
     overflow: hidden;

package/styles/components/ship-checkbox.scss

@@ -82,7 +82,8 @@ $shipCheckbox: true !default;
     &.flat {
       &:not(:has(input:checked)):not(.active) .box {
         background: transparent;
-        border: 1px solid var(--box-bc);
+        border: var(--border-10);
+        border-color: var(--box-bc);
       }
     }
 

package/styles/components/ship-chip.scss

@@ -43,6 +43,10 @@ $shipChipShadow: false !default;
       &.small {
         padding: p2r(0 6);
       }
+
+      &.xsmall {
+        padding: p2r(0 4);
+      }
     }
 
     sh-icon {
@@ -72,6 +76,21 @@ $shipChipShadow: false !default;
       }
     }
 
+    &.xsmall {
+      --chip-h: #{p2r(20)};
+
+      font: var(--paragraph-40B);
+      padding: p2r(0 6);
+
+      div {
+        gap: p2r(2);
+      }
+
+      sh-icon {
+        font-size: p2r(10);
+      }
+    }
+
     &[disabled] {
       opacity: 0.5;
     }

package/styles/components/ship-color-picker.scss

@@ -7,7 +7,7 @@ $shipColorPicker: true !default;
     position: relative;
     display: block;
     width: p2r(300);
-    height: p2r(300);
+    aspect-ratio: 1 / 1;
 
     canvas {
       background-image:
@@ -26,13 +26,23 @@ $shipColorPicker: true !default;
       overflow: hidden;
     }
 
+    &.rgb {
+      border-radius: p2r(2);
+
+      // canvas {
+      //   border-radius: p2r(2);
+      // }
+    }
+
     &.saturation:not(.vertical),
-    &.hue:not(.vertical) {
+    &.hue:not(.vertical),
+    &.alpha:not(.vertical) {
       height: p2r(20);
-      border-radius: var(--shape-2);
+      aspect-ratio: auto;
+      border-radius: p2r(2);
 
       canvas {
-        border-radius: var(--shape-2);
+        border-radius: p2r(2);
       }
 
       .marker {
@@ -41,12 +51,15 @@ $shipColorPicker: true !default;
     }
 
     &.saturation.vertical,
-    &.hue.vertical {
+    &.hue.vertical,
+    &.alpha.vertical {
       width: p2r(20);
-      border-radius: var(--shape-2);
+      height: p2r(300);
+      aspect-ratio: auto;
+      border-radius: p2r(2);
 
       canvas {
-        border-radius: var(--shape-2);
+        border-radius: p2r(2);
       }
 
       .marker {
@@ -55,12 +68,11 @@ $shipColorPicker: true !default;
     }
 
     canvas {
-      width: calc(100% + 1px);
-      height: calc(100% + 1px);
-      transform: translate(-1px, -1px);
+      width: 100%;
+      height: 100%;
 
       border: 2px solid var(--base-1);
-      outline: 1px solid var(--base-4);
+      outline: var(--border-10);
     }
 
     .marker {
@@ -75,4 +87,64 @@ $shipColorPicker: true !default;
       box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
     }
   }
+
+  sh-color-picker-input {
+    display: flex;
+
+    sh-popover {
+      width: 100%;
+    }
+
+    [popoverContent] {
+      padding: p2r(12);
+      width: p2r(280);
+      display: flex;
+      flex-direction: column;
+      gap: p2r(8);
+    }
+
+    .input-container {
+      flex: 1 0;
+      display: flex;
+      align-items: center;
+      gap: p2r(4);
+      padding-right: p2r(8);
+
+      input {
+        margin-right: 0;
+        min-width: p2r(175);
+      }
+    }
+
+    .color-indicator {
+      position: relative;
+      width: p2r(24);
+      height: p2r(24);
+      border-radius: var(--shape-2);
+      border: var(--border-10);
+      overflow: hidden;
+
+      background-color: #fff;
+      background-image:
+        linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
+      background-size: 8px 8px;
+      background-position:
+        0 0,
+        0 4px,
+        4px -4px,
+        -4px 0px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--indicator-color);
+      }
+    }
+
+    sh-color-picker {
+      width: 100%;
+    }
+  }
 }

package/styles/components/ship-dialog.scss

@@ -10,7 +10,7 @@ $shipDialog: true !default;
     --dialog-s: var(--shape-2);
     --dialog-inner-s: var(--shape-2);
 
-    border: 1px solid var(--base-4);
+    border: var(--border-10);
     background: transparent;
     border-radius: var(--dialog-s);
     box-shadow: var(--box-shadow-40);
@@ -32,7 +32,7 @@ $shipDialog: true !default;
 
       background: var(--base-3);
       padding: p2r(8);
-      outline: 1px solid var(--base-4);
+      outline: var(--border-10);
       outline-offset: -1px;
       overflow: hidden;
 
@@ -116,7 +116,7 @@ $shipDialog: true !default;
 
       &.sticky {
         background-color: var(--dialog-bg);
-        border-bottom: 1px solid var(--base-4);
+        border-bottom: var(--border-10);
         box-shadow: var(--box-shadow-35);
         position: sticky;
         top: 0;
@@ -141,7 +141,7 @@ $shipDialog: true !default;
 
       &.sticky {
         background-color: var(--dialog-bg);
-        border-top: 1px solid var(--base-4);
+        border-top: var(--border-10);
         box-shadow: var(--box-shadow-35);
         position: sticky;
         bottom: 0;

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

@@ -174,7 +174,8 @@ $shipFormFieldShadow: false !default;
     .input-wrap {
       display: flex;
       align-items: center;
-      border: 1px solid var(--ff-bc);
+      border: var(--border-10);
+      border-color: var(--ff-bc);
       border-radius: var(--ff-s);
       background: var(--ff-bg);
       box-shadow: var(--ff-bs);

package/styles/components/ship-menu.scss

@@ -26,7 +26,7 @@ $shipMenu: true !default;
       sh-popover .options {
         [title] {
           position: sticky;
-          border-bottom: 1px solid var(--base-4);
+          border-bottom: var(--border-10);
         }
       }
 

package/styles/components/ship-popover.scss

@@ -74,7 +74,7 @@ $shipPopover: true !default;
       overflow: auto;
       z-index: 0;
       background-color: var(--base-1);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       border-radius: var(--shape-2);
       font: var(--paragraph-30);
       color: var(--base-8);

package/styles/components/ship-progress-bar.scss

@@ -72,7 +72,7 @@ $shipProgressBar: true !default;
     }
 
     &.outlined {
-      --pb-b: 1px solid var(--base-4);
+      --pb-b: var(--border-10);
       --pb-bg: var(--base-1);
 
       &:after {

package/styles/components/ship-radio.scss

@@ -105,7 +105,8 @@ $shipRadio: true !default;
     &.flat {
       &:not(:has(input:checked)):not(.active) .radio {
         background: transparent;
-        border: 1px solid var(--radio-bc);
+        border: var(--border-10);
+        border-color: var(--radio-bc);
       }
     }
   }

package/styles/components/ship-range-slider.scss

@@ -27,15 +27,6 @@ $shipRangeSlider: true !default;
     width: 100%;
     font: var(--rs-f);
 
-    &.thick {
-      --rst-h: #{p2r(16)};
-      --rst-s: var(--shape-2);
-
-      .thumb {
-        opacity: 0;
-      }
-    }
-
     &.sharp {
       --rst-s: #{p2r(2)};
       --rs-thumb-s: #{p2r(2)};
@@ -97,7 +88,7 @@ $shipRangeSlider: true !default;
       align-items: center;
       justify-content: center;
       width: 100%;
-      height: 100%;
+      min-height: var(--rs-h);
       position: relative;
       gap: var(--rs-unit-g);
     }
@@ -159,6 +150,7 @@ $shipRangeSlider: true !default;
       position: absolute;
       top: p2r(-30);
       height: p2r(24);
+      min-width: p2r(24);
       border-radius: var(--shape-2);
       left: 50%;
       margin: auto;
@@ -169,19 +161,18 @@ $shipRangeSlider: true !default;
       white-space: nowrap;
       opacity: 0;
       transition: opacity 125ms linear;
-      // transition-delay: 1s;
       user-select: none;
       pointer-events: none;
 
       &:after {
         content: '';
-        border-top: p2r(6) solid var(--rs-thumb-arrow);
-        border-left: p2r(6) solid transparent;
-        border-right: p2r(6) solid transparent;
+        border-top: p2r(5) solid var(--rs-thumb-arrow);
+        border-left: p2r(5) solid transparent;
+        border-right: p2r(5) solid transparent;
         position: absolute;
-        top: 100%;
+        top: calc(100% - 1px);
         left: 50%;
-        margin-left: p2r(-6);
+        margin-left: p2r(-5);
       }
     }
 
@@ -221,49 +212,61 @@ $shipRangeSlider: true !default;
     }
 
     &.simple {
+      --rst-h: #{p2r(16)};
+      --rst-s: var(--shape-2);
+
+      .thumb {
+        width: 1px;
+        height: var(--rst-h);
+        margin-top: 0;
+        border-radius: 0;
+        border: none;
+        box-shadow: none;
+      }
+
       &.primary {
         --rst-bg: var(--primary-8);
-        --rst: var(--primary-4);
-        --rs-thumb-c: var(--primary-4);
+        --rst: var(--primary-2);
+        --rs-thumb-c: var(--primary-8);
         --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--primary-4);
-        --rs-thumb-value-c: var(--primary-8);
+        --rs-thumb-value-bg: var(--primary-8);
+        --rs-thumb-value-c: var(--primary-2);
       }
 
       &.accent {
         --rst-bg: var(--accent-8);
-        --rst: var(--accent-4);
-        --rs-thumb-c: var(--accent-4);
+        --rst: var(--accent-2);
+        --rs-thumb-c: var(--accent-8);
         --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--accent-4);
-        --rs-thumb-value-c: var(--accent-8);
+        --rs-thumb-value-bg: var(--accent-8);
+        --rs-thumb-value-c: var(--accent-2);
       }
 
       &.warn {
         --rst-bg: var(--warn-8);
-        --rst: var(--warn-4);
-        --rs-thumb-c: var(--warn-4);
+        --rst: var(--warn-2);
+        --rs-thumb-c: var(--warn-8);
         --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--warn-4);
-        --rs-thumb-value-c: var(--warn-8);
+        --rs-thumb-value-bg: var(--warn-8);
+        --rs-thumb-value-c: var(--warn-2);
       }
 
       &.error {
         --rst-bg: var(--error-8);
-        --rst: var(--error-4);
-        --rs-thumb-c: var(--error-4);
+        --rst: var(--error-2);
+        --rs-thumb-c: var(--error-8);
         --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--error-4);
-        --rs-thumb-value-c: var(--error-8);
+        --rs-thumb-value-bg: var(--error-8);
+        --rs-thumb-value-c: var(--error-2);
       }
 
       &.success {
         --rst-bg: var(--success-8);
-        --rst: var(--success-4);
-        --rs-thumb-c: var(--success-4);
+        --rst: var(--success-2);
+        --rs-thumb-c: var(--success-8);
         --rs-thumb-bc: var(--base-1);
-        --rs-thumb-value-bg: var(--success-4);
-        --rs-thumb-value-c: var(--success-8);
+        --rs-thumb-value-bg: var(--success-8);
+        --rs-thumb-value-c: var(--success-2);
       }
     }
 
@@ -272,6 +275,7 @@ $shipRangeSlider: true !default;
       --rst-bc: var(--base-4);
       --rs-thumb-c: var(--base-6);
       --rs-thumb-bc: var(--base-1);
+      --rs-thumb-arrow: var(--base-4);
 
       &.primary,
       &.accent,
@@ -288,6 +292,7 @@ $shipRangeSlider: true !default;
         --rs-thumb-bc: var(--base-1);
         --rs-thumb-value-bg: var(--primary-4);
         --rs-thumb-value-c: var(--primary-8);
+        --rs-thumb-arrow: var(--primary-4);
       }
 
       &.accent {
@@ -295,6 +300,7 @@ $shipRangeSlider: true !default;
         --rs-thumb-bc: var(--base-1);
         --rs-thumb-value-bg: var(--accent-4);
         --rs-thumb-value-c: var(--accent-8);
+        --rs-thumb-arrow: var(--accent-4);
       }
 
       &.warn {
@@ -302,6 +308,7 @@ $shipRangeSlider: true !default;
         --rs-thumb-bc: var(--base-1);
         --rs-thumb-value-bg: var(--warn-4);
         --rs-thumb-value-c: var(--warn-8);
+        --rs-thumb-arrow: var(--warn-4);
       }
 
       &.error {
@@ -309,6 +316,7 @@ $shipRangeSlider: true !default;
         --rs-thumb-bc: var(--base-1);
         --rs-thumb-value-bg: var(--error-4);
         --rs-thumb-value-c: var(--error-8);
+        --rs-thumb-arrow: var(--error-4);
       }
 
       &.success {
@@ -316,6 +324,7 @@ $shipRangeSlider: true !default;
         --rs-thumb-bc: var(--base-1);
         --rs-thumb-value-bg: var(--success-4);
         --rs-thumb-value-c: var(--success-8);
+        --rs-thumb-arrow: var(--success-4);
       }
     }
 

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

@@ -14,7 +14,8 @@ $shipSheet: true !default;
 
     border-radius: var(--sheet-s);
     background: var(--sheet-bg);
-    border: 1px solid var(--sheet-bc);
+    border: var(--border-10);
+    border-color: var(--sheet-bc);
     color: var(--sheet-c);
 
     &.sharp {

package/styles/components/ship-sidenav.scss

@@ -36,7 +36,7 @@ $shipSidenav: true !default;
       overflow-y: auto;
       -webkit-overflow-scrolling: auto;
       background-color: var(--base-1);
-      border: 1px solid var(--base-4);
+      border: var(--border-10);
       border-radius: var(--shape-3);
       height: calc(100vh - 2rem);
       box-shadow: var(--box-shadow-35);
@@ -49,7 +49,7 @@ $shipSidenav: true !default;
       align-items: center;
       justify-content: space-between;
       padding: p2r(0 16);
-      border-bottom: 1px solid var(--base-4);
+      border-bottom: var(--border-10);
       z-index: 10000;
       position: relative;
     }
@@ -173,7 +173,7 @@ $shipSidenav: true !default;
       &.open .main-wrap {
         transform: translateX(var(--sidenav-width));
         box-shadow: var(--box-shadow-10);
-        border-left: 1px solid var(--base-4);
+        border-left: var(--border-10);
       }
 
       .closed-topbar {