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

package/dist/components/form/search/search.styles.js

@@ -11,11 +11,11 @@ const search = css `
     align-items: center;
     padding: 2px 6px;
     font-family: inherit;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_iconColor);
     background: var(--eun-content-hover, #edeff0);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   #field-wrapper #shortcut-hint {
     position: absolute;
@@ -46,7 +46,7 @@ const search = css `
     text-align: left;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     box-sizing: border-box;
@@ -80,7 +80,7 @@ const search = css `
   :host([variant="underline"]) #search-trigger {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #search-trigger:focus-visible {
@@ -106,7 +106,7 @@ const search = css `
     top: 0;
     z-index: 1;
     background: var(--modal-background, var(--eun-surface-color, #ffffff));
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
   #panel-field #field-wrapper {
     position: relative;

package/dist/components/form/select/select.d.ts

@@ -22,7 +22,7 @@ type SelectValue = string | string[];
  * Type of the select base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup

package/dist/components/form/select/select.styles.js

@@ -27,7 +27,7 @@ const select = css `
     right: var(--eun-space-m, 16px);
     pointer-events: none;
     color: var(--_iconColor);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     transition: transform 0.15s ease;
   }
   #select-arrow.open {
@@ -56,8 +56,8 @@ const select = css `
     height: 16px;
     margin-inline-end: var(--eun-space-xs, 4px);
     vertical-align: -3px;
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-s, 5px);
     --icon-color: transparent;
   }
   #listbox li.selected .option-checkbox {
@@ -71,7 +71,7 @@ const select = css `
     gap: var(--eun-space-s, 8px);
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
     cursor: default;
-    border-block-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   #listbox .actions[hidden] {
     display: none;
@@ -85,7 +85,7 @@ const select = css `
     border: none;
     background: none;
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(
       --field-confirm-link-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -106,7 +106,7 @@ const select = css `
   #confirm-link:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-m);
+    border-radius: var(--eun-border-radius-m);
   }
 `;
 export const selectStyles = [

package/dist/components/form/shared-styles/card.styles.js

@@ -18,7 +18,7 @@ import { css } from "lit";
 const base = css `
   :host {
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-block;
     outline: none;
   }

package/dist/components/form/shared-styles/field.styles.js

@@ -38,14 +38,14 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(--field-border-radius, var(--eun-borderRadius-m, 8px));
+    --_borderRadius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
     --_padding: var(
       --field-padding,
       var(--eun-space-s, 8px) var(--eun-space-s, 8px)
     );
     --_shadow: var(--field-shadow, none);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: 100%;
     outline: none;
@@ -65,7 +65,7 @@ const base = css `
     font: inherit;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     outline: 1px solid transparent;
@@ -124,12 +124,12 @@ const base = css `
     border-color: transparent;
   }
   :host([variant="fill"]) #field[aria-invalid="true"] {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #field:focus-visible {
@@ -168,11 +168,11 @@ const base = css `
   #password-toggle:focus-visible {
     outline: 2px solid var(--_focusIndicator);
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
   }
   #readonly-display {
     padding: var(--_padding);
-    border: var(--eun-borderWidth-m, 1.5px) solid transparent;
+    border: var(--eun-border-width-m, 1.5px) solid transparent;
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: text;

package/dist/components/form/shared-styles/form-labels.styles.js

@@ -4,7 +4,7 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     display: block;
     margin-block-start: var(--eun-space-xs, 4px);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     margin-block: 0;
   }
   #description span {

package/dist/components/form/shared-styles/listbox.styles.js

@@ -39,10 +39,10 @@ const listbox = css `
     max-height: var(--field-listbox-max-height, 260px);
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     box-shadow: var(
       --eun-shadow-m,
@@ -74,13 +74,13 @@ const listbox = css `
     background: var(--eun-content-hover, #edeff0);
   }
   #listbox li.selected {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-color-primary-500, #3d6fff);
   }
   #listbox li mark {
     background: var(--field-match-background, none);
     color: var(--field-match-color, var(--eun-color-primary-500, #3d6fff));
-    font-weight: var(--field-match-font-weight, var(--eun-fontWeight-l, 700));
+    font-weight: var(--field-match-font-weight, var(--eun-font-weight-l, 700));
     text-decoration: var(--field-match-text-decoration, none);
   }
   #listbox .no-results,
@@ -92,8 +92,8 @@ const listbox = css `
   #listbox .group-label {
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
   }

package/dist/components/form/slider/slider.d.ts

@@ -13,7 +13,7 @@ export declare const EunomiaSliderTagName = "eun-slider";
  * Type of the slider base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<number> & FormLabelMixinInterface;
+type EunomiaSliderBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface;
 declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
 /**
  * A form-associated control for picking a single numeric value out of a

package/dist/components/form/slider/slider.styles.js

@@ -26,7 +26,7 @@ const base = css `
     --_trackHeight: var(--slider-track-height, 6px);
     --_trackColor: var(
       --slider-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
     --_fillColor: var(
       --slider-track-fill-background,
@@ -34,7 +34,7 @@ const base = css `
     );
     --_trackRadius: var(
       --slider-track-border-radius,
-      var(--eun-borderRadius-xl, 999px)
+      var(--eun-border-radius-xl, 999px)
     );
     --_thumbSize: var(--slider-thumb-size, 18px);
     --_thumbBackground: var(--slider-thumb-background, #fff);
@@ -62,7 +62,7 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: 100%;
     outline: none;
@@ -113,12 +113,12 @@ const base = css `
     transform: translateX(-50%);
     background: var(--_tooltipBackground);
     color: var(--_tooltipColor);
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
     white-space: nowrap;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
-    border-radius: var(--eun-borderRadius-s, 4px);
+    border-radius: var(--eun-border-radius-s, 4px);
     pointer-events: none;
     font-variant-numeric: tabular-nums;
   }

package/dist/components/form/switch/switch.d.ts

@@ -13,7 +13,7 @@ export declare const EunomiaSwitchTagName = "eun-switch";
  * Type of the switch base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & CheckMixinInterface;
+type EunomiaSwitchBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & CheckMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type.
  * Reuses the exact same behavior stack as `eun-checkbox` (form participation,

package/dist/components/form/switch/switch.styles.js

@@ -23,7 +23,7 @@ const base = css `
     --_trackBorder: var(--eun-border-color, #dee0e7);
     --_trackBackground: var(
       --switch-track-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken, #ecedf0)
     );
     --_thumbSize: var(--switch-thumb-size, calc(var(--_trackHeight) - 6px));
     --_thumbBackground: var(--switch-thumb-background, #fff);
@@ -37,9 +37,9 @@ const base = css `
       --switch-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_trackBorderWidth: var(--eun-borderWidth-s, 1px);
+    --_trackBorderWidth: var(--eun-border-width-s, 1px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: flex;
     width: 100%;
     outline: none;
@@ -70,7 +70,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-hover,
-      var(--eun-content-hover, #edeff0)
+      var(--eun-surface-sunken-hover, #edeff0)
     );
   }
 
@@ -82,7 +82,7 @@ const base = css `
     #track {
     --_trackBackground: var(
       --switch-track-background-pressed,
-      var(--eun-content-pressed, #e4e6e8)
+      var(--eun-surface-sunken-pressed, #e4e6e8)
     );
   }
 
@@ -147,7 +147,7 @@ const base = css `
   }
 
   #label-text {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1.2;
   }
 
@@ -161,7 +161,7 @@ const base = css `
     height: var(--_trackHeight);
     background: var(--_trackBackground);
     border: var(--_trackBorderWidth) solid var(--_trackBorder);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     flex-shrink: 0;
     box-sizing: border-box;
     outline: 2px solid transparent;
@@ -178,7 +178,7 @@ const base = css `
     width: var(--_thumbSize);
     height: var(--_thumbSize);
     background: var(--_thumbBackground);
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     box-shadow: var(--eun-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.18));
     display: flex;
     align-items: center;

package/dist/components/form/textarea/textarea.d.ts

@@ -15,7 +15,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and

package/dist/components/form/textarea/textarea.styles.js

@@ -72,12 +72,12 @@ const textarea = css `
     width: 2rem;
     height: 2rem;
     padding: 0;
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(
         --_border-indicator-color,
         var(--field-border-color, var(--eun-border-color, #dee0e7))
       );
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: none;
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
     cursor: pointer;
@@ -104,9 +104,9 @@ const textarea = css `
     left: 0;
     margin: 0;
     padding: var(--eun-space-xs, 4px);
-    border: var(--eun-borderWidth-m, 1.5px) solid
+    border: var(--eun-border-width-m, 1.5px) solid
       var(--eun-border-color, #dee0e7);
-    border-radius: var(--eun-borderRadius-m, 8px);
+    border-radius: var(--eun-border-radius-m, 8px);
     background: var(--eun-surface-color, #ffffff);
     box-shadow: var(--eun-shadow-m, 0 4px 16px rgba(0, 0, 0, 0.12));
     display: grid;
@@ -120,7 +120,7 @@ const textarea = css `
     width: 1.75rem;
     height: 1.75rem;
     padding: 0;
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
     border: 2px solid transparent;
     background-color: var(--_swatch-bg);
     cursor: pointer;
@@ -149,7 +149,7 @@ const textarea = css `
     flex: 0 0 auto;
     margin-inline-start: auto;
     white-space: nowrap;
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(--_hintColor, var(--eun-text-secondary, #484e61));
   }
   #char-count[data-exceeded] {

package/dist/components/form/time-picker/time-picker-columns.styles.js

@@ -31,7 +31,7 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
@@ -54,14 +54,14 @@ const timePickerColumns = css `
     align-items: center;
     justify-content: center;
     min-width: 48px;
-    font-size: var(--eun-fontSize-l, 24px);
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-size: var(--eun-font-size-l, 24px);
+    font-weight: var(--eun-font-weight-m, 600);
     color: var(--_textColor, var(--eun-text-color, #071621));
     font-variant-numeric: tabular-nums;
   }
   .tp-value {
     padding: var(--eun-space-xs, 4px);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     outline: 2px solid transparent;
     outline-offset: 2px;
     cursor: default;
@@ -81,7 +81,7 @@ const timePickerColumns = css `
     scrollbar-width: none;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
   .tp-wheel::-webkit-scrollbar {
     display: none;
@@ -113,7 +113,7 @@ const timePickerColumns = css `
   }
   .tp-wheel-item.selected {
     color: var(--_textColor, var(--eun-text-color, #071621));
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   @media (prefers-reduced-motion: reduce) {
     .tp-wheel {

package/dist/components/form/time-picker/time-picker-list.styles.js

@@ -19,7 +19,7 @@ const timePickerList = css `
     display: flex;
     align-items: center;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
     color: var(--_textColor, var(--eun-text-color, #071621));
@@ -49,7 +49,7 @@ const timePickerList = css `
       --time-picker-selected-color,
       var(--eun-color-primary-700, #3662e0)
     );
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-weight: var(--eun-font-weight-m, 600);
   }
   .tp-list-item:disabled {
     cursor: not-allowed;

package/dist/components/form/time-picker/time-picker.d.ts

@@ -19,7 +19,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,

package/dist/components/form/time-picker/time-picker.styles.js

@@ -21,7 +21,7 @@ const timePicker = css `
     width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
       var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
@@ -62,12 +62,12 @@ const timePicker = css `
     border-color: transparent;
   }
   :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field-wrapper {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #field-wrapper:focus-within {
@@ -114,7 +114,7 @@ const timePicker = css `
     justify-content: center;
     margin-inline-start: auto;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor);
@@ -144,14 +144,14 @@ const timePicker = css `
   #timezone-label {
     margin-block-start: var(--eun-space-xxs, 1.6px);
     color: var(--_hintColor);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
   }
   #clock-popover {
     position: fixed;
     top: var(--_anchorTop, 0);
     left: var(--_anchorLeft, 0);
     margin: 0;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     border-radius: var(--_borderRadius);
     background: var(
@@ -180,8 +180,8 @@ const timePicker = css `
   #modal-time-heading {
     padding: var(--eun-space-m, 16px) var(--eun-space-m, 16px) 0;
     color: var(--_textColor);
-    font-size: var(--eun-fontSize-l, 20px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 20px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
   #modal-time {
     --modal-padding: 0;

package/dist/components/loader/loader/loader.styles.js

@@ -100,11 +100,11 @@ const bar = css `
     overflow: hidden;
     border-radius: var(
       --loader-bar-border-radius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     background: var(
       --loader-bar-track-color,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-strong, #ecedf0)
     );
   }
 

package/dist/components/loader/skeleton/skeleton.styles.js

@@ -9,10 +9,13 @@ import { css } from "lit";
  */
 export const skeletonStyles = css `
   :host {
-    --_color: var(--skeleton-color, var(--eun-color-grey-200, #ecedf0));
+    --_color: var(
+      --skeleton-color,
+      var(--eun-surface-sunken-strong, #ecedf0)
+    );
     --_highlight: var(
       --skeleton-highlight-color,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
     display: block;
     width: 100%;
@@ -31,16 +34,16 @@ export const skeletonStyles = css `
     animation: eun-skeleton-shimmer 1.6s ease-in-out infinite;
     border-radius: var(
       --skeleton-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([variant="circle"]) span {
-    border-radius: var(--eun-borderRadius-xl, 999px);
+    border-radius: var(--eun-border-radius-xl, 999px);
   }
   :host([variant="text"]) span {
     border-radius: var(
       --skeleton-border-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
   }
   @keyframes eun-skeleton-shimmer {

package/dist/components/navigation/breadcrumb/breadcrumb-item.d.ts

@@ -17,6 +17,7 @@ export declare const EunomiaBreadcrumbItemTagName = "eun-breadcrumb-item";
  * @prop {string} [href] - The URL this step links to. Renders as plain, unlinked text when unset, such as a category that groups pages but isn't itself a page
  * @prop {boolean} [current=false] - Marks this as the trail's current, unlinked page, regardless of href
  * @prop {EunomiaIconName} [icon] - An optional leading icon shown before the slotted label. Purely decorative, so it never substitutes for the label's own visible text
+ * @fires {NavigationEvent} eunnavigate - Fired before following the step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb-item
  */
 export declare class EunomiaBreadcrumbItem extends LitElement {
@@ -60,6 +61,12 @@ export declare class EunomiaBreadcrumbItem extends LitElement {
      * @private
      */
     private handleIconSlotChange;
+    /**
+     * Dispatches `eunnavigate` before the browser follows the link, so an
+     * SPA router can take over the navigation.
+     * @private
+     */
+    private handleClick;
     connectedCallback(): void;
     render(): TemplateResult;
 }

package/dist/components/navigation/breadcrumb/breadcrumb-item.js

@@ -9,6 +9,7 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { breadcrumbItemStyles } from "./breadcrumb-item.styles.js";
+import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 /**
  * Tag name of the breadcrumb item component.
  */
@@ -26,6 +27,7 @@ export const EunomiaBreadcrumbItemTagName = "eun-breadcrumb-item";
  * @prop {string} [href] - The URL this step links to. Renders as plain, unlinked text when unset, such as a category that groups pages but isn't itself a page
  * @prop {boolean} [current=false] - Marks this as the trail's current, unlinked page, regardless of href
  * @prop {EunomiaIconName} [icon] - An optional leading icon shown before the slotted label. Purely decorative, so it never substitutes for the label's own visible text
+ * @fires {NavigationEvent} eunnavigate - Fired before following the step's link, so a client-side router can intercept the navigation. Cancelable
  * @element eun-breadcrumb-item
  */
 let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
@@ -47,6 +49,14 @@ let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
             this.requestUpdate();
         };
     }
+    /**
+     * Dispatches `eunnavigate` before the browser follows the link, so an
+     * SPA router can take over the navigation.
+     * @private
+     */
+    handleClick(event) {
+        handleLinkNavigation(this, event, this.href);
+    }
     connectedCallback() {
         super.connectedCallback?.();
         if (!this.hasAttribute("role")) {
@@ -75,7 +85,11 @@ let EunomiaBreadcrumbItem = class EunomiaBreadcrumbItem extends LitElement {
       ></span>`;
         }
         else if (this.href) {
-            label = html `<a id="label" href=${this.href} aria-label=${ariaLabel}
+            label = html `<a
+        id="label"
+        href=${this.href}
+        aria-label=${ariaLabel}
+        @click=${this.handleClick}
         >${icon}<slot></slot
       ></a>`;
         }