@ship-ui/core 0.13.2

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

@@ -0,0 +1,217 @@
+@use '../helpers.scss' as *;
+
+$shipMenu: true !default;
+
+@if $shipMenu == true {
+  sh-menu {
+    --menu-mh: #{p2r(320)};
+
+    display: inline-flex;
+    position: relative;
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &.stretch {
+      width: 100%;
+
+      [trigger] > * {
+        width: 100%;
+      }
+    }
+
+    &.has-search {
+      sh-popover .options {
+        [title] {
+          position: sticky;
+          border-bottom: 1px solid var(--base-4);
+        }
+      }
+
+      .form-field-wrap {
+        margin: p2r(8 8 0);
+      }
+
+      .options {
+        margin: p2r(4 0 0);
+      }
+    }
+
+    &.multi-layer {
+      [trigger] {
+        &:has(sh-icon.open-indicator) {
+          &.is-open .open-indicator {
+            transform: translateY(-50%) rotate(-90deg);
+          }
+        }
+
+        &:has(sh-icon.open-indicator) {
+          display: flex;
+
+          .open-indicator {
+            right: p2r(16);
+          }
+        }
+        button:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    [trigger]:has(sh-icon.open-indicator) {
+      position: relative;
+
+      > :first-child {
+        padding-right: p2r(32);
+      }
+
+      .open-indicator {
+        position: absolute;
+        right: p2r(8);
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--base-8);
+        font-size: p2r(16);
+        font-weight: inherit;
+        pointer-events: none;
+        transition: transform 75ms ease-in-out;
+      }
+
+      &.is-open .open-indicator {
+        transform: translateY(-50%) rotate(-180deg);
+      }
+    }
+
+    sh-popover {
+      flex: 1 0;
+
+      .popover {
+        padding: 0;
+      }
+
+      .overlay ~ .form-field-wrap {
+        sh-form-field {
+          z-index: 10;
+          background-color: var(--base-1);
+
+          &.hidden {
+            opacity: 0;
+            height: 0;
+            width: 0;
+            min-width: 0;
+            min-height: 0;
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    sh-popover .options {
+      z-index: 2;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: p2r(4);
+      padding: 0;
+      margin: 0;
+      max-height: var(--menu-mh);
+      overflow: auto;
+
+      button:first-child {
+        margin-top: p2r(8);
+      }
+
+      &.searching {
+        button[disabled] {
+          display: none;
+        }
+
+        button[value='0'] {
+          display: none;
+        }
+
+        *:not(button) {
+          display: none;
+        }
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        width: 100%;
+        min-height: p2r(4);
+        order: 9999999;
+      }
+
+      [title] {
+        font: var(--paragraph-30);
+        color: var(--base-8);
+        padding: p2r(8 12);
+        margin: 0;
+        user-select: none;
+        position: relative;
+        top: 0;
+        z-index: 10;
+        background-color: var(--base-1);
+      }
+
+      button {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        text-align: left;
+        min-height: p2r(32);
+        margin: p2r(0 8);
+        padding: p2r(0 8);
+        gap: p2r(8);
+        width: calc(100% - #{p2r(16)});
+        border-radius: var(--shape-2);
+        appearance: none;
+        background-color: transparent;
+        border: 0;
+        cursor: pointer;
+        color: var(--base-12);
+
+        &[disabled] {
+          opacity: 0.3;
+          cursor: initial;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+
+        [suffix] {
+          order: 999;
+          color: var(--base-8);
+          font: var(--paragraph-30);
+          justify-self: flex-end;
+          display: inline-flex;
+          flex: 1 0;
+          justify-content: flex-end;
+        }
+
+        sh-icon {
+          font-size: p2r(16);
+        }
+
+        &.active,
+        &:hover {
+          background-color: var(--base-2);
+          color: var(--base-12);
+        }
+
+        &.focused {
+          background-color: var(--primary-2);
+          color: var(--base-12);
+
+          &:hover {
+            background-color: var(--primary-3);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@use '../helpers.scss' as *;
+
+$shipPopover: true !default;
+
+@if $shipPopover == true {
+  sh-popover {
+    --po-d: inherit;
+
+    display: var(--po-d);
+
+    &.multi-layer {
+      .popover {
+        top: anchor(top);
+        left: calc(anchor(right) - #{p2r(10)});
+      }
+    }
+
+    .trigger {
+      cursor: pointer;
+      display: var(--po-d);
+      position: relative;
+
+      .trigger-wrapper {
+        display: var(--po-d);
+
+        &:empty + * {
+          display: inherit;
+        }
+      }
+    }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      opacity: 0;
+      z-index: -1;
+    }
+
+    .popover {
+      position: absolute;
+      margin: 0;
+      min-width: p2r(180);
+      z-index: 0;
+      background-color: var(--base-1);
+      border: 1px solid var(--base-4);
+      border-radius: var(--shape-2);
+      font: var(--paragraph-30);
+      color: var(--base-8);
+
+      @supports (anchor-name: --anchor) {
+        inset: unset;
+        left: anchor(left);
+        top: calc(anchor(bottom) + #{p2r(4)});
+        position: fixed;
+        position-try-order:
+          flip-block,
+          flip-inline,
+          flip-block flip-inline;
+        position-try-fallbacks:
+          flip-block,
+          flip-inline,
+          flip-block flip-inline;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,173 @@
+@use '../helpers.scss' as *;
+
+$shipProgressBar: true !default;
+
+@if $shipProgressBar == true {
+  sh-progress-bar {
+    --pb-h: #{p2r(8)};
+    --pb-b: var(--base-4);
+    --pb-bg: var(--base-2);
+    --pb-br: var(--shape-2);
+    --pbt-bg: var(--base-6);
+    --pbt-br: inherit;
+
+    display: block;
+    width: 100%;
+    height: var(--pb-h);
+    position: relative;
+    overflow: hidden;
+
+    border-radius: var(--pb-br);
+    background: var(--pb-bg);
+
+    .progress-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      height: 100%;
+      transform-origin: top left;
+
+      border-radius: var(--pbt-br);
+      background: var(--pbt-bg);
+    }
+
+    &.indeterminate {
+      .progress-bar {
+        right: 0;
+        animation: indeterminate-progress-bar-stripes 2s linear infinite;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--base-2);
+        animation: indeterminate-progress-bar-stripes-background 2s linear infinite;
+        transform-origin: top left;
+      }
+    }
+
+    &.primary {
+      --pbt-bg: var(--primary-8);
+    }
+
+    &.accent {
+      --pbt-bg: var(--accent-8);
+    }
+
+    &.warn {
+      --pbt-bg: var(--warn-8);
+    }
+
+    &.error {
+      --pbt-bg: var(--error-8);
+    }
+
+    &.success {
+      --pbt-bg: var(--success-8);
+    }
+
+    &.outlined {
+      --pb-b: 1px solid var(--base-4);
+      --pb-bg: var(--base-1);
+
+      &:after {
+        background-color: inherit;
+      }
+    }
+
+    &.flat {
+      --pbt-bg: var(--base-8);
+
+      &:after {
+        background-color: inherit;
+      }
+
+      &.primary {
+        --pbt-bg: var(--primary-8);
+      }
+
+      &.accent {
+        --pbt-bg: var(--accent-8);
+      }
+
+      &.warn {
+        --pbt-bg: var(--warn-8);
+      }
+
+      &.error {
+        --pbt-bg: var(--error-8);
+      }
+
+      &.success {
+        --pbt-bg: var(--success-8);
+      }
+    }
+
+    &.raised {
+      --pbt-bg: var(--base-g3);
+
+      &.primary {
+        --pbt-bg: var(--primary-g3);
+      }
+
+      &.accent {
+        --pbt-bg: var(--accent-g3);
+      }
+
+      &.warn {
+        --pbt-bg: var(--warn-g3);
+      }
+
+      &.error {
+        --pbt-bg: var(--error-g3);
+      }
+
+      &.success {
+        --pbt-bg: var(--success-g3);
+      }
+    }
+  }
+
+  @keyframes indeterminate-progress-bar-stripes-background {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(37.651913%);
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(84.386165%);
+    }
+
+    100% {
+      transform: translateX(160.277782%);
+    }
+  }
+
+  @keyframes indeterminate-progress-bar-stripes {
+    0% {
+      transform: translateX(0);
+    }
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0);
+    }
+    59.15% {
+      animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+      transform: translateX(83.67142%);
+    }
+    100% {
+      transform: translateX(200.611057%);
+    }
+  }
+}

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

@@ -0,0 +1,182 @@
+@use '../helpers.scss' as *;
+
+$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);
+
+    display: flex;
+    align-items: center;
+    gap: p2r(8);
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+
+    > input[type='radio'] {
+      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;
+    }
+
+    &:has(input[type='radio']:checked),
+    &.active {
+      --radiod-o: 1;
+    }
+
+    .radio {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: p2r(20);
+      height: p2r(20);
+      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: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        width: p2r(6);
+        height: p2r(6);
+        background-color: var(--radiod-c);
+        opacity: var(--radiod-o);
+        transition: opacity 125ms linear;
+      }
+    }
+
+    &.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);
+      }
+
+      &.success {
+        --radio-bg: var(--success-g2);
+      }
+    }
+  }
+}