@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/table.module.scss

@@ -1,386 +1,386 @@
-@use './base/variables' as *;
-@use './base/color' as *;
-
-// ==========================================================
-// EVO-UI TABLE
-// ----------------------------------------------------------
-// A lightweight, theme-aware data table.
-// - Horizontal rules only — no busy vertical grid lines.
-// - Density variants (sm/md/lg) tune padding + type scale.
-// - Sticky headers, striped rows, sortable columns, and a
-//   loading skeleton state — all opt-in.
-// - Two responsive modes for narrow viewports:
-//     `scroll`  — thin overflow scrollbar
-//     `stack`   — rows collapse into labelled cards
-// ==========================================================
-
-.wrapper {
-  width: 100%;
-  background-color: $color-surface-elevated;
-  border: 1px solid $color-border;
-  border-radius: $evo-border-radius-lg;
-  font-family: $font-sans;
-  color: $color-text-primary;
-  // Clip rounded corners against the inner scroll container.
-  overflow: hidden;
-}
-
-.scroll {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-color: $color-border-strong transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: $color-border-strong;
-    border-radius: $radius-full;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-}
-
-.table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  font-size: $text-sm;
-  font-variant-numeric: tabular-nums;
-}
-
-.caption {
-  caption-side: top;
-  text-align: left;
-  padding: 0.75rem 1rem 0;
-  color: $color-text-secondary;
-  font-size: $text-xs;
-}
-
-// ----- Header --------------------------------------------------
-.thead {
-  background-color: $color-surface-sunken;
-}
-
-.th {
-  padding: 0.625rem 1rem;
-  text-align: left;
-  font-size: $text-xs;
-  font-weight: 600;
-  color: $color-text-secondary;
-  white-space: nowrap;
-  border-bottom: 1px solid $color-border;
-  vertical-align: middle;
-  letter-spacing: 0.01em;
-  user-select: none;
-}
-
-.sortBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  border-radius: $radius-sm;
-  transition: color $transition-fast;
-
-  &:hover {
-    color: $color-text-primary;
-  }
-
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 2px;
-  }
-}
-
-.sortIcon {
-  display: inline-flex;
-  color: $color-text-muted;
-  flex-shrink: 0;
-  transition: color $transition-fast;
-}
-
-.sortActive {
-  color: $color-text-primary;
-
-  .sortIcon {
-    color: $evo-primary-color;
-  }
-}
-
-// ----- Body ----------------------------------------------------
-.tbody {
-  .tr {
-    transition: background-color $transition-fast;
-  }
-}
-
-.td {
-  padding: 0.75rem 1rem;
-  color: $color-text-primary;
-  vertical-align: middle;
-  border-bottom: 1px solid $color-border-subtle;
-  text-align: left;
-}
-
-// Drop the last row border so it tucks cleanly into the rounded wrapper.
-.tbody .tr:last-child .td {
-  border-bottom: 0;
-}
-
-// ----- Alignment ----------------------------------------------
-.align-left {
-  text-align: left;
-}
-.align-center {
-  text-align: center;
-}
-.align-right {
-  text-align: right;
-}
-
-// Sort buttons are inline-flex — `text-align` doesn't reach them.
-.align-center .sortBtn {
-  width: 100%;
-  justify-content: center;
-}
-.align-right .sortBtn {
-  width: 100%;
-  justify-content: flex-end;
-}
-
-// ----- Density -------------------------------------------------
-.size-sm {
-  .table {
-    font-size: $text-xs;
-  }
-  .th {
-    padding: 0.375rem 0.75rem;
-  }
-  .td {
-    padding: 0.5rem 0.75rem;
-  }
-}
-
-.size-md {
-  .table {
-    font-size: $text-sm;
-  }
-  .th {
-    padding: 0.625rem 1rem;
-  }
-  .td {
-    padding: 0.75rem 1rem;
-  }
-}
-
-.size-lg {
-  .table {
-    font-size: $text-base;
-  }
-  .th {
-    padding: 0.875rem 1.25rem;
-  }
-  .td {
-    padding: 1rem 1.25rem;
-  }
-}
-
-// ----- Modifiers ----------------------------------------------
-.hoverable .tbody .tr:hover {
-  background-color: $color-surface-hover;
-}
-
-.striped .tbody .tr:nth-child(even) {
-  background-color: $color-surface-sunken;
-}
-
-// Hover wins over stripe.
-.striped.hoverable .tbody .tr:nth-child(even):hover {
-  background-color: $color-surface-hover;
-}
-
-.bordered {
-  .th,
-  .td {
-    &:not(:last-child) {
-      border-right: 1px solid $color-border-subtle;
-    }
-  }
-}
-
-.stickyHeader {
-  .scroll {
-    max-height: 70vh;
-    overflow-y: auto;
-  }
-  .thead .th {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    background-color: $color-surface-sunken;
-  }
-}
-
-.clickable .tbody .tr {
-  cursor: pointer;
-
-  &:active {
-    background-color: $color-surface-active;
-  }
-}
-
-// ----- Empty + Skeleton ---------------------------------------
-.empty {
-  padding: 3rem 1.5rem;
-  text-align: center;
-  color: $color-text-muted;
-  font-size: $text-sm;
-}
-
-.emptyText {
-  display: inline-block;
-}
-
-.skeleton {
-  display: block;
-  height: 0.75rem;
-  width: 70%;
-  border-radius: $radius-sm;
-  background: linear-gradient(
-    90deg,
-    $color-skeleton-base 0%,
-    $color-skeleton-highlight 50%,
-    $color-skeleton-base 100%
-  );
-  background-size: 200% 100%;
-  animation: evoTableShimmer 1.4s ease-in-out infinite;
-}
-
-@keyframes evoTableShimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .skeleton {
-    animation: none;
-  }
-}
-
-// ----- Responsive: stack mode ---------------------------------
-// Below ~640px, transform rows into vertical "cards" where each
-// cell becomes a labelled row. The visual header is removed
-// (kept in DOM, hidden visually, for screen readers).
-.responsiveStack {
-  @media (max-width: 640px) {
-    border: 0;
-    background: transparent;
-    overflow: visible;
-
-    .scroll {
-      overflow: visible;
-    }
-
-    .table,
-    .tbody,
-    .tr {
-      display: block;
-      width: 100%;
-    }
-
-    .thead {
-      // Screen-reader-only — keeps semantics while removing visuals.
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    .tbody .tr {
-      background-color: $color-surface-elevated;
-      border: 1px solid $color-border;
-      border-radius: $evo-border-radius-lg;
-      padding: 0.25rem 0;
-      margin-bottom: 0.75rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      // Empty-state row should look like a single full-width card, not
-      // a normal data row with internal padding.
-      &.emptyRow {
-        padding: 0;
-        margin-bottom: 0;
-      }
-    }
-
-    .td {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      padding: 0.625rem 1rem;
-      border-bottom: 1px dashed $color-border-subtle;
-      text-align: right;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      &::before {
-        content: attr(data-label);
-        font-size: $text-xs;
-        font-weight: 600;
-        color: $color-text-secondary;
-        letter-spacing: 0.02em;
-        text-align: left;
-        flex-shrink: 0;
-      }
-    }
-
-    // Vertical dividers don't apply in stack mode.
-    &.bordered .td:not(:last-child) {
-      border-right: 0;
-    }
-
-    // Reset stripe/hover on the card layout — each row is its own card.
-    &.striped .tbody .tr:nth-child(even),
-    &.hoverable .tbody .tr:hover {
-      background-color: $color-surface-elevated;
-    }
-
-    // In stack mode the empty cell is the only td in its row.
-    // Reset it back to a block so the message stays centred.
-    .empty {
-      display: block;
-      text-align: center;
-      padding: 2.5rem 1rem;
-      border-bottom: 0;
-
-      &::before {
-        content: none;
-      }
-    }
-  }
-}
+@use './base/variables' as *;
+@use './base/color' as *;
+
+// ==========================================================
+// EVO-UI TABLE
+// ----------------------------------------------------------
+// A lightweight, theme-aware data table.
+// - Horizontal rules only — no busy vertical grid lines.
+// - Density variants (sm/md/lg) tune padding + type scale.
+// - Sticky headers, striped rows, sortable columns, and a
+//   loading skeleton state — all opt-in.
+// - Two responsive modes for narrow viewports:
+//     `scroll`  — thin overflow scrollbar
+//     `stack`   — rows collapse into labelled cards
+// ==========================================================
+
+.wrapper {
+  width: 100%;
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $evo-border-radius-lg;
+  font-family: $font-sans;
+  color: $color-text-primary;
+  // Clip rounded corners against the inner scroll container.
+  overflow: hidden;
+}
+
+.scroll {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: $color-border-strong transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $color-border-strong;
+    border-radius: $radius-full;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: $text-sm;
+  font-variant-numeric: tabular-nums;
+}
+
+.caption {
+  caption-side: top;
+  text-align: left;
+  padding: 0.75rem 1rem 0;
+  color: $color-text-secondary;
+  font-size: $text-xs;
+}
+
+// ----- Header --------------------------------------------------
+.thead {
+  background-color: $color-surface-sunken;
+}
+
+.th {
+  padding: 0.625rem 1rem;
+  text-align: left;
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $color-text-secondary;
+  white-space: nowrap;
+  border-bottom: 1px solid $color-border;
+  vertical-align: middle;
+  letter-spacing: 0.01em;
+  user-select: none;
+}
+
+.sortBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  transition: color $transition-fast;
+
+  &:hover {
+    color: $color-text-primary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.sortIcon {
+  display: inline-flex;
+  color: $color-text-muted;
+  flex-shrink: 0;
+  transition: color $transition-fast;
+}
+
+.sortActive {
+  color: $color-text-primary;
+
+  .sortIcon {
+    color: $evo-primary-color;
+  }
+}
+
+// ----- Body ----------------------------------------------------
+.tbody {
+  .tr {
+    transition: background-color $transition-fast;
+  }
+}
+
+.td {
+  padding: 0.75rem 1rem;
+  color: $color-text-primary;
+  vertical-align: middle;
+  border-bottom: 1px solid $color-border-subtle;
+  text-align: left;
+}
+
+// Drop the last row border so it tucks cleanly into the rounded wrapper.
+.tbody .tr:last-child .td {
+  border-bottom: 0;
+}
+
+// ----- Alignment ----------------------------------------------
+.align-left {
+  text-align: left;
+}
+.align-center {
+  text-align: center;
+}
+.align-right {
+  text-align: right;
+}
+
+// Sort buttons are inline-flex — `text-align` doesn't reach them.
+.align-center .sortBtn {
+  width: 100%;
+  justify-content: center;
+}
+.align-right .sortBtn {
+  width: 100%;
+  justify-content: flex-end;
+}
+
+// ----- Density -------------------------------------------------
+.size-sm {
+  .table {
+    font-size: $text-xs;
+  }
+  .th {
+    padding: 0.375rem 0.75rem;
+  }
+  .td {
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+.size-md {
+  .table {
+    font-size: $text-sm;
+  }
+  .th {
+    padding: 0.625rem 1rem;
+  }
+  .td {
+    padding: 0.75rem 1rem;
+  }
+}
+
+.size-lg {
+  .table {
+    font-size: $text-base;
+  }
+  .th {
+    padding: 0.875rem 1.25rem;
+  }
+  .td {
+    padding: 1rem 1.25rem;
+  }
+}
+
+// ----- Modifiers ----------------------------------------------
+.hoverable .tbody .tr:hover {
+  background-color: $color-surface-hover;
+}
+
+.striped .tbody .tr:nth-child(even) {
+  background-color: $color-surface-sunken;
+}
+
+// Hover wins over stripe.
+.striped.hoverable .tbody .tr:nth-child(even):hover {
+  background-color: $color-surface-hover;
+}
+
+.bordered {
+  .th,
+  .td {
+    &:not(:last-child) {
+      border-right: 1px solid $color-border-subtle;
+    }
+  }
+}
+
+.stickyHeader {
+  .scroll {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  .thead .th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: $color-surface-sunken;
+  }
+}
+
+.clickable .tbody .tr {
+  cursor: pointer;
+
+  &:active {
+    background-color: $color-surface-active;
+  }
+}
+
+// ----- Empty + Skeleton ---------------------------------------
+.empty {
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: $color-text-muted;
+  font-size: $text-sm;
+}
+
+.emptyText {
+  display: inline-block;
+}
+
+.skeleton {
+  display: block;
+  height: 0.75rem;
+  width: 70%;
+  border-radius: $radius-sm;
+  background: linear-gradient(
+    90deg,
+    $color-skeleton-base 0%,
+    $color-skeleton-highlight 50%,
+    $color-skeleton-base 100%
+  );
+  background-size: 200% 100%;
+  animation: evoTableShimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes evoTableShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
+// ----- Responsive: stack mode ---------------------------------
+// Below ~640px, transform rows into vertical "cards" where each
+// cell becomes a labelled row. The visual header is removed
+// (kept in DOM, hidden visually, for screen readers).
+.responsiveStack {
+  @media (max-width: 640px) {
+    border: 0;
+    background: transparent;
+    overflow: visible;
+
+    .scroll {
+      overflow: visible;
+    }
+
+    .table,
+    .tbody,
+    .tr {
+      display: block;
+      width: 100%;
+    }
+
+    .thead {
+      // Screen-reader-only — keeps semantics while removing visuals.
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .tbody .tr {
+      background-color: $color-surface-elevated;
+      border: 1px solid $color-border;
+      border-radius: $evo-border-radius-lg;
+      padding: 0.25rem 0;
+      margin-bottom: 0.75rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      // Empty-state row should look like a single full-width card, not
+      // a normal data row with internal padding.
+      &.emptyRow {
+        padding: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .td {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.625rem 1rem;
+      border-bottom: 1px dashed $color-border-subtle;
+      text-align: right;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &::before {
+        content: attr(data-label);
+        font-size: $text-xs;
+        font-weight: 600;
+        color: $color-text-secondary;
+        letter-spacing: 0.02em;
+        text-align: left;
+        flex-shrink: 0;
+      }
+    }
+
+    // Vertical dividers don't apply in stack mode.
+    &.bordered .td:not(:last-child) {
+      border-right: 0;
+    }
+
+    // Reset stripe/hover on the card layout — each row is its own card.
+    &.striped .tbody .tr:nth-child(even),
+    &.hoverable .tbody .tr:hover {
+      background-color: $color-surface-elevated;
+    }
+
+    // In stack mode the empty cell is the only td in its row.
+    // Reset it back to a block so the message stays centred.
+    .empty {
+      display: block;
+      text-align: center;
+      padding: 2.5rem 1rem;
+      border-bottom: 0;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+}