@ship-ui/core 0.19.5 → 0.22.2

package/styles/components/ship-table.scss

@@ -1,443 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipTable: true !default;
-
-@mixin caret($color) {
-  border-left: p2r(3) solid $color;
-  border-bottom: p2r(3) solid $color;
-  width: p2r(8);
-  height: p2r(8);
-  transform: rotate(45deg);
-}
-
-@if $shipTable == true {
-  sh-table {
-    --table-bc: var(--base-4);
-    --table-th-bg: var(--base-1);
-    --table-tr-bg: var(--base-1);
-    --table-td-bg: var(--base-1);
-    --table-th-c: var(--base-8);
-    --table-th-f: var(--paragraph-30);
-    --table-td-c: var(--base-8);
-    --table-td-f: var(--paragraph-30);
-    --table-th-p: #{p2r(0 20)};
-    --table-td-p: #{p2r(0 20)};
-    --table-th-mh: #{p2r(48)};
-    --table-td-mh: #{p2r(78)};
-    --table-th-g: #{p2r(4)};
-    --table-td-g: #{p2r(8)};
-    --table-ws: nowrap;
-    --table-th-bw: 0;
-    --table-td-bw: #{p2r(1 0 0)};
-    --table-columns: 1fr 1fr 1fr max-content;
-    --table-sticky-bw: #{p2r(1)};
-
-    &.type-a {
-      tbody,
-      thead {
-        > th,
-        > td {
-          padding-right: 0;
-
-          &:first-child {
-            padding: 0;
-          }
-        }
-      }
-
-      &.scrolled-x.can-scroll-x {
-        [shStickyColumns=''],
-        th.sticky,
-        td.sticky {
-          border-right-width: p2r(1);
-        }
-      }
-
-      &:not(.scrolled-x-end).can-scroll-x {
-        [shStickyColumns='end'],
-        th.sticky-end,
-        td.sticky-end {
-          border-left-width: p2r(1);
-        }
-      }
-    }
-
-    &.type-b {
-      --table-th-p: #{p2r(0 12)};
-      --table-td-p: #{p2r(0 12)};
-      --table-th-mh: #{p2r(36)};
-      --table-td-mh: #{p2r(56)};
-      --table-th-bw: #{p2r(1 0 1 1)};
-      --table-td-bw: #{p2r(0 0 1 1)};
-      --table-th-bg: var(--base-2);
-      --table-sticky-bw: #{p2r(2)};
-
-      th {
-        &:first-child {
-          border-left-width: 0;
-          padding: var(--table-th-p);
-        }
-      }
-
-      td {
-        &:first-child {
-          border-left-width: 0;
-          padding: var(--table-td-p);
-        }
-      }
-
-      [shStickyColumns='end'] {
-        border-left-width: p2r(2);
-      }
-
-      &.scrolled-x {
-        [shStickyColumns=''] {
-          border-right-width: p2r(2);
-        }
-      }
-
-      &.scrolled-x-end {
-        [shStickyColumns='end'] {
-          border-left-width: p2r(1);
-        }
-      }
-
-      td,
-      th {
-        &.sticky {
-          border-left-width: 0;
-          border-right-width: p2r(1);
-        }
-        &.sticky + * {
-          border-left-width: 0;
-        }
-      }
-
-      tr:hover td {
-        background-color: var(--base-2);
-      }
-
-      div[table-header] tr:first-child th {
-        border-bottom: 0;
-      }
-
-      .actionbar {
-        background-color: var(--base-2);
-        border-width: p2r(1 0 0);
-      }
-    }
-
-    width: 100%;
-    display: grid;
-    overflow: auto;
-    grid-template-columns: var(--table-columns);
-    position: relative;
-
-    &.resizing {
-      user-select: none;
-    }
-
-    &:has([shTableResize]) {
-      td {
-        overflow: auto;
-      }
-    }
-
-    &.no-resize {
-      .sh-resizer {
-        display: none;
-      }
-
-      td {
-        overflow: initial;
-      }
-    }
-
-    .actionbar {
-      display: grid;
-      grid-column: 1 / -1;
-      align-items: start;
-      gap: p2r(8);
-      grid-template-rows: 1fr;
-      grid-auto-flow: column;
-      grid-auto-columns: max-content;
-      padding: p2r(8);
-      border: var(--border-10);
-      border-width: p2r(1 0);
-      opacity: 1;
-
-      transition:
-        grid-template-rows 300ms ease-out,
-        padding 300ms ease-out,
-        border-width 300ms ease-out,
-        opacity 300ms ease-out;
-
-      overflow: hidden;
-
-      &:empty {
-        grid-template-rows: 0fr;
-        padding-top: 0;
-        padding-bottom: 0;
-        border-width: 0;
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      & > * {
-        min-height: 0;
-      }
-    }
-
-    tbody {
-      position: relative;
-
-      // &:has(div[table-header].sticky),
-      &:has(tr.sticky) {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-    }
-
-    thead {
-      position: relative;
-
-      &:has(tr.sticky) {
-        position: sticky;
-        top: 0;
-        z-index: 2;
-      }
-    }
-
-    sh-progress-bar {
-      grid-column: 1 / -1;
-      position: absolute;
-      top: 100%;
-      transform: translateY(-50%);
-      z-index: 200;
-    }
-
-    tbody,
-    thead,
-    // div[table-header].sticky,
-    tr {
-      display: grid;
-      grid-column: 1 / -1;
-      grid-template-columns: subgrid;
-    }
-
-    tr {
-      background: var(--table-tr-bg);
-      position: relative;
-      z-index: 0;
-
-      &.sticky {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-
-      &.sticky-end {
-        position: sticky;
-        bottom: 0;
-        z-index: 3;
-      }
-
-      &:has(th.sticky-end) {
-        th:nth-last-child(2) {
-          padding: var(--table-th-p);
-        }
-      }
-
-      &:has(td.sticky-end) {
-        td:nth-last-child(2) {
-          padding: var(--table-td-p);
-        }
-      }
-    }
-
-    th {
-      display: flex;
-      align-items: center;
-      padding: var(--table-th-p);
-      min-height: var(--table-th-mh);
-      font: var(--table-th-f);
-      line-height: 1em;
-      white-space: var(--table-ws);
-      color: var(--table-th-c);
-      border: 0;
-      border-color: var(--table-bc);
-      border-style: solid;
-      border-width: var(--table-th-bw);
-      background: var(--table-th-bg);
-      gap: var(--table-th-g);
-      z-index: 100;
-
-      &:has(.sh-resizer) {
-        position: relative;
-      }
-
-      &.sortable {
-        --caret-color: var(--base-10);
-        --caret-size: #{p2r(6)};
-
-        cursor: pointer;
-        user-select: none;
-
-        &:not(:has(sh-icon)) {
-          &:after {
-            content: '';
-            border: var(--caret-size) solid transparent;
-            width: 0;
-            height: 0;
-            opacity: 0;
-            transition: opacity 125ms ease-in-out;
-          }
-
-          &.sort-desc::after {
-            opacity: 1;
-            transform: translateY(-4px);
-            border-bottom-color: var(--caret-color);
-          }
-
-          &.sort-asc::after {
-            opacity: 1;
-            transform: translateY(4px);
-            border-top-color: var(--caret-color);
-          }
-        }
-      }
-
-      .sh-resizer {
-        width: 10px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        right: 0;
-        cursor: col-resize;
-
-        &:before,
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          height: p2r(12);
-          right: p2r(3);
-          width: p2r(1);
-          background-color: var(--base-4);
-        }
-
-        &:hover {
-          &:before,
-          &:after {
-            background-color: var(--primary-8);
-          }
-        }
-
-        &:before {
-          left: p2r(3);
-        }
-      }
-    }
-
-    td {
-      display: flex;
-      align-items: center;
-      padding: var(--table-td-p);
-      min-height: var(--table-td-mh);
-      gap: var(--table-td-g);
-      color: var(--table-td-c);
-      font: var(--table-td-f);
-      white-space: var(--table-ws);
-      border-color: var(--table-bc);
-      border-style: solid;
-      border-width: var(--table-td-bw);
-      background: var(--table-td-bg);
-
-      + td.sticky-end:last-child {
-        padding: var(--table-td-p);
-      }
-    }
-
-    th,
-    td {
-      &.sticky,
-      &.sticky-end {
-        position: sticky;
-        overflow: hidden;
-        right: auto;
-        left: 0;
-        z-index: 1;
-        padding: var(--table-td-p);
-
-        &:first-child {
-          padding: var(--table-th-p);
-        }
-      }
-
-      &.sticky-end {
-        right: 0;
-        left: auto;
-      }
-    }
-
-    th {
-      &.sticky,
-      &.sticky-end {
-        background: var(--table-th-bg);
-        padding: var(--table-th-p);
-        z-index: 101;
-
-        &:first-child {
-          padding: var(--table-th-p);
-        }
-      }
-    }
-
-    [shStickyColumns] {
-      display: grid;
-      grid-template-columns: subgrid;
-      position: sticky;
-      left: 0;
-      z-index: 1000;
-      border: 0;
-      border-color: var(--table-bc);
-      border-style: solid;
-    }
-
-    [shStickyColumns='end'] {
-      left: auto;
-      right: 0;
-    }
-
-    thead {
-      > [shStickyColumns] {
-        border-width: var(--table-th-bw);
-      }
-    }
-
-    tbody {
-      > [shStickyColumns] {
-        border-width: var(--table-td-bw);
-      }
-    }
-
-    .span-all {
-      grid-column: 1 / -1;
-      white-space: initial;
-      align-items: flex-start;
-      padding: 0;
-      border-left-width: 0;
-    }
-
-    .no-rows {
-      display: none;
-      grid-column: 1 / -1;
-    }
-
-    tbody:empty + .no-rows {
-      display: block;
-    }
-  }
-}

package/styles/components/ship-tabs.scss

@@ -1,125 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipTabs: true !default;
-
-@if $shipTabs == true {
-  sh-tabs {
-    --tabs-bc: var(--base-4);
-    --tabs-bg: var(--base-1);
-    --tabs-c: var(--base-12);
-    --tabs-c-hover: var(--base-8);
-    --tabs-c-active: var(--base-12);
-    --tabs-f: var(--paragraph-30);
-    --tabs-sel-bg: var(--base-12);
-
-    display: flex;
-    gap: p2r(16);
-    border-bottom: var(--border-10);
-    position: relative;
-
-    button,
-    [tab],
-    [value] {
-      display: flex;
-      align-items: center;
-      gap: p2r(8);
-      height: p2r(48);
-      font: var(--tabs-f);
-      background: var(--tabs-bg);
-      border-radius: 0;
-      appearance: none;
-      border: 0;
-      color: var(--tabs-c);
-      cursor: pointer;
-      position: relative;
-
-      transition: transform 125ms linear;
-      transform: scale(1);
-
-      &:focus-visible {
-        outline: 2px solid var(--primary-8);
-        outline-offset: -2px;
-        border-radius: var(--shape-1);
-      }
-
-      &:active {
-        transform: scale(0.98);
-      }
-
-      &:hover {
-        color: var(--tabs-c-hover);
-      }
-
-      &.active {
-        color: var(--tabs-c-active);
-
-        @supports (anchor-name: --anchor) {
-          position: relative;
-          anchor-name: var(--tabs-id);
-        }
-
-        @supports not (anchor-name: --anchor) {
-          &::after {
-            display: block;
-          }
-        }
-      }
-
-      &:after {
-        content: '';
-        display: none;
-        width: 100%;
-        height: p2r(2);
-        background: var(--tabs-sel-bg);
-        position: absolute;
-        left: 0;
-        bottom: 0;
-
-        @supports (anchor-name: --anchor) {
-          display: none;
-        }
-      }
-    }
-
-    @supports (anchor-name: --anchor) {
-      &:after {
-        content: '';
-        background: var(--tabs-sel-bg);
-        pointer-events: none;
-        position: absolute;
-        z-index: 10;
-        height: p2r(2);
-        bottom: anchor(bottom);
-        left: anchor(left);
-        right: anchor(right);
-        position-anchor: var(--tabs-id);
-        transition: all 0.175s ease-out;
-      }
-    }
-
-    &.primary {
-      --tabs-sel-bg: var(--primary-8);
-      --tabs-c-active: var(--primary-8);
-    }
-
-    &.accent {
-      --tabs-sel-bg: var(--accent-8);
-      --tabs-c-active: var(--accent-8);
-    }
-
-    &.warn {
-      --tabs-sel-bg: var(--warn-8);
-      --tabs-c-active: var(--warn-8);
-    }
-
-    &.error {
-      --tabs-sel-bg: var(--error-8);
-      --tabs-c-active: var(--error-8);
-    }
-
-    &.success {
-      --tabs-sel-bg: var(--success-8);
-      --tabs-c-active: var(--success-8);
-    }
-  }
-}

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

@@ -1,41 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipThemeToggle: true !default;
-
-@if $shipThemeToggle == true {
-  ship-theme-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-
-    [shButton].small sh-icon.small-icon {
-      font-size: p2r(10);
-    }
-
-    &:has(sh-icon.small-icon) {
-      [shButton].small {
-        gap: 0;
-      }
-
-      sh-icon:first-child {
-        transform: translate(p2r(-1), p2r(-4));
-      }
-
-      sh-icon:last-child {
-        transform: translate(p2r(1), p2r(4));
-      }
-
-      &:after {
-        content: '';
-        height: p2r(16);
-        width: 1px;
-        background: var(--base-12);
-        position: absolute;
-        inset: 0;
-        margin: auto;
-        transform: rotate(30deg);
-      }
-    }
-  }
-}

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

@@ -1,69 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipToggleCard: true !default;
-
-@if $shipToggleCard == true {
-  sh-toggle-card {
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--shape-3);
-    background-color: var(--base-2);
-
-    &.type-a {
-      background-color: transparent;
-      border: var(--border-10);
-    }
-
-    &.active {
-      .collapsable {
-        grid-template-rows: 1fr;
-      }
-
-      .content {
-        padding: p2r(0 16 16);
-
-        &:empty {
-          padding: p2r(0 16);
-        }
-      }
-
-      sh-icon.toggle-icon {
-        transform: rotate(180deg);
-      }
-    }
-
-    h3 {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font: var(--paragraph-10);
-      padding: p2r(16);
-      cursor: pointer;
-      user-select: none;
-    }
-
-    sh-icon.toggle-icon {
-      cursor: pointer;
-      transform: rotate(0);
-      transform-origin: center;
-      transition: transform 200ms ease;
-    }
-
-    .collapsable {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows 0.5s linear;
-      overflow: hidden;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: p2r(16);
-
-      padding: p2r(0 16);
-      min-height: 0;
-      overflow: hidden;
-    }
-  }
-}