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

package/dist/ssr/overlay-ssr.css

@@ -1,44 +1,3 @@
-/**
- * Optional light-DOM stylesheet for server-rendered pages (Next.js, or
- * any framework/setup without Declarative Shadow DOM for Lit
- * components), covering every closed-by-default overlay/disclosure
- * component in one file : `eun-collapse`, `eun-drawer`, `eun-modal`,
- * `eun-dropdown-button`, and `eun-tooltip`. Each hides its own slotted
- * content only through its own Shadow DOM (a `grid-template-rows: 0fr`
- * panel for collapse, a `popover="manual"`/`popover="auto"` surface for
- * the rest), which doesn't exist yet in server-rendered HTML. That
- * content renders as plain, unstyled light-DOM children instead, on top
- * of everything else on the page, until the element upgrades — the same
- * SSR flash `animate-ssr.css`/`toolbar-ssr.css`/`sidebar-ssr.css`
- * document for their own components, just for content that's meant to
- * stay hidden until something opens it, rather than a starting animation
- * state or a persistent, always-visible layout piece.
- *
- * This stylesheet lives in the host document instead, hiding that exact
- * content through `:not(:defined)`, which is true from first paint and
- * stops matching permanently the moment the browser upgrades the
- * element — handing off to each component's own Shadow DOM at exactly
- * the point it takes over, with no gap.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing whichever of these components the page actually uses :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/overlay-ssr.css"
- *   />
- *
- * `eun-drawer`/`eun-modal` are skipped whenever `open` is written
- * explicitly in the server-rendered markup, so a dialog meant to be
- * visible on first paint (a startup announcement, for instance) still
- * renders — see the `open` attribute on the component's own doc page for
- * the same requirement `animate-ssr.css` documents for `animation`, and
- * `eun-collapse`'s own `open` attribute for the same reasoning there.
- * `eun-dropdown-button`'s own trigger label (its default slot) and
- * `eun-tooltip`'s own trigger (`slot="anchor"`) are never hidden, only
- * their menu/panel content is.
- */
-
 eun-collapse:not(:defined):not([open]) > :not([slot]) {
   display: none;
 }

package/dist/ssr/rich-text.css

@@ -0,0 +1,38 @@
+.eun-rich-text p,
+.eun-rich-text ul {
+  margin-block: 1em;
+}
+
+.eun-rich-text ul {
+  padding-inline-start: 40px;
+  list-style: disc;
+}
+
+.eun-rich-text li {
+  display: list-item;
+}
+
+.eun-rich-text :first-child {
+  margin-block-start: 0;
+}
+
+.eun-rich-text :last-child {
+  margin-block-end: 0;
+}
+
+.eun-rich-text strong {
+  font-weight: bold;
+}
+
+.eun-rich-text em {
+  font-style: italic;
+}
+
+.eun-rich-text u {
+  text-decoration: underline;
+}
+
+.eun-rich-text a {
+  color: var(--rich-text-link-color, var(--eun-color-primary-500, #3d6fff));
+  text-decoration: underline;
+}

package/dist/ssr/sidebar-ssr.css

@@ -1,41 +1,3 @@
-/**
- * Optional light-DOM stylesheet for `<eun-sidebar>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). Closes the same SSR flash described in
- * eun-toolbar's own SSR notes (see `toolbar-ssr.css`), but here it hits
- * every instance, not just a mobile-only panel : `display: flex` and the
- * sidebar's own width live in eun-sidebar's Shadow DOM, which doesn't
- * exist yet in server-rendered HTML. An unregistered custom element
- * defaults to `display: inline` with no layout of its own, so a
- * server-rendered sidebar renders as a plain run of unstyled inline
- * content (header, body, footer flowing one after another) first, then
- * snaps into a proper flex column the instant the element upgrades. A
- * sidebar meant to start `collapsed` (mini or fully hidden) makes this
- * worse : that state lives in the same Shadow DOM too, so it renders at
- * full width first, then shrinks down on upgrade instead of the other
- * way around.
- *
- * This stylesheet lives in the host document instead, mirroring
- * eun-sidebar's own resting layout through `:not(:defined)`, which is
- * true from first paint and stops matching permanently the moment the
- * browser upgrades the element — handing off to eun-sidebar's own Shadow
- * DOM styles at exactly the point they take over, with no gap.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/sidebar.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/sidebar-ssr.css"
- *   />
- *
- * `collapsed`/`collapse-mode`/`dragged-hidden` only take effect here when
- * written explicitly in the server-rendered markup, same requirement
- * `animate-ssr.css` documents for `animation` :
- *
- *   <eun-sidebar collapsed collapse-mode="mini">...</eun-sidebar>
- */
-
 eun-sidebar:not(:defined) {
   display: flex;
   position: sticky;

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;
+    }
+  }