@ship-ui/core 0.13.2

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

@@ -0,0 +1,238 @@
+@use '../helpers.scss' as *;
+
+$shipToggle: true !default;
+
+@if $shipToggle == true {
+  sh-toggle {
+    --toggle-bg: var(--base-4);
+    --toggle-b: 0;
+    --togglek-bg: var(--base-2);
+    --togglek-bs: var(--box-shadow-20);
+
+    display: flex;
+    align-items: center;
+    gap: p2r(8);
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: p2r(8);
+      position: relative;
+      z-index: 1;
+    }
+
+    .box {
+      display: block;
+      width: p2r(34);
+      height: p2r(20);
+      cursor: pointer;
+      position: relative;
+      border-radius: 999px;
+      background: var(--toggle-bg);
+      border: var(--toggle-b);
+      transition: background 150ms linear;
+    }
+
+    > input[type='checkbox'] {
+      appearance: none;
+      position: absolute;
+      inset: 0;
+      cursor: pointer;
+      z-index: 0;
+    }
+
+    &:has(input[disabled]),
+    &[disabled]:not([disabled='false']) {
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: none;
+      cursor: initial;
+    }
+
+    .knob {
+      position: absolute;
+      top: p2r(2);
+      left: p2r(2);
+      width: p2r(16);
+      height: p2r(16);
+      border-radius: 50%;
+      background: var(--togglek-bg);
+      box-shadow: var(--togglek-bs);
+      box-sizing: border-box;
+      transition: left 125ms ease-in-out;
+    }
+
+    &:has(input[type='checkbox']:checked),
+    &.active {
+      --togglek-bg: var(--base-8);
+
+      .knob {
+        left: p2r(16);
+      }
+
+      &.primary {
+        --toggle-bg: var(--primary-3);
+        --togglek-bg: var(--primary-8);
+      }
+
+      &.accent {
+        --toggle-bg: var(--accent-3);
+        --togglek-bg: var(--accent-8);
+      }
+
+      &.warn {
+        --toggle-bg: var(--warn-3);
+        --togglek-bg: var(--warn-8);
+      }
+
+      &.error {
+        --toggle-bg: var(--error-3);
+        --togglek-bg: var(--error-8);
+      }
+
+      &.success {
+        --toggle-bg: var(--success-3);
+        --togglek-bg: var(--success-8);
+      }
+    }
+
+    &.outlined {
+      --toggle-bg: var(--base-1);
+      --togglek-bg: var(--base-5);
+      --togglek-bs: none;
+      --toggle-b: 1px solid var(--base-5);
+
+      .knob {
+        width: p2r(14);
+        height: p2r(14);
+      }
+
+      &.active {
+        --togglek-bg: var(--base-8);
+        --toggle-b: 1px solid var(--base-8);
+
+        &.primary {
+          --togglek-bg: var(--primary-8);
+          --toggle-b: 1px solid var(--primary-8);
+        }
+
+        &.accent {
+          --togglek-bg: var(--accent-8);
+          --toggle-b: 1px solid var(--accent-8);
+        }
+
+        &.warn {
+          --togglek-bg: var(--warn-8);
+          --toggle-b: 1px solid var(--warn-8);
+        }
+
+        &.error {
+          --togglek-bg: var(--error-8);
+          --toggle-b: 1px solid var(--error-8);
+        }
+
+        &.success {
+          --togglek-bg: var(--success-8);
+          --toggle-b: 1px solid var(--success-8);
+        }
+      }
+    }
+
+    &.simple {
+      --togglek-bg: #fff;
+
+      &:has(input[type='checkbox']:checked),
+      &.active {
+        --togglek-bg: var(--base-8);
+
+        &.primary {
+          --togglek-bg: var(--primary-8);
+          --toggle-bg: var(--primary-3);
+        }
+
+        &.accent {
+          --togglek-bg: var(--accent-8);
+          --toggle-bg: var(--accent-3);
+        }
+
+        &.warn {
+          --togglek-bg: var(--warn-8);
+          --toggle-bg: var(--warn-3);
+        }
+
+        &.error {
+          --togglek-bg: var(--error-8);
+          --toggle-bg: var(--error-3);
+        }
+
+        &.success {
+          --togglek-bg: var(--success-8);
+          --toggle-bg: var(--success-3);
+        }
+      }
+    }
+
+    &.flat {
+      --togglek-bg: #fff;
+
+      &:has(input[type='checkbox']:checked),
+      &.active {
+        --togglek-bg: #fff;
+        --toggle-bg: var(--base-8);
+
+        &.primary {
+          --toggle-bg: var(--primary-8);
+        }
+
+        &.accent {
+          --toggle-bg: var(--accent-8);
+        }
+
+        &.warn {
+          --toggle-bg: var(--warn-8);
+        }
+
+        &.error {
+          --toggle-bg: var(--error-8);
+        }
+
+        &.success {
+          --toggle-bg: var(--success-8);
+        }
+      }
+    }
+
+    &.raised {
+      --togglek-bg: #fff;
+
+      &:has(input[type='checkbox']:checked),
+      &.active {
+        --toggle-bg: var(--base-g2);
+        --togglek-bg: #fff;
+
+        &.primary {
+          --toggle-bg: var(--primary-g2);
+        }
+
+        &.accent {
+          --toggle-bg: var(--accent-g2);
+        }
+
+        &.warn {
+          --toggle-bg: var(--warn-g2);
+        }
+
+        &.error {
+          --toggle-bg: var(--error-g2);
+        }
+
+        &.success {
+          --toggle-bg: var(--success-g2);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,175 @@
+@use '../helpers.scss' as *;
+
+$shTooltip: true !default;
+
+%hoverState {
+  opacity: 1;
+  z-index: 0;
+  visibility: visible;
+}
+@if $shTooltip == true {
+  .tooltip {
+    position: relative;
+    pointer-events: initial !important;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: p2r(-8);
+      bottom: p2r(-8);
+      left: p2r(-8);
+      right: p2r(-8);
+      z-index: 1;
+    }
+
+    &.primary + ship-tooltip-wrapper {
+      --tt-bg: var(--primary-2);
+      --tt-c: var(--primary-8);
+    }
+
+    &.accent + ship-tooltip-wrapper {
+      --tt-bg: var(--accent-2);
+      --tt-c: var(--accent-8);
+    }
+
+    &.warn + ship-tooltip-wrapper {
+      --tt-bg: var(--warn-2);
+      --tt-c: var(--warn-8);
+    }
+
+    &.error + ship-tooltip-wrapper {
+      --tt-bg: var(--error-2);
+      --tt-c: var(--error-8);
+    }
+
+    &.success + ship-tooltip-wrapper {
+      --tt-bg: var(--success-2);
+      --tt-c: var(--success-8);
+    }
+
+    &.active {
+      z-index: 1;
+      + ship-tooltip-wrapper {
+        @extend %hoverState;
+        // transform: translateY(-#{p2r(8)}) scale(1);
+        // &.below {
+        //   transform: translateY(#{p2r(8)}) scale(1);
+        // }
+
+        transform: scale(1);
+      }
+    }
+  }
+
+  ship-tooltip-wrapper {
+    --tt-bg: var(--base-3);
+    --tt-c: var(--base-12);
+    --tt-mh: #{p2r(136)};
+    --tt-mw: #{p2r(280)};
+
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    padding: p2r(0 0 12);
+    transform: translateY(50%) scale(0);
+
+    width: max-content;
+    overflow: visible;
+    box-shadow: none;
+    margin: initial;
+    background: transparent;
+    border: 0;
+
+    @supports (anchor-name: --anchor) {
+      inset: unset;
+      justify-self: anchor-center;
+      bottom: anchor(top);
+      position: fixed;
+      position-try-order:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: 0%;
+      left: 50%;
+      z-index: 1;
+      transform: translateX(-50%);
+      border-width: p2r(6);
+      border-style: solid;
+      border-color: transparent;
+      border-top-color: var(--tt-bg);
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+
+    &.below {
+      padding: p2r(12 0 0);
+      &:before {
+        border-top-color: transparent;
+        border-bottom-color: var(--tt-bg);
+        top: 0%;
+        bottom: auto;
+      }
+    }
+
+    .tooltip-content {
+      padding: p2r(8 12);
+      position: relative;
+      hyphens: auto;
+      text-wrap: pretty;
+      color: var(--tt-c);
+      max-height: var(--tt-mh);
+      max-width: var(--tt-mw);
+      overflow: auto;
+      // background: none;
+      background: var(--tt-bg);
+      border-radius: var(--shape-2);
+      box-shadow: var(--box-shadow-20);
+    }
+
+    // @position-fallback --dropdown-flip-and-slide {
+    //   /* Attempt 1: Position below and align to the start (left) of the trigger */
+    //   @try {
+    //     top: calc(anchor(bottom) + 8px); /* 8px gap */
+    //     left: anchor(left);
+    //   }
+    //   /* Attempt 2: Position above and align to the start (left) of the trigger */
+    //   @try {
+    //     bottom: calc(anchor(top) + 8px); /* 8px gap */
+    //     left: anchor(left);
+    //   }
+    //   /* Attempt 3: Position below and align to the end (right) of the trigger */
+    //   @try {
+    //     top: calc(anchor(bottom) + 8px);
+    //     right: anchor(right);
+    //   }
+    //   /* Attempt 4: Position above and align to the end (right) of the trigger */
+    //   @try {
+    //     bottom: calc(anchor(top) + 8px);
+    //     right: anchor(right);
+    //   }
+    //   /* Attempt 5: (More advanced) If it's too wide, try to align center, below */
+    //   @try {
+    //     top: calc(anchor(bottom) + 8px);
+    //     left: anchor(center);
+    //     /* This might need more constraints or a width calculation if it's wider than anchor */
+    //     transform: translateX(-50%); /* Center it based on its own width */
+    //   }
+    //   /* Attempt 6: (More advanced) If it's too wide, try to align center, above */
+    //   @try {
+    //     bottom: calc(anchor(top) + 8px);
+    //     left: anchor(center);
+    //     transform: translateX(-50%);
+    //   }
+    // }
+  }
+}

package/styles/components/ship-virtual-scroll.component.scss

@@ -0,0 +1,12 @@
+@use '../helpers.scss' as *;
+
+$shipVirtualScroll: false !default;
+
+@if $shipVirtualScroll == true {
+  sh-virtual-scroll {
+    overflow-y: auto;
+    position: relative;
+    display: block;
+    height: 600px;
+  }
+}

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

@@ -0,0 +1,245 @@
+@use '../helpers.scss' as *;
+
+$shipCheckbox: true !default;
+
+@if $shipCheckbox == true {
+  sh-checkbox {
+    --box-bw: #{p2r(1)};
+    --box-bc: var(--base-4);
+    --box-c: var(--base-8);
+    --box-bg: var(--base-2);
+
+    display: flex;
+    align-items: center;
+    gap: p2r(8);
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+
+    > input[type='checkbox'] {
+      appearance: none;
+      position: absolute;
+      inset: 0;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &:has(input[disabled]),
+    &[disabled]:not([disabled='false']) {
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: none;
+      cursor: initial;
+    }
+
+    .box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: p2r(20);
+      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;
+        font-weight: bold;
+        transition: opacity 75ms linear;
+
+        &.indeterminate-indicator {
+          display: none;
+        }
+      }
+    }
+
+    &.indeterminate {
+      .box sh-icon {
+        &.indeterminate-indicator {
+          display: block;
+        }
+
+        &.default-indicator {
+          display: none;
+        }
+      }
+    }
+
+    &:has(input[type='checkbox']:checked),
+    &.indeterminate,
+    &.active {
+      .box sh-icon {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .box sh-icon {
+        opacity: 0.5;
+      }
+    }
+
+    &.primary {
+      --box-c: var(--primary-8);
+    }
+
+    &.accent {
+      --box-c: var(--accent-8);
+    }
+
+    &.warn {
+      --box-c: var(--warn-8);
+    }
+
+    &.error {
+      --box-c: var(--error-8);
+    }
+
+    &.success {
+      --box-c: var(--success-8);
+    }
+
+    &.simple,
+    &.outlined {
+      --box-bg: var(--base-3);
+      --box-bc: var(--base-6);
+
+      &.primary {
+        --box-bg: var(--primary-3);
+        --box-bc: var(--primary-6);
+      }
+
+      &.accent {
+        --box-bg: var(--accent-3);
+        --box-bc: var(--accent-6);
+      }
+
+      &.warn {
+        --box-bg: var(--warn-3);
+        --box-bc: var(--warn-6);
+      }
+
+      &.error {
+        --box-bg: var(--error-3);
+        --box-bc: var(--error-6);
+      }
+
+      &.success {
+        --box-bg: var(--success-3);
+        --box-bc: var(--success-6);
+      }
+    }
+
+    &.simple {
+      --box-bc: var(--box-bg);
+
+      &.primary,
+      &.accent,
+      &.warn,
+      &.error,
+      &.success {
+        --box-bc: var(--box-bg);
+      }
+    }
+
+    &.flat,
+    &.raised {
+      &.primary,
+      &.accent,
+      &.warn,
+      &.error,
+      &.success {
+        --box-bc: var(--base-4);
+        --box-c: var(--base-8);
+        --box-bg: var(--base-2);
+      }
+    }
+
+    &.flat:has(input[type='checkbox']:checked),
+    &.flat.indeterminate,
+    &.flat.active {
+      @extend %flat;
+    }
+
+    &.raised:has(input[type='checkbox']:checked),
+    &.raised.indeterminate,
+    &.raised.active {
+      @extend %raised;
+    }
+  }
+
+  .ship-popup-menu sh-option[selected] {
+    sh-checkbox {
+      sh-icon {
+        opacity: 1;
+      }
+
+      &.flat {
+        @extend %flat;
+      }
+
+      &.raised {
+        @extend %raised;
+      }
+    }
+  }
+
+  %flat {
+    --box-bw: 0;
+    --box-bg: var(--base-8);
+    --box-c: #fff;
+
+    &.primary {
+      --box-bg: var(--primary-8);
+    }
+
+    &.accent {
+      --box-bg: var(--accent-8);
+    }
+
+    &.warn {
+      --box-bg: var(--warn-8);
+    }
+
+    &.error {
+      --box-bg: var(--error-8);
+    }
+
+    &.success {
+      --box-bg: var(--success-8);
+    }
+  }
+
+  %raised {
+    --box-bw: 0;
+    --box-bg: var(--base-g2);
+    --box-c: #fff;
+
+    &.primary {
+      --box-bg: var(--primary-g2);
+    }
+
+    &.accent {
+      --box-bg: var(--accent-g2);
+    }
+
+    &.warn {
+      --box-bg: var(--warn-g2);
+    }
+
+    &.error {
+      --box-bg: var(--error-g2);
+    }
+
+    &.success {
+      --box-bg: var(--success-g2);
+    }
+  }
+}