@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/features/table/table/table-native.styles.js

@@ -0,0 +1,502 @@
+import { css } from "lit";
+/**
+ * Light DOM style of the native `<table>` slotted into `eun-table`. A
+ * shadow root can't reach a slotted table's rows and cells, so `eun-table`
+ * adopts this sheet into its own root node (the document, or the shadow
+ * root it lives in) instead. The exact same rules are also published as
+ * `table-ssr.css`, so a server-rendered table looks final before any
+ * script runs.
+ *
+ * Before `eun-table` is defined, the table itself carries the frame the
+ * component later draws around it, so a server-rendered page doesn't
+ * shift once it upgrades. Once defined, the `<caption>` is positioned
+ * above that frame, in the room the host reserves for it.
+ *
+ * Every rule is scoped to `eun-table > table`, so it never touches a table
+ * outside of `eun-table`, and stays at a low specificity a consumer class
+ * overrides easily.
+ *
+ * Every cell paints an opaque background, and the hover and selected tints
+ * are layered on top through an inset `box-shadow` rather than a
+ * background change. That keeps sticky cells opaque in every state while
+ * the tint still transitions smoothly.
+ *
+ * Generated cells carry a data attribute: `data-table-select` for the
+ * selection checkbox column, `data-table-skeleton` for the loading
+ * placeholder body. Consumers mark their row end action cells with
+ * `data-table-action`.
+ */
+export const tableNativeStyles = css `
+  eun-table > table {
+    --_table-select-width: var(--eun-table-select-col-width, 40px);
+    --_table-action-width: var(--eun-table-action-col-width, 56px);
+    --_table-transition: var(
+        --table-row-transition-duration,
+        var(--eun-duration-m, 200ms)
+      )
+      var(--eun-easing-default, ease);
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    box-sizing: border-box;
+    font-size: var(--eun-font-size-s, 13px);
+    color: var(--table-cell-color, var(--eun-text-color, #071621));
+  }
+
+  eun-table > table > caption {
+    caption-side: top;
+    box-sizing: border-box;
+    padding: 0 0 var(--eun-space-s, 8px);
+    text-align: start;
+    font-size: var(--table-caption-font-size, var(--eun-font-size-m, 1rem));
+    font-weight: var(
+      --table-caption-font-weight,
+      var(--eun-font-weight-m, 500)
+    );
+    color: var(--table-caption-color, var(--eun-text-color, #071621));
+  }
+
+  eun-table:not(:defined) {
+    display: block;
+    overflow-x: auto;
+  }
+
+  eun-table:not(:defined) > table {
+    border: var(--eun-border-width-s, 1px) solid
+      var(--table-border-color, var(--eun-border-color, #dee0e7));
+    border-radius: var(--eun-border-radius-m, 10px);
+    background: var(--table-background, var(--eun-surface-color, #ffffff));
+  }
+
+  eun-table:defined > table > caption {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+  }
+
+  eun-table > table > * > tr > :is(th, td) {
+    box-sizing: border-box;
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
+    text-align: start;
+    vertical-align: middle;
+    background-color: var(
+      --table-row-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    --_table-divider-end: var(--table-column-border-color, transparent);
+    --_table-divider-start: transparent;
+    --_table-tint: transparent;
+    box-shadow:
+      inset -1px 0 0 var(--_table-divider-end),
+      inset 1px 0 0 var(--_table-divider-start),
+      inset 0 0 0 9999px var(--_table-tint);
+    border-bottom: var(--eun-border-width-s, 1px) solid
+      var(--table-border-color, var(--eun-border-color, #dee0e7));
+    transition:
+      background-color var(--_table-transition),
+      box-shadow var(--_table-transition);
+  }
+
+  eun-table > table > * > tr > :is(th, td) > eun-icon {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  eun-table > table > * > tr > :is(th, td):last-child {
+    --_table-divider-end: transparent;
+  }
+
+  eun-table > table > :last-child > tr:last-child > :is(th, td) {
+    border-bottom: none;
+  }
+
+  eun-table > table > thead > tr > :is(th, td) {
+    background-color: var(
+      --table-header-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
+    color: var(--table-column-color, var(--eun-text-secondary, #484e61));
+    white-space: nowrap;
+  }
+
+  eun-table > table > tbody > tr > th {
+    font-weight: var(--eun-font-weight-m, 500);
+  }
+
+  eun-table > table > tfoot > tr > :is(th, td) {
+    background-color: var(
+      --table-footer-background,
+      var(--table-row-background, var(--eun-surface-color, #ffffff))
+    );
+    font-weight: var(--eun-font-weight-m, 500);
+  }
+
+  eun-table
+    > table
+    > tbody:not([data-table-skeleton])
+    > tr:not([data-selected]):is(:hover, :focus-within)
+    > :is(th, td) {
+    --_table-tint: var(
+      --table-row-hover-background,
+      var(--eun-content-hover, #edeff0)
+    );
+  }
+
+  eun-table > table > tbody > tr[data-selected] > :is(th, td) {
+    --_table-tint: var(
+      --table-row-selected-background,
+      var(--eun-color-primary-alpha-10, rgba(18, 123, 185, 0.08))
+    );
+  }
+
+  eun-table:is([selectable], [clickable]) > table > tbody > tr {
+    cursor: pointer;
+  }
+
+  eun-table > table > tbody > tr[data-dragging] {
+    position: relative;
+    z-index: 3;
+    cursor: grabbing;
+  }
+
+  eun-table > table > tbody > tr[data-dragging] > :is(th, td) {
+    --_table-tint: var(
+      --table-row-dragging-background,
+      var(--eun-color-primary-alpha-10, rgba(18, 123, 185, 0.08))
+    );
+    border-bottom-color: transparent;
+  }
+
+  eun-table > table > * > tr > [data-table-select] {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    width: var(--_table-select-width);
+    min-width: var(--_table-select-width);
+    padding: 0 0 0 var(--eun-space-s, 8px);
+    text-align: center;
+    background-color: var(
+      --table-sticky-column-background,
+      var(--table-row-background, var(--eun-surface-color, #ffffff))
+    );
+    --_table-divider-end: var(
+      --table-sticky-border-color,
+      var(--table-column-border-color, transparent)
+    );
+  }
+
+  eun-table > table > thead > tr > [data-table-select] {
+    background-color: var(
+      --table-sticky-column-background,
+      var(--table-header-background, var(--eun-surface-color, #ffffff))
+    );
+  }
+
+  eun-table > table [data-table-select] eun-checkbox {
+    vertical-align: middle;
+    font-size: calc(var(--checkbox-size, 16px) + 2px);
+    --checkbox-border-color: var(
+      --table-checkbox-border-color,
+      var(--eun-color-grey-600, #666e8a)
+    );
+    --checkbox-background: var(
+      --table-checkbox-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    --checkbox-background-hover: var(
+      --table-checkbox-hover,
+      var(--eun-color-grey-200, #ecedf0)
+    );
+  }
+
+  eun-table > table > tbody > tr > [data-table-select] eun-checkbox {
+    opacity: 0;
+  }
+
+  eun-table
+    > table
+    > tbody
+    > tr:is(:hover, :focus-within, [data-selected])
+    > [data-table-select]
+    eun-checkbox,
+  eun-table:is([selection-active], [checkbox-always-visible])
+    > table
+    > tbody
+    > tr
+    > [data-table-select]
+    eun-checkbox {
+    opacity: 1;
+  }
+
+  eun-table > table > * > tr > [data-table-action] {
+    width: var(--_table-action-width);
+    min-width: var(--_table-action-width);
+    max-width: var(--_table-action-width);
+    padding-inline-start: 0;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  eun-table > table > tbody > tr > [data-table-action] > * {
+    opacity: 0;
+    --button-text: var(--table-action-color);
+  }
+
+  eun-table
+    > table
+    > tbody
+    > tr:is(:hover, :focus-within)
+    > [data-table-action]
+    > *,
+  eun-table[action-always-visible]
+    > table
+    > tbody
+    > tr
+    > [data-table-action]
+    > *,
+  eun-table > table > tbody > tr > [data-table-action] > [open] {
+    opacity: 1;
+  }
+
+  eun-table[selection-active] > table > tbody > tr > [data-table-action] > * {
+    opacity: 0 !important;
+  }
+
+  @media (hover: none) {
+    eun-table > table > tbody > tr > [data-table-select] eun-checkbox,
+    eun-table > table > tbody > tr > [data-table-action] > * {
+      opacity: 1;
+    }
+  }
+
+  eun-table[sticky-header] > table > thead > tr > :is(th, td) {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+    border-bottom-color: var(
+      --table-sticky-border-color,
+      var(--table-border-color, var(--eun-border-color, #dee0e7))
+    );
+  }
+
+  eun-table[sticky-footer] > table > tfoot > tr > :is(th, td) {
+    position: sticky;
+    bottom: 0;
+    z-index: 3;
+    background-color: var(
+      --table-sticky-row-background,
+      var(
+        --table-footer-background,
+        var(--table-row-background, var(--eun-surface-color, #ffffff))
+      )
+    );
+    border-top: var(--eun-border-width-s, 1px) solid
+      var(
+        --table-sticky-border-color,
+        var(--table-border-color, var(--eun-border-color, #dee0e7))
+      );
+  }
+
+  eun-table[sticky-first-column]
+    > table
+    > *
+    > tr
+    > :is(
+      :first-child:not([data-table-select]),
+      [data-table-select] + :is(th, td)
+    ) {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 2;
+    background-color: var(
+      --table-sticky-column-background,
+      var(--table-row-background, var(--eun-surface-color, #ffffff))
+    );
+    --_table-divider-end: var(
+      --table-sticky-border-color,
+      var(--table-column-border-color, transparent)
+    );
+  }
+
+  eun-table[sticky-first-column]
+    > table
+    > *
+    > tr
+    > [data-table-select]
+    + :is(th, td):not([data-table-select]) {
+    inset-inline-start: var(--_table-select-width);
+  }
+
+  eun-table[sticky-last-column]
+    > table
+    > *
+    > tr
+    > :is(:last-child, :nth-last-child(2):has(+ [data-table-action])) {
+    position: sticky;
+    inset-inline-end: 0;
+    z-index: 2;
+    background-color: var(
+      --table-sticky-column-background,
+      var(--table-row-background, var(--eun-surface-color, #ffffff))
+    );
+    --_table-divider-start: var(
+      --table-sticky-border-color,
+      var(--table-column-border-color, transparent)
+    );
+  }
+
+  eun-table[sticky-last-column]
+    > table
+    > *
+    > tr
+    > :nth-last-child(2):has(+ [data-table-action]) {
+    inset-inline-end: var(--_table-action-width);
+  }
+
+  eun-table[sticky-last-column]
+    > table
+    > *
+    > tr
+    > [data-table-action][data-table-action] {
+    --_table-divider-start: transparent;
+  }
+
+  eun-table[sticky-first-column]
+    > table
+    > thead
+    > tr
+    > :is(
+      :first-child:not([data-table-select]),
+      [data-table-select] + :is(th, td)
+    ),
+  eun-table[sticky-last-column]
+    > table
+    > thead
+    > tr
+    > :is(:last-child, :nth-last-child(2):has(+ [data-table-action])) {
+    background-color: var(
+      --table-sticky-column-background,
+      var(--table-header-background, var(--eun-surface-color, #ffffff))
+    );
+  }
+
+  eun-table[sticky-header] > table > thead > tr > [data-table-select],
+  eun-table[sticky-header][sticky-first-column]
+    > table
+    > thead
+    > tr
+    > :is(
+      :first-child:not([data-table-select]),
+      [data-table-select] + :is(th, td)
+    ),
+  eun-table[sticky-header][sticky-last-column]
+    > table
+    > thead
+    > tr
+    > :is(:last-child, :nth-last-child(2):has(+ [data-table-action])) {
+    z-index: 5;
+  }
+
+  eun-table[loading] > table > tbody:not([data-table-skeleton]) {
+    display: none;
+  }
+
+  eun-table > table > tbody[data-table-skeleton] > tr {
+    opacity: 0;
+    animation: eun-table-skeleton-row-enter
+      var(--table-skeleton-duration, 320ms) var(--eun-easing-default, ease)
+      forwards;
+    animation-delay: calc(
+      var(--table-skeleton-stagger, 60ms) * var(--_row-index, 0)
+    );
+  }
+
+  eun-table > table > tbody[data-table-skeleton] > tr > td {
+    padding-block: var(--eun-space-m, 16px);
+  }
+
+  eun-table > table > tbody[data-table-skeleton] > tr > td[data-table-select] {
+    padding-inline-start: calc(var(--eun-space-s, 8px) + 3px);
+  }
+
+  eun-table > table > tbody[data-table-skeleton] eun-skeleton {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  :where(eun-table[syncing] > table > tbody > tr > :is(th, td)) {
+    position: relative;
+  }
+
+  eun-table[syncing] > table > tbody > tr > :is(th, td)::after {
+    content: "";
+    position: absolute;
+    inset: 0 var(--eun-border-width-s, 1px) var(--eun-border-width-s, 1px);
+    pointer-events: none;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--table-sync-overlay-color, var(--eun-surface-color, #ffffff)) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    background-attachment: fixed;
+    animation: eun-table-row-sync-shimmer var(--table-sync-duration, 1.6s)
+      ease-in-out infinite;
+  }
+
+  eun-table > table > tbody > tr.eun-table-row-spacer > td {
+    padding: 0;
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  eun-table > table > tbody > tr.eun-table-row-spacer > td::after {
+    content: none;
+  }
+
+  .eun-table-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @keyframes eun-table-skeleton-row-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes eun-table-row-sync-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    eun-table > table > tbody[data-table-skeleton] > tr {
+      animation: none;
+      opacity: 1;
+    }
+
+    eun-table[syncing] > table > tbody > tr > :is(th, td)::after {
+      animation: none;
+    }
+  }
+`;