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

package/dist/ssr/card-ssr.css

@@ -0,0 +1,196 @@
+eun-card:not(:defined) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap, var(--eun-space-s, 8px));
+  box-sizing: border-box;
+  padding: var(
+    --card-padding,
+    var(--card-padding-block, var(--eun-space-m, 16px))
+      var(--card-padding-inline, var(--eun-space-m, 16px))
+  );
+  border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+  border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
+    var(--card-border-color, var(--eun-border-color, #dee0e7));
+  background: var(--card-background, var(--eun-surface-color, #ffffff));
+  box-shadow: var(--card-shadow, none);
+  color: var(--eun-text-color, #071621);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+}
+eun-card:is([appearance="fill"], [appearance="raised"]):not(:defined) {
+  border-color: var(--card-border-color, transparent);
+}
+eun-card[appearance="fill"]:not(:defined) {
+  background: var(
+    --card-fill-background,
+    var(--card-background, var(--eun-surface-sunken, #f7f8fa))
+  );
+}
+eun-card[appearance="raised"]:not(:defined) {
+  box-shadow: var(
+    --card-shadow,
+    var(--eun-shadow-s, 0 8px 24px rgba(7, 22, 33, 0.12))
+  );
+}
+:where(eun-card:not(:defined)) {
+  position: relative;
+}
+:where(eun-card:not(:defined) > :is(h1, h2, h3, h4, h5, h6, p)) {
+  margin: 0;
+  padding: 0;
+}
+:where(eun-card:not(:defined) > a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+eun-image-card:not(:defined) {
+  --_padBlock: var(
+    --card-padding,
+    var(--card-padding-block, var(--eun-space-m, 16px))
+  );
+  --_padInline: var(
+    --card-padding,
+    var(--card-padding-inline, var(--eun-space-m, 16px))
+  );
+  --_gap: var(--card-gap, var(--eun-space-s, 8px));
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--_gap);
+  padding-block-end: var(--_padBlock);
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+  border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
+    var(--card-border-color, var(--eun-border-color, #dee0e7));
+  background: var(--card-background, var(--eun-surface-color, #ffffff));
+  box-shadow: var(--card-shadow, none);
+  color: var(--eun-text-color, #071621);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+}
+eun-image-card:not(:defined)::before {
+  content: "";
+  order: 1;
+  margin-block-start: calc(var(--_padBlock) - 2 * var(--_gap));
+}
+eun-image-card:not(:has(> [slot="image"])):not(:defined)::before {
+  margin-block-start: calc(var(--_padBlock) - var(--_gap));
+}
+eun-image-card:not(:has(> [slot="title"], > [slot="description"])):not(
+    :defined
+  ) {
+  padding-block-end: 0;
+}
+eun-image-card:not(:has(> [slot="title"], > [slot="description"])):not(
+    :defined
+  )::before {
+  display: none;
+}
+eun-image-card:not(:defined) > [slot="image"] {
+  order: 0;
+  flex: none;
+}
+eun-image-card:not(:defined) > :is([slot="title"], [slot="description"]) {
+  align-self: center;
+  box-sizing: border-box;
+  width: calc(100% - 2 * var(--_padInline));
+}
+eun-image-card:not(:defined) > [slot="title"] {
+  order: 2;
+}
+eun-image-card:not(:defined) > [slot="description"] {
+  order: 3;
+}
+eun-image-card:not(:defined) > :not([slot]) {
+  display: none;
+}
+:where(eun-image-card:not(:defined)) {
+  position: relative;
+}
+:where(eun-image-card:not(:defined) > [slot="image"]) {
+  display: block;
+  width: 100%;
+  height: var(--image-card-image-height, 180px);
+  aspect-ratio: var(--image-card-image-aspect-ratio, auto);
+  object-fit: cover;
+}
+:where(eun-image-card:not(:defined) > a[slot="title"]) {
+  color: inherit;
+  text-decoration: none;
+}
+:where(eun-image-card:not(:defined) > a[slot="title"])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+:where(eun-image-card:not(:defined) > :is(h1, h2, h3, h4, h5, h6, p)) {
+  margin: 0;
+  padding: 0;
+}
+:where(eun-image-card:not(:defined) > [slot="title"]) {
+  font-weight: var(--image-card-title-weight, var(--eun-font-weight-l, 700));
+  font-size: var(--image-card-title-size, var(--eun-font-size-m, 16px));
+  color: var(--image-card-title-color, var(--eun-text-color, #071621));
+}
+:where(eun-image-card:not(:defined) > [slot="description"]) {
+  font-weight: var(
+    --image-card-description-weight,
+    var(--eun-font-weight-s, 300)
+  );
+  font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
+  color: var(
+    --image-card-description-color,
+    var(--eun-text-secondary, #484e61)
+  );
+}
+
+eun-sliding-card:not(:defined) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: var(
+    --sliding-card-padding,
+    var(--sliding-card-padding-block, var(--eun-space-l, 32px))
+      var(--sliding-card-padding-inline, var(--eun-space-l, 32px))
+  );
+  border-radius: var(
+    --sliding-card-border-radius,
+    var(--eun-border-radius-l, 16px)
+  );
+  border: var(--eun-border-width-s, 1px) solid var(--eun-border-color, #dee0e7);
+  background: var(
+    --sliding-card-front-background,
+    var(--eun-surface-color, #ffffff)
+  );
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+}
+:where(eun-sliding-card:not(:defined)) {
+  position: relative;
+  width: var(--sliding-card-width, 300px);
+  height: var(--sliding-card-height, 280px);
+  clip-path: inset(0 0 calc(-1 * var(--sliding-card-fade-height, 60px)) 0);
+}
+eun-sliding-card:not(:defined)::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--sliding-card-fade-height, 60px));
+  height: var(--sliding-card-fade-height, 60px);
+  z-index: 3;
+  pointer-events: none;
+  background: linear-gradient(
+    to top,
+    var(--sliding-card-fade-color, var(--eun-surface-color, #ffffff)) 50%,
+    transparent
+  );
+}
+eun-sliding-card:not(:defined) > [slot="back"] {
+  display: none;
+}
+:where(eun-sliding-card:not(:defined) > :is(h1, h2, h3, h4, h5, h6, p)) {
+  margin: 0;
+  padding: 0;
+}

package/dist/ssr/carousel-ssr.css

@@ -0,0 +1,238 @@
+eun-carousel:not(:defined) {
+  --_visibleCount: 1;
+  --_count: var(--carousel-visible-slides, var(--_visibleCount));
+  --_gap: var(--carousel-gap, 16px);
+  --_basis: var(
+    --carousel-slide-width,
+    max(
+      var(--carousel-min-slide-width, 220px),
+      calc((100% - (var(--_count) - 1) * var(--_gap)) / var(--_count))
+    )
+  );
+  --_navSize: var(--carousel-nav-size, 42px);
+  --_navReserve: calc(
+    2 * var(--_navSize) + var(--eun-space-s, 8px) +
+      var(--carousel-header-gap, var(--eun-space-m, 16px))
+  );
+  --_headerMargin: var(--carousel-header-margin, var(--eun-space-m, 16px));
+  display: grid;
+  grid-template-columns: repeat(var(--_count), var(--_basis));
+  grid-template-rows:
+    auto
+    var(
+      --carousel-track-padding-top,
+      var(--carousel-track-padding, var(--eun-space-l))
+    )
+    auto
+    var(
+      --carousel-track-padding-bottom,
+      var(--carousel-track-padding, var(--eun-space-l))
+    )
+    auto;
+  grid-auto-columns: var(--_basis);
+  column-gap: var(--_gap);
+  overflow: clip;
+  overflow-clip-margin: var(--carousel-track-padding-inline, 0px);
+  container-type: inline-size;
+}
+
+eun-carousel[visible-slides="2"]:not(:defined) {
+  --_visibleCount: 2;
+}
+
+eun-carousel[visible-slides="3"]:not(:defined) {
+  --_visibleCount: 3;
+}
+
+eun-carousel[visible-slides="4"]:not(:defined) {
+  --_visibleCount: 4;
+}
+
+eun-carousel[visible-slides="5"]:not(:defined) {
+  --_visibleCount: 5;
+}
+
+eun-carousel[visible-slides="6"]:not(:defined) {
+  --_visibleCount: 6;
+}
+
+eun-carousel:not(:defined) > :not([slot]) {
+  grid-row: 3;
+  box-sizing: border-box;
+  width: auto;
+  min-width: 0;
+}
+
+eun-carousel:not(:defined) > [slot="title"] {
+  --_titleBasis: var(
+    --carousel-slide-width,
+    max(
+      var(--carousel-min-slide-width, 220px),
+      calc((100cqi - (var(--_count) - 1) * var(--_gap)) / var(--_count))
+    )
+  );
+  --_titleOverflow: calc(
+    var(--_count) * var(--_titleBasis) + (var(--_count) - 1) * var(--_gap) -
+      100cqi
+  );
+  grid-row: 1;
+  grid-column: 1 / -1;
+  align-self: var(--carousel-header-align, flex-end);
+  justify-self: start;
+  max-width: 100cqi;
+  margin-block-end: var(--_headerMargin);
+}
+
+:where(eun-carousel:not(:defined) > [slot="title"]) {
+  margin-block-start: 0;
+  margin-inline: 0 var(--_titleOverflow);
+}
+
+eun-carousel:not(:defined)::before,
+eun-carousel:not(:defined)::after {
+  content: "";
+  display: none;
+  grid-column: 1 / -1;
+}
+
+/* The row the header previous and next buttons take, once upgraded. */
+eun-carousel:not(:defined)::before {
+  grid-row: 1;
+  height: var(--_navSize);
+  margin-block-end: var(--_headerMargin);
+}
+
+/* The row the pagination dots take, once upgraded. */
+eun-carousel:not(:defined)::after {
+  grid-row: 5;
+  height: var(--carousel-dot-size, 6px);
+  margin-block-start: var(--carousel-dots-margin, var(--eun-space-m));
+}
+
+/*
+ * Paged : more slides than fit at once, so the upgraded carousel shows its
+ * dots, and its previous and next buttons.
+ */
+eun-carousel:is(
+    :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+    [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+    [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+    [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+    [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+  ):not(:defined)::after {
+  display: var(--carousel-dots-display, block);
+}
+
+eun-carousel[layout="header"]:is(
+    :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+    [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+    [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+    [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+    [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+  ):not(:defined)::before {
+  display: var(--carousel-nav-display, block);
+}
+
+eun-carousel[layout="header"]:is(
+    :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+    [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+    [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+    [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+    [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+  ):not(:defined)
+  > [slot="title"] {
+  margin-inline-end: calc(var(--_navReserve) + var(--_titleOverflow));
+}
+
+eun-carousel[layout="header"][nav-placement="start"]:is(
+    :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+    [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+    [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+    [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+    [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+  ):not(:defined)
+  > [slot="title"] {
+  justify-self: end;
+  margin-inline: var(--_navReserve) var(--_titleOverflow);
+}
+
+eun-carousel[layout="header"][nav-placement="center"]:is(
+    :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+    [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+    [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+    [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+    [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+    [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+  ):not(:defined)
+  > [slot="title"] {
+  justify-self: center;
+}
+
+@container (width < 480px) {
+  eun-carousel:not([layout="header"], [responsive-breakpoint="0"]):is(
+      :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+      [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+      [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+      [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+      [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+    ):not(:defined)::before {
+    display: var(--carousel-nav-display, block);
+  }
+
+  eun-carousel:not([layout="header"], [responsive-breakpoint="0"]):is(
+      :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+      [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+      [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+      [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+      [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+    ):not(:defined)
+    > [slot="title"] {
+    margin-inline-end: calc(var(--_navReserve) + var(--_titleOverflow));
+  }
+
+  eun-carousel:not(
+      [layout="header"],
+      [responsive-breakpoint="0"]
+    )[nav-placement="start"]:is(
+      :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+      [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+      [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+      [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+      [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+    ):not(:defined)
+    > [slot="title"] {
+    justify-self: end;
+    margin-inline: var(--_navReserve) var(--_titleOverflow);
+  }
+
+  eun-carousel:not(
+      [layout="header"],
+      [responsive-breakpoint="0"]
+    )[nav-placement="center"]:is(
+      :not([visible-slides]):has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="1"]:has(> :nth-child(2 of :not([slot]))),
+      [visible-slides="2"]:has(> :nth-child(3 of :not([slot]))),
+      [visible-slides="3"]:has(> :nth-child(4 of :not([slot]))),
+      [visible-slides="4"]:has(> :nth-child(5 of :not([slot]))),
+      [visible-slides="5"]:has(> :nth-child(6 of :not([slot]))),
+      [visible-slides="6"]:has(> :nth-child(7 of :not([slot])))
+    ):not(:defined)
+    > [slot="title"] {
+    justify-self: center;
+  }
+}

package/dist/ssr/checkbox-ssr.css

@@ -0,0 +1,67 @@
+eun-checkbox:not(:defined) {
+  --_boxSize: var(--checkbox-size, 16px);
+  --_gap: var(--eun-space-s, 8px);
+  display: inline-block;
+  box-sizing: border-box;
+  padding-inline-start: calc(var(--_boxSize) + var(--_gap));
+  overflow-y: clip;
+  vertical-align: middle;
+  color: var(--eun-text-color, #071621);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
+}
+
+eun-checkbox:not(:defined)::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--_boxSize);
+  height: var(--_boxSize);
+  margin-block: -1px calc(7px - var(--_boxSize) / 2);
+  margin-inline: calc(-1 * (var(--_boxSize) + var(--_gap))) var(--_gap);
+  vertical-align: baseline;
+  border: var(--eun-border-width-s, 1px) solid
+    var(--checkbox-border-color, var(--eun-border-color, #dee0e7));
+  border-radius: var(--checkbox-border-radius, var(--eun-border-radius-s, 5px));
+  background: var(--checkbox-background, var(--eun-surface-sunken, #ecedf0));
+}
+
+eun-checkbox:is([checked], [indeterminate]):not(:defined)::before {
+  border-color: var(
+    --checkbox-background-checked,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+  background: var(
+    --checkbox-background-checked,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+}
+
+eun-checkbox[disabled]:not(:defined) {
+  color: var(--eun-text-disabled-color, #8d93aa);
+}
+
+eun-checkbox[disabled]:not(:defined)::before {
+  border-color: var(--eun-border-color, #dee0e7);
+  background: var(--eun-disabled-color, #ecedf0);
+}
+
+eun-checkbox[label]:empty:not(:defined)::after {
+  content: attr(label);
+}
+
+eun-checkbox[required]:not(:defined)::after {
+  content: "*";
+  float: inline-end;
+  padding-block-end: 9999px;
+  margin-block-end: -9999px;
+  color: var(--checkbox-error-color, var(--eun-color-critical-100, #aa0014));
+}
+
+eun-checkbox[label][required]:empty:not(:defined)::after {
+  content: attr(label) "*";
+  float: none;
+  padding-block-end: 0;
+  margin-block-end: 0;
+  color: inherit;
+}