@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251215154321804

package/components/table/table.styles.js

@@ -0,0 +1,788 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const TableStyles = css`
+  /* Host & Container */
+  :host {
+    display: block;
+    font: var(--gds-sys-text-detail-book-s);
+    color: var(--gds-sys-color-content-neutral-01);
+    text-align: left;
+    --_table-height: 80vh;
+    --_table-border-width: var(--gds-sys-space-5xs);
+    --_table-border-color: var(--gds-sys-color-border-subtle-01);
+  }
+
+  /* Density Modes */
+  /* Compact density */
+  .table.compact {
+    --table-cell-padding-y: var(--gds-sys-space-xs);
+    --table-cell-padding-x: var(--gds-sys-space-s);
+    --table-header-padding-y: var(--gds-sys-space-xs);
+    --table-header-padding-x: var(--gds-sys-space-s);
+    --table-row-min-height: var(--gds-sys-space-xl);
+    --table-font-size: var(--gds-sys-text-detail-book-xs);
+    --table-gap: var(--gds-sys-space-m);
+    --table-border-spacing: 0 var(--gds-sys-space-5xs);
+    --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs);
+  }
+
+  /* Comfortable default */
+  .table.comfortable {
+    --table-cell-padding-y: var(--gds-sys-space-s);
+    --table-cell-padding-x: var(--gds-sys-space-m);
+    --table-header-padding-y: var(--gds-sys-space-s);
+    --table-header-padding-x: var(--gds-sys-space-m);
+    --table-row-min-height: var(--gds-sys-space-4xl);
+    --table-font-size: var(--gds-sys-text-detail-book-s);
+    --table-gap: var(--gds-sys-space-xl);
+    --table-border-spacing: 0 var(--gds-sys-space-4xs);
+    --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs);
+  }
+
+  /* Spacious density */
+  .table.spacious {
+    --table-cell-padding-y: var(--gds-sys-space-l);
+    --table-cell-padding-x: var(--gds-sys-space-l);
+    --table-header-padding-y: var(--gds-sys-space-l);
+    --table-header-padding-x: var(--gds-sys-space-l);
+    --table-row-min-height: var(--gds-sys-space-5xl);
+    --table-font-size: var(--gds-sys-text-detail-book-m);
+    --table-gap: var(--gds-sys-space-2xl);
+    --table-border-spacing: 0 var(--gds-sys-space-3xs);
+    --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
+  }
+
+  /* Secondary and Tertiary */
+  .data.variant-secondary,
+  .data.variant-tertiary {
+    --_table-header-bg: var(--gds-sys-color-l2-neutral-01);
+    --_table-header-hover: var(--gds-sys-color-l3-neutral-02);
+    --_table-header-active: var(--gds-sys-color-l3-neutral-03);
+    --_table-row-hover: var(--gds-sys-color-l2-neutral-01);
+    --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
+    --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+  }
+
+  /* Primary variant */
+  .data.variant-primary {
+    --_table-header-bg: var(--gds-sys-color-l2-neutral-02);
+    --_table-header-hover: var(--gds-sys-color-l3-neutral-02);
+    --_table-header-active: var(--gds-sys-color-l3-neutral-03);
+    --_table-row-hover: color-mix(
+      in srgb,
+      var(--gds-sys-color-l3-neutral-02),
+      var(--gds-sys-color-state-neutral-01)
+    );
+    --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03);
+    --_table-row-striped: var(--gds-sys-color-l2-neutral-01);
+  }
+
+  /* Apply density variables */
+  .table {
+    display: flex;
+    flex-direction: column;
+    gap: var(--table-gap);
+    font: var(--table-font-size);
+    width: 100%;
+  }
+
+  /* Container that enables horizontal scroll */
+
+  .data {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: var(--_table-height);
+    box-sizing: border-box;
+    padding: var(--table-data-padding);
+    position: relative;
+    border-radius: var(--gds-sys-radius-m);
+  }
+
+  .data:focus {
+    outline: none;
+  }
+
+  .table-card {
+    outline-color: transparent;
+    outline-offset: var(--gds-sys-space-4xs);
+    outline-style: solid;
+    outline-width: var(--gds-sys-space-4xs);
+  }
+
+  .table-card:has(.data:focus-visible) {
+    outline-color: var(--gds-sys-color-content-neutral-01);
+  }
+
+  .table-card:has(.data:focus-within:not(:focus-visible)) {
+    outline-color: transparent;
+  }
+
+  table {
+    width: max-content;
+    min-width: 100%;
+    table-layout: auto;
+    border: none;
+    border-collapse: separate;
+    border-spacing: var(--table-border-spacing);
+  }
+
+  tbody td {
+    font-weight: normal;
+    padding-block: var(--table-cell-padding-y);
+    padding-inline: var(--table-cell-padding-x);
+  }
+
+  thead tr th:first-child,
+  tbody tr:hover td:first-child,
+  tbody tr.selected td:first-child,
+  .striped tbody tr td:first-child {
+    border-top-left-radius: var(--gds-sys-radius-s);
+    border-bottom-left-radius: var(--gds-sys-radius-s);
+  }
+
+  thead tr th:last-child,
+  tbody tr:hover td:last-child,
+  tbody tr.selected td:last-child,
+  .striped tbody tr td:last-child {
+    border-top-right-radius: var(--gds-sys-radius-s);
+    border-bottom-right-radius: var(--gds-sys-radius-s);
+  }
+
+  /* Table Header */
+
+  thead tr th {
+    padding-block: var(--gds-sys-space-3xs);
+    /*  background: var(--gds-sys-color-l2-neutral-01); */
+    background: var(--_table-header-bg);
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* Column header content layout */
+  .column-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    min-height: var(--gds-sys-space-l);
+    gap: var(--table-gap);
+    padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x);
+    border-radius: var(--gds-sys-radius-xs);
+    transition: all var(--gds-sys-motion-duration-fast);
+  }
+
+  th.sortable .column-header:hover {
+    background-color: var(--_table-header-hover);
+  }
+
+  th.sortable:active .column-header {
+    background-color: var(--_table-header-active);
+  }
+
+  .column-label {
+    font-weight: var(--gds-sys-text-weight-book);
+  }
+
+  .sort-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition-property: opacity;
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-timing-function: var(--gds-sys-motion-easing-ease);
+    opacity: 0;
+  }
+
+  @media (hover: hover) and (min-width: 768px) {
+    thead th.sortable:hover:not(.sorted) .sort-icon {
+      opacity: 0.8;
+    }
+  }
+
+  thead th.sorted .sort-icon {
+    opacity: 1;
+  }
+
+  /* Table Body */
+
+  tbody tr td {
+    border-top-style: solid;
+    border-top-width: var(--_table-border-width);
+    border-top-color: var(--_table-border-color);
+  }
+
+  tbody tr.loading {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  tbody tr.loading:not(:first-child) td {
+    border-color: var(--gds-sys-color-border-subtle-02);
+  }
+
+  /* Row Selection */
+
+  .checkbox-cell {
+    min-width: var(--gds-sys-space-l);
+    width: var(--gds-sys-space-l);
+    max-width: var(--gds-sys-space-l);
+    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+  }
+
+  tbody tr:hover td,
+  tbody tr.selected td,
+  tbody tr:first-child td {
+    border-color: transparent;
+  }
+
+  tbody tr:hover + tr td,
+  tbody tr.selected + tr td {
+    border-color: transparent;
+  }
+
+  tbody tr.selected:last-child td {
+    border-bottom-color: transparent;
+  }
+
+  tbody tr.selected {
+    background-color: var(--gds-sys-color-l3-neutral-02);
+  }
+
+  @media (hover: hover) and (min-width: 768px) {
+    tbody tr.selected:hover {
+      /*     background-color: var(--gds-sys-color-l3-neutral-03); */
+      background-color: var(--_table-row-selected-hover);
+    }
+
+    tbody tr:hover:not(.selected) {
+      /*       background-color: var(--gds-sys-color-l2-neutral-01); */
+      background-color: var(--_table-row-hover);
+    }
+  }
+
+  tbody tr:hover,
+  tbody tr:hover + tr {
+    border-color: transparent;
+  }
+
+  /* Striped */
+  .striped tbody tr:not(.selected, :hover):nth-child(even) td {
+    /*  background-color: var(--gds-sys-color-l2-neutral-01); */
+    background-color: var(--_table-row-striped);
+  }
+
+  .striped tbody tr td {
+    border-color: transparent;
+  }
+
+  /* Header & Footer Layout */
+  .header {
+    display: flex;
+    justify-content: space-between;
+    transition-property: opacity, translate;
+    transition-duration: var(--gds-sys-motion-duration-fast);
+    transition-timing-function: var(--gds-sys-motion-easing-ease);
+
+    @starting-style {
+      opacity: 0;
+      translate: 0 -2px;
+    }
+  }
+
+  /* Shared layout for header and footer sections */
+  .header .lead,
+  .header .trail {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--table-gap) * 0.8);
+    width: max-content;
+  }
+
+  /* Cell Content & Alignment */
+
+  .cell-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  /* Wrapping utilities */
+  td.wrap .cell-content {
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  td.wrap {
+    max-width: var(--cell-width);
+  }
+
+  /* Justify utilities */
+
+  .justify-start .cell-content {
+    text-align: left;
+    justify-content: start;
+  }
+
+  .justify-center .cell-content {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .justify-space-between .cell-content {
+    text-align: left;
+    justify-content: space-between;
+  }
+
+  .justify-end .cell-content {
+    text-align: right;
+    justify-content: flex-end;
+  }
+
+  .sortable.justify-end .column-header {
+    flex-direction: row-reverse;
+  }
+
+  th.actions {
+    padding-inline: 0;
+  }
+
+  th.actions.justify-end .column-header {
+    justify-content: flex-end;
+  }
+
+  /* Align utilities */
+  td {
+    height: 100%;
+  }
+
+  .align-start {
+    vertical-align: top;
+  }
+
+  .align-end {
+    vertical-align: bottom;
+  }
+
+  .align-center {
+    vertical-align: middle;
+  }
+
+  .align-start .cell-content {
+    align-items: start;
+  }
+
+  .align-center .cell-content {
+    align-items: center;
+  }
+
+  .align-stretch .cell-content {
+    align-items: stretch;
+  }
+
+  .align-end .cell-content {
+    align-items: end;
+  }
+
+  /* Responsive Design */
+
+  @media (max-width: 760px) {
+    .responsive.data {
+      display: contents;
+    }
+
+    .responsive thead {
+      position: sticky;
+      top: var(--gds-sys-space-s);
+      z-index: 2;
+      border-radius: var(--gds-sys-radius-s);
+    }
+
+    .responsive thead {
+      display: none;
+    }
+
+    .responsive tbody {
+      display: flex;
+      flex-direction: column;
+      gap: var(--table-gap);
+    }
+
+    .responsive tbody tr {
+      display: flex;
+      flex-direction: column;
+      padding: var(--table-cell-padding-x);
+      border: var(--gds-sys-space-5xs) solid
+        var(--gds-sys-color-border-subtle-01);
+      border-radius: var(--gds-sys-space-s);
+      margin: 0;
+    }
+
+    .responsive tbody tr:hover,
+    .responsive tbody tr:hover + tr {
+      border-color: var(--gds-sys-color-border-subtle-01);
+    }
+
+    .responsive tr.selected {
+      border-color: transparent;
+    }
+
+    .responsive td {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: var(--gds-sys-space-xs) 0;
+      border: none;
+    }
+
+    .responsive td .column-label {
+      text-align: left;
+      margin-right: auto;
+    }
+
+    .responsive td .cell-content {
+      flex: 1;
+    }
+
+    .responsive tr:hover,
+    .responsive tr td:hover {
+      background: none;
+    }
+  }
+
+  /* Medium screens: input and dropdown side by side */
+  /* Medium screens: side by side layout */
+  @media (max-width: 760px) and (min-width: 480px) {
+    .header {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
+        'input dropdown'
+        'lead trail';
+      gap: calc(var(--table-gap) / 2);
+    }
+
+    .header .lead [gds-element='gds-input'] {
+      grid-area: input;
+    }
+
+    .header .trail [gds-element='gds-dropdown'] {
+      grid-area: dropdown;
+    }
+
+    .header .lead ::slotted(*:not([gds-element='gds-input'])) {
+      grid-area: lead;
+    }
+
+    .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) {
+      grid-area: trail;
+    }
+
+    .header .lead,
+    .header .trail {
+      display: contents;
+    }
+  }
+
+  /* Small screens: fully stacked */
+  @media (max-width: 479px) {
+    .header {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'input'
+        'dropdown'
+        'lead'
+        'trail';
+      gap: calc(var(--table-gap) / 2);
+    }
+
+    .header .lead [gds-element='gds-input'] {
+      grid-area: input;
+    }
+
+    .header .trail [gds-element='gds-dropdown'] {
+      grid-area: dropdown;
+    }
+
+    .header .lead ::slotted(*:not([gds-element='gds-input'])) {
+      grid-area: lead;
+    }
+
+    .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) {
+      grid-area: trail;
+    }
+
+    .header .lead,
+    .header .trail {
+      display: contents;
+    }
+  }
+
+  /* Skeleton Loading State */
+  .skeleton {
+    display: inline-block;
+    background: linear-gradient(
+      90deg,
+      var(--gds-sys-color-l3-neutral-01) 25%,
+      var(--gds-sys-color-l2-neutral-01) 50%,
+      var(--gds-sys-color-l3-neutral-01) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: var(--gds-sys-space-max);
+    opacity: 0.1;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /* Skeleton elements */
+  .skeleton-text {
+    height: 14px;
+    width: 80%;
+    min-width: 60px;
+  }
+
+  .skeleton-checkbox {
+    height: 18px;
+    width: 18px;
+    border-radius: var(--gds-sys-radius-3xs);
+  }
+
+  .skeleton-action {
+    height: 24px;
+    width: 24px;
+    border-radius: var(--gds-sys-radius-max);
+  }
+
+  /* Skeleton row styling */
+  .skeleton-row {
+    opacity: 1;
+    pointer-events: none;
+  }
+
+  .skeleton-row td {
+    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+  }
+
+  /* Different skeleton text widths for more natural look */
+  .skeleton-row:nth-child(odd) .skeleton-text {
+    width: 70%;
+  }
+
+  .skeleton-row:nth-child(3n) .skeleton-text {
+    width: 90%;
+  }
+
+  .skeleton-row:nth-child(4n) .skeleton-text {
+    width: 60%;
+  }
+
+  /* Visually hidden */
+  .visually-hidden {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  /* Scroll driven animation */
+  @supports (animation-timeline: scroll()) {
+    @media (prefers-reduced-motion: no-preference) {
+      tbody tr {
+        animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL;
+        animation-fill-mode: both;
+        animation-timing-function: ease-in-out;
+        animation-direction: normal, reverse;
+        animation-timeline: view(block);
+        animation-range:
+          entry -40px,
+          exit -40px;
+      }
+
+      @keyframes ROW_ANIMATION_VERTICAL {
+        0% {
+          opacity: 0;
+          filter: blur(12px);
+          translate: 0 12px;
+        }
+      }
+
+      /* tbody td .cell-content,
+    thead th .column-header { 
+      animation-name: CELL_ANIMATION_HORIZONTAL, CELL_ANIMATION_HORIZONTAL;
+      animation-fill-mode: both;
+      animation-timing-function: ease-in-out;
+      animation-direction: normal, reverse;
+      animation-timeline: view(inline);
+      animation-range: entry, exit;
+    }
+
+    @keyframes CELL_ANIMATION_HORIZONTAL {
+      0% {
+        opacity: 0.8;
+        filter: blur(12px);
+        translate: 4px 0px;
+      }
+    } */
+
+      thead {
+        position: sticky;
+        top: 4px;
+        z-index: 10;
+        transition: box-shadow 200ms ease;
+        border-radius: var(--gds-sys-radius-s);
+        will-change: transform;
+      }
+
+      thead {
+        background-color: var(--gds-sys-color-l1-neutral-01);
+      }
+
+      .data.scrolled thead {
+        box-shadow:
+          var(--gds-sys-shadow-l-01),
+          var(--gds-sys-shadow-l-02),
+          inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01);
+        backdrop-filter: blur(8px);
+        background: color-mix(
+          in srgb,
+          var(--gds-sys-color-l2-neutral-01),
+          transparent 30%
+        );
+      }
+
+      @media (prefers-reduced-transparency: no-preference) {
+        .data.scrolled thead tr th {
+          background: transparent;
+        }
+      }
+
+      /* Horizontal scroll */
+      @property --_inline-start-fade {
+        syntax: '<length>';
+        inherits: false;
+        initial-value: 0;
+      }
+
+      @property --_inline-end-fade {
+        syntax: '<length>';
+        inherits: false;
+        initial-value: 0;
+      }
+
+      @keyframes table-scroll-inline-fade {
+        0% {
+          --_inline-start-fade: 0;
+        }
+        10%,
+        100% {
+          --_inline-start-fade: var(--gds-sys-space-4xl);
+        }
+        0%,
+        90% {
+          --_inline-end-fade: var(--gds-sys-space-4xl);
+        }
+        100% {
+          --_inline-end-fade: 0;
+        }
+      }
+
+      .data {
+        overflow-x: scroll;
+        mask: linear-gradient(
+          to right,
+          #0000,
+          #ffff var(--_inline-start-fade) calc(100% - var(--_inline-end-fade)),
+          #0000
+        );
+        animation: table-scroll-inline-fade;
+        animation-timeline: --table-scroll-inline-fade;
+        scroll-timeline: --table-scroll-inline-fade x;
+      }
+    }
+  }
+
+  @media (max-width: 760px) {
+    .responsive,
+    .responsive tbody tr {
+      animation: none;
+    }
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    tbody tr {
+      will-change: opacity, filter, translate;
+      transition: all 242ms cubic-bezier(0.22, 0.61, 0.36, 1);
+
+      @starting-style {
+        opacity: 0;
+        filter: blur(20px);
+        translate: 0 10px;
+      }
+    }
+  }
+
+  /* Scrollbar */
+  .data {
+    --_scrollbar-color-thumb: var(--gds-sys-color-l3-neutral-01);
+    --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02);
+    --_scrollbar-width: var(--gds-sys-space-2xs);
+  }
+
+  @supports (scrollbar-width: auto) {
+    .data {
+      scrollbar-color: var(--_scrollbar-color-thumb) transparent;
+      scrollbar-width: var(--_scrollbar-width);
+    }
+  }
+
+  @supports selector(::-webkit-scrollbar) {
+    .data::-webkit-scrollbar {
+      width: var(--_scrollbar-width);
+      height: var(--_scrollbar-width);
+    }
+
+    .data::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .data::-webkit-scrollbar-thumb {
+      background: var(--_scrollbar-color-thumb);
+      border-radius: var(--gds-sys-radius-max);
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    tbody tr,
+    tbody td .cell-content,
+    thead th .column-header,
+    .sort-icon,
+    .column-header,
+    .header {
+      transition: none;
+      animation: none;
+    }
+  }
+`;
+export {
+  TableStyles
+};