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

package/dist/ssr/button-ssr.css

@@ -0,0 +1,319 @@
+:is(eun-button, eun-dropdown-button, eun-fab):not(:defined) {
+  --_solid: var(--eun-color-primary-500, #3d6fff);
+  --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+  --_accent: var(--eun-color-primary-500, #3d6fff);
+  --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+  --_fgTint: var(--_accent);
+  --_flat: var(--eun-surface-sunken, #f7f8fa);
+  --_flatFg: var(--eun-text-secondary, #484e61);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="secondary"]:not(:defined) {
+  --_solid: var(--eun-color-secondary-500, #e5a030);
+  --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+  --_accent: var(--eun-color-secondary-500, #e5a030);
+  --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="critical"]:not(:defined) {
+  --_solid: var(--eun-color-critical-100, #aa0014);
+  --_onSolid: #fff;
+  --_accent: var(--eun-color-critical-100, #aa0014);
+  --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="success"]:not(:defined) {
+  --_solid: var(--eun-color-success-100, #1a9948);
+  --_onSolid: #fff;
+  --_accent: var(--eun-color-success-100, #1a9948);
+  --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="warning"]:not(:defined) {
+  --_solid: var(--eun-color-warning-100, #c85207);
+  --_onSolid: #fff;
+  --_accent: var(--eun-color-warning-100, #c85207);
+  --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="medium"]:not(:defined) {
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_accent: var(--eun-color-grey-900, #000000);
+  --_tint: color-mix(
+    in srgb,
+    var(--eun-color-grey-700, #484e61) 20%,
+    transparent
+  );
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="light"]:not(:defined) {
+  --_solid: var(--eun-color-grey-0, #ffffff);
+  --_onSolid: var(--eun-color-grey-900, #000000);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="light"][fixed-color]:not(
+    :defined
+  ) {
+  --_solid: #ffffff;
+  --_onSolid: #000000;
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="dark"]:not(:defined) {
+  --_solid: var(--eun-color-grey-800, #071621);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+}
+:is(eun-button, eun-dropdown-button, eun-fab)[color="dark"][fixed-color]:not(
+    :defined
+  ) {
+  --_solid: #071621;
+  --_onSolid: #ffffff;
+}
+:is(eun-button, eun-dropdown-button, eun-fab):is(
+    [color="light"],
+    [color="dark"]
+  ):not(:defined) {
+  --_accent: var(--_solid);
+  --_tint: var(--_solid);
+  --_fgTint: var(--_onSolid);
+  --_flat: color-mix(in srgb, var(--_solid) 16%, transparent);
+  --_flatFg: var(--_solid);
+}
+
+:is(eun-button, eun-dropdown-button):not(:defined) {
+  --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+  --_defaultPaddingBlock: var(--eun-space-s, 8px);
+  --_defaultPaddingInline: calc(var(--eun-space-l, 32px) / 2);
+  --_borderRadius: var(--button-border-radius, var(--_defaultBorderRadius));
+  --_padding: var(
+    --button-padding,
+    var(--button-padding-block, var(--_defaultPaddingBlock))
+      var(--button-padding-inline, var(--_defaultPaddingInline))
+  );
+  --_boxShadow: var(--button-shadow, none);
+  --_borderSize: var(--button-border-size, 1.5px);
+  --_defaultFontSize: var(--eun-font-size-s, 14px);
+  --_fontSize: var(--button-font-size, var(--_defaultFontSize));
+  --_gap: var(--eun-space-xs, 4px);
+  --_defaultLineHeight: 1rem;
+  --_lineHeight: var(--button-line-height, var(--_defaultLineHeight));
+  --icon-size: var(--_lineHeight);
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_gap);
+  padding: var(--_padding);
+  border: var(--_borderSize) solid var(--button-border-color, var(--_bd));
+  border-radius: var(--_borderRadius);
+  background: var(--button-background, var(--_bg));
+  color: var(--button-text, var(--_fg));
+  box-shadow: var(--_boxShadow);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--_fontSize);
+  font-weight: var(--button-font-weight, inherit);
+  line-height: var(--_lineHeight);
+  white-space: nowrap;
+}
+:where(:is(eun-button, eun-dropdown-button):not(:defined)) {
+  width: fit-content;
+  user-select: none;
+}
+:is(eun-button, eun-dropdown-button)[size="xs"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+  --_defaultPaddingInline: var(--eun-space-xs, 4px);
+  --_defaultLineHeight: 10px;
+  --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
+}
+:is(eun-button, eun-dropdown-button)[size="s"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s) / 2);
+  --_defaultPaddingInline: var(--eun-space-s);
+  --_defaultLineHeight: 10px;
+  --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
+}
+:is(eun-button, eun-dropdown-button)[size="l"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-m, 16px);
+  --_gap: var(--eun-space-m, 16px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+  --_defaultPaddingInline: var(--eun-space-l, 32px);
+  --_defaultLineHeight: 1.1rem;
+}
+:is(eun-button, eun-dropdown-button)[size="xl"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
+  --_gap: var(--eun-space-m, 16px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+  --_defaultPaddingInline: var(--eun-space-l, 32px);
+  --_defaultLineHeight: 1.3rem;
+}
+:is(eun-button, eun-dropdown-button)[rounded]:not(:defined) {
+  --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+}
+
+:is(eun-button, eun-dropdown-button)[appearance="fill"]:not(:defined),
+:is(eun-button, eun-dropdown-button):not([appearance]):not(:defined) {
+  --_bg: var(--_solid);
+  --_fg: var(--_onSolid);
+  --_bd: transparent;
+}
+:is(eun-button, eun-dropdown-button)[appearance="default"]:not(:defined) {
+  --_bg: var(--_tint);
+  --_fg: var(--_fgTint);
+  --_bd: transparent;
+}
+:is(eun-button, eun-dropdown-button)[appearance="outline"]:not(:defined) {
+  --_borderSize: var(--button-border-size, 1px);
+  --_bg: transparent;
+  --_fg: var(--_accent);
+  --_bd: var(--_solid);
+}
+:is(eun-button, eun-dropdown-button)[appearance="ghost"]:not(:defined) {
+  --_bg: transparent;
+  --_fg: var(--_accent);
+  --_bd: transparent;
+}
+:is(eun-button, eun-dropdown-button)[appearance="ghost"]:not([color]):not(
+    :defined
+  ) {
+  --_accent: var(--eun-text-secondary, #484e61);
+}
+:is(eun-button, eun-dropdown-button)[appearance="raised"]:not(:defined) {
+  --_bg: transparent;
+  --_fg: var(--_accent);
+  --_bd: transparent;
+  --_boxShadow: var(
+    --button-shadow,
+    var(--eun-shadow-s, rgba(149, 157, 165, 0.2) 0px 8px 24px)
+  );
+}
+:is(eun-button, eun-dropdown-button)[appearance="flat"]:not(:defined) {
+  --_bg: var(--_flat);
+  --_fg: var(--_flatFg);
+  --_bd: transparent;
+}
+
+:is(eun-button, eun-dropdown-button)[disabled]:not(:defined) {
+  --_boxShadow: none;
+  background: var(--eun-disabled-color, #ecedf0);
+  color: var(--eun-text-disabled-color, #8d93aa);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+
+@supports (width: if(style(--a: b): 1px; else: 2px)) {
+  :where(eun-button:not(:defined)) {
+    width: if(style(--button-full: true): 100%; else: fit-content);
+  }
+}
+eun-button[full]:not(:defined) {
+  display: flex;
+}
+:where(eun-button[full]:not(:defined)) {
+  width: 100%;
+}
+
+:is(eun-button, eun-dropdown-button):not(:defined) > [slot="start"] {
+  order: -1;
+}
+eun-button:not(:defined) > [slot="end"] {
+  order: 1;
+}
+:where(
+  :is(eun-button, eun-dropdown-button):not(:defined)
+    > eun-icon:is([slot="start"], [slot="end"])
+) {
+  flex-shrink: 0;
+}
+:where(eun-button:not(:defined) > a) {
+  color: inherit;
+  text-decoration: none;
+}
+:where(
+  :is(eun-button, eun-dropdown-button):not(:defined)
+    > eun-icon:not([size]):not(:defined)
+) {
+  display: inline-block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+:is(eun-button, eun-dropdown-button):is([icon], [severity]):not(
+    :has(> [slot="start"])
+  ):not(:defined)::before {
+  content: "";
+  order: -1;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+eun-dropdown-button[label]:not(:defined)::after {
+  content: attr(label);
+}
+
+eun-fab:not(:defined) {
+  --_circleSize: 56px;
+  --icon-size: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_circleSize);
+  height: var(--_circleSize);
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--eun-border-radius-xl, 999px);
+  background: var(--fab-background, var(--_solid));
+  color: var(--fab-text, var(--_onSolid));
+  box-shadow: var(--eun-shadow-m, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  user-select: none;
+}
+eun-fab[size="xs"]:not(:defined) {
+  --_circleSize: 40px;
+  --icon-size: 18px;
+}
+eun-fab[size="s"]:not(:defined) {
+  --_circleSize: 48px;
+  --icon-size: 20px;
+}
+eun-fab[size="l"]:not(:defined) {
+  --_circleSize: 72px;
+  --icon-size: 28px;
+}
+eun-fab[size="xl"]:not(:defined) {
+  --_circleSize: 88px;
+  --icon-size: 34px;
+}
+eun-fab[disabled]:not(:defined) {
+  background: var(--eun-disabled-color, #ecedf0);
+  color: var(--eun-text-disabled-color, #8d93aa);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+:where(eun-fab:not(:defined) > [slot="icon"]) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: var(--icon-size);
+}
+eun-fab:not(:defined) > :not([slot="icon"]) {
+  display: none;
+}
+:where(
+  eun-fab:not(:defined) > eun-icon[slot="icon"]:not([size]):not(:defined)
+) {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+:where(eun-fab[position]:not(:defined)) {
+  position: fixed;
+  z-index: var(--fab-z-index, 40);
+}
+:where(eun-fab[position="bottom-right"]:not(:defined)) {
+  bottom: var(--fab-offset, var(--eun-space-l, 32px));
+  right: var(--fab-offset, var(--eun-space-l, 32px));
+}
+:where(eun-fab[position="bottom-left"]:not(:defined)) {
+  bottom: var(--fab-offset, var(--eun-space-l, 32px));
+  left: var(--fab-offset, var(--eun-space-l, 32px));
+}
+:where(eun-fab[position="top-right"]:not(:defined)) {
+  top: var(--fab-offset, var(--eun-space-l, 32px));
+  right: var(--fab-offset, var(--eun-space-l, 32px));
+}
+:where(eun-fab[position="top-left"]:not(:defined)) {
+  top: var(--fab-offset, var(--eun-space-l, 32px));
+  left: var(--fab-offset, var(--eun-space-l, 32px));
+}

package/dist/ssr/card-ssr.css

@@ -0,0 +1,184 @@
+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: 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
+    );
+  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:has(> [slot="title"]):has(> [slot="description"]):not(:defined) {
+  --_gap: var(--card-gap, var(--eun-space-s, 8px));
+}
+eun-image-card:not(:has(> [slot="title"], > [slot="description"])):not(
+    :defined
+  ) {
+  grid-template-rows: auto;
+}
+eun-image-card:not(:defined) > [slot="image"] {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+eun-image-card:not(:defined) > [slot="title"] {
+  grid-row: 3;
+  grid-column: 2;
+}
+eun-image-card:not(:defined) > [slot="description"] {
+  grid-row: 5;
+  grid-column: 2;
+}
+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/description-list-ssr.css

@@ -0,0 +1,150 @@
+eun-description-list {
+    --_dl-row-gap: var(--description-list-row-gap, var(--eun-space-m, 1rem));
+    --_dl-column-gap: var(
+      --description-list-column-gap,
+      var(--eun-space-l, 2rem)
+    );
+    --_dl-label-gap: var(
+      --description-list-label-gap,
+      var(--eun-space-xs, 0.25rem)
+    );
+    --_dl-label-width: var(--description-list-label-width, fit-content(40%));
+    --_dl-divider: var(--eun-border-width-s, 1px) solid
+      var(--description-list-divider-color, var(--eun-border-color, #dee0e7));
+    --_dl-columns: 1;
+    display: block;
+  }
+
+  eun-description-list > dl {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: baseline;
+    margin: 0;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--description-list-font-size, var(--eun-font-size-s, 13px));
+    color: var(--description-list-value-color, var(--eun-text-color, #071621));
+  }
+
+  eun-description-list > dl > div {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: baseline;
+  }
+
+  eun-description-list > dl > dt,
+  eun-description-list > dl > div > dt {
+    grid-column: 1;
+    margin: 0;
+    font-weight: var(--description-list-label-font-weight, inherit);
+    color: var(
+      --description-list-label-color,
+      var(--eun-text-secondary, #484e61)
+    );
+  }
+
+  eun-description-list > dl > dd,
+  eun-description-list > dl > div > dd {
+    grid-column: 1;
+    min-width: 0;
+    margin: var(--_dl-label-gap) 0 0;
+    overflow-wrap: anywhere;
+  }
+
+  eun-description-list > dl > dd + dt,
+  eun-description-list > dl > div + div {
+    margin-top: var(--_dl-row-gap);
+  }
+
+  eun-description-list[divided] > dl > dd + dt,
+  eun-description-list[divided] > dl > div + div {
+    padding-top: var(--_dl-row-gap);
+    border-top: var(--_dl-divider);
+  }
+
+  @media (width >= 600px) {
+    eun-description-list:not([layout="stacked"]) > dl {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd {
+      grid-column: 2;
+      margin-top: 0;
+      padding-inline-start: var(--_dl-column-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dd,
+    eun-description-list:not([layout="stacked"]) > dl > div > dd + dd {
+      margin-top: var(--_dl-label-gap);
+    }
+
+    eun-description-list:not([layout="stacked"]) > dl > dd + dt + dd {
+      margin-top: var(--_dl-row-gap);
+    }
+
+    eun-description-list[divided]:not([layout="stacked"]) > dl > dd + dt + dd {
+      padding-top: var(--_dl-row-gap);
+      border-top: var(--_dl-divider);
+    }
+  }
+
+  eun-description-list[align="center"] > dl {
+    text-align: center;
+  }
+
+  eun-description-list[align="end"] > dl {
+    text-align: end;
+  }
+
+  eun-description-list[columns="2"] {
+    --_dl-columns: 2;
+  }
+
+  eun-description-list[columns="3"] {
+    --_dl-columns: 3;
+  }
+
+  eun-description-list[columns="4"] {
+    --_dl-columns: 4;
+  }
+
+  @media (width >= 600px) {
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > dd,
+    eun-description-list[align="space-between"]:not([layout="stacked"])
+      > dl
+      > div
+      > dd {
+      text-align: end;
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]) > dl {
+      grid-template-columns: repeat(var(--_dl-columns), minmax(0, 1fr));
+      column-gap: var(--_dl-column-gap);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"])
+      > dl
+      > div {
+      grid-column: auto;
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    eun-description-list:is([columns="2"], [columns="3"], [columns="4"]):not(
+        [layout="stacked"]
+      )
+      > dl
+      > div {
+      grid-template-columns: var(--_dl-label-width) minmax(0, 1fr);
+    }
+
+    eun-description-list[columns="2"] > dl > div:nth-child(-n + 2),
+    eun-description-list[columns="3"] > dl > div:nth-child(-n + 3),
+    eun-description-list[columns="4"] > dl > div:nth-child(-n + 4) {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+  }

package/dist/ssr/links-ssr.css

@@ -0,0 +1,35 @@
+:where(:is(eun-link, eun-button, eun-card):not(:defined) > a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.eun-new-tab-hint {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:is(eun-link, eun-button):not(:defined) > a[target="_blank"]::after {
+  content: "";
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 4px;
+  vertical-align: middle;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+  rotate: -45deg;
+}
+
+eun-button:not(:defined) > a[target="_blank"]::after {
+  width: 12px;
+  height: 12px;
+  margin-inline-start: 8px;
+}