@eunomia/elements 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/components/action/dropdown-button/dropdown-button.js

@@ -52,7 +52,7 @@ export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
  * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @prop {boolean} [rounded=false] - Whether the trigger button has fully rounded corners
- * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='default'] - The trigger button's surface style, using the same values as the button component. Defaults to a paler tint rather than a solid fill, since a menu trigger reads better as a lighter weight control than a standalone primary action
+ * @prop {'soft' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The trigger button's surface style, using the same values as the button component
  * @prop {EunomiaDropdownPlacement} [placement='bottom-start'] - Where the menu opens relative to the trigger
  * @prop {boolean} [open=false] - Whether the menu is currently open. Read-only in practice (set from the menu's own native toggle handling), reflected as an attribute so a consumer's own CSS can select on it, e.g. to keep a hover-revealed trigger visible while its menu is open
  * @attr {string} aria-label - The accessible label for the trigger button, required when it has no visible label or slotted content, such as an icon only trigger
@@ -112,10 +112,8 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         /**
          * The trigger button's surface treatment, forwarded to the trigger
          * `eun-button` — see its own `appearance` doc for the full list of
-         * values. Defaults to `default` (a pale tinted wash) rather than
-         * `eun-button`'s own `fill` default — a menu trigger reads better as a
-         * lighter-weight control than a standalone primary action button.
-         * @default default
+         * values.
+         * @default fill
          */
         this.appearance = "fill";
         /**
@@ -371,7 +369,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
      * The key of a direct menu entry, whichever mechanism produced it : an
      * `options` entry's `<li>` carries it as `data-key` (see
      * {@link renderOption}) ; a `eun-dropdown-item` carries it as its own
-     * `key` property.
+     * `value` property.
      *
      * @param entry the entry to read the key from.
      * @private
@@ -380,7 +378,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         if (entry.tagName === "LI") {
             return entry.dataset.key ?? null;
         }
-        return entry.key ?? null;
+        return entry.value ?? null;
     }
     /**
      * Closes whichever direct entry currently has its submenu open, unless
@@ -1055,7 +1053,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         }
         const iconName = resolveIcon(this.icon, this.severity);
         return iconName
-            ? html `<eun-icon slot="start" name=${iconName} size="16"></eun-icon>`
+            ? html `<eun-icon slot="start" name=${iconName}></eun-icon>`
             : nothing;
     }
     /**

package/dist/components/action/dropdown-button/dropdown-item.d.ts

@@ -20,7 +20,8 @@ export declare const EunomiaDropdownItemTagName = "eun-dropdown-item";
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @slot submenu - Nested dropdown item elements, opened as this item's own submenu
  * @csspart item - The item's own row (icon, label/description, submenu chevron), carrying its padding and hover/active background. Exposed for effects the item's CSS custom properties don't cover
- * @prop {string} key - The key reported when this item is chosen
+ * @prop {string} value - The key reported when this item is chosen
+ * @prop {string} key - Alias of value, kept for compatibility. Prefer value, since React and Vue reserve key and never pass it to the element
  * @prop {string} label - The item's text content, if not using the default slot
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {string} description - Optional secondary text shown under the label or slotted content
@@ -49,7 +50,14 @@ export declare class EunomiaDropdownItem extends LitElement implements DropdownM
     /**
      * The key reported when this item is chosen.
      */
-    key: string;
+    value: string;
+    /**
+     * Alias of {@link value}, kept for compatibility. React and Vue reserve
+     * `key` for list reconciliation and never pass it to the element, so
+     * `value` is the attribute to use from those frameworks.
+     */
+    get key(): string;
+    set key(key: string);
     /**
      * The row's text content, if not using the default slot.
      */

package/dist/components/action/dropdown-button/dropdown-item.js

@@ -28,7 +28,8 @@ export const EunomiaDropdownItemTagName = "eun-dropdown-item";
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @slot submenu - Nested dropdown item elements, opened as this item's own submenu
  * @csspart item - The item's own row (icon, label/description, submenu chevron), carrying its padding and hover/active background. Exposed for effects the item's CSS custom properties don't cover
- * @prop {string} key - The key reported when this item is chosen
+ * @prop {string} value - The key reported when this item is chosen
+ * @prop {string} key - Alias of value, kept for compatibility. Prefer value, since React and Vue reserve key and never pass it to the element
  * @prop {string} label - The item's text content, if not using the default slot
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {string} description - Optional secondary text shown under the label or slotted content
@@ -90,14 +91,14 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
             if (toggleEvent.newState === "open") {
                 this.setAttribute("aria-expanded", "true");
                 this.toggleAttribute("data-submenu-open", true);
-                this.container?.notifySubmenuOpened(this.key);
+                this.container?.notifySubmenuOpened(this.value);
                 this.positionOwnSubmenu();
                 void this.updateComplete.then(() => focusEntryAt(this.submenuItems, 0));
                 return;
             }
             this.setAttribute("aria-expanded", "false");
             this.toggleAttribute("data-submenu-open", false);
-            this.container?.notifySubmenuClosed(this.key);
+            this.container?.notifySubmenuClosed(this.value);
             this.closeOtherSubmenus(null);
         };
         /**
@@ -113,7 +114,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
                 this.toggleOwnSubmenu();
             }
             else {
-                this.container?.selectByKey(this.key);
+                this.container?.selectByKey(this.value);
             }
         };
         /**
@@ -133,7 +134,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
                 ? container
                 : undefined;
             handleMenuKeydown(event, container.menuEntries, {
-                onSelect: () => container.selectByKey(this.key),
+                onSelect: () => container.selectByKey(this.value),
                 onOpenSubmenu: () => this.openSubmenu(),
                 onClose: parentItem
                     ? () => {
@@ -184,6 +185,17 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
             this.hasSubmenu = this.submenuItems.length > 0;
         };
     }
+    /**
+     * Alias of {@link value}, kept for compatibility. React and Vue reserve
+     * `key` for list reconciliation and never pass it to the element, so
+     * `value` is the attribute to use from those frameworks.
+     */
+    get key() {
+        return this.value;
+    }
+    set key(key) {
+        this.value = key;
+    }
     /**
      * The closest `eun-dropdown-button` or `eun-dropdown-item` ancestor this
      * item delegates to. `null` when not (yet) placed inside one. Starts
@@ -267,7 +279,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
         }
         clearTimeout(this.openSubmenuTimer);
         clearTimeout(this.closeSubmenuTimer);
-        this.container?.closeOtherSubmenus(this.key);
+        this.container?.closeOtherSubmenus(this.value);
         if (opening) {
             submenu.showPopover();
         }
@@ -357,7 +369,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
         }
         if (this.openChildKey) {
             this.submenuItems
-                .find((item) => item.key === this.openChildKey)
+                .find((item) => item.value === this.openChildKey)
                 ?.repositionSubmenu();
         }
     }
@@ -384,7 +396,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
             return;
         }
         this.submenuItems
-            .find((item) => item.key === this.openChildKey)
+            .find((item) => item.value === this.openChildKey)
             ?.closeSubmenu();
         this.openChildKey = null;
     }
@@ -515,7 +527,10 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
 EunomiaDropdownItem.styles = dropdownItemStyles;
 __decorate([
     property({ reflect: true })
-], EunomiaDropdownItem.prototype, "key", void 0);
+], EunomiaDropdownItem.prototype, "value", void 0);
+__decorate([
+    property({ attribute: "key" })
+], EunomiaDropdownItem.prototype, "key", null);
 __decorate([
     property()
 ], EunomiaDropdownItem.prototype, "label", void 0);

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

@@ -20,13 +20,14 @@ declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Con
  * it the same way, through the anchor's aria-description.
  *
  * @slot [default] - The link content, or a native anchor carrying the href itself when href is unset
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only
+ * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only, unless the link is block
  * @prop {string} href - The destination URL
  * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically adds an external link icon at the end and announces it to assistive technology, in the current locale
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional decorative icon displayed to the left of the link
  * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background, such as --eun-surface-inverse, where it takes the --eun-text-on-inverse colors
  * @prop {'auto' | 'off' | 'on'} [visitedStyle='auto'] - Controls the visited state color. Auto follows the browser's real navigation history, off always renders as unvisited, and on always renders as visited
  * @prop {boolean} [current=false] - Marks the link as the current page: it renders with aria-current="page" and keeps the --link-color-current color in every state (hover, focus, visited), for example an active item in a navigation
+ * @prop {boolean} [block=false] - Makes the link fill the width of its container, the whole row taking the hover, the focus ring and the click, even with an icon, for example an item of a vertical navigation. The label stays on one line, cut with an ellipsis when it doesn't fit
  * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
@@ -45,6 +46,7 @@ declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Con
  * @cssprop [--link-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
+ * @cssprop [--link-background-hover] - Sets a background color shown while the link is hovered, falling back to --link-background when unset
  * @cssprop [--link-background-focus] - Sets a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * @cssprop [--link-border-radius] - Sets the corner radius of the link's own background/focus outline box
  * @cssstate focus-visible - Set while the link is keyboard-focused (never after a mouse click), so it can be styled from outside the shadow root with eun-link:state(focus-visible). Turbopack's CSS parser (lightningcss) doesn't recognize :state() yet and rejects the whole stylesheet it's in ; ship that rule as a runtime <style>/<link> instead until it's supported
@@ -108,6 +110,13 @@ export declare class EunomiaLink extends EunomiaLink_base {
      * @default false
      */
     current: boolean;
+    /**
+     * Fills the width of the container, the whole row taking the hover, the
+     * focus ring and the click, even with an icon : for a navigation item.
+     * The label stays on one line, cut with an ellipsis when it doesn't fit.
+     * @default false
+     */
+    block: boolean;
     /**
      * React's server renderer writes a custom element's camelCase prop as an
      * attribute of that exact name, lowercased (`visitedStyle="off"` becomes

package/dist/components/action/link/link.js

@@ -43,13 +43,14 @@ export const EunomiaLinkTagName = "eun-link";
  * it the same way, through the anchor's aria-description.
  *
  * @slot [default] - The link content, or a native anchor carrying the href itself when href is unset
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only
+ * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only, unless the link is block
  * @prop {string} href - The destination URL
  * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically adds an external link icon at the end and announces it to assistive technology, in the current locale
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional decorative icon displayed to the left of the link
  * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background, such as --eun-surface-inverse, where it takes the --eun-text-on-inverse colors
  * @prop {'auto' | 'off' | 'on'} [visitedStyle='auto'] - Controls the visited state color. Auto follows the browser's real navigation history, off always renders as unvisited, and on always renders as visited
  * @prop {boolean} [current=false] - Marks the link as the current page: it renders with aria-current="page" and keeps the --link-color-current color in every state (hover, focus, visited), for example an active item in a navigation
+ * @prop {boolean} [block=false] - Makes the link fill the width of its container, the whole row taking the hover, the focus ring and the click, even with an icon, for example an item of a vertical navigation. The label stays on one line, cut with an ellipsis when it doesn't fit
  * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
@@ -68,6 +69,7 @@ export const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
+ * @cssprop [--link-background-hover] - Sets a background color shown while the link is hovered, falling back to --link-background when unset
  * @cssprop [--link-background-focus] - Sets a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * @cssprop [--link-border-radius] - Sets the corner radius of the link's own background/focus outline box
  * @cssstate focus-visible - Set while the link is keyboard-focused (never after a mouse click), so it can be styled from outside the shadow root with eun-link:state(focus-visible). Turbopack's CSS parser (lightningcss) doesn't recognize :state() yet and rejects the whole stylesheet it's in ; ship that rule as a runtime <style>/<link> instead until it's supported
@@ -111,6 +113,13 @@ let EunomiaLink = class EunomiaLink extends LocalizableMixin(LitElement) {
          * @default false
          */
         this.current = false;
+        /**
+         * Fills the width of the container, the whole row taking the hover, the
+         * focus ring and the click, even with an icon : for a navigation item.
+         * The label stays on one line, cut with an ellipsis when it doesn't fit.
+         * @default false
+         */
+        this.block = false;
         /**
          * The anchor {@link current} was last mirrored onto, so its
          * `aria-current` can be cleared once it's swapped out or removed.
@@ -373,6 +382,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaLink.prototype, "current", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaLink.prototype, "block", void 0);
 __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaLink.prototype, "iconSlotEls", void 0);

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

@@ -19,6 +19,7 @@ import { css } from "lit";
  * [--link-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --link-padding is set
  * [--link-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * [--link-background] - Set a persistent background color behind the link. Defaults to transparent
+ * [--link-background-hover] - Set a background color shown while the link is hovered, falling back to --link-background when unset
  * [--link-background-focus] - Set a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * [--link-border-radius] - Set a custom corner radius for the link's own background/focus outline box
  */
@@ -80,7 +81,7 @@ const base = css `
   #label {
     border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
     outline: 2px solid transparent;
-    transition: outline var(--_duration) var(--eun-easing-out, ease-out);
+    transition: outline-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   #external-link-icon {
     display: inline-flex;
@@ -107,9 +108,15 @@ const base = css `
     transition:
       color var(--_duration) var(--eun-easing-out, ease-out),
       background-color var(--_duration) var(--eun-easing-out, ease-out),
-      outline var(--_duration) var(--eun-easing-out, ease-out),
+      outline-color var(--_duration) var(--eun-easing-out, ease-out),
       text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
+  #link:hover {
+    background: var(
+      --link-background-hover,
+      var(--link-background, transparent)
+    );
+  }
   #link:visited {
     color: var(--_colorVisited);
     text-decoration-color: var(--_colorVisited);
@@ -189,6 +196,9 @@ const base = css `
     text-decoration: var(--_textDecoration);
     text-wrap-style: pretty;
     border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    /* Transparent before the icon outline below is drawn, so it never fades
+       in from currentColor once has-icon lands after the first render. */
+    outline-color: transparent;
     transition:
       color var(--_duration) var(--eun-easing-out, ease-out),
       background-color var(--_duration) var(--eun-easing-out, ease-out),
@@ -234,7 +244,7 @@ const base = css `
     transition:
       color var(--_duration) var(--eun-easing-out, ease-out),
       background-color var(--_duration) var(--eun-easing-out, ease-out),
-      outline var(--_duration) var(--eun-easing-out, ease-out),
+      outline-color var(--_duration) var(--eun-easing-out, ease-out),
       text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   #link.has-icon ::slotted(a:focus-visible) {
@@ -269,6 +279,43 @@ const base = css `
     --icon-color: var(--link-icon-color, var(--_colorCurrent));
   }
 
+  :host([block]) {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    white-space: nowrap;
+  }
+  :host([block]) #link {
+    box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
+  }
+  :host([block]) #link.has-icon:focus-visible,
+  :host([block]:state(focus-visible)) #link.slotted-link {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+  }
+  :host([block]) #link.has-icon:focus-visible #label {
+    background: none;
+    outline-color: transparent;
+  }
+  :host([block]) #link.has-icon ::slotted(a:focus-visible) {
+    background: none;
+    outline-color: transparent;
+  }
+
+  :host([block]) #label,
+  :host([block]) ::slotted(a) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     #link,
     ::slotted(a) {

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

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { ButtonColor } from "../../../mixins/button.mixin.js";
-import { EunomiaToggleAppearance } from "../../../types/variant.type.js";
+import { EunomiaSize, EunomiaToggleAppearance } from "../../../types/variant.type.js";
 import type { EunomiaToggleItem } from "./toggle-item.js";
 /**
  * Tag name of the toggle group component.
@@ -42,7 +42,7 @@ export type EunomiaToggleGroupOption = {
      */
     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;
+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/rounded.mixin.js").RoundedMixinInterface> & 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
@@ -76,6 +76,8 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @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
  * @prop {'default' | 'outline' | 'flat'} [appearance='default'] - The display shape used to render the group's choices
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The group size. A group and a button of the same size share the same height
+ * @prop {boolean} [rounded=false] - Whether the track and its options are fully rounded, as pills. A custom border radius still wins over it
  * @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
@@ -135,6 +137,14 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @default default
      */
     appearance: EunomiaToggleGroupAppearance;
+    /**
+     * The group size, matching the button size of the same name : a group
+     * and a button of the same size stand at the same height. The default
+     * isn't reflected, so an SSR framework doesn't see an attribute it never
+     * rendered.
+     * @default m
+     */
+    size: EunomiaSize;
     /**
      * Stretches the group to 100% of its parent's width, dividing that width
      * equally between every choice instead of sizing to content. A label

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

@@ -21,6 +21,7 @@ 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 { RoundedMixin } from "../../../mixins/rounded.mixin.js";
 import { NavigationOverflowMixin } from "../../../mixins/overflow-navigation.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { debounce } from "../../../utils/time.utils.js";
@@ -67,6 +68,8 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @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
  * @prop {'default' | 'outline' | 'flat'} [appearance='default'] - The display shape used to render the group's choices
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The group size. A group and a button of the same size share the same height
+ * @prop {boolean} [rounded=false] - Whether the track and its options are fully rounded, as pills. A custom border radius still wins over it
  * @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
@@ -88,7 +91,7 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @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 NavigationOverflowMixin(DisabledMixin(LitElement)) {
+let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixin(RoundedMixin(DisabledMixin(LitElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -119,6 +122,14 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
          * @default default
          */
         this.appearance = "default";
+        /**
+         * The group size, matching the button size of the same name : a group
+         * and a button of the same size stand at the same height. The default
+         * isn't reflected, so an SSR framework doesn't see an attribute it never
+         * rendered.
+         * @default m
+         */
+        this.size = "m";
         /**
          * Stretches the group to 100% of its parent's width, dividing that width
          * equally between every choice instead of sizing to content. A label
@@ -231,6 +242,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
             _changedProperties.has("options") ||
             _changedProperties.has("single") ||
             _changedProperties.has("appearance") ||
+            _changedProperties.has("size") ||
             _changedProperties.has("full")) {
             this.settleAndSync(true);
         }
@@ -692,7 +704,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
                 @click=${() => this.activateValue(option.value)}
               >
                 ${option.icon
-                ? html `<eun-icon name=${option.icon} size="16"></eun-icon>`
+                ? html `<eun-icon name=${option.icon}></eun-icon>`
                 : nothing}
                 ${iconOnly ? nothing : option.label}
               </button>
@@ -752,6 +764,9 @@ __decorate([
 __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaToggleGroup.prototype, "appearance", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], EunomiaToggleGroup.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggleGroup.prototype, "full", void 0);

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

@@ -33,20 +33,64 @@ export const toggleGroupStyles = css `
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_toggleDefaultRadius: var(--eun-border-radius-m, 8px);
+    --_toggleRadius: var(
+      --toggle-group-border-radius,
+      var(--_toggleDefaultRadius)
+    );
+    --_toggleFontSize: var(--eun-font-size-s, 14px);
+    --_toggleButtonPaddingBlock: var(--eun-space-s, 8px);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-l, 32px) / 2);
+    --_toggleLineHeight: 1rem;
     --_trackPaddingBlock: var(
       --toggle-group-padding,
-      var(--toggle-group-padding-block, 4px)
+      var(
+        --toggle-group-padding-block,
+        calc(var(--_toggleButtonPaddingBlock) / 2)
+      )
     );
     --_trackPaddingInline: var(
       --toggle-group-padding,
       var(--toggle-group-padding-inline, 4px)
     );
+    --_toggleOptionPaddingBlock: max(
+      0px,
+      calc(var(--_toggleButtonPaddingBlock) - var(--_trackPaddingBlock))
+    );
     --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--_toggleFontSize);
+  }
+  :host([rounded]) {
+    --_toggleDefaultRadius: var(--eun-border-radius-xl, 999px);
+  }
+  :host([size="xs"]) {
+    --_toggleFontSize: var(--eun-font-size-xs, 10px);
+    --_toggleButtonPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_toggleOptionPaddingInline: var(--eun-space-xs, 4px);
+    --_toggleLineHeight: 10px;
+  }
+  :host([size="s"]) {
+    --_toggleFontSize: var(--eun-font-size-xs, 10px);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+    --_toggleOptionPaddingInline: var(--eun-space-s, 8px);
+    --_toggleLineHeight: 10px;
+  }
+  :host([size="l"]) {
+    --_toggleFontSize: var(--eun-font-size-m, 16px);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.25);
+    --_toggleLineHeight: 1.1rem;
+  }
+  :host([size="xl"]) {
+    --_toggleFontSize: var(--eun-font-size-l, 1.3rem);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.5);
+    --_toggleLineHeight: 1.3rem;
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_toggleOptionPaddingBlock: var(--_toggleButtonPaddingBlock);
     --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
@@ -74,10 +118,7 @@ export const toggleGroupStyles = css `
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
     padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius);
     background: var(
       --toggle-group-background,
       var(--eun-surface-sunken, #f7f8fa)
@@ -178,9 +219,7 @@ export const toggleGroupStyles = css `
     width: 0;
     opacity: 0;
     z-index: 0;
-    border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
-    );
+    border-radius: calc(var(--_toggleRadius) - 3px);
     background: var(
       --toggle-group-active-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -232,12 +271,12 @@ export const toggleGroupStyles = css `
     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);
+    --icon-size: var(--_toggleLineHeight);
+    padding: var(--_toggleOptionPaddingBlock) var(--_toggleOptionPaddingInline);
+    line-height: var(--_toggleLineHeight);
     font-weight: var(--eun-font-weight-m, 500);
     outline: 2px solid transparent;
-    border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
-    );
+    border-radius: calc(var(--_toggleRadius) - 3px);
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
@@ -294,7 +333,7 @@ export const toggleGroupStyles = css `
   }
   button.icon-only {
     justify-content: center;
-    padding: 6px;
+    padding: var(--_toggleOptionPaddingBlock);
   }
 
   button[data-color="secondary"] {
@@ -315,10 +354,7 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius);
   }
   :host([appearance="outline"]) button {
     border: var(--eun-border-width-s, 1px) solid

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

@@ -105,9 +105,7 @@ let EunomiaToggleItem = class EunomiaToggleItem extends DisabledMixin(LitElement
         return html `
       <div id="item" part="item">
         <slot name="icon">
-          ${this.icon
-            ? html `<eun-icon name=${this.icon} size="16"></eun-icon>`
-            : nothing}
+          ${this.icon ? html `<eun-icon name=${this.icon}></eun-icon>` : nothing}
         </slot>
         <slot></slot>
       </div>

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

@@ -28,15 +28,18 @@ export const toggleItemStyles = css `
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
+    --icon-size: var(--_toggleLineHeight, 1rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--_toggleFontSize, var(--eun-font-size-s, 14px));
+    line-height: var(--_toggleLineHeight, 1rem);
     font-weight: var(--eun-font-weight-m, 500);
     white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
-    padding: 6px 14px;
+    padding: var(--_toggleOptionPaddingBlock, calc(var(--eun-space-s, 8px) / 2))
+      var(--_toggleOptionPaddingInline, calc(var(--eun-space-l, 32px) / 2));
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
+      var(--_toggleRadius, var(--eun-border-radius-m, 8px)) - 3px
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
@@ -116,10 +119,7 @@ export const toggleItemStyles = css `
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius, var(--eun-border-radius-m, 8px));
   }
   :host([appearance="outline"]) #item {
     border: var(--eun-border-width-s, 1px) solid