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

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,247 @@
+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[show-arrows="false"]:not(:defined) {
+  --_navReserve: 0px;
+  --carousel-nav-display: none;
+}
+
+eun-carousel[show-dots="false"]:not(:defined) {
+  --carousel-dots-display: none;
+}
+
+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;
+}

package/dist/ssr/chip-ssr.css

@@ -0,0 +1,250 @@
+eun-chip:not(:defined) {
+  --_bg-default: var(--_tint);
+  --_fg-default: var(--_accent);
+  --_bg-fill: var(--_solid);
+  --_fg-fill: var(--_onSolid);
+  --_bg-outline: var(--eun-surface-color, #ffffff);
+  --_fg-outline: var(--_accent);
+  --_bd-outline: var(--_solid);
+  --_bg-flat: var(--eun-content-hover, #edeff0);
+  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_bg: var(--_bg-default);
+  --_fg: var(--_fg-default);
+  --_bd: transparent;
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: color-mix(
+    in srgb,
+    var(--eun-color-grey-700, #484e61) 20%,
+    transparent
+  );
+  --_accent: var(--eun-color-grey-900, #000000);
+  --_height: 30px;
+  --_paddingInline: 6px;
+  --_fontSize: var(--eun-font-size-s, 14px);
+  --_gap: 6px;
+  --_iconSize: 16px;
+  --_deleteIconSize: 14px;
+  --_avatarFontSize: 11px;
+  --_avatarInsetSize: 20px;
+  --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
+  --_leadingPadding: 4px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: var(--_height);
+  gap: var(--chip-gap, var(--_gap));
+  padding-inline: max(
+      0px,
+      calc(var(--_paddingInline) + var(--_leadingPadding) - var(--_borderWidth))
+    )
+    max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+  border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
+  border-radius: var(--chip-border-radius, var(--eun-border-radius-xl, 999px));
+  background: var(--chip-background-color, var(--_bg));
+  color: var(--chip-color, var(--_fg));
+  box-shadow: var(--chip-box-shadow, none);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--_fontSize);
+  font-weight: var(--eun-font-weight-m, 500);
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+eun-chip[size="s"]:not(:defined) {
+  --_height: 26px;
+  --_paddingInline: 4px;
+  --_fontSize: var(--eun-font-size-xs, 12px);
+  --_gap: 4px;
+  --_iconSize: 14px;
+  --_deleteIconSize: 12px;
+  --_avatarFontSize: 10px;
+  --_avatarInsetSize: 16px;
+}
+
+eun-chip[size="l"]:not(:defined) {
+  --_height: 38px;
+  --_fontSize: var(--eun-font-size-m, 16px);
+  --_gap: 8px;
+  --_iconSize: 18px;
+  --_deleteIconSize: 16px;
+  --_avatarFontSize: 12px;
+  --_avatarInsetSize: 24px;
+}
+
+/* Palettes. */
+eun-chip[color="primary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-primary-500, #3d6fff);
+  --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+  --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+  --_accent: var(--eun-color-primary-500, #3d6fff);
+}
+
+eun-chip[color="secondary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-secondary-500, #e5a030);
+  --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+  --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+  --_accent: var(--eun-color-secondary-500, #e5a030);
+}
+
+eun-chip[color="light"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-0, #ffffff);
+  --_onSolid: var(--eun-color-grey-900, #000000);
+}
+
+eun-chip[color="light"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #ffffff;
+  --_onSolid: #000000;
+}
+
+eun-chip[color="dark"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-800, #071621);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+}
+
+eun-chip[color="dark"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #071621;
+  --_onSolid: #ffffff;
+}
+
+eun-chip:is([color="light"], [color="dark"]):not([severity]):not(:defined) {
+  --_accent: var(--_solid);
+  --_tint: color-mix(in srgb, var(--_solid) 16%, transparent);
+  --_bg-default: var(--_solid);
+  --_fg-default: var(--_onSolid);
+  --_bg-flat: var(--_tint);
+  --_fg-flat: var(--_solid);
+}
+
+eun-chip[severity="info"]:not(:defined) {
+  --_solid: var(--eun-color-info-text, #097aa8);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-info-alpha-5, #097faf0d);
+  --_accent: var(--eun-color-info-text, #097aa8);
+}
+
+eun-chip[severity="success"]:not(:defined) {
+  --_solid: var(--eun-color-success-text, #167f3c);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+  --_accent: var(--eun-color-success-text, #167f3c);
+}
+
+eun-chip[severity="warning"]:not(:defined) {
+  --_solid: var(--eun-color-warning-text, #b94c06);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+  --_accent: var(--eun-color-warning-text, #b94c06);
+}
+
+eun-chip[severity="critical"]:not(:defined) {
+  --_solid: var(--eun-color-critical-text, #aa0014);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_accent: var(--eun-color-critical-text, #aa0014);
+}
+
+eun-chip[severity="neutral"]:not(:defined) {
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: var(--eun-surface-sunken-strong, #ecedf0);
+  --_accent: var(--eun-color-grey-700, #484e61);
+}
+
+/* Appearances. */
+eun-chip[appearance="fill"]:not(:defined) {
+  --_bg: var(--_bg-fill);
+  --_fg: var(--_fg-fill);
+}
+
+eun-chip[appearance="outline"]:not(:defined) {
+  --_bg: var(--_bg-outline);
+  --_fg: var(--_fg-outline);
+  --_bd: var(--_bd-outline);
+}
+
+eun-chip[appearance="flat"]:not(:defined) {
+  --_bg: var(--_bg-flat);
+  --_fg: var(--_fg-flat);
+}
+
+eun-chip[rounded="false"]:not(:defined) {
+  border-radius: var(--chip-border-radius, var(--eun-border-radius-s, 5px));
+}
+
+eun-chip[disabled]:not(:defined) {
+  opacity: 0.6;
+}
+
+:where(eun-chip:not(:defined) > *) {
+  margin: 0;
+}
+
+eun-chip:not(:defined) > [slot="icon"] {
+  order: -1;
+  display: inline-flex;
+}
+
+eun-chip:not(:defined)::before {
+  content: "";
+  order: -1;
+  flex-shrink: 0;
+  display: none;
+  width: var(--_iconSize);
+  height: var(--_iconSize);
+}
+
+eun-chip:is([icon], [severity]):not(
+    [hide-icon],
+    [avatar-src],
+    [avatar-initials]
+  ):not(:has(> [slot="icon"])):not(:defined)::before {
+  display: block;
+}
+
+eun-chip:is([avatar-src], [avatar-initials]):not(:defined) {
+  --_leadingPadding: 0px;
+}
+
+eun-chip:is([avatar-src], [avatar-initials]):not(:defined)::before {
+  content: attr(avatar-initials);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
+  height: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(
+    --chip-avatar-background,
+    var(--_solid, var(--eun-color-grey-500, #8d93aa))
+  );
+  color: var(--chip-avatar-color, var(--_onSolid, #fff));
+  font-size: var(--_avatarFontSize);
+  font-weight: var(--eun-font-weight-l, 700);
+  line-height: 1;
+}
+
+eun-chip[avatar-src]:not(:defined)::before {
+  content: "";
+}
+
+eun-chip[avatar-shape="square"]:not(:defined)::before {
+  border-radius: var(--eun-border-radius-s, 5px);
+}
+
+eun-chip:not(:defined)::after {
+  content: "";
+  flex-shrink: 0;
+  width: calc(var(--_deleteIconSize) + 10px);
+  height: var(--_deleteIconSize);
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
+    center / var(--_deleteIconSize) no-repeat;
+}
+
+eun-chip[removable="false"]:not(:defined)::after {
+  display: none;
+}