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

package/dist/ssr/links-ssr.css

@@ -1,3 +1,46 @@
+eun-link:not(:defined) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--eun-space-s, 8px);
+  padding: var(
+    --link-padding,
+    var(--link-padding-block, 0) var(--link-padding-inline, 0)
+  );
+  color: var(--link-color, var(--eun-text-color, #071621));
+}
+
+eun-link[theme="dark"]:not(:defined) {
+  color: var(
+    --link-color,
+    var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+  );
+}
+
+eun-link[current]:not(:defined) {
+  color: var(--link-color-current, var(--eun-color-primary-500, #3d6fff));
+}
+
+eun-link:not(:defined) > [slot="icon"] {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--link-icon-color, inherit);
+  font-size: var(--link-icon-size, inherit);
+}
+
+eun-link[block]:not(:defined) {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+eun-link[block]:not(:defined) > a {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :where(:is(eun-link, eun-button, eun-card):not(:defined) > a) {
   color: inherit;
   text-decoration: none;
@@ -31,5 +74,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

@@ -1,5 +1,6 @@
 eun-sidebar:not(:defined) {
   display: flex;
+  flex-direction: column;
   position: sticky;
   top: 0;
   flex-shrink: 0;
@@ -7,13 +8,111 @@ eun-sidebar:not(:defined) {
   box-sizing: border-box;
   overflow: hidden;
   width: var(--sidebar-width, 280px);
+  padding-block: var(--sidebar-gap, var(--eun-space-m, 16px));
+  padding-inline: var(
+    --sidebar-padding,
+    var(--sidebar-padding-inline, var(--eun-space-m, 16px))
+  );
+  background: var(--sidebar-background, var(--eun-surface-color, #ffffff));
+  color: var(--sidebar-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  border-inline-end: var(--eun-border-width-s, 1px) solid
+    var(--sidebar-border-color, var(--eun-border-color, #dee0e7));
 }
 
-eun-sidebar[collapsed][collapse-mode="mini"]:not(:defined) {
+eun-sidebar[theme="dark"]:not(:defined) {
+  background: var(--sidebar-background, var(--eun-surface-inverse, #0b1620));
+  color: var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa));
+  border-color: var(
+    --sidebar-border-color,
+    color-mix(
+      in srgb,
+      var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa)) 16%,
+      transparent
+    )
+  );
+}
+
+eun-sidebar[position="end"]:not(:defined) {
+  border-inline-end: none;
+  border-inline-start: var(--eun-border-width-s, 1px) solid
+    var(--sidebar-border-color, var(--eun-border-color, #dee0e7));
+}
+
+eun-sidebar[theme="dark"][position="end"]:not(:defined) {
+  border-inline-start-color: var(
+    --sidebar-border-color,
+    color-mix(
+      in srgb,
+      var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa)) 16%,
+      transparent
+    )
+  );
+}
+
+eun-sidebar[collapsed]:is([collapse-mode="mini"], :not([collapse-mode])):not(
+    :defined
+  ) {
   width: var(--sidebar-mini-width, 64px);
 }
 
-eun-sidebar[collapsed][collapse-mode="hidden"]:not(:defined),
-eun-sidebar[dragged-hidden]:not(:defined) {
+eun-sidebar[collapsed][collapse-mode="hidden"]:not(:defined) {
   width: 0px;
+  padding: 0;
+  border-color: transparent;
+}
+
+eun-sidebar:not(:defined):has(> [slot="header"]) {
+  padding-block-start: var(
+    --sidebar-padding,
+    var(--sidebar-padding-block, var(--eun-space-m, 16px))
+  );
+}
+
+eun-sidebar:not(:defined):has(> [slot="footer"]) {
+  padding-block-end: var(
+    --sidebar-padding,
+    var(--sidebar-padding-block, var(--eun-space-m, 16px))
+  );
+}
+
+eun-sidebar:not(:defined) > [slot="header"] {
+  order: -1;
+}
+
+eun-sidebar:not(:defined) > :nth-last-child(1 of [slot="header"]) {
+  margin-block-end: var(--sidebar-gap, var(--eun-space-m, 16px));
+}
+
+eun-sidebar:not(:defined) > [slot="footer"] {
+  order: 1;
+}
+
+eun-sidebar:not(:defined) > :nth-child(1 of [slot="footer"]) {
+  margin-block-start: auto;
+}
+
+@media (width < 600px) {
+  eun-sidebar[hide-below="mobile"] {
+    display: none;
+  }
+}
+
+@media (width < 768px) {
+  eun-sidebar[hide-below="tablet"] {
+    display: none;
+  }
+}
+
+@media (width < 1024px) {
+  eun-sidebar[hide-below="laptop"] {
+    display: none;
+  }
+}
+
+@media (width < 1280px) {
+  eun-sidebar[hide-below="desktop"] {
+    display: none;
+  }
 }

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

package/dist/ssr/tabs-ssr.css

@@ -0,0 +1,129 @@
+eun-tab-group:not(:defined) {
+  --_indicatorHeight: var(--tab-indicator-height, 2px);
+  --_dividerGap: var(--tab-divider-gap, 0px);
+  --_dividerSize: var(--tab-divider-size, 2px);
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--tab-gap, 0);
+  padding-block-start: 4px;
+  background: none;
+}
+
+eun-tab-group:not(:defined)[align="center"] {
+  justify-content: center;
+}
+
+eun-tab-group:not(:defined)[align="end"] {
+  justify-content: flex-end;
+}
+
+eun-tab-group:not(:defined)[full] {
+  justify-content: flex-start;
+}
+
+eun-tab-group:not(:defined) > eun-tab {
+  position: relative;
+  order: 0;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: var(
+    --tab-padding,
+    var(--tab-padding-block, var(--eun-space-s, 8px))
+      var(--tab-padding-inline, var(--eun-space-m, 16px))
+  );
+  border: var(--tab-border);
+  border-radius: var(--tab-border-radius, 8px);
+  background: var(--tab-background-color, transparent);
+  color: var(--tab-text-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+  white-space: nowrap;
+}
+
+eun-tab-group:not(:defined)[full] > eun-tab {
+  flex: 1 1 0%;
+}
+
+eun-tab-group:not(:defined) > eun-tab:first-of-type {
+  margin-inline-start: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab:last-of-type {
+  margin-inline-end: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab[disabled] {
+  display: var(--tab-disabled-display, grid);
+  color: var(--eun-text-disabled-color, #8d93aa);
+}
+
+/* The active tab : the one marked active, or the first one. */
+eun-tab-group:not(:defined) > eun-tab[active],
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab:first-of-type {
+  background: var(--tab-active-background-color, transparent);
+  border: var(--tab-border-active, var(--tab-border));
+  color: var(--tab-active-text-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+eun-tab-group:not(:defined):not([hide-indicator]) > eun-tab[active]::after,
+eun-tab-group:not(:defined):not([hide-indicator], :has(> eun-tab[active]))
+  > eun-tab:first-of-type::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * var(--_dividerGap));
+  height: var(--_indicatorHeight);
+  background: var(--tab-indicator-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+/* The divider under the tab list. */
+eun-tab-group:not(:defined)::before {
+  content: "";
+  order: 1;
+  flex: 0 0 100%;
+  height: var(--_dividerSize);
+  margin-block-start: calc(var(--_dividerGap) - var(--_dividerSize));
+  background: var(--tab-divider-color, var(--eun-divider-color, #dee0e7));
+}
+
+/* Every panel but the active one is hidden, as once upgraded. */
+eun-tab-group:not(:defined) > eun-tab-panel {
+  display: none;
+}
+
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab-panel:first-of-type,
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(1)[active])
+  > eun-tab-panel:nth-of-type(1),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(2)[active])
+  > eun-tab-panel:nth-of-type(2),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(3)[active])
+  > eun-tab-panel:nth-of-type(3),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(4)[active])
+  > eun-tab-panel:nth-of-type(4),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(5)[active])
+  > eun-tab-panel:nth-of-type(5),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(6)[active])
+  > eun-tab-panel:nth-of-type(6),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(7)[active])
+  > eun-tab-panel:nth-of-type(7),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(8)[active])
+  > eun-tab-panel:nth-of-type(8),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(9)[active])
+  > eun-tab-panel:nth-of-type(9),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(10)[active])
+  > eun-tab-panel:nth-of-type(10),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(11)[active])
+  > eun-tab-panel:nth-of-type(11),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(12)[active])
+  > eun-tab-panel:nth-of-type(12) {
+  order: 2;
+  display: block;
+  flex: 0 0 100%;
+  margin-block-start: var(--tab-panel-gap, var(--eun-space-l, 32px));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-panel-font-size, var(--eun-font-size-s, 14px));
+}