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

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

@@ -0,0 +1,151 @@
+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
+ * 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.
+ *
+ * Slots :
+ * - `--_solid`, `--_solid-hover`, `--_solid-active` : the strong color, at
+ *   rest, hovered and pressed.
+ * - `--_onSolid` : the text color on top of the strong color.
+ * - `--_accent` : the text/border color on a pale or transparent surface.
+ * - `--_tint`, `--_tint-hover`, `--_tint-active` : the pale wash, and
+ *   `--_fgTint` the text color on it.
+ * - `--_wash-hover`, `--_wash-active` : the wash a transparent surface
+ *   (outline, ghost) takes on hover and press.
+ * - `--_flat`, `--_flat-hover`, `--_flatFg` : the muted `flat` surface.
+ * - `--_ring` : the focus outline color.
+ *
+ * `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
+ * grey scale, which flips with the active theme ; `fixed-color` pins them to
+ * the light theme's white and black instead.
+ */
+export const buttonPaletteStyles = css `
+  :host {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_solid-hover: var(--eun-color-primary-700, #3662e0);
+    --_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);
+    --_fgTint: var(--_accent);
+    --_wash-hover: var(--_tint-hover);
+    --_wash-active: var(--_tint-active);
+    --_flat: var(--eun-surface-sunken, #f7f8fa);
+    --_flat-hover: var(--eun-surface-sunken-hover, #edeff0);
+    --_flatFg: var(--eun-text-secondary, #484e61);
+    --_ring: var(--eun-color-primary-700, #3662e0);
+  }
+  :host([variant="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);
+    --_ring: var(--eun-color-secondary-700, #ca8d2a);
+  }
+  :host([variant="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);
+    --_ring: var(--eun-color-critical-100, #aa0014);
+  }
+  :host([variant="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);
+    --_ring: var(--eun-color-success-100, #1a9948);
+  }
+  :host([variant="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);
+    --_ring: var(--eun-color-warning-100, #c85207);
+  }
+  :host([variant="medium"]) {
+    --_solid: var(--eun-color-grey-700, #484e61);
+    --_solid-hover: var(--eun-color-grey-800, #071621);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-color-grey-900, #000000);
+    --_tint: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 20%,
+      transparent
+    );
+    --_tint-hover: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 30%,
+      transparent
+    );
+    --_tint-active: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 40%,
+      transparent
+    );
+    --_ring: var(--eun-color-grey-700, #484e61);
+  }
+  :host([variant="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]) {
+    --_solid: #ffffff;
+    --_solid-hover: #ecedf0;
+    --_solid-active: #dee0e7;
+    --_onSolid: #000000;
+  }
+  :host([variant="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]) {
+    --_solid: #071621;
+    --_solid-hover: #000000;
+    --_solid-active: #000000;
+    --_onSolid: #ffffff;
+  }
+  :host([variant="light"]),
+  :host([variant="dark"]) {
+    --_accent: var(--_solid);
+    --_tint: var(--_solid);
+    --_tint-hover: var(--_solid-hover);
+    --_tint-active: var(--_solid-active);
+    --_fgTint: var(--_onSolid);
+    --_wash-hover: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_wash-active: color-mix(in srgb, var(--_solid) 28%, transparent);
+    --_flat: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_flat-hover: color-mix(in srgb, var(--_solid) 24%, transparent);
+    --_flatFg: var(--_solid);
+    --_ring: var(--_solid);
+  }
+`;

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

@@ -42,7 +42,7 @@ export type EunomiaToggleGroupOption = {
      */
     variant?: ButtonVariant;
 };
-declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
+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;
 /**
  * Groups toggle choices, declared through options, slotted toggle item
  * elements, or both at once, into a single segmented control. The
@@ -70,6 +70,8 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * the Examples tab for what each shape looks like.
  *
  * @slot [default] - Toggle item elements, used instead of or alongside options
+ * @prop {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
+ * @attr {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
  * @prop {Array<EunomiaToggleGroupOption>} options - The choices to render, in order
  * @prop {Array<string>} value - The currently selected choices' values. Always exactly one entry in exclusive mode
  * @prop {boolean} [single=false] - Forces the exclusive, sliding indicator mode regardless of choice count. Already the case for exactly two choices without setting this
@@ -77,18 +79,19 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @prop {boolean} [disabled=false] - Whether the whole group is disabled
  * @attr {string} [aria-label] - The accessible label for the group, required since the group has no visible legend of its own
  * @fires {ChangeEvent} eunchange - Fired whenever the selection changes
- * @cssprop [--toggle-group-background] - Sets the background color of the track. Ignored once appearance isn't default, which has no shared background
- * @cssprop [--toggle-group-border-color] - Sets the border color of the track, and the border color of each option at rest in the outline appearance
+ * @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. Also sets the primary variant's selected color in the outline and flat appearances, for an option that sets no variant of its own
- * @cssprop [--toggle-group-active-color] - Sets the text color of selected options in the default appearance. Ignored in the outline and flat appearances, where the selected text color always follows the option's own color instead
+ * @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-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-hover-color] - Sets the text color of an unselected option on hover, in the default appearance. Ignored in the outline and flat appearances, where hover and focus text color always follow the option's own color instead, exactly like the selected state
+ * @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-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
  * @element eun-toggle-group
  */
 export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
@@ -128,6 +131,13 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @default default
      */
     appearance: EunomiaToggleGroupAppearance;
+    /**
+     * Stretches the group to 100% of its parent's width, dividing that width
+     * equally between every choice instead of sizing to content. A label
+     * that doesn't fit its share makes the row overflow rather than shrink.
+     * @default false
+     */
+    full: boolean;
     /**
      * The `eun-toggle-item` elements slotted in, if any.
      * @internal
@@ -169,7 +179,7 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
     private get entries();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     /**
      * Waits for every slotted item's custom element to be *defined*, not
@@ -293,6 +303,14 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @private
      */
     private refreshIndicator;
+    /**
+     * Scrolls the row just enough to bring the selected entry into view, once
+     * the group overflows its container, leaving room for the arrows.
+     *
+     * @param animate whether to scroll smoothly, or jump there instantly.
+     * @private
+     */
+    private revealActive;
     /**
      * Debounced wrapper around {@link moveIndicator}, used by the resize
      * observer so a burst of layout changes doesn't retrigger it constantly.
@@ -340,6 +358,22 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @private
      */
     private readonly handleSlotChange;
+    /**
+     * Whether a given overflow arrow should currently be visible : hidden
+     * when nothing overflows, and once scrolled all the way to that edge.
+     *
+     * @param arrowPosition the position of the arrow to check.
+     * @returns true if it should be visible, false otherwise.
+     * @private
+     */
+    private arrowVisible;
+    /**
+     * The row mixes internal `<button>`s (`options`) with slotted items, so the
+     * mixin's slot-based measurement can't see every choice : compares the
+     * scrollable's own sizes instead.
+     * @protected
+     */
+    protected isOnOverflow(): boolean;
     render(): TemplateResult;
 }
 declare global {

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

@@ -21,9 +21,15 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
+import { NavigationOverflowMixin } from "../../../mixins/overflow-navigation.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { debounce } from "../../../utils/time.utils.js";
 import { toggleGroupStyles } from "./toggle-group.styles.js";
+/**
+ * Room kept between a revealed entry and the row's edge, so the overflow
+ * arrows (24px wide) never sit over it.
+ */
+const ARROW_CLEARANCE = 28;
 /**
  * Tag name of the toggle group component.
  */
@@ -55,6 +61,8 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * the Examples tab for what each shape looks like.
  *
  * @slot [default] - Toggle item elements, used instead of or alongside options
+ * @prop {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
+ * @attr {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
  * @prop {Array<EunomiaToggleGroupOption>} options - The choices to render, in order
  * @prop {Array<string>} value - The currently selected choices' values. Always exactly one entry in exclusive mode
  * @prop {boolean} [single=false] - Forces the exclusive, sliding indicator mode regardless of choice count. Already the case for exactly two choices without setting this
@@ -62,21 +70,22 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @prop {boolean} [disabled=false] - Whether the whole group is disabled
  * @attr {string} [aria-label] - The accessible label for the group, required since the group has no visible legend of its own
  * @fires {ChangeEvent} eunchange - Fired whenever the selection changes
- * @cssprop [--toggle-group-background] - Sets the background color of the track. Ignored once appearance isn't default, which has no shared background
- * @cssprop [--toggle-group-border-color] - Sets the border color of the track, and the border color of each option at rest in the outline appearance
+ * @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. Also sets the primary variant's selected color in the outline and flat appearances, for an option that sets no variant of its own
- * @cssprop [--toggle-group-active-color] - Sets the text color of selected options in the default appearance. Ignored in the outline and flat appearances, where the selected text color always follows the option's own color instead
+ * @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-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-hover-color] - Sets the text color of an unselected option on hover, in the default appearance. Ignored in the outline and flat appearances, where hover and focus text color always follow the option's own color instead, exactly like the selected state
+ * @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-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
  * @element eun-toggle-group
  */
-let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitElement) {
+let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixin(DisabledMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -106,6 +115,13 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Stretches the group to 100% of its parent's width, dividing that width
+         * equally between every choice instead of sizing to content. A label
+         * that doesn't fit its share makes the row overflow rather than shrink.
+         * @default false
+         */
+        this.full = false;
         /**
          * Keeps the indicator aligned when the track is resized (a responsive
          * layout change, a custom font loading in, ...) without a value/options
@@ -184,7 +200,8 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         __classPrivateFieldGet(this, _EunomiaToggleGroup_resizeObserver, "f")?.disconnect();
         super.disconnectedCallback?.();
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         this.settleAndSync(false);
     }
     updated(_changedProperties) {
@@ -195,7 +212,8 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         if (_changedProperties.has("value") ||
             _changedProperties.has("options") ||
             _changedProperties.has("single") ||
-            _changedProperties.has("appearance")) {
+            _changedProperties.has("appearance") ||
+            _changedProperties.has("full")) {
             this.settleAndSync(true);
         }
         if (_changedProperties.has("disabled") && this.disabled) {
@@ -240,6 +258,10 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
             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();
         });
     }
     /**
@@ -310,7 +332,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
                 ? this.value.filter((v) => v !== value)
                 : [...this.value, value];
         }
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Activates the given `eun-toggle-item`'s value, unless the group or the
@@ -345,6 +367,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
             item.checked = this.value.includes(item.value);
             item.toggleAttribute("exclusive", this.exclusive);
             item.setAttribute("appearance", this.appearance);
+            item.toggleAttribute("full", this.full);
         });
         if (this.exclusive) {
             this.applyRovingTabindex();
@@ -416,15 +439,52 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
      * @private
      */
     refreshIndicator(animate) {
-        if (!this.exclusive || this.appearance !== "default") {
+        if (!this.exclusive) {
             return;
         }
+        const settle = () => {
+            if (this.appearance === "default") {
+                this.moveIndicator(animate);
+            }
+            this.revealActive(animate);
+        };
         const active = this.entries.find((entry) => entry.value === this.value[0]);
         if (active && active.element.tagName !== "BUTTON") {
-            this.whenItemReady(active.element).then(() => this.moveIndicator(animate));
+            this.whenItemReady(active.element).then(settle);
             return;
         }
-        this.moveIndicator(animate);
+        settle();
+    }
+    /**
+     * Scrolls the row just enough to bring the selected entry into view, once
+     * the group overflows its container, leaving room for the arrows.
+     *
+     * @param animate whether to scroll smoothly, or jump there instantly.
+     * @private
+     */
+    revealActive(animate) {
+        const track = this.trackEl;
+        const active = this.entries.find((entry) => entry.value === this.value[0]);
+        if (!track || !active || track.scrollWidth <= track.clientWidth) {
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const rect = active.element.getBoundingClientRect();
+        const left = rect.left - trackRect.left - track.clientLeft;
+        const right = left + rect.width;
+        let delta = 0;
+        if (left < ARROW_CLEARANCE) {
+            delta = left - ARROW_CLEARANCE;
+        }
+        else if (right > track.clientWidth - ARROW_CLEARANCE) {
+            delta = right - (track.clientWidth - ARROW_CLEARANCE);
+        }
+        if (delta) {
+            track.scrollBy({
+                left: delta,
+                behavior: animate ? "smooth" : "instant",
+            });
+        }
     }
     /**
      * Slides the highlight behind the currently selected entry, resizing it
@@ -448,12 +508,20 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         }
         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 +
+            this.trackEl.scrollLeft;
         if (!animate) {
             indicator.style.transition = "none";
         }
         indicator.style.opacity = "1";
         indicator.style.width = `${Math.floor(activeRect.width)}px`;
-        indicator.style.transform = `translateX(${Math.floor(activeRect.left - trackRect.left)}px)`;
+        indicator.style.transform = `translateX(${Math.floor(offset)}px)`;
         if (!animate) {
             indicator.getBoundingClientRect();
             indicator.style.transition = "";
@@ -543,52 +611,97 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends DisabledMixin(LitEleme
         this.activateValue(next.value);
         next.element.focus();
     }
+    /**
+     * Whether a given overflow arrow should currently be visible : hidden
+     * when nothing overflows, and once scrolled all the way to that edge.
+     *
+     * @param arrowPosition the position of the arrow to check.
+     * @returns true if it should be visible, false otherwise.
+     * @private
+     */
+    arrowVisible(arrowPosition) {
+        if (!this.overflowState) {
+            return false;
+        }
+        const overflowPositions = [
+            "middle",
+            arrowPosition === "start" ? "end" : "start",
+        ];
+        return overflowPositions.includes(String(this.overflowState));
+    }
+    /**
+     * The row mixes internal `<button>`s (`options`) with slotted items, so the
+     * mixin's slot-based measurement can't see every choice : compares the
+     * scrollable's own sizes instead.
+     * @protected
+     */
+    isOnOverflow() {
+        const el = this.trackEl;
+        return !!el && el.scrollWidth > el.clientWidth;
+    }
     render() {
         const exclusive = this.exclusive;
         const showIndicator = exclusive && this.appearance === "default";
         return html `
-      <div
-        id="track"
-        role=${exclusive ? "radiogroup" : "group"}
-        part="track"
-        aria-label=${this.ariaLabel ?? nothing}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        @keydown=${(event) => this.handleKeydown(event)}
-      >
-        ${showIndicator
+      <div id="scrollable-wrapper">
+        <div
+          id="scrollable"
+          role=${exclusive ? "radiogroup" : "group"}
+          part="track"
+          aria-label=${this.ariaLabel ?? nothing}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          @keydown=${(event) => this.handleKeydown(event)}
+          @scroll=${this.updateScroll}
+        >
+          ${showIndicator
             ? html `<span
-              id="indicator"
-              part="indicator"
-              aria-hidden="true"
-            ></span>`
+                id="indicator"
+                part="indicator"
+                aria-hidden="true"
+              ></span>`
             : nothing}
-        ${this.options.map((option, index) => {
+          ${this.options.map((option, index) => {
             const checked = this.value.includes(option.value);
             const iconOnly = !!option.icon && !option.showLabel;
             return html `
-            <button
-              type="button"
-              class=${classMap({ active: checked, "icon-only": iconOnly })}
-              data-value=${option.value}
-              data-variant=${ifDefined(option.variant)}
-              role=${exclusive ? "radio" : "checkbox"}
-              aria-checked=${checked ? "true" : "false"}
-              aria-label=${ifDefined(iconOnly ? option.label : undefined)}
-              title=${ifDefined(iconOnly ? option.label : undefined)}
-              tabindex=${ifDefined(exclusive
+              <button
+                type="button"
+                class=${classMap({ active: checked, "icon-only": iconOnly })}
+                data-value=${option.value}
+                data-variant=${ifDefined(option.variant)}
+                role=${exclusive ? "radio" : "checkbox"}
+                aria-checked=${checked ? "true" : "false"}
+                aria-label=${ifDefined(iconOnly ? option.label : undefined)}
+                title=${ifDefined(iconOnly ? option.label : undefined)}
+                tabindex=${ifDefined(exclusive
                 ? this.exclusiveTabIndex(option.value, index)
                 : undefined)}
-              ?disabled=${this.disabled}
-              @click=${() => this.activateValue(option.value)}
-            >
-              ${option.icon
+                ?disabled=${this.disabled}
+                @click=${() => this.activateValue(option.value)}
+              >
+                ${option.icon
                 ? html `<eun-icon name=${option.icon} size="16"></eun-icon>`
                 : nothing}
-              ${iconOnly ? nothing : option.label}
-            </button>
-          `;
+                ${iconOnly ? nothing : option.label}
+              </button>
+            `;
         })}
-        <slot @slotchange=${this.handleSlotChange}></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div id="arrows">
+          <arrow-container
+            class=${classMap({ visible: this.arrowVisible("start") })}
+            @click=${this.scrollItem("back")}
+          >
+            <eun-icon name="chevron_left"></eun-icon>
+          </arrow-container>
+          <arrow-container
+            class=${classMap({ visible: this.arrowVisible("end") })}
+            @click=${this.scrollItem("front")}
+          >
+            <eun-icon name="chevron_right"></eun-icon>
+          </arrow-container>
+        </div>
       </div>
     `;
     }
@@ -615,11 +728,14 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], EunomiaToggleGroup.prototype, "appearance", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaToggleGroup.prototype, "full", void 0);
 __decorate([
     queryAssignedElements()
 ], EunomiaToggleGroup.prototype, "items", void 0);
 __decorate([
-    query("#track")
+    query("#scrollable")
 ], EunomiaToggleGroup.prototype, "trackEl", void 0);
 __decorate([
     query("#indicator")

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

@@ -2,17 +2,18 @@
  * 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 variant
+ * [--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-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 declare const toggleGroupStyles: import("lit").CSSResult;