@eunomia/elements 1.0.0-beta.5 → 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/animate-ssr.css

@@ -3,6 +3,7 @@ eun-animate:not(:defined) {
 }
 
 @media (scripting: enabled) {
+  eun-animate:not([animation]):not(:defined),
   eun-animate[animation="fade"]:not(:defined),
   eun-animate[animation="faded-scroll-right"]:not(:defined),
   eun-animate[animation="faded-scroll-left"]:not(:defined),
@@ -32,7 +33,7 @@ eun-animate:not(:defined) {
   }
 }
 
-@media (scripting: enabled) and (max-width: 768px) {
+@media (scripting: enabled) and (width < 768px) {
   eun-animate[tablet-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;
@@ -67,7 +68,7 @@ eun-animate:not(:defined) {
   }
 }
 
-@media (scripting: enabled) and (max-width: 600px) {
+@media (scripting: enabled) and (width < 600px) {
   eun-animate[mobile-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;

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