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

package/dist/components/action/shared-styles/button-palette.styles.js

@@ -1,10 +1,10 @@
 import { css } from "lit";
 /**
  * Shared color palette of the button family (`eun-button`, `eun-fab`, and so
- * `eun-dropdown-button`, which renders an `eun-button`). A `variant` fills
+ * `eun-dropdown-button`, which renders an `eun-button`). A `color` fills
  * the same slots on the host, and each component's stylesheet then reads
  * them, per appearance and state, *behind* its public `--<component>-*`
- * custom properties, so those always win over any variant and appearance.
+ * custom properties, so those always win over any color and appearance.
  *
  * Slots :
  * - `--_solid`, `--_solid-hover`, `--_solid-active` : the strong color, at
@@ -21,7 +21,7 @@ import { css } from "lit";
  * `light` and `dark` are absolute colors : white and black, whatever the
  * appearance. They have no pale wash, so the tinted surface is as solid as
  * the strong one, and `flat` is a faint wash of the color itself rather than
- * the neutral surface every other variant shares. By default they follow the
+ * the neutral surface every other color shares. By default they follow the
  * grey scale, which flips with the active theme ; `fixed-color` pins them to
  * the light theme's white and black instead.
  */
@@ -32,9 +32,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-primary-800, #2d52bd);
     --_onSolid: var(--eun-color-on-primary-500, #ffffff);
     --_accent: var(--eun-color-primary-500, #3d6fff);
-    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
-    --_tint-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
-    --_tint-active: var(--eun-color-primary-transparent-active, #3d6fff66);
+    --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+    --_tint-hover: var(--eun-color-primary-alpha-30, #3d6fff4d);
+    --_tint-active: var(--eun-color-primary-alpha-40, #3d6fff66);
     --_fgTint: var(--_accent);
     --_wash-hover: var(--_tint-hover);
     --_wash-active: var(--_tint-active);
@@ -43,51 +43,51 @@ export const buttonPaletteStyles = css `
     --_flatFg: var(--eun-text-secondary, #484e61);
     --_ring: var(--eun-color-primary-700, #3662e0);
   }
-  :host([variant="secondary"]) {
+  :host([color="secondary"]) {
     --_solid: var(--eun-color-secondary-500, #e5a030);
     --_solid-hover: var(--eun-color-secondary-700, #ca8d2a);
     --_solid-active: var(--eun-color-secondary-800, #a97624);
     --_onSolid: var(--eun-color-on-secondary-500, #000000de);
     --_accent: var(--eun-color-secondary-500, #e5a030);
-    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
-    --_tint-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
-    --_tint-active: var(--eun-color-secondary-transparent-active, #e5a03066);
+    --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    --_tint-hover: var(--eun-color-secondary-alpha-30, #edbd6f4d);
+    --_tint-active: var(--eun-color-secondary-alpha-40, #edbd6f66);
     --_ring: var(--eun-color-secondary-700, #ca8d2a);
   }
-  :host([variant="critical"]) {
+  :host([color="critical"]) {
     --_solid: var(--eun-color-critical-100, #aa0014);
     --_solid-hover: var(--eun-color-critical-100, #aa0014);
     --_solid-active: var(--eun-color-critical-100, #aa0014);
     --_onSolid: #fff;
     --_accent: var(--eun-color-critical-100, #aa0014);
-    --_tint: var(--eun-color-critical-30, #faf0f1);
-    --_tint-hover: var(--eun-color-critical-50, #f1d6d9);
-    --_tint-active: var(--eun-color-critical-90, #e4adb4);
+    --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+    --_tint-hover: var(--eun-color-critical-alpha-20, #aa001433);
+    --_tint-active: var(--eun-color-critical-alpha-30, #aa00144d);
     --_ring: var(--eun-color-critical-100, #aa0014);
   }
-  :host([variant="success"]) {
+  :host([color="success"]) {
     --_solid: var(--eun-color-success-100, #1a9948);
     --_solid-hover: var(--eun-color-success-100, #1a9948);
     --_solid-active: var(--eun-color-success-100, #1a9948);
     --_onSolid: #fff;
     --_accent: var(--eun-color-success-100, #1a9948);
-    --_tint: var(--eun-color-success-30, #f1f9f4);
-    --_tint-hover: var(--eun-color-success-50, #daefe2);
-    --_tint-active: var(--eun-color-success-90, #b6dec4);
+    --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+    --_tint-hover: var(--eun-color-success-alpha-20, #1a994833);
+    --_tint-active: var(--eun-color-success-alpha-30, #1a99484d);
     --_ring: var(--eun-color-success-100, #1a9948);
   }
-  :host([variant="warning"]) {
+  :host([color="warning"]) {
     --_solid: var(--eun-color-warning-100, #c85207);
     --_solid-hover: var(--eun-color-warning-100, #c85207);
     --_solid-active: var(--eun-color-warning-100, #c85207);
     --_onSolid: #fff;
     --_accent: var(--eun-color-warning-100, #c85207);
-    --_tint: var(--eun-color-warning-30, #fcf5f0);
-    --_tint-hover: var(--eun-color-warning-50, #f6e3d7);
-    --_tint-active: var(--eun-color-warning-90, #edc8b0);
+    --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+    --_tint-hover: var(--eun-color-warning-alpha-20, #c8520733);
+    --_tint-active: var(--eun-color-warning-alpha-30, #c852074d);
     --_ring: var(--eun-color-warning-100, #c85207);
   }
-  :host([variant="medium"]) {
+  :host([color="medium"]) {
     --_solid: var(--eun-color-grey-700, #484e61);
     --_solid-hover: var(--eun-color-grey-800, #071621);
     --_solid-active: var(--eun-color-grey-900, #000000);
@@ -110,32 +110,32 @@ export const buttonPaletteStyles = css `
     );
     --_ring: var(--eun-color-grey-700, #484e61);
   }
-  :host([variant="light"]) {
+  :host([color="light"]) {
     --_solid: var(--eun-color-grey-0, #ffffff);
     --_solid-hover: var(--eun-color-grey-200, #ecedf0);
     --_solid-active: var(--eun-color-grey-300, #dee0e7);
     --_onSolid: var(--eun-color-grey-900, #000000);
   }
-  :host([variant="light"][fixed-color]) {
+  :host([color="light"][fixed-color]) {
     --_solid: #ffffff;
     --_solid-hover: #ecedf0;
     --_solid-active: #dee0e7;
     --_onSolid: #000000;
   }
-  :host([variant="dark"]) {
+  :host([color="dark"]) {
     --_solid: var(--eun-color-grey-800, #071621);
     --_solid-hover: var(--eun-color-grey-900, #000000);
     --_solid-active: var(--eun-color-grey-900, #000000);
     --_onSolid: var(--eun-color-grey-0, #ffffff);
   }
-  :host([variant="dark"][fixed-color]) {
+  :host([color="dark"][fixed-color]) {
     --_solid: #071621;
     --_solid-hover: #000000;
     --_solid-active: #000000;
     --_onSolid: #ffffff;
   }
-  :host([variant="light"]),
-  :host([variant="dark"]) {
+  :host([color="light"]),
+  :host([color="dark"]) {
     --_accent: var(--_solid);
     --_tint: var(--_solid);
     --_tint-hover: var(--_solid-hover);

package/dist/components/action/toggle/toggle-group.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";
 import { EunomiaToggleAppearance } from "../../../types/variant.type.js";
 import type { EunomiaToggleItem } from "./toggle-item.js";
 /**
@@ -36,11 +36,11 @@ export type EunomiaToggleGroupOption = {
     showLabel?: boolean;
     /**
      * This choice's own semantic color, once the group's `appearance` isn't
-     * `default` — see {@link ButtonVariant}. Falls back to a neutral style at
+     * `default` — see {@link ButtonColor}. Falls back to a neutral style at
      * rest, taking on this color only once selected ; unset choices default
      * to `primary`. Ignored entirely in `default` appearance.
      */
-    variant?: ButtonVariant;
+    color?: ButtonColor;
 };
 declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/overflow-navigation.mixin.js").NavigationOverflowMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
 /**
@@ -82,13 +82,16 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @cssprop [--toggle-group-background] - Sets the background color of the track, for every appearance (transparent by default in outline and flat)
  * @cssprop [--toggle-group-border-color] - Sets the border color of the track in the default appearance, and the border color of each option at rest in the outline and flat appearances
  * @cssprop [--toggle-group-color] - Sets the text color of unselected options
- * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own variant
+ * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own color
  * @cssprop [--toggle-group-active-color] - Sets the text color of selected options, for every appearance
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
+ * @cssprop [--toggle-group-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * @cssprop [--toggle-group-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
+ * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default
  * @cssprop [--toggle-group-shadow] - Sets a box shadow on every option, and the sliding indicator in exclusive mode. None by default
  * @cssprop [--toggle-group-shadow-hover] - Sets the box shadow of an unselected option on hover, falling back to toggle-group-shadow when unset
  * @cssprop [--toggle-group-arrows-color] - Sets the background color the overflow arrows fade out to, once the group overflows its container
@@ -106,7 +109,8 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
     static readonly styles: import("lit").CSSResult[];
     /**
      * The choices to render, in order. Also reflected as a JSON-serialized
-     * `options` attribute (Lit's default `Array` converter).
+     * `options` attribute (Lit's default `Array` converter), left out while
+     * empty so an SSR framework doesn't see an attribute it never rendered.
      * @default []
      */
     options: EunomiaToggleGroupOption[];
@@ -159,6 +163,14 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @readonly
      */
     private readonly indicatorEl?;
+    /**
+     * Whether the initial selection has been painted once. Until then, the
+     * choices and their icons skip their color transitions (see the
+     * `#scrollable:not(.settled)` rule), so the selected one appears in its
+     * final state on load instead of fading in from the unselected color.
+     * @internal
+     */
+    private settled;
     /**
      * The total number of choices, combining `options` and slotted
      * `eun-toggle-item` elements. Drives {@link exclusive} together with

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

@@ -16,7 +16,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _EunomiaToggleGroup_resizeObserver, _EunomiaToggleGroup_hasSeededInitialValue;
-import { customElement, property, query, queryAssignedElements, } from "lit/decorators.js";
+import { customElement, property, query, queryAssignedElements, state, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -73,13 +73,16 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @cssprop [--toggle-group-background] - Sets the background color of the track, for every appearance (transparent by default in outline and flat)
  * @cssprop [--toggle-group-border-color] - Sets the border color of the track in the default appearance, and the border color of each option at rest in the outline and flat appearances
  * @cssprop [--toggle-group-color] - Sets the text color of unselected options
- * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own variant
+ * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own color
  * @cssprop [--toggle-group-active-color] - Sets the text color of selected options, for every appearance
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
+ * @cssprop [--toggle-group-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * @cssprop [--toggle-group-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
+ * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default
  * @cssprop [--toggle-group-shadow] - Sets a box shadow on every option, and the sliding indicator in exclusive mode. None by default
  * @cssprop [--toggle-group-shadow-hover] - Sets the box shadow of an unselected option on hover, falling back to toggle-group-shadow when unset
  * @cssprop [--toggle-group-arrows-color] - Sets the background color the overflow arrows fade out to, once the group overflows its container
@@ -90,7 +93,8 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
         super(...arguments);
         /**
          * The choices to render, in order. Also reflected as a JSON-serialized
-         * `options` attribute (Lit's default `Array` converter).
+         * `options` attribute (Lit's default `Array` converter), left out while
+         * empty so an SSR framework doesn't see an attribute it never rendered.
          * @default []
          */
         this.options = [];
@@ -141,6 +145,14 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
          * @internal
          */
         _EunomiaToggleGroup_hasSeededInitialValue.set(this, false);
+        /**
+         * Whether the initial selection has been painted once. Until then, the
+         * choices and their icons skip their color transitions (see the
+         * `#scrollable:not(.settled)` rule), so the selected one appears in its
+         * final state on load instead of fading in from the unselected color.
+         * @internal
+         */
+        this.settled = false;
         /**
          * Debounced wrapper around {@link moveIndicator}, used by the resize
          * observer so a burst of layout changes doesn't retrigger it constantly.
@@ -153,7 +165,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
          * @private
          */
         this.handleSlotChange = () => {
-            this.settleAndSync(false);
+            void this.settleAndSync(false);
         };
     }
     /**
@@ -202,7 +214,13 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.settleAndSync(false);
+        void this.settleAndSync(false)
+            .then(() => Promise.all((this.items ?? []).map((item) => this.whenItemReady(item))))
+            .then(() => {
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                this.settled = true;
+            }));
+        });
     }
     updated(_changedProperties) {
         super.updated(_changedProperties);
@@ -253,14 +271,11 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
      * @private
      */
     settleAndSync(animate) {
-        this.whenItemsReady().then(() => {
+        return this.whenItemsReady().then(() => {
             this.seedInitialValue();
             this.applyExclusiveDefault();
             this.syncItems();
             this.refreshIndicator(animate);
-            // After the sync : measuring reads layout, which would otherwise style
-            // the items before they carry their state, then transition into it.
-            // Needed since the host's size may not change with the choices.
             this.updateScroll();
         });
     }
@@ -450,7 +465,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
         };
         const active = this.entries.find((entry) => entry.value === this.value[0]);
         if (active && active.element.tagName !== "BUTTON") {
-            this.whenItemReady(active.element).then(settle);
+            void this.whenItemReady(active.element).then(settle);
             return;
         }
         settle();
@@ -508,10 +523,6 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
         }
         const trackRect = this.trackEl.getBoundingClientRect();
         const activeRect = active.element.getBoundingClientRect();
-        // The indicator lives inside the scrolling row, so it moves with the
-        // content : its offset is the active entry's position in *content*
-        // coordinates, from the padding edge (past the border), not from the
-        // window.
         const offset = activeRect.left -
             trackRect.left -
             this.trackEl.clientLeft +
@@ -520,8 +531,8 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
             indicator.style.transition = "none";
         }
         indicator.style.opacity = "1";
-        indicator.style.width = `${Math.floor(activeRect.width)}px`;
-        indicator.style.transform = `translateX(${Math.floor(offset)}px)`;
+        indicator.style.width = `${activeRect.width}px`;
+        indicator.style.transform = `translateX(${offset}px)`;
         if (!animate) {
             indicator.getBoundingClientRect();
             indicator.style.transition = "";
@@ -646,6 +657,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
       <div id="scrollable-wrapper">
         <div
           id="scrollable"
+          class=${classMap({ settled: this.settled })}
           role=${exclusive ? "radiogroup" : "group"}
           part="track"
           aria-label=${this.ariaLabel ?? nothing}
@@ -668,7 +680,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
                 type="button"
                 class=${classMap({ active: checked, "icon-only": iconOnly })}
                 data-value=${option.value}
-                data-variant=${ifDefined(option.variant)}
+                data-color=${ifDefined(option.color)}
                 role=${exclusive ? "radio" : "checkbox"}
                 aria-checked=${checked ? "true" : "false"}
                 aria-label=${ifDefined(iconOnly ? option.label : undefined)}
@@ -717,10 +729,22 @@ _EunomiaToggleGroup_hasSeededInitialValue = new WeakMap();
  */
 EunomiaToggleGroup.styles = [toggleGroupStyles];
 __decorate([
-    property({ type: Array, reflect: true })
+    property({
+        type: Array,
+        reflect: true,
+        converter: {
+            toAttribute: (value) => value?.length ? JSON.stringify(value) : null,
+        },
+    })
 ], EunomiaToggleGroup.prototype, "options", void 0);
 __decorate([
-    property({ type: Array, reflect: true })
+    property({
+        type: Array,
+        reflect: true,
+        converter: {
+            toAttribute: (value) => value?.length ? JSON.stringify(value) : null,
+        },
+    })
 ], EunomiaToggleGroup.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -740,6 +764,9 @@ __decorate([
 __decorate([
     query("#indicator")
 ], EunomiaToggleGroup.prototype, "indicatorEl", void 0);
+__decorate([
+    state()
+], EunomiaToggleGroup.prototype, "settled", void 0);
 EunomiaToggleGroup = __decorate([
     customElement(EunomiaToggleGroupTagName)
 ], EunomiaToggleGroup);

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

@@ -5,13 +5,16 @@
  * [--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 ; in `outline`/`flat` appearance, the selected color of every option, over its own variant
+ * [--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-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * [--toggle-group-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * [--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

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

@@ -6,13 +6,16 @@ import { css } from "lit";
  * [--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 ; in `outline`/`flat` appearance, the selected color of every option, over its own variant
+ * [--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-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * [--toggle-group-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * [--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
@@ -30,11 +33,21 @@ export const toggleGroupStyles = css `
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_trackPaddingBlock: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-block, 4px)
+    );
+    --_trackPaddingInline: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-inline, 4px)
+    );
+    --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
@@ -60,7 +73,7 @@ export const toggleGroupStyles = css `
     display: inline-flex;
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
-    padding: var(--toggle-group-padding, 4px);
+    padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
     border-radius: var(
       --toggle-group-border-radius,
       var(--eun-border-radius-m, 8px)
@@ -71,9 +84,14 @@ export const toggleGroupStyles = css `
     );
     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;
   }
+  #scrollable:not(.settled) {
+    --_toggleTransition: none;
+    --icon-transition: none;
+  }
   #scrollable::-webkit-scrollbar {
     display: none;
   }
@@ -85,13 +103,19 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) #scrollable,
   :host([appearance="flat"]) #scrollable {
-    padding: 0;
+    padding: var(--_focusRoom);
+    margin: calc(-1 * var(--_focusRoom));
+    max-width: calc(100% + 2 * var(--_focusRoom));
     background: var(--toggle-group-background, transparent);
     border: none;
   }
+  :host([full][appearance="outline"]) #scrollable,
+  :host([full][appearance="flat"]) #scrollable {
+    width: calc(100% + 2 * var(--_focusRoom));
+  }
   #arrows {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--_focusRoom));
     z-index: 2;
     pointer-events: none;
   }
@@ -102,7 +126,8 @@ export const toggleGroupStyles = css `
     opacity: 0;
     min-width: 24px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -147,8 +172,8 @@ export const toggleGroupStyles = css `
   }
   #indicator {
     position: absolute;
-    top: var(--toggle-group-padding, 4px);
-    bottom: var(--toggle-group-padding, 4px);
+    top: var(--_trackPaddingBlock);
+    bottom: var(--_trackPaddingBlock);
     left: 0;
     width: 0;
     opacity: 0;
@@ -165,13 +190,14 @@ export const toggleGroupStyles = css `
       var(--eun-shadow-xs, rgba(7, 22, 33, 0.08) 0 1px 2px)
     );
     transition:
-      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.15s ease-out;
+      transform var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      width var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      opacity var(--eun-duration-s, 150ms) var(--eun-easing-out, ease-out);
   }
   @media (prefers-reduced-motion: reduce) {
     #indicator {
-      transition: opacity 0.15s ease-out;
+      transition: opacity var(--eun-duration-s, 150ms)
+        var(--eun-easing-out, ease-out);
     }
   }
   button {
@@ -183,7 +209,7 @@ export const toggleGroupStyles = css `
     --_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);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -201,7 +227,6 @@ export const toggleGroupStyles = css `
     flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     border: none;
@@ -214,10 +239,13 @@ export const toggleGroupStyles = css `
       var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     box-shadow: var(--_boxShadow);
-    transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+    transition: var(
+      --_toggleTransition,
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
+    );
   }
   :host([full]) button,
   :host([full]) ::slotted(eun-toggle-item) {
@@ -237,8 +265,9 @@ export const toggleGroupStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   button[disabled] {
     cursor: not-allowed;
@@ -266,21 +295,21 @@ export const toggleGroupStyles = css `
     padding: 6px;
   }
 
-  button[data-variant="secondary"] {
+  button[data-color="secondary"] {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
-  button[data-variant="critical"] {
+  button[data-color="critical"] {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
-  button[data-variant="success"] {
+  button[data-color="success"] {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
-  button[data-variant="warning"] {
+  button[data-color="warning"] {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {

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);