@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/ssr/carousel-ssr.css

@@ -2,11 +2,15 @@ eun-carousel:not(:defined) {
   --_visibleCount: 1;
   --_count: var(--carousel-visible-slides, var(--_visibleCount));
   --_gap: var(--carousel-gap, 16px);
+  --_peek: var(--carousel-peek-size, 32px);
   --_basis: var(
     --carousel-slide-width,
     max(
       var(--carousel-min-slide-width, 220px),
-      calc((100% - (var(--_count) - 1) * var(--_gap)) / var(--_count))
+      calc(
+        (100% - var(--_peek) - (var(--_count) - 1) * var(--_gap)) /
+          var(--_count)
+      )
     )
   );
   --_navSize: var(--carousel-nav-size, 42px);
@@ -38,12 +42,16 @@ eun-carousel:not(:defined) {
   display: grid;
 }
 
-eun-carousel[show-arrows="false"]:not(:defined) {
+eun-carousel[full-slides]:not(:defined) {
+  --_peek: 0px;
+}
+
+eun-carousel:not([show-arrows]):not(:defined) {
   --_navReserve: 0px;
   --carousel-nav-display: none;
 }
 
-eun-carousel[show-dots="false"]:not(:defined) {
+eun-carousel:not([show-dots]):not(:defined) {
   --carousel-dots-display: none;
 }
 
@@ -79,7 +87,10 @@ eun-carousel:not(:defined) > [slot="title"] {
     --carousel-slide-width,
     max(
       var(--carousel-min-slide-width, 220px),
-      calc((100cqi - (var(--_count) - 1) * var(--_gap)) / var(--_count))
+      calc(
+        (100cqi - var(--_peek) - (var(--_count) - 1) * var(--_gap)) /
+          var(--_count)
+      )
     )
   );
   --_titleOverflow: calc(

package/dist/ssr/chip-ssr.css

@@ -7,7 +7,7 @@ eun-chip:not(:defined) {
   --_fg-outline: var(--_accent);
   --_bd-outline: var(--_solid);
   --_bg-flat: var(--eun-content-hover, #edeff0);
-  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_fg-flat: var(--eun-text-secondary, #666e8a);
   --_bg: var(--_bg-default);
   --_fg: var(--_fg-default);
   --_bd: transparent;
@@ -172,7 +172,7 @@ eun-chip[appearance="flat"]:not(:defined) {
   --_fg: var(--_fg-flat);
 }
 
-eun-chip[rounded="false"]:not(:defined) {
+eun-chip:not([rounded]):not(:defined) {
   border-radius: var(--chip-border-radius, var(--eun-border-radius-s, 5px));
 }
 
@@ -247,6 +247,6 @@ eun-chip:not(:defined)::after {
     center / var(--_deleteIconSize) no-repeat;
 }
 
-eun-chip[removable="false"]:not(:defined)::after {
+eun-chip:not([removable]):not(:defined)::after {
   display: none;
 }

package/dist/ssr/collapse-ssr.css

@@ -59,7 +59,7 @@ eun-collapse:not(:defined) > [slot="heading"] {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: var(--collapse-heading-font-size, var(--eun-font-size-s, 14px));
-  font-weight: var(--eun-font-weight-l);
+  font-weight: var(--collapse-heading-font-weight, var(--eun-font-weight-l));
 }
 
 eun-collapse:not(:defined):has(> [slot="subheading"]) > [slot="heading"] {
@@ -72,7 +72,7 @@ eun-collapse:not(:defined) > [slot="subheading"] {
   align-self: start;
   justify-self: start;
   margin-block-start: var(--eun-space-xxs, 1.6px);
-  color: var(--collapse-subheading-color, var(--eun-text-secondary, #484e61));
+  color: var(--collapse-subheading-color, var(--eun-text-secondary, #666e8a));
   font-size: var(
     --collapse-subheading-font-size,
     var(--eun-font-size-xs, 14px)

package/dist/ssr/description-list-ssr.css

@@ -39,7 +39,7 @@ eun-description-list {
     font-weight: var(--description-list-label-font-weight, inherit);
     color: var(
       --description-list-label-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
   }
 

package/dist/ssr/divider-ssr.css

@@ -0,0 +1,23 @@
+:where(eun-divider:not(:defined)) {
+  --_color: var(--divider-color, var(--eun-border-color, #dee0e7));
+  --_spacing: var(--divider-spacing, var(--eun-space-m, 16px));
+  display: block;
+}
+
+:where(
+  eun-divider:not(:defined):is([orientation="horizontal"], :not([orientation]))
+) {
+  width: 100%;
+  height: 0;
+  margin-block: var(--_spacing);
+  border-block-start: 1px solid var(--_color);
+}
+
+:where(eun-divider[orientation="vertical"]:not(:defined)) {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  height: auto;
+  margin-inline: var(--_spacing);
+  border-inline-start: 1px solid var(--_color);
+}

package/dist/ssr/field-ssr.css

@@ -1,4 +1,13 @@
-:is(eun-input, eun-search, eun-textarea, eun-select):not(:defined) {
+:is(
+  eun-input,
+  eun-search,
+  eun-textarea,
+  eun-select,
+  eun-counter,
+  eun-date-picker,
+  eun-time-picker,
+  eun-color-picker
+):not(:defined) {
   --_borderColor: var(--field-border-color, var(--eun-border-color, #dee0e7));
   --_defaultPaddingBlock: var(--eun-space-s, 8px);
   --_defaultFontSize: var(--eun-font-size-s, 14px);
@@ -14,7 +23,18 @@
   font-family: var(--eun-font-family, "Mulish", sans-serif);
   font-size: var(--field-font-size, var(--_defaultFontSize));
 }
-:where(:is(eun-input, eun-search, eun-textarea, eun-select):not(:defined)) {
+:where(
+  :is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  ):not(:defined)
+) {
   display: block;
   width: 100%;
 }
@@ -23,78 +43,152 @@ eun-textarea:not(:defined) {
   --_defaultLineHeight: normal;
 }
 
-:is(eun-input, eun-search, eun-select)[rounded]:not(:defined) {
+:is(
+    eun-input,
+    eun-search,
+    eun-select,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[rounded]:not(:defined) {
   --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
   --_defaultPaddingInline: var(--eun-space-m, 16px);
 }
 
-:is(eun-input, eun-search, eun-select)[size="xs"]:not(:defined) {
+:is(
+    eun-input,
+    eun-search,
+    eun-select,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[size="xs"]:not(:defined) {
   --_defaultFontSize: var(--eun-font-size-xs, 10px);
   --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
   --_defaultLineHeight: 10px;
 }
 
-:is(eun-input, eun-search, eun-select)[size="s"]:not(:defined) {
+:is(
+    eun-input,
+    eun-search,
+    eun-select,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[size="s"]:not(:defined) {
   --_defaultFontSize: var(--eun-font-size-xs, 10px);
   --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
   --_defaultLineHeight: 10px;
 }
 
-:is(eun-input, eun-search, eun-select)[size="l"]:not(:defined) {
+:is(
+    eun-input,
+    eun-search,
+    eun-select,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[size="l"]:not(:defined) {
   --_defaultFontSize: var(--eun-font-size-m, 16px);
   --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
   --_defaultLineHeight: 1.1rem;
 }
 
-:is(eun-input, eun-search, eun-select)[size="xl"]:not(:defined) {
+:is(
+    eun-input,
+    eun-search,
+    eun-select,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[size="xl"]:not(:defined) {
   --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
   --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
   --_defaultLineHeight: 1.3rem;
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select):is(
-    [label],
-    [required],
-    [instructions]
-  ):not(:defined)::before {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  ):is([label], [required], [instructions]):not(:defined)::before {
   content: attr(label) "\200b";
   display: block;
   margin-block-end: calc(2 * var(--eun-space-xs, 4px));
   white-space: pre-line;
-  color: var(--eun-text-secondary, #484e61);
+  color: var(--eun-text-secondary, #666e8a);
   font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[instructions]:not(
-    :defined
-  )::before {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[instructions]:not(:defined)::before {
   content: attr(label) "\200b\A" attr(instructions);
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select):is(
-    [label],
-    [required],
-    [instructions]
-  ):not(:defined)::first-line {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  ):is([label], [required], [instructions]):not(:defined)::first-line {
   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);
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[required]:not([label]):not(
-    :defined
-  )::first-line {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[required]:not([label]):not(:defined)::first-line {
   font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[required]:not(
-    [label],
-    [instructions]
-  ):not(:defined)::before {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[required]:not([label], [instructions]):not(:defined)::before {
   font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select):not(:defined)::after {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  ):not(:defined)::after {
   content: "\200b";
   display: block;
   box-sizing: border-box;
@@ -113,9 +207,16 @@ eun-textarea:not(:defined) {
   text-overflow: ellipsis;
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[placeholder]:not(
-    :defined
-  )::after {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[placeholder]:not(:defined)::after {
   content: attr(placeholder) "\200b";
 }
 
@@ -133,9 +234,16 @@ eun-search:not([icon=""]):not(:defined)::after {
   );
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[appearance="flat"]:not(
-    :defined
-  )::after {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[appearance="flat"]:not(:defined)::after {
   border-color: transparent;
   background-color: var(--field-background, var(--eun-content-hover, #edeff0));
 }
@@ -144,23 +252,41 @@ eun-search:not([icon=""]):not(:defined)::after {
     eun-input,
     eun-search,
     eun-textarea,
-    eun-select
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
   )[appearance="underline"]:not(:defined)::after {
   border-width: 0 0 var(--eun-border-width-m, 1.5px);
   border-radius: 0;
   background-color: var(--field-background, transparent);
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[disabled]:not(
-    :defined
-  )::after {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[disabled]:not(:defined)::after {
   opacity: 0.5;
   background-color: var(--eun-disabled-color, #ecedf0);
 }
 
-:is(eun-input, eun-search, eun-textarea, eun-select)[readonly]:not(
-    :defined
-  )::after {
+:is(
+    eun-input,
+    eun-search,
+    eun-textarea,
+    eun-select,
+    eun-counter,
+    eun-date-picker,
+    eun-time-picker,
+    eun-color-picker
+  )[readonly]:not(:defined)::after {
   border-color: var(--eun-readonly-color, #666e8a);
 }
 
@@ -234,3 +360,80 @@ eun-search[icon="search"]:not(:defined):dir(rtl)::after {
   background-position: right
     calc(var(--eun-space-m, 16px) - var(--eun-border-width-m, 1.5px)) center;
 }
+
+eun-counter:not(:defined) {
+  --_borderColor: var(--counter-border-color, var(--eun-border-color, #dee0e7));
+  --_defaultBorderRadius: var(
+    --counter-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  --_padding: var(--eun-space-s, 8px) var(--eun-space-xs, 4px);
+  color: var(--counter-text-color, var(--eun-text-color, #071621));
+  font-size: var(--eun-font-size-s, 14px);
+}
+:where(eun-counter:not(:defined)) {
+  width: fit-content;
+  max-width: 100%;
+}
+
+eun-counter[rounded]:not(:defined) {
+  --_defaultBorderRadius: var(
+    --counter-border-radius,
+    var(--eun-border-radius-xl, 999px)
+  );
+}
+
+eun-counter:not(:defined)::after {
+  box-sizing: content-box;
+  width: var(--counter-field-width, 3.5rem);
+  padding-inline: calc(var(--eun-space-l, 32px) + var(--eun-space-xs, 4px));
+  line-height: normal;
+  border-radius: var(--_defaultBorderRadius);
+  background-color: var(--counter-background, transparent);
+  color: inherit;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+eun-counter[value]:not(:defined)::after {
+  content: attr(value) "\200b";
+}
+
+eun-color-picker:not(:defined) > option {
+  display: none;
+}
+
+:where(eun-color-picker[swatch-only]:not(:defined)) {
+  display: inline-block;
+  width: auto;
+}
+
+/* The label's legend keeps its default inline padding, which sizes a swatch-only picker. */
+eun-color-picker[swatch-only]:not(:defined)::before {
+  padding-inline: 2px;
+}
+
+eun-color-picker[swatch-only]:not(:defined)::after {
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border-width: var(--eun-border-width-s, 1px);
+  border-radius: var(--eun-border-radius-xl, 999px);
+}
+
+/* The static display of the value, a swatch padded like a field. */
+eun-color-picker[readonly-available]:not([swatch-only]):not(:defined)::after {
+  padding: var(--eun-space-s, 8px);
+  line-height: 20px;
+}
+
+/* A row of swatches standing on the text baseline, with no field box. */
+eun-color-picker[presets-inline]:has(> option):not(:defined)::after {
+  content: "";
+  display: inline-block;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  background: none;
+}

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

@@ -23,12 +23,10 @@ eun-image-carousel:is(:not([images]), [images*="},"]):not(:defined)::after {
   margin-top: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
 }
 
-eun-image-carousel[show-thumbnails="false"]:not(:defined)::after {
+eun-image-carousel:not([show-thumbnails]):not(:defined)::after {
   height: var(--image-carousel-dot-size, 8px);
 }
 
-eun-image-carousel[show-thumbnails="false"][show-dots="false"]:not(
-    :defined
-  )::after {
+eun-image-carousel:not([show-thumbnails], [show-dots]):not(:defined)::after {
   display: none;
 }

package/dist/ssr/links-ssr.css

@@ -62,7 +62,8 @@ eun-link[block]:not(:defined) > a {
   border: 0;
 }
 
-:is(eun-link, eun-button):not(:defined) > a[target="_blank"]::after {
+:is(eun-link, eun-button):not(:defined) > a[target="_blank"]::after,
+:is(eun-link, eun-button)[href][target="_blank"]:not(:defined)::after {
   content: "";
   display: inline-block;
   width: 14px;
@@ -75,8 +76,21 @@ eun-link[block]:not(:defined) > a {
   rotate: -45deg;
 }
 
-eun-button:not(:defined) > a[target="_blank"]::after {
+eun-link[href][target="_blank"]:not(:defined)::after {
+  flex-shrink: 0;
+  margin-inline-start: calc(-1 * var(--eun-space-xs, 4px));
+}
+
+eun-button:not(:defined) > a[target="_blank"]::after,
+eun-button[href][target="_blank"]:not(:defined)::after {
   width: 12px;
   height: 12px;
-  margin-inline: var(--eun-space-s, 8px) calc(-1 * var(--eun-space-xs, 4px));
+  margin-inline: calc(var(--_gap) + var(--eun-space-s, 8px))
+    calc(-1 * var(--eun-space-xs, 4px));
+}
+
+eun-button[href][target="_blank"]:not(:defined)::after {
+  flex-shrink: 0;
+  order: 1;
+  margin-inline-start: var(--eun-space-s, 8px);
 }

package/dist/ssr/nav-menu-ssr.css

@@ -0,0 +1,82 @@
+:where(eun-nav-menu:not(:defined)) {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+eun-nav-menu:not(:defined) {
+  align-items: center;
+  gap: var(--nav-menu-trigger-gap, var(--eun-space-xs, 4px));
+  padding: var(
+    --nav-menu-trigger-padding,
+    var(--nav-menu-trigger-padding-block, var(--eun-space-xs, 4px))
+      var(--nav-menu-trigger-padding-inline, var(--eun-space-xs, 4px))
+  );
+  border-radius: var(
+    --nav-menu-trigger-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  background: var(--nav-menu-trigger-background, transparent);
+  box-shadow: var(--nav-menu-trigger-shadow, none);
+  color: var(--nav-menu-trigger-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--nav-menu-trigger-font-size, inherit);
+  font-weight: var(--nav-menu-trigger-font-weight, inherit);
+  white-space: nowrap;
+}
+
+eun-nav-menu[theme="dark"]:not(:defined) {
+  color: var(
+    --nav-menu-trigger-color,
+    var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+  );
+}
+
+eun-nav-menu[theme="dark"][current]:not(:defined),
+eun-nav-menu[theme="dark"]:not(:defined):has(
+    > [current],
+    > [aria-current="page"],
+    > * [aria-current="page"]
+  ) {
+  color: var(
+    --nav-menu-trigger-color-current,
+    color-mix(in srgb, var(--eun-color-primary-500, #3d6fff) 55%, #ffffff)
+  );
+}
+
+eun-nav-menu[current]:not(:defined),
+eun-nav-menu:not(:defined):has(
+    > [current],
+    > [aria-current="page"],
+    > * [aria-current="page"]
+  ) {
+  color: var(
+    --nav-menu-trigger-color-current,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+}
+
+eun-nav-menu:not(:defined) > [slot="icon"] {
+  order: -1;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+eun-nav-menu:not(:defined) > [slot="chevron"] {
+  order: 1;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+eun-nav-menu:not(:defined):not([hide-chevron]):not(
+    :has(> [slot="chevron"])
+  )::after {
+  content: "";
+  order: 1;
+  flex-shrink: 0;
+  width: var(--nav-menu-icon-size, 1.25em);
+  height: var(--nav-menu-icon-size, 1.25em);
+}
+
+eun-nav-menu[hide-chevron]:not(:defined) > [slot="chevron"] {
+  display: none;
+}

package/dist/ssr/overlay-ssr.css

@@ -11,6 +11,10 @@ eun-dropdown-button:not(:defined) > [slot="items"] {
   display: none;
 }
 
+eun-nav-menu:not(:defined) > :not([slot]) {
+  display: none;
+}
+
 eun-tooltip:not(:defined) > :not([slot="anchor"]) {
   display: none;
 }