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

package/dist/ssr/table-ssr.css

@@ -0,0 +1,472 @@
+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;
+    }
+  }

package/dist/ssr/tabs-ssr.css

@@ -0,0 +1,129 @@
+eun-tab-group:not(:defined) {
+  --_indicatorHeight: var(--tab-indicator-height, 2px);
+  --_dividerGap: var(--tab-divider-gap, 0px);
+  --_dividerSize: var(--tab-divider-size, 2px);
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--tab-gap, 0);
+  padding-block-start: 4px;
+  background: none;
+}
+
+eun-tab-group:not(:defined)[align="center"] {
+  justify-content: center;
+}
+
+eun-tab-group:not(:defined)[align="end"] {
+  justify-content: flex-end;
+}
+
+eun-tab-group:not(:defined)[full] {
+  justify-content: flex-start;
+}
+
+eun-tab-group:not(:defined) > eun-tab {
+  position: relative;
+  order: 0;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: var(
+    --tab-padding,
+    var(--tab-padding-block, var(--eun-space-s, 8px))
+      var(--tab-padding-inline, var(--eun-space-m, 16px))
+  );
+  border: var(--tab-border);
+  border-radius: var(--tab-border-radius, 8px);
+  background: var(--tab-background-color, transparent);
+  color: var(--tab-text-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+  white-space: nowrap;
+}
+
+eun-tab-group:not(:defined)[full] > eun-tab {
+  flex: 1 1 0%;
+}
+
+eun-tab-group:not(:defined) > eun-tab:first-of-type {
+  margin-inline-start: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab:last-of-type {
+  margin-inline-end: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab[disabled] {
+  display: var(--tab-disabled-display, grid);
+  color: var(--eun-text-disabled-color, #8d93aa);
+}
+
+/* The active tab : the one marked active, or the first one. */
+eun-tab-group:not(:defined) > eun-tab[active],
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab:first-of-type {
+  background: var(--tab-active-background-color, transparent);
+  border: var(--tab-border-active, var(--tab-border));
+  color: var(--tab-active-text-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+eun-tab-group:not(:defined):not([hide-indicator]) > eun-tab[active]::after,
+eun-tab-group:not(:defined):not([hide-indicator], :has(> eun-tab[active]))
+  > eun-tab:first-of-type::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * var(--_dividerGap));
+  height: var(--_indicatorHeight);
+  background: var(--tab-indicator-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+/* The divider under the tab list. */
+eun-tab-group:not(:defined)::before {
+  content: "";
+  order: 1;
+  flex: 0 0 100%;
+  height: var(--_dividerSize);
+  margin-block-start: calc(var(--_dividerGap) - var(--_dividerSize));
+  background: var(--tab-divider-color, var(--eun-divider-color, #dee0e7));
+}
+
+/* Every panel but the active one is hidden, as once upgraded. */
+eun-tab-group:not(:defined) > eun-tab-panel {
+  display: none;
+}
+
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab-panel:first-of-type,
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(1)[active])
+  > eun-tab-panel:nth-of-type(1),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(2)[active])
+  > eun-tab-panel:nth-of-type(2),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(3)[active])
+  > eun-tab-panel:nth-of-type(3),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(4)[active])
+  > eun-tab-panel:nth-of-type(4),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(5)[active])
+  > eun-tab-panel:nth-of-type(5),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(6)[active])
+  > eun-tab-panel:nth-of-type(6),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(7)[active])
+  > eun-tab-panel:nth-of-type(7),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(8)[active])
+  > eun-tab-panel:nth-of-type(8),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(9)[active])
+  > eun-tab-panel:nth-of-type(9),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(10)[active])
+  > eun-tab-panel:nth-of-type(10),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(11)[active])
+  > eun-tab-panel:nth-of-type(11),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(12)[active])
+  > eun-tab-panel:nth-of-type(12) {
+  order: 2;
+  display: block;
+  flex: 0 0 100%;
+  margin-block-start: var(--tab-panel-gap, var(--eun-space-l, 32px));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-panel-font-size, var(--eun-font-size-s, 14px));
+}