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

package/dist/ssr/icon-ssr.css

@@ -0,0 +1,266 @@
+eun-icon:not(:defined) {
+  --_size: var(--icon-size, 1rem);
+  display: flex;
+}
+
+eun-icon:not(:defined)::before {
+  content: "";
+  display: inline-block;
+  box-sizing: content-box;
+  width: var(--_size);
+  height: var(--_size);
+  padding: var(
+    --icon-padding,
+    var(--icon-padding-block, 0) var(--icon-padding-inline, 0)
+  );
+  border: var(--icon-border-width, 0) solid
+    var(--icon-border-color, var(--eun-border-color, #dee0e7));
+  border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
+  background-color: var(--icon-background, transparent);
+}
+
+@supports (width: attr(size px, 0px)) {
+  eun-icon[size]:not(:defined) {
+    --_size: attr(size px, 1rem);
+  }
+
+  eun-icon:is(
+      [size*="px"],
+      [size*="em"],
+      [size*="vw"],
+      [size*="vh"],
+      [size*="pt"]
+    ):not(:defined) {
+    --_size: attr(size type(<length>), 1rem);
+  }
+}
+
+@supports not (width: attr(size px, 0px)) {
+  eun-icon:is([size="8"], [size="8px"]):not(:defined) {
+    --_size: 8px;
+  }
+
+  eun-icon:is([size="9"], [size="9px"]):not(:defined) {
+    --_size: 9px;
+  }
+
+  eun-icon:is([size="10"], [size="10px"]):not(:defined) {
+    --_size: 10px;
+  }
+
+  eun-icon:is([size="11"], [size="11px"]):not(:defined) {
+    --_size: 11px;
+  }
+
+  eun-icon:is([size="12"], [size="12px"]):not(:defined) {
+    --_size: 12px;
+  }
+
+  eun-icon:is([size="13"], [size="13px"]):not(:defined) {
+    --_size: 13px;
+  }
+
+  eun-icon:is([size="14"], [size="14px"]):not(:defined) {
+    --_size: 14px;
+  }
+
+  eun-icon:is([size="15"], [size="15px"]):not(:defined) {
+    --_size: 15px;
+  }
+
+  eun-icon:is([size="16"], [size="16px"]):not(:defined) {
+    --_size: 16px;
+  }
+
+  eun-icon:is([size="17"], [size="17px"]):not(:defined) {
+    --_size: 17px;
+  }
+
+  eun-icon:is([size="18"], [size="18px"]):not(:defined) {
+    --_size: 18px;
+  }
+
+  eun-icon:is([size="19"], [size="19px"]):not(:defined) {
+    --_size: 19px;
+  }
+
+  eun-icon:is([size="20"], [size="20px"]):not(:defined) {
+    --_size: 20px;
+  }
+
+  eun-icon:is([size="21"], [size="21px"]):not(:defined) {
+    --_size: 21px;
+  }
+
+  eun-icon:is([size="22"], [size="22px"]):not(:defined) {
+    --_size: 22px;
+  }
+
+  eun-icon:is([size="23"], [size="23px"]):not(:defined) {
+    --_size: 23px;
+  }
+
+  eun-icon:is([size="24"], [size="24px"]):not(:defined) {
+    --_size: 24px;
+  }
+
+  eun-icon:is([size="25"], [size="25px"]):not(:defined) {
+    --_size: 25px;
+  }
+
+  eun-icon:is([size="26"], [size="26px"]):not(:defined) {
+    --_size: 26px;
+  }
+
+  eun-icon:is([size="27"], [size="27px"]):not(:defined) {
+    --_size: 27px;
+  }
+
+  eun-icon:is([size="28"], [size="28px"]):not(:defined) {
+    --_size: 28px;
+  }
+
+  eun-icon:is([size="29"], [size="29px"]):not(:defined) {
+    --_size: 29px;
+  }
+
+  eun-icon:is([size="30"], [size="30px"]):not(:defined) {
+    --_size: 30px;
+  }
+
+  eun-icon:is([size="31"], [size="31px"]):not(:defined) {
+    --_size: 31px;
+  }
+
+  eun-icon:is([size="32"], [size="32px"]):not(:defined) {
+    --_size: 32px;
+  }
+
+  eun-icon:is([size="33"], [size="33px"]):not(:defined) {
+    --_size: 33px;
+  }
+
+  eun-icon:is([size="34"], [size="34px"]):not(:defined) {
+    --_size: 34px;
+  }
+
+  eun-icon:is([size="35"], [size="35px"]):not(:defined) {
+    --_size: 35px;
+  }
+
+  eun-icon:is([size="36"], [size="36px"]):not(:defined) {
+    --_size: 36px;
+  }
+
+  eun-icon:is([size="37"], [size="37px"]):not(:defined) {
+    --_size: 37px;
+  }
+
+  eun-icon:is([size="38"], [size="38px"]):not(:defined) {
+    --_size: 38px;
+  }
+
+  eun-icon:is([size="39"], [size="39px"]):not(:defined) {
+    --_size: 39px;
+  }
+
+  eun-icon:is([size="40"], [size="40px"]):not(:defined) {
+    --_size: 40px;
+  }
+
+  eun-icon:is([size="41"], [size="41px"]):not(:defined) {
+    --_size: 41px;
+  }
+
+  eun-icon:is([size="42"], [size="42px"]):not(:defined) {
+    --_size: 42px;
+  }
+
+  eun-icon:is([size="43"], [size="43px"]):not(:defined) {
+    --_size: 43px;
+  }
+
+  eun-icon:is([size="44"], [size="44px"]):not(:defined) {
+    --_size: 44px;
+  }
+
+  eun-icon:is([size="45"], [size="45px"]):not(:defined) {
+    --_size: 45px;
+  }
+
+  eun-icon:is([size="46"], [size="46px"]):not(:defined) {
+    --_size: 46px;
+  }
+
+  eun-icon:is([size="47"], [size="47px"]):not(:defined) {
+    --_size: 47px;
+  }
+
+  eun-icon:is([size="48"], [size="48px"]):not(:defined) {
+    --_size: 48px;
+  }
+
+  eun-icon:is([size="49"], [size="49px"]):not(:defined) {
+    --_size: 49px;
+  }
+
+  eun-icon:is([size="50"], [size="50px"]):not(:defined) {
+    --_size: 50px;
+  }
+
+  eun-icon:is([size="51"], [size="51px"]):not(:defined) {
+    --_size: 51px;
+  }
+
+  eun-icon:is([size="52"], [size="52px"]):not(:defined) {
+    --_size: 52px;
+  }
+
+  eun-icon:is([size="53"], [size="53px"]):not(:defined) {
+    --_size: 53px;
+  }
+
+  eun-icon:is([size="54"], [size="54px"]):not(:defined) {
+    --_size: 54px;
+  }
+
+  eun-icon:is([size="55"], [size="55px"]):not(:defined) {
+    --_size: 55px;
+  }
+
+  eun-icon:is([size="56"], [size="56px"]):not(:defined) {
+    --_size: 56px;
+  }
+
+  eun-icon:is([size="57"], [size="57px"]):not(:defined) {
+    --_size: 57px;
+  }
+
+  eun-icon:is([size="58"], [size="58px"]):not(:defined) {
+    --_size: 58px;
+  }
+
+  eun-icon:is([size="59"], [size="59px"]):not(:defined) {
+    --_size: 59px;
+  }
+
+  eun-icon:is([size="60"], [size="60px"]):not(:defined) {
+    --_size: 60px;
+  }
+
+  eun-icon:is([size="61"], [size="61px"]):not(:defined) {
+    --_size: 61px;
+  }
+
+  eun-icon:is([size="62"], [size="62px"]):not(:defined) {
+    --_size: 62px;
+  }
+
+  eun-icon:is([size="63"], [size="63px"]):not(:defined) {
+    --_size: 63px;
+  }
+
+  eun-icon:is([size="64"], [size="64px"]):not(:defined) {
+    --_size: 64px;
+  }
+}

package/dist/ssr/image-carousel-ssr.css

@@ -0,0 +1,24 @@
+eun-image-carousel:not(:defined) {
+  display: block;
+}
+
+eun-image-carousel:not([images="[]"], [images=""]):not(:defined)::before {
+  content: "";
+  display: block;
+  aspect-ratio: var(--image-carousel-aspect-ratio, 4 / 3);
+  border-radius: var(
+    --image-carousel-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  background: var(
+    --image-carousel-background,
+    var(--eun-surface-sunken, #f7f8fa)
+  );
+}
+
+eun-image-carousel:is(:not([images]), [images*="},"]):not(:defined)::after {
+  content: "";
+  display: block;
+  height: var(--image-carousel-thumbnail-size, 64px);
+  margin-top: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
+}

package/dist/ssr/links-ssr.css

@@ -1,4 +1,10 @@
-:is(eun-link, eun-button, eun-card):not(:defined) > a {
+/* Once upgraded, a link wraps as one piece, never inside its text. */
+eun-link:not(:defined) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:where(:is(eun-link, eun-button, eun-card):not(:defined) > a) {
   color: inherit;
   text-decoration: none;
 }
@@ -31,5 +37,5 @@
 eun-button:not(:defined) > a[target="_blank"]::after {
   width: 12px;
   height: 12px;
-  margin-inline-start: 8px;
+  margin-inline: var(--eun-space-s, 8px) calc(-1 * var(--eun-space-xs, 4px));
 }

package/dist/ssr/pagination-ssr.css

@@ -0,0 +1,4 @@
+eun-pagination:not(:defined) {
+  display: block;
+  min-height: var(--pagination-item-size, 32px);
+}

package/dist/ssr/rating-ssr.css

@@ -0,0 +1,254 @@
+eun-rating:not(:defined) {
+  --_iconSize: var(--rating-size, 24px);
+  --_gap: var(--rating-gap, var(--eun-space-xs, 4px));
+  --_color: var(--rating-color, var(--eun-color-primary-500, #3d6fff));
+  --_emptyColor: var(
+    --rating-empty-color,
+    color-mix(
+      in srgb,
+      var(--eun-text-color, #071621) 55%,
+      var(--eun-surface-color, #ffffff)
+    )
+  );
+  --_star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
+  --_outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3C/svg%3E");
+  --_direction: to right;
+  --_max: 5;
+  --_whole: 0;
+  --_tenths: 0;
+  --_fill: min(
+    100%,
+    calc(
+      var(--_whole) * (var(--_iconSize) + var(--_gap)) + var(--_tenths) *
+        var(--_iconSize) / 10
+    )
+  );
+  display: inline-block;
+  vertical-align: middle;
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+}
+
+eun-rating:is([label], [required]):not([display-only]):not(:defined)::before {
+  content: attr(label) "\200b";
+  display: block;
+  margin-block-end: calc(2 * var(--eun-space-xs, 4px));
+  padding-inline: 2px;
+  color: var(--eun-text-color, #071621);
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--eun-font-weight-l, 700);
+}
+
+eun-rating:not(:defined)::after {
+  content: "";
+  display: block;
+  width: calc(var(--_max) * var(--_iconSize) + (var(--_max) - 1) * var(--_gap));
+  height: var(--_iconSize);
+  background: linear-gradient(
+    var(--_direction),
+    var(--_color) var(--_fill),
+    var(--_emptyColor) var(--_fill)
+  );
+  mask:
+    var(--_outline) 0 0 / calc(var(--_iconSize) + var(--_gap)) 100% repeat-x,
+    linear-gradient(
+      var(--_direction),
+      #000 var(--_fill),
+      transparent var(--_fill)
+    ),
+    var(--_star) 0 0 / calc(var(--_iconSize) + var(--_gap)) 100% repeat-x;
+  mask-composite: add, intersect;
+}
+
+eun-rating:not(:defined):dir(rtl) {
+  --_direction: to left;
+}
+
+eun-rating[max="1"]:not(:defined) {
+  --_max: 1;
+}
+
+eun-rating[max="2"]:not(:defined) {
+  --_max: 2;
+}
+
+eun-rating[max="3"]:not(:defined) {
+  --_max: 3;
+}
+
+eun-rating[max="4"]:not(:defined) {
+  --_max: 4;
+}
+
+eun-rating[max="5"]:not(:defined) {
+  --_max: 5;
+}
+
+eun-rating[max="6"]:not(:defined) {
+  --_max: 6;
+}
+
+eun-rating[max="7"]:not(:defined) {
+  --_max: 7;
+}
+
+eun-rating[max="8"]:not(:defined) {
+  --_max: 8;
+}
+
+eun-rating[max="9"]:not(:defined) {
+  --_max: 9;
+}
+
+eun-rating[max="10"]:not(:defined) {
+  --_max: 10;
+}
+
+eun-rating:is(
+    [value="1"],
+    [value^="1."],
+    [default-value="1"]:not([value]),
+    [default-value^="1."]:not([value])
+  ):not(:defined) {
+  --_whole: 1;
+}
+
+eun-rating:is(
+    [value="2"],
+    [value^="2."],
+    [default-value="2"]:not([value]),
+    [default-value^="2."]:not([value])
+  ):not(:defined) {
+  --_whole: 2;
+}
+
+eun-rating:is(
+    [value="3"],
+    [value^="3."],
+    [default-value="3"]:not([value]),
+    [default-value^="3."]:not([value])
+  ):not(:defined) {
+  --_whole: 3;
+}
+
+eun-rating:is(
+    [value="4"],
+    [value^="4."],
+    [default-value="4"]:not([value]),
+    [default-value^="4."]:not([value])
+  ):not(:defined) {
+  --_whole: 4;
+}
+
+eun-rating:is(
+    [value="5"],
+    [value^="5."],
+    [default-value="5"]:not([value]),
+    [default-value^="5."]:not([value])
+  ):not(:defined) {
+  --_whole: 5;
+}
+
+eun-rating:is(
+    [value="6"],
+    [value^="6."],
+    [default-value="6"]:not([value]),
+    [default-value^="6."]:not([value])
+  ):not(:defined) {
+  --_whole: 6;
+}
+
+eun-rating:is(
+    [value="7"],
+    [value^="7."],
+    [default-value="7"]:not([value]),
+    [default-value^="7."]:not([value])
+  ):not(:defined) {
+  --_whole: 7;
+}
+
+eun-rating:is(
+    [value="8"],
+    [value^="8."],
+    [default-value="8"]:not([value]),
+    [default-value^="8."]:not([value])
+  ):not(:defined) {
+  --_whole: 8;
+}
+
+eun-rating:is(
+    [value="9"],
+    [value^="9."],
+    [default-value="9"]:not([value]),
+    [default-value^="9."]:not([value])
+  ):not(:defined) {
+  --_whole: 9;
+}
+
+eun-rating:is(
+    [value="10"],
+    [value^="10."],
+    [default-value="10"]:not([value]),
+    [default-value^="10."]:not([value])
+  ):not(:defined) {
+  --_whole: 10;
+}
+
+eun-rating:is([value*=".1"], [default-value*=".1"]:not([value])):not(:defined) {
+  --_tenths: 1;
+}
+
+eun-rating:is([value*=".2"], [default-value*=".2"]:not([value])):not(:defined) {
+  --_tenths: 2;
+}
+
+eun-rating:is([value*=".3"], [default-value*=".3"]:not([value])):not(:defined) {
+  --_tenths: 3;
+}
+
+eun-rating:is([value*=".4"], [default-value*=".4"]:not([value])):not(:defined) {
+  --_tenths: 4;
+}
+
+eun-rating:is([value*=".5"], [default-value*=".5"]:not([value])):not(:defined) {
+  --_tenths: 5;
+}
+
+eun-rating:is([value*=".6"], [default-value*=".6"]:not([value])):not(:defined) {
+  --_tenths: 6;
+}
+
+eun-rating:is([value*=".7"], [default-value*=".7"]:not([value])):not(:defined) {
+  --_tenths: 7;
+}
+
+eun-rating:is([value*=".8"], [default-value*=".8"]:not([value])):not(:defined) {
+  --_tenths: 8;
+}
+
+eun-rating:is([value*=".9"], [default-value*=".9"]:not([value])):not(:defined) {
+  --_tenths: 9;
+}
+
+eun-rating[readonly]:not(:defined) {
+  --_color: var(--eun-readonly-color, #666e8a);
+}
+
+eun-rating[disabled]:not(:defined) {
+  --_color: var(--eun-text-disabled-color, #8d93aa);
+  --_emptyColor: var(--eun-disabled-content, #c1c9d6);
+}
+
+eun-rating[clearable]:is(
+    [value]:not([value="0"]),
+    [default-value]:not([value])
+  ):not([readonly], [disabled], [display-only]):not(:defined)::after {
+  margin-inline-end: calc(var(--eun-space-s, 8px) + 24px);
+}
+
+eun-rating:is(
+    [icon]:not([icon="star"]),
+    [empty-icon]:not([empty-icon="star_border"])
+  ):not(:defined)::after {
+  background: none;
+}

package/dist/ssr/sidebar-ssr.css

@@ -7,9 +7,17 @@ eun-sidebar:not(:defined) {
   box-sizing: border-box;
   overflow: hidden;
   width: var(--sidebar-width, 280px);
+  border-inline-end: var(--eun-border-width-s, 1px) solid transparent;
 }
 
-eun-sidebar[collapsed][collapse-mode="mini"]:not(:defined) {
+eun-sidebar[position="end"]:not(:defined) {
+  border-inline-end: none;
+  border-inline-start: var(--eun-border-width-s, 1px) solid transparent;
+}
+
+eun-sidebar[collapsed]:is([collapse-mode="mini"], :not([collapse-mode])):not(
+    :defined
+  ) {
   width: var(--sidebar-mini-width, 64px);
 }
 

package/dist/ssr/skeleton-ssr.css

@@ -0,0 +1,63 @@
+eun-skeleton:not(:defined) {
+  --_color: var(--skeleton-color, var(--eun-surface-sunken-strong, #ecedf0));
+  --_highlight: var(
+    --skeleton-highlight-color,
+    var(--eun-surface-sunken, #f7f8fa)
+  );
+  display: block;
+  width: 100%;
+}
+
+eun-skeleton:not(:defined)::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    var(--_color) 25%,
+    var(--_highlight) 50%,
+    var(--_color) 75%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--skeleton-border-radius, var(--eun-border-radius-m, 8px));
+  animation: eun-skeleton-ssr-shimmer 1.6s ease-in-out infinite;
+}
+
+eun-skeleton[variant="text"]:not(:defined)::before {
+  height: 1em;
+  border-radius: var(--skeleton-border-radius, var(--eun-border-radius-s, 5px));
+}
+
+eun-skeleton[variant="circle"]:not(:defined)::before {
+  border-radius: var(--eun-border-radius-xl, 999px);
+}
+
+@supports (width: attr(width type(<length-percentage>), 100%)) {
+  eun-skeleton[width]:not(:defined)::before {
+    width: attr(width type(<length-percentage>), 100%);
+  }
+
+  eun-skeleton[height]:not([variant="text"]):not(:defined)::before {
+    height: attr(height type(<length-percentage>), 1rem);
+  }
+
+  eun-skeleton[radius]:not([variant="circle"]):not(:defined)::before {
+    border-radius: attr(radius type(<length-percentage>), 0px);
+  }
+}
+
+@keyframes eun-skeleton-ssr-shimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  eun-skeleton:not(:defined)::before {
+    animation: none;
+  }
+}