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

package/dist/ssr/alert-ssr.css

@@ -0,0 +1,187 @@
+eun-alert:not(:defined) {
+  --_background: var(--eun-surface-sunken, #f7f8fa);
+  --_backgroundFilled: var(--_background);
+  --_borderColor: var(--eun-color-grey-300, #dee0e7);
+  --_titleColor: var(--eun-text-color, #071621);
+  --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
+  --_frame: transparent;
+  --_textColumn: 2;
+  --_contentColor: var(--alert-content-color, var(--eun-text-color, #071621));
+  --_headingColor: var(--alert-color, var(--_titleColor));
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  column-gap: var(--alert-gap, var(--eun-space-m, 16px));
+  row-gap: var(--alert-row-gap, var(--eun-space-s, 8px));
+  box-sizing: border-box;
+  width: 100%;
+  border: var(--_bw) solid var(--alert-border-color, var(--_frame));
+  padding: var(
+    --alert-padding,
+    var(
+        --alert-padding-block,
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      )
+      var(
+        --alert-padding-inline,
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      )
+  );
+  border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+  background: linear-gradient(
+      to right,
+      var(--alert-border-color, var(--_borderColor)) 4px,
+      var(--alert-background-color, var(--_background)) 4px
+    )
+    border-box;
+  color: var(--_headingColor);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  font-weight: var(--eun-font-weight-l, 700);
+}
+
+eun-alert[severity="info"]:not(:defined) {
+  --_background: var(--eun-color-info-alpha-5, #097faf0d);
+  --_backgroundFilled: var(--eun-color-info-100, #097faf);
+  --_borderColor: var(--eun-color-info-100, #097faf);
+  --_titleColor: var(--eun-color-info-100, #097faf);
+}
+
+eun-alert[severity="success"]:not(:defined) {
+  --_background: var(--eun-color-success-alpha-5, #1a99480d);
+  --_backgroundFilled: var(--eun-color-success-100, #1a9948);
+  --_borderColor: var(--eun-color-success-100, #1a9948);
+  --_titleColor: var(--eun-color-success-100, #1a9948);
+}
+
+eun-alert[severity="warning"]:not(:defined) {
+  --_background: var(--eun-color-warning-alpha-5, #c852070d);
+  --_backgroundFilled: var(--eun-color-warning-100, #c85207);
+  --_borderColor: var(--eun-color-warning-100, #c85207);
+  --_titleColor: var(--eun-color-warning-100, #c85207);
+}
+
+eun-alert[severity="critical"]:not(:defined) {
+  --_background: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
+  --_borderColor: var(--eun-color-critical-100, #aa0014);
+  --_titleColor: var(--eun-color-critical-100, #aa0014);
+}
+
+eun-alert[severity="neutral"]:not(:defined) {
+  --_onFilled: var(--eun-color-grey-0, #ffffff);
+  --_background: var(--eun-surface-sunken-strong, #ecedf0);
+  --_backgroundFilled: var(--eun-color-grey-700, #484e61);
+  --_borderColor: var(--eun-color-grey-700, #484e61);
+  --_titleColor: var(--eun-color-grey-700, #484e61);
+}
+
+eun-alert[appearance="flat"]:not(:defined) {
+  background: var(--alert-background-color, var(--_background));
+}
+
+eun-alert[appearance="outline"]:not(:defined) {
+  --_frame: var(--_borderColor);
+  background: var(--alert-background-color, var(--eun-surface-color, #ffffff));
+}
+
+eun-alert[appearance="fill"]:not(:defined) {
+  --_contentColor: var(--alert-content-color, var(--_onFilled, #fff));
+  --_headingColor: var(--alert-color, var(--_onFilled, #fff));
+  background: var(--alert-background-color, var(--_backgroundFilled));
+}
+
+eun-alert[closeable]:not(:defined) {
+  padding-right: calc(
+    var(
+        --alert-padding,
+        var(
+          --alert-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+      ) +
+      var(--eun-space-l, 32px)
+  );
+}
+
+eun-alert:is(
+    [hide-icon],
+    :not([severity], [icon]):not(:has(> [slot="icon"]))
+  ):not(:defined) {
+  --_textColumn: 1;
+  grid-template-columns: 1fr;
+}
+
+eun-alert:not(:defined)::before {
+  content: "";
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+}
+
+eun-alert:is([hide-icon], :has(> [slot="icon"]), :not([severity], [icon])):not(
+    :defined
+  )::before {
+  display: none;
+}
+
+eun-alert:not(:defined) > [slot="icon"] {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  display: flex;
+}
+
+eun-alert[hide-icon]:not(:defined) > [slot="icon"] {
+  grid-column: 1;
+}
+
+eun-alert:not([heading]):not(:defined) > :not([slot]) {
+  grid-column: var(--_textColumn);
+  grid-row: 1;
+  align-self: center;
+}
+
+eun-alert:not(:defined) > :not([slot]) {
+  justify-self: start;
+}
+
+eun-alert[heading]:not(:defined)::after {
+  content: attr(heading);
+  order: -1;
+  grid-column: var(--_textColumn);
+  grid-row: 1;
+  align-self: center;
+}
+
+eun-alert[heading]:not(:defined) > :not([slot]),
+eun-alert:not(:defined) > [slot="description"],
+eun-alert:not(:defined) > [slot="action"] {
+  grid-column: var(--_textColumn);
+  font-weight: normal;
+}
+
+:where(
+  eun-alert[heading]:not(:defined) > :not([slot]),
+  eun-alert:not(:defined) > [slot="description"],
+  eun-alert:not(:defined) > [slot="icon"],
+  eun-alert:not(:defined) > [slot="action"]:not(:any-link)
+) {
+  color: var(--_contentColor);
+}
+
+eun-alert[heading]:not(:defined) > :not([slot]) {
+  order: 1;
+}
+
+eun-alert:not(:defined) > [slot="description"] {
+  order: 2;
+  margin: 0;
+}
+
+eun-alert:not(:defined) > [slot="action"] {
+  order: 3;
+  justify-self: start;
+}

package/dist/ssr/badge-ssr.css

@@ -0,0 +1,67 @@
+eun-badge:not(:defined) {
+  --_background: var(
+    --badge-background,
+    var(--eun-color-critical-100, #aa0014)
+  );
+  --_color: var(--badge-color, #fff);
+  --_size: var(--badge-size, 18px);
+  --_paddingInline: var(--badge-padding-inline, 6px);
+  --_fontSize: var(--badge-font-size, 11px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--_size);
+  height: var(--_size);
+  padding: 0 var(--_paddingInline);
+  border-radius: 999px;
+  background: var(--_background);
+  color: var(--_color);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--_fontSize);
+  font-weight: var(--eun-font-weight-l, 700);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  user-select: none;
+}
+
+eun-badge:empty:not(:defined) {
+  width: var(--_size);
+  padding: 0;
+}
+
+eun-badge[size="s"]:not(:defined) {
+  --_size: var(--badge-size, 14px);
+  --_paddingInline: var(--badge-padding-inline, 5px);
+  --_fontSize: var(--badge-font-size, 10px);
+}
+
+eun-badge[size="l"]:not(:defined) {
+  --_size: var(--badge-size, 22px);
+  --_paddingInline: var(--badge-padding-inline, 7px);
+  --_fontSize: var(--badge-font-size, 12px);
+}
+
+eun-badge[color="primary"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-primary-500, #3d6fff));
+  --_color: var(--badge-color, var(--eun-color-on-primary-500, #ffffff));
+}
+
+eun-badge[color="secondary"]:not(:defined) {
+  --_background: var(
+    --badge-background,
+    var(--eun-color-secondary-500, #e5a030)
+  );
+  --_color: var(--badge-color, var(--eun-color-on-secondary-500, #000000de));
+}
+
+eun-badge[color="success"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-success-100, #1a9948));
+  --_color: var(--badge-color, #fff);
+}
+
+eun-badge[color="warning"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-warning-100, #c85207));
+  --_color: var(--badge-color, #fff);
+}

package/dist/ssr/breadcrumb-ssr.css

@@ -0,0 +1,41 @@
+eun-breadcrumb:not(:defined) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: var(--breadcrumb-gap, var(--eun-space-xs, 4px));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--breadcrumb-font-size, var(--eun-font-size-s, 14px));
+}
+
+:where(eun-breadcrumb:not(:defined) > *) {
+  max-width: var(--breadcrumb-item-max-width, 240px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+}
+
+:where(eun-breadcrumb:not(:defined) > a[href]) {
+  color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
+  font-weight: inherit;
+  text-decoration: var(--breadcrumb-link-text-decoration, underline);
+}
+
+:where(
+  eun-breadcrumb:not(:defined) > a[aria-current="page"],
+  eun-breadcrumb:not(:defined):not(:has(> [aria-current="page"])) > a:last-child
+) {
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+  text-decoration: none;
+}
+
+eun-breadcrumb:not(:defined) > :not(:last-child)::after {
+  content: var(--breadcrumb-separator, "/");
+  display: inline-block;
+  margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));
+  color: var(--breadcrumb-separator-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+  text-decoration: none;
+}

package/dist/ssr/card-ssr.css

@@ -53,12 +53,11 @@ eun-image-card:not(:defined) {
     --card-padding,
     var(--card-padding-inline, var(--eun-space-m, 16px))
   );
-  --_gap: 0px;
-  display: grid;
-  grid-template-columns: var(--_padInline) minmax(0, 1fr) var(--_padInline);
-  grid-template-rows: auto var(--_padBlock) auto var(--_gap) 1fr var(
-      --_padBlock
-    );
+  --_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));
@@ -69,25 +68,38 @@ eun-image-card:not(:defined) {
   color: var(--eun-text-color, #071621);
   font-family: var(--eun-font-family, "Mulish", sans-serif);
 }
-eun-image-card:has(> [slot="title"]):has(> [slot="description"]):not(:defined) {
-  --_gap: var(--card-gap, var(--eun-space-s, 8px));
+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
   ) {
-  grid-template-rows: auto;
+  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"] {
-  grid-row: 1;
-  grid-column: 1 / -1;
+  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"] {
-  grid-row: 3;
-  grid-column: 2;
+  order: 2;
 }
 eun-image-card:not(:defined) > [slot="description"] {
-  grid-row: 5;
-  grid-column: 2;
+  order: 3;
 }
 eun-image-card:not(:defined) > :not([slot]) {
   display: none;

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