@ship-ui/core 0.19.4 → 0.22.0

package/styles/components/ship-menu.scss

@@ -1,237 +0,0 @@
-@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: var(--border-10);
-        }
-      }
-
-      .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;
-      }
-
-      .popover-content {
-        overflow: hidden;
-      }
-
-      .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;
-
-      sh-menu:first-child,
-      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;
-        height: auto;
-        margin: p2r(0 8);
-        padding: p2r(4 8);
-        gap: p2r(0 8);
-        width: calc(100% - #{p2r(16)});
-        border-radius: var(--shape-2);
-        appearance: none;
-        background-color: transparent;
-        border: 0;
-        cursor: pointer;
-        color: var(--base-12);
-        transition: transform 125ms linear;
-        transform: scale(1);
-
-        &:before {
-          content: '';
-
-          min-height: p2r(24);
-          display: inline-block;
-          width: 0;
-          margin-right: p2r(-8);
-        }
-
-        &:active {
-          transform: scale(0.98);
-        }
-
-        &[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.scss

@@ -1,205 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipPopover: true !default;
-
-@if $shipPopover == true {
-  sh-popover {
-    --po-d: block;
-
-    display: var(--po-d);
-
-    &.multi-layer {
-      .popover-content {
-        position-area: right span-y-end;
-      }
-
-      .trigger .trigger-anchor {
-        right: p2r(-4);
-        left: p2r(-4);
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .trigger {
-      cursor: pointer;
-      display: var(--po-d);
-      position: relative;
-
-      .trigger-wrapper {
-        display: var(--po-d);
-
-        &:empty + * {
-          display: inherit;
-        }
-      }
-
-      .trigger-anchor {
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-      }
-    }
-
-    .popover {
-      position: fixed;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      border: 0;
-      opacity: 1;
-      background-color: transparent;
-      z-index: -1;
-
-      .overlay {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: transparent;
-      }
-    }
-
-    [popover]::backdrop {
-      display: none;
-    }
-
-    .popover-content {
-      position: fixed;
-      margin: 0;
-      min-width: p2r(180);
-      max-width: calc(100vw - #{p2r(8)});
-      max-height: calc(100vh - #{p2r(8)});
-      overflow: auto;
-      z-index: 0;
-      background-color: var(--base-1);
-      border: var(--border-10);
-      border-radius: var(--shape-2);
-      font: var(--paragraph-30);
-      color: var(--base-8);
-      padding: 0;
-
-      @supports (anchor-name: --anchor) {
-        inset: auto;
-        top: p2r(4);
-        position: fixed;
-        position-area: bottom span-right;
-        max-width: unset;
-        max-height: unset;
-        overflow: visible;
-        position-try-fallbacks:
-          --top-span-right, --bottom-span-left, --top-span-left, --right-span-bottom, --left-span-bottom,
-          --right-center, --left-center, --right-span-top, --left-span-top;
-      }
-    }
-
-    @include breakpoint(-milli) {
-      &.as-sheet {
-        .popover {
-          z-index: 9999;
-
-          .overlay {
-            background-color: var(--overlay, rgba(0, 0, 0, 0.5));
-          }
-        }
-
-        .popover-content {
-          @supports (anchor-name: --anchor) {
-            position-area: none;
-            position-try-fallbacks: none;
-            inset: auto;
-          }
-
-          position: fixed;
-          top: auto;
-          bottom: 0;
-          left: p2r(8);
-          right: p2r(8);
-          width: calc(100% - #{p2r(16)});
-          max-width: unset;
-          height: auto;
-          max-height: calc(100vh - #{p2r(80)});
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-          margin: 0;
-          transform: translateY(0);
-          display: flex;
-          align-items: center;
-          padding: p2r(16);
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  .full-popover sh-popover .popover-content,
-  sh-popover.full .popover-content {
-    width: auto;
-
-    @supports (anchor-name: --anchor) {
-      left: anchor(left);
-      right: anchor(right);
-    }
-  }
-}
-
-@position-try --bottom-span-right {
-  position-area: bottom span-right;
-  inset: auto;
-  top: p2r(4);
-}
-
-@position-try --bottom-span-left {
-  position-area: bottom span-left;
-  inset: auto;
-  top: p2r(4);
-}
-
-@position-try --top-span-right {
-  position-area: top span-right;
-  inset: auto;
-  bottom: p2r(4);
-}
-
-@position-try --top-span-left {
-  position-area: top span-left;
-  inset: auto;
-  bottom: p2r(4);
-}
-
-@position-try --right-span-top {
-  position-area: right span-top;
-  inset: auto;
-  left: p2r(4);
-}
-
-@position-try --left-span-top {
-  position-area: left span-top;
-  inset: auto;
-  right: p2r(4);
-}
-
-@position-try --right-center {
-  position-area: right center;
-  inset: auto;
-  left: p2r(4);
-}
-
-@position-try --left-center {
-  position-area: left center;
-  inset: auto;
-  right: p2r(4);
-}
-
-@position-try --right-span-bottom {
-  position-area: right span-bottom;
-  inset: auto;
-  left: p2r(4);
-}
-
-@position-try --left-span-bottom {
-  position-area: left span-bottom;
-  inset: auto;
-  right: p2r(4);
-}

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

@@ -1,173 +0,0 @@
-@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-3);
-    --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: var(--border-10);
-      --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.scss

@@ -1,113 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipRadio: true !default;
-
-@if $shipRadio == true {
-  .sh-radio,
-  sh-radio {
-    --radiod-c: var(--base-8);
-    --radiod-o: 0;
-    --radio-bc: var(--base-4);
-
-    display: flex;
-    align-items: center;
-    gap: p2r(8);
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-
-    &:focus-visible > .radio,
-    &:has(input:focus-visible) > .radio {
-      outline: 2px solid var(--primary-8);
-      outline-offset: 2px;
-    }
-
-    > input {
-      appearance: none;
-      position: absolute;
-      inset: 0;
-      cursor: pointer;
-
-      &:focus,
-      &:focus-visible {
-        outline: none;
-      }
-    }
-
-    &:has(> input:not(.internal-input)) > input.internal-input {
-      display: none;
-    }
-
-    &:has(input[disabled]),
-    &[disabled]:not([disabled='false']) {
-      opacity: 0.5;
-      pointer-events: none;
-      user-select: none;
-      cursor: initial;
-    }
-
-    &:has(input: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%;
-
-      &: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 {
-      --radiod-c: var(--primary-8);
-    }
-
-    &.accent {
-      --radiod-c: var(--accent-8);
-    }
-
-    &.warn {
-      --radiod-c: var(--warn-8);
-    }
-
-    &.error {
-      --radiod-c: var(--error-8);
-    }
-
-    &.success {
-      --radiod-c: var(--success-8);
-    }
-
-    &.flat,
-    &.raised {
-      --radiod-c: #fff;
-    }
-
-    &.raised,
-    &.flat {
-      &:not(:has(input:checked)):not(.active) .radio {
-        background: transparent;
-        border: var(--border-10);
-        border-color: var(--radio-bc);
-      }
-    }
-  }
-}