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

package/dist/components/action/toggle/toggle-group.styles.js

@@ -3,50 +3,154 @@ import { css } from "lit";
  * Base style for the toggle group component.
  *
  * Custom css variables:
- * [--toggle-group-background] - Set a custom background color for the track ; ignored once `appearance` isn't `default`
- * [--toggle-group-border-color] - Set a custom border color for the track ; also the per-option border color at rest in `outline` appearance
+ * [--toggle-group-background] - Set a custom background color for the track, for every appearance (transparent by default in `outline`/`flat`)
+ * [--toggle-group-border-color] - Set a custom border color for the track in `default` appearance, and for each option's border at rest in `outline` and `flat` appearance
  * [--toggle-group-color] - Set a custom text color for unselected options
- * [--toggle-group-active-background] - Set a custom background color for selected options (and the sliding indicator, in exclusive mode) in `default` appearance ; also the `primary` variant's selected color in `outline`/`flat` appearance
- * [--toggle-group-active-color] - Set a custom text color for selected options in `default` appearance ; ignored in `outline`/`flat` appearance
+ * [--toggle-group-active-background] - Set a custom background color for selected options (and the sliding indicator, in exclusive mode) in `default` appearance ; in `outline`/`flat` appearance, the selected color of every option, over its own color
+ * [--toggle-group-active-color] - Set a custom text color for selected options, for every appearance
  * [--toggle-group-border-radius] - Set a custom border radius for the track and its options
  * [--toggle-group-gap] - Set a custom gap between the options
  * [--toggle-group-padding] - Set a custom padding for the track ; also used as the indicator's inset, so it stays flush with the track's edge. Ignored once `appearance` isn't `default`
- * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, in `default` appearance ; ignored in `outline`/`flat` appearance, where hover (and keyboard focus) text color always follows the option's own variant color instead
+ * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, for every appearance
  * [--toggle-group-hover-background] - Set a custom background color on hover state, for an unselected option ; transparent by default. Applies regardless of `appearance`
+ * [--toggle-group-box-shadow] - Set a custom box shadow on the track itself, for every appearance, none by default
  * [--toggle-group-shadow] - Set a custom box shadow on every option (and the sliding indicator, in exclusive mode), none by default
  * [--toggle-group-shadow-hover] - Set a custom box shadow on hover state, for an unselected option ; falls back to `--toggle-group-shadow`
+ * [--toggle-group-arrows-color] - Set a custom background color the overflow arrows fade out to, once the group overflows its container ; defaults to the track color laid over `--eun-surface-color`, so set it when the group sits on another background
  */
 export const toggleGroupStyles = css `
   :host {
     display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    --_arrowsColor: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-sunken, #f7f8fa)
+    );
+    --_arrowsBase: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-color, #ffffff)
+    );
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
+  }
+  :host([appearance="outline"]),
+  :host([appearance="flat"]) {
+    --_arrowsColor: var(
+      --toggle-group-arrows-color,
+      var(--eun-surface-color, #ffffff)
+    );
+  }
+  :host([full]) {
+    display: flex;
+    width: 100%;
   }
   :host([disabled]) {
     opacity: 0.5;
   }
-  #track {
+  #scrollable-wrapper {
+    position: relative;
+    min-width: 0;
+  }
+  :host([full]) #scrollable-wrapper {
+    width: 100%;
+  }
+  #scrollable {
     position: relative;
+    box-sizing: border-box;
     display: inline-flex;
+    max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
     padding: var(--toggle-group-padding, 4px);
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     background: var(
       --toggle-group-background,
-      var(--eun-color-grey-100, #f7f8fa)
+      var(--eun-surface-sunken, #f7f8fa)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
+    box-shadow: var(--toggle-group-box-shadow, none);
+    scrollbar-width: none;
+    overflow-x: hidden;
   }
-  :host([appearance="outline"]) #track,
-  :host([appearance="flat"]) #track {
+  #scrollable:not(.settled) {
+    --_toggleTransition: none;
+    --icon-transition: none;
+  }
+  #scrollable::-webkit-scrollbar {
+    display: none;
+  }
+  :has(#arrows arrow-container.visible) #scrollable {
+    overflow-x: scroll;
+  }
+  :host([full]) #scrollable {
+    width: 100%;
+  }
+  :host([appearance="outline"]) #scrollable,
+  :host([appearance="flat"]) #scrollable {
     padding: 0;
-    background: transparent;
+    background: var(--toggle-group-background, transparent);
     border: none;
   }
+  #arrows {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+  arrow-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    opacity: 0;
+    min-width: 24px;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+  }
+  arrow-container.visible {
+    opacity: 1;
+    pointer-events: all;
+    cursor: pointer;
+  }
+  arrow-container:nth-of-type(1) {
+    left: 0;
+    justify-content: flex-start;
+    background:
+      linear-gradient(
+        90deg,
+        var(--_arrowsColor) 0%,
+        var(--_arrowsColor) 60%,
+        transparent 100%
+      ),
+      linear-gradient(
+        90deg,
+        var(--_arrowsBase) 0%,
+        var(--_arrowsBase) 60%,
+        transparent 100%
+      );
+  }
+  arrow-container:nth-of-type(2) {
+    right: 0;
+    justify-content: flex-end;
+    background:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--_arrowsColor) 40%,
+        var(--_arrowsColor) 100%
+      ),
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--_arrowsBase) 40%,
+        var(--_arrowsBase) 100%
+      );
+  }
   #indicator {
     position: absolute;
     top: var(--toggle-group-padding, 4px);
@@ -56,7 +160,7 @@ export const toggleGroupStyles = css `
     opacity: 0;
     z-index: 0;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     background: var(
       --toggle-group-active-background,
@@ -84,33 +188,51 @@ export const toggleGroupStyles = css `
     --_hoverBackground: var(--toggle-group-hover-background, transparent);
     --_boxShadow: var(--toggle-group-shadow, none);
     --_boxShadow-hover: var(--toggle-group-shadow-hover, var(--_boxShadow));
+    --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
+    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
-      var(--eun-color-primary-500, #3d6fff)
+      var(--_variantColorDefault)
+    );
+    --_variantTint: var(--_customTint, var(--_variantTintDefault));
+    --_customTint: color-mix(
+      in srgb,
+      var(--toggle-group-active-background) 15%,
+      transparent
     );
-    --_variantTint: var(--eun-color-primary-transparent, #3d6fff33);
     position: relative;
     z-index: 1;
     display: inline-flex;
     align-items: center;
+    flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
     text-transform: capitalize;
+    white-space: nowrap;
     cursor: pointer;
     border: none;
     background: transparent;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
     padding: calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     outline: 2px solid transparent;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     box-shadow: var(--_boxShadow);
-    transition:
+    transition: var(
+      --_toggleTransition,
       background-color 0.2s ease-out,
       color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      box-shadow 0.2s ease-out
+    );
+  }
+  :host([full]) button,
+  :host([full]) ::slotted(eun-toggle-item) {
+    flex: 1 1 0%;
+  }
+  :host([full]) button {
+    justify-content: center;
   }
   :host(:not([disabled])) button:hover {
     box-shadow: var(--_boxShadow-hover);
@@ -129,13 +251,15 @@ export const toggleGroupStyles = css `
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #track:has(#indicator) button.active {
+  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"]) #track:not(:has(#indicator)) button.active {
+  :host([appearance="default"])
+    #scrollable:not(:has(#indicator))
+    button.active {
     background: var(
       --toggle-group-active-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -150,52 +274,53 @@ export const toggleGroupStyles = css `
     padding: 6px;
   }
 
-  button[data-variant="secondary"] {
-    --_variantColor: var(--eun-color-secondary-500, #e5a030);
-    --_variantTint: var(--eun-color-secondary-transparent, #e5a03033);
+  button[data-color="secondary"] {
+    --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
+    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
   }
-  button[data-variant="critical"] {
-    --_variantColor: var(--eun-color-critical-100, #aa0014);
-    --_variantTint: var(--eun-color-critical-30, #faf0f1);
+  button[data-color="critical"] {
+    --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
+    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
   }
-  button[data-variant="success"] {
-    --_variantColor: var(--eun-color-success-100, #1a9948);
-    --_variantTint: var(--eun-color-success-30, #f1f9f4);
+  button[data-color="success"] {
+    --_variantColorDefault: var(--eun-color-success-100, #1a9948);
+    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
   }
-  button[data-variant="warning"] {
-    --_variantColor: var(--eun-color-warning-100, #c85207);
-    --_variantTint: var(--eun-color-warning-30, #fcf5f0);
+  button[data-color="warning"] {
+    --_variantColorDefault: var(--eun-color-warning-100, #c85207);
+    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([appearance="outline"]) button {
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   }
   :host([appearance="flat"]) button {
-    border: var(--eun-borderWidth-s, 1px) solid transparent;
+    border: var(--eun-border-width-s, 1px) solid
+      var(--toggle-group-border-color, transparent);
   }
   :host([appearance="outline"]) button.active,
   :host([appearance="flat"]) button.active {
     background: var(--_variantTint);
-    color: var(--_variantColor);
-    font-weight: var(--eun-fontWeight-b, 700);
+    color: var(--toggle-group-active-color, var(--_variantColor));
+    font-weight: var(--eun-font-weight-b, 700);
   }
   :host([appearance="outline"]) button.active {
     border-color: var(--_variantColor);
   }
   :host([appearance="outline"]:not([disabled])) button:not(.active):hover,
   :host([appearance="flat"]:not([disabled])) button:not(.active):hover {
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]) button:focus-visible,
   :host([appearance="flat"]) button:focus-visible {
     outline-color: var(--_variantColor);
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
 `;

package/dist/components/action/toggle/toggle-item.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
-import { ButtonVariant } from "../../../mixins/button.mixin.js";
+import { ButtonColor } from "../../../mixins/button.mixin.js";
 /**
  * Tag name of the toggle item component.
  */
@@ -18,7 +18,7 @@ declare const EunomiaToggleItem_base: import("../../../utils/constructor.type.js
  * @csspart item - The item's own surface box, carrying its padding, background, and border. Exposed for effects the item's CSS custom properties don't cover
  * @prop {string} value - The value reported when this option is selected
  * @prop {EunomiaIconName} icon - An icon shown before the slotted content. For an icon only item, also set an accessible label yourself, since there's no label property to derive one from
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant] - This item's own color, used once the parent group's appearance isn't default. It renders as neutral at rest, taking on this color only once selected, and defaults to primary when unset. Ignored entirely in the default appearance
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color] - This item's own color, used once the parent group's appearance isn't default. It renders as neutral at rest, taking on this color only once selected, and defaults to primary when unset. Ignored entirely in the default appearance
  * @prop {boolean} [disabled=false] - Whether this option is disabled
  * @prop {boolean} [checked=false] - Whether this option is currently selected. Set by the parent toggle group, and shouldn't be set directly
  * @element eun-toggle-item
@@ -43,11 +43,11 @@ export declare class EunomiaToggleItem extends EunomiaToggleItem_base {
     /**
      * This item's own semantic color, once the parent group's `appearance`
      * isn't `default` — see `eun-toggle-group`'s own `appearance`/
-     * `ButtonVariant` doc. Falls back to a neutral style at rest, taking on
+     * `ButtonColor` doc. Falls back to a neutral style at rest, taking on
      * this color only once selected ; unset defaults to `primary`. Ignored
      * entirely in `default` appearance.
      */
-    variant?: ButtonVariant;
+    color?: ButtonColor;
     /**
      * Indicates whether this option is currently selected.
      * Owned by the parent `eun-toggle-group` ; do not set directly.

package/dist/components/action/toggle/toggle-item.js

@@ -35,7 +35,7 @@ const TOGGLE_GROUP_TAG_NAME = "eun-toggle-group";
  * @csspart item - The item's own surface box, carrying its padding, background, and border. Exposed for effects the item's CSS custom properties don't cover
  * @prop {string} value - The value reported when this option is selected
  * @prop {EunomiaIconName} icon - An icon shown before the slotted content. For an icon only item, also set an accessible label yourself, since there's no label property to derive one from
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant] - This item's own color, used once the parent group's appearance isn't default. It renders as neutral at rest, taking on this color only once selected, and defaults to primary when unset. Ignored entirely in the default appearance
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color] - This item's own color, used once the parent group's appearance isn't default. It renders as neutral at rest, taking on this color only once selected, and defaults to primary when unset. Ignored entirely in the default appearance
  * @prop {boolean} [disabled=false] - Whether this option is disabled
  * @prop {boolean} [checked=false] - Whether this option is currently selected. Set by the parent toggle group, and shouldn't be set directly
  * @element eun-toggle-item
@@ -130,7 +130,7 @@ __decorate([
 ], EunomiaToggleItem.prototype, "icon", void 0);
 __decorate([
     property({ reflect: true })
-], EunomiaToggleItem.prototype, "variant", void 0);
+], EunomiaToggleItem.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggleItem.prototype, "checked", void 0);

package/dist/components/action/toggle/toggle-item.styles.js

@@ -16,29 +16,37 @@ export const toggleItemStyles = css `
     position: relative;
     z-index: 1;
     display: inline-block;
+    flex-shrink: 0;
     outline: none !important;
   }
+  :host([full]) {
+    flex: 1 1 0%;
+  }
   #item {
     box-sizing: border-box;
+    width: 100%;
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
+    white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
     padding: 6px 14px;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
-    transition:
+    transition: var(
+      --_toggleTransition,
       background-color 0.2s ease-out,
       color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      box-shadow 0.2s ease-out
+    );
   }
   :host(:not([disabled]):hover) #item {
     box-shadow: var(--_boxShadow-hover);
@@ -59,6 +67,9 @@ export const toggleItemStyles = css `
     cursor: not-allowed;
     opacity: 0.5;
   }
+  :host([full]) #item {
+    justify-content: center;
+  }
   :host([checked]:not([exclusive])) #item {
     background: var(
       --toggle-group-active-background,
@@ -73,59 +84,67 @@ export const toggleItemStyles = css `
   }
 
   :host {
+    --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
+    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
-      var(--eun-color-primary-500, #3d6fff)
+      var(--_variantColorDefault)
+    );
+    --_variantTint: var(--_customTint, var(--_variantTintDefault));
+    --_customTint: color-mix(
+      in srgb,
+      var(--toggle-group-active-background) 15%,
+      transparent
     );
-    --_variantTint: var(--eun-color-primary-transparent, #3d6fff33);
   }
-  :host([variant="secondary"]) {
-    --_variantColor: var(--eun-color-secondary-500, #e5a030);
-    --_variantTint: var(--eun-color-secondary-transparent, #e5a03033);
+  :host([color="secondary"]) {
+    --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
+    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
   }
-  :host([variant="critical"]) {
-    --_variantColor: var(--eun-color-critical-100, #aa0014);
-    --_variantTint: var(--eun-color-critical-30, #faf0f1);
+  :host([color="critical"]) {
+    --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
+    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
   }
-  :host([variant="success"]) {
-    --_variantColor: var(--eun-color-success-100, #1a9948);
-    --_variantTint: var(--eun-color-success-30, #f1f9f4);
+  :host([color="success"]) {
+    --_variantColorDefault: var(--eun-color-success-100, #1a9948);
+    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
   }
-  :host([variant="warning"]) {
-    --_variantColor: var(--eun-color-warning-100, #c85207);
-    --_variantTint: var(--eun-color-warning-30, #fcf5f0);
+  :host([color="warning"]) {
+    --_variantColorDefault: var(--eun-color-warning-100, #c85207);
+    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([appearance="outline"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   }
   :host([appearance="flat"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid transparent;
+    border: var(--eun-border-width-s, 1px) solid
+      var(--toggle-group-border-color, transparent);
   }
   :host([appearance="outline"][checked]) #item,
   :host([appearance="flat"][checked]) #item {
     background: var(--_variantTint);
-    color: var(--_variantColor);
-    font-weight: var(--eun-fontWeight-b, 700);
+    color: var(--toggle-group-active-color, var(--_variantColor));
+    font-weight: var(--eun-font-weight-b, 700);
   }
   :host([appearance="outline"][checked]) #item {
     border-color: var(--_variantColor);
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="flat"]:not([disabled]):not([checked]):hover) #item {
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:focus-visible) #item,
   :host([appearance="flat"]:focus-visible) #item {
     outline-color: var(--_variantColor);
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="outline"]:focus-visible) #item {

package/dist/components/action/toggle/toggle.d.ts

@@ -28,7 +28,7 @@ declare const EunomiaToggle_base: import("../../../utils/constructor.type.js").C
  * @prop {'default' | 'flat'} [appearance='default'] - The toggle's surface style while not pressed, or always while swap is set. Default keeps the toggle's own bordered look. Flat drops the border for the same muted, low emphasis surface used by a flat button, better suited next to borderless buttons
  * @fires {ChangeEvent} eunchange - Fired whenever checked changes
  * @cssprop [--toggle-background] - Sets the background color while not pressed
- * @cssprop [--toggle-border-color] - Sets the border color while not pressed
+ * @cssprop [--toggle-border-color] - Sets the border color while not pressed, for every appearance. The flat appearance has no border by default, so it draws one when set
  * @cssprop [--toggle-border-color-hover] - Sets the border color on hover while not pressed, falling back to toggle-border-color when unset, or staying transparent in the flat appearance
  * @cssprop [--toggle-color] - Sets the text color while not pressed
  * @cssprop [--toggle-active-background] - Sets the background color while pressed. Ignored while swap is set

package/dist/components/action/toggle/toggle.js

@@ -37,7 +37,7 @@ export const EunomiaToggleTagName = "eun-toggle";
  * @prop {'default' | 'flat'} [appearance='default'] - The toggle's surface style while not pressed, or always while swap is set. Default keeps the toggle's own bordered look. Flat drops the border for the same muted, low emphasis surface used by a flat button, better suited next to borderless buttons
  * @fires {ChangeEvent} eunchange - Fired whenever checked changes
  * @cssprop [--toggle-background] - Sets the background color while not pressed
- * @cssprop [--toggle-border-color] - Sets the border color while not pressed
+ * @cssprop [--toggle-border-color] - Sets the border color while not pressed, for every appearance. The flat appearance has no border by default, so it draws one when set
  * @cssprop [--toggle-border-color-hover] - Sets the border color on hover while not pressed, falling back to toggle-border-color when unset, or staying transparent in the flat appearance
  * @cssprop [--toggle-color] - Sets the text color while not pressed
  * @cssprop [--toggle-active-background] - Sets the background color while pressed. Ignored while swap is set

package/dist/components/action/toggle/toggle.styles.d.ts

@@ -3,8 +3,8 @@
  *
  * Custom css variables:
  * [--toggle-background] - Set a custom background color when not pressed
- * [--toggle-border-color] - Set a custom border color when not pressed
- * [--toggle-border-color-hover] - Set a custom border color on hover state, while not pressed ; falls back to --toggle-border-color (or stays transparent while appearance="flat")
+ * [--toggle-border-color] - Set a custom border color when not pressed, for every appearance (flat has no border by default, so it draws one when set)
+ * [--toggle-border-color-hover] - Set a custom border color on hover state, while not pressed ; falls back to --toggle-border-color (or stays transparent while appearance="flat" and no border color is set)
  * [--toggle-color] - Set a custom text color when not pressed
  * [--toggle-active-background] - Set a custom background color when pressed
  * [--toggle-active-color] - Set a custom text color when pressed

package/dist/components/action/toggle/toggle.styles.js

@@ -4,8 +4,8 @@ import { css } from "lit";
  *
  * Custom css variables:
  * [--toggle-background] - Set a custom background color when not pressed
- * [--toggle-border-color] - Set a custom border color when not pressed
- * [--toggle-border-color-hover] - Set a custom border color on hover state, while not pressed ; falls back to --toggle-border-color (or stays transparent while appearance="flat")
+ * [--toggle-border-color] - Set a custom border color when not pressed, for every appearance (flat has no border by default, so it draws one when set)
+ * [--toggle-border-color-hover] - Set a custom border color on hover state, while not pressed ; falls back to --toggle-border-color (or stays transparent while appearance="flat" and no border color is set)
  * [--toggle-color] - Set a custom text color when not pressed
  * [--toggle-active-background] - Set a custom background color when pressed
  * [--toggle-active-color] - Set a custom text color when pressed
@@ -38,8 +38,8 @@ export const toggleStyles = css `
     gap: var(--eun-space-xs, 4px);
     cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
@@ -47,9 +47,9 @@ export const toggleStyles = css `
       calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
     );
     outline: 2px solid transparent;
-    border-radius: var(--toggle-border-radius, var(--eun-borderRadius-m, 8px));
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border: var(--toggle-border-size, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border: var(--toggle-border-size, var(--eun-border-width-s, 1px)) solid
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
@@ -92,11 +92,14 @@ export const toggleStyles = css `
     );
   }
   :host([appearance="flat"]:not([disabled])) #toggle {
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border-color: transparent;
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border-color: var(--toggle-border-color, transparent);
   }
   :host([appearance="flat"]:not([disabled]):hover) #toggle {
-    border-color: var(--toggle-border-color-hover, transparent);
+    border-color: var(
+      --toggle-border-color-hover,
+      var(--toggle-border-color, transparent)
+    );
   }
   :host([checked]:not([swap])) #toggle {
     background: var(

package/dist/components/alert/alert/alert.d.ts

@@ -46,9 +46,10 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
  * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
  * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
- * @cssprop [--alert-background-color] - Sets the background color when severity is unset
- * @cssprop [--alert-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--alert-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless alert-icon-color overrides it
+ * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--alert-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless alert-icon-color overrides it
  * @cssprop [--alert-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching alert-color or the severity accent
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert

package/dist/components/alert/alert/alert.js

@@ -49,9 +49,10 @@ export const EunomiaAlertTagName = "eun-alert";
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
  * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
  * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
- * @cssprop [--alert-background-color] - Sets the background color when severity is unset
- * @cssprop [--alert-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--alert-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless alert-icon-color overrides it
+ * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--alert-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless alert-icon-color overrides it
  * @cssprop [--alert-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching alert-color or the severity accent
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert