@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/cdn/styles/tools/mixins/layout/eunomia-grid.mixin.scss

@@ -1,6 +1,37 @@
+@use "sass:list";
 @use "./../media-queries/eunomia-media-queries.mixin.scss" as *;
 
+$_eunomia-grid-own-properties: (
+  "--eun-grid-track-min",
+  "--_variantCols0",
+  "--_variantCols1",
+  "--_variantCols2",
+  "--_variantCols3",
+  "--_variantCols4",
+  "--_variantTpl0",
+  "--_variantTpl1",
+  "--_variantTpl2",
+  "--_variantTpl3",
+  "--_variantTpl4"
+);
+
+@each $name in ("columns", "template") {
+  @each $suffix in ("", "-mobile", "-tablet", "-laptop", "-desktop") {
+    $_eunomia-grid-own-properties: list.append(
+      $_eunomia-grid-own-properties,
+      "--eun-grid-#{$name}#{$suffix}"
+    );
+  }
+}
+
 @mixin eunomia-grid-layouts {
+  @each $property in $_eunomia-grid-own-properties {
+    @property #{$property} {
+      syntax: "*";
+      inherits: false;
+    }
+  }
+
   :where(.eun-grid) {
     --_cols0: var(--eun-grid-columns, var(--_variantCols0, 1));
     --_cols1: var(
@@ -62,8 +93,65 @@
       )
     );
     --_cols: var(--_cols0);
+    --_tpl0: var(--eun-grid-template, var(--_variantTpl0));
+    --_tpl1: var(
+      --eun-grid-template-mobile,
+      var(--eun-grid-template, var(--_variantTpl1, var(--_variantTpl0)))
+    );
+    --_tpl2: var(
+      --eun-grid-template-tablet,
+      var(
+        --eun-grid-template-mobile,
+        var(
+          --eun-grid-template,
+          var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+        )
+      )
+    );
+    --_tpl3: var(
+      --eun-grid-template-laptop,
+      var(
+        --eun-grid-template-tablet,
+        var(
+          --eun-grid-template-mobile,
+          var(
+            --eun-grid-template,
+            var(
+              --_variantTpl3,
+              var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+            )
+          )
+        )
+      )
+    );
+    --_tpl4: var(
+      --eun-grid-template-desktop,
+      var(
+        --eun-grid-template-laptop,
+        var(
+          --eun-grid-template-tablet,
+          var(
+            --eun-grid-template-mobile,
+            var(
+              --eun-grid-template,
+              var(
+                --_variantTpl4,
+                var(
+                  --_variantTpl3,
+                  var(--_variantTpl2, var(--_variantTpl1, var(--_variantTpl0)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_tpl: var(--_tpl0);
     display: grid;
-    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
+    grid-template-columns: var(
+      --_tpl,
+      repeat(var(--_cols), minmax(var(--eun-grid-track-min, 0), 1fr))
+    );
     row-gap: var(--eun-grid-row-gap, var(--eun-space-s));
     column-gap: var(--eun-grid-column-gap, var(--eun-space-m));
   }
@@ -71,21 +159,25 @@
   @include eunomia-from(mobile) {
     :where(.eun-grid) {
       --_cols: var(--_cols1);
+      --_tpl: var(--_tpl1);
     }
   }
   @include eunomia-from(tablet) {
     :where(.eun-grid) {
       --_cols: var(--_cols2);
+      --_tpl: var(--_tpl2);
     }
   }
   @include eunomia-from(laptop) {
     :where(.eun-grid) {
       --_cols: var(--_cols3);
+      --_tpl: var(--_tpl3);
     }
   }
   @include eunomia-from(desktop) {
     :where(.eun-grid) {
       --_cols: var(--_cols4);
+      --_tpl: var(--_tpl4);
     }
   }
 
@@ -102,15 +194,31 @@
     grid-auto-flow: row;
   }
 
-  @include eunomia-from(tablet) {
-    :where(.eun-grid--thirds-1-2) {
-      grid-template-columns: 1fr 2fr;
-    }
+  :where(.eun-grid--thirds-1-2) {
+    --_variantTpl2: 1fr 2fr;
+  }
 
-    :where(.eun-grid--thirds-2-1) {
-      grid-template-columns: 2fr 1fr;
-    }
+  :where(.eun-grid--thirds-2-1) {
+    --_variantTpl2: 2fr 1fr;
+  }
+
+  :where(.eun-grid--quarters-1-3) {
+    --_variantTpl2: 1fr 3fr;
+  }
+
+  :where(.eun-grid--quarters-3-1) {
+    --_variantTpl2: 3fr 1fr;
+  }
+
+  :where(.eun-grid--fifths-2-3) {
+    --_variantTpl2: 2fr 3fr;
+  }
 
+  :where(.eun-grid--fifths-3-2) {
+    --_variantTpl2: 3fr 2fr;
+  }
+
+  @include eunomia-from(tablet) {
     :where(.eun-grid--sidebar-left),
     :where(.eun-grid--sidebar-right) {
       grid-template-columns: repeat(2, 1fr);

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

@@ -154,7 +154,7 @@ const base = css `
   #external-link-icon {
     display: inline-flex;
     align-items: center;
-    margin-inline: var(--eun-space-s) calc(-1 * var(--eun-space-xs));
+    margin-inline: var(--eun-space-s, 8px) calc(-1 * var(--eun-space-xs, 4px));
     transform: rotate(-45deg);
     --icon-color: var(--_textColor);
   }
@@ -266,7 +266,7 @@ const appearances = css `
     --_bd: transparent;
   }
   :host([appearance="ghost"]:not([color])) {
-    --_accent: var(--eun-text-secondary, #484e61);
+    --_accent: var(--eun-text-secondary, #666e8a);
     --_wash-hover: var(--eun-content-hover, #edeff0);
     --_wash-active: var(--eun-disabled-color, #ecedf0);
   }

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

@@ -84,6 +84,7 @@ export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right"
  * @cssprop [--dropdown-menu-disabled-color] - Sets the text color of a disabled option
  * @cssprop [--dropdown-menu-hover-background] - Sets the background color of a highlighted option
  * @cssprop [--dropdown-menu-accent-color] - Sets the color of the hover accent bar and the keyboard focus outline. Also inherited by slotted dropdown items
+ * @cssprop [--dropdown-menu-focus-outline-color] - Sets the keyboard focus outline color of an option, falling back to --dropdown-menu-accent-color. Also inherited by slotted dropdown items
  * @cssprop [--button-border-color] - Sets the border color of the trigger button
  * @cssprop [--button-width] - Sets the trigger's width, such as 100% to stretch it like the full attribute does
  * @cssprop [--button-border-color-hover] - Sets the border color of the trigger button on hover or focus, falling back to button-border-color when unset
@@ -732,4 +733,7 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaDropdownButtonTagName]: EunomiaDropdownButton;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaDropdownButtonTagName]: "options";
+    }
 }

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

@@ -79,6 +79,7 @@ export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
  * @cssprop [--dropdown-menu-disabled-color] - Sets the text color of a disabled option
  * @cssprop [--dropdown-menu-hover-background] - Sets the background color of a highlighted option
  * @cssprop [--dropdown-menu-accent-color] - Sets the color of the hover accent bar and the keyboard focus outline. Also inherited by slotted dropdown items
+ * @cssprop [--dropdown-menu-focus-outline-color] - Sets the keyboard focus outline color of an option, falling back to --dropdown-menu-accent-color. Also inherited by slotted dropdown items
  * @cssprop [--button-border-color] - Sets the border color of the trigger button
  * @cssprop [--button-width] - Sets the trigger's width, such as 100% to stretch it like the full attribute does
  * @cssprop [--button-border-color-hover] - Sets the border color of the trigger button on hover or focus, falling back to button-border-color when unset

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

@@ -12,6 +12,7 @@ import { css } from "lit";
  * [--dropdown-menu-disabled-color] - Set a custom text color for a disabled option
  * [--dropdown-menu-hover-background] - Set a custom background color for a hovered/focused/highlighted option
  * [--dropdown-menu-accent-color] - Set a custom color for the hover accent bar and the keyboard focus outline
+ * [--dropdown-menu-focus-outline-color] - Set a custom keyboard focus outline color, falling back to --dropdown-menu-accent-color
  * [--dropdown-menu-transition-duration=160ms] - Set a custom duration for the menu/submenu's open/close animation (played in JS — see playMenuOpenAnimation/playMenuCloseAnimation), disabled entirely under `prefers-reduced-motion: reduce`
  *
  * These variables are inherited through the DOM tree (including across the
@@ -114,8 +115,8 @@ const base = css `
   #menu li:focus-visible,
   .submenu li:focus-visible {
     outline-color: var(
-      --dropdown-menu-accent-color,
-      var(--eun-color-primary-500, #3d6fff)
+      --dropdown-menu-focus-outline-color,
+      var(--dropdown-menu-accent-color, var(--eun-color-primary-500, #3d6fff))
     );
   }
   #menu li[aria-disabled="true"],
@@ -144,7 +145,7 @@ const base = css `
   .submenu li .submenu-chevron {
     --icon-color: var(
       --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     margin-right: calc(-1 * var(--eun-space-s));
   }
@@ -165,7 +166,7 @@ const base = css `
     font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -32,6 +32,7 @@ export declare const EunomiaDropdownItemTagName = "eun-dropdown-item";
  * @cssprop [--dropdown-menu-disabled-color] - Sets the text color of this item when disabled
  * @cssprop [--dropdown-menu-hover-background] - Sets the background color of this item when highlighted or when its submenu is open
  * @cssprop [--dropdown-menu-accent-color] - Sets the color of the hover accent bar and the keyboard focus outline
+ * @cssprop [--dropdown-menu-focus-outline-color] - Sets the keyboard focus outline color, falling back to --dropdown-menu-accent-color
  * @cssprop [--dropdown-menu-background] - Sets the background color of this item's own submenu panel, if it has one
  * @cssprop [--dropdown-menu-border-color] - Sets the border color of this item's own submenu panel, if it has one
  * @cssprop [--dropdown-menu-border-radius] - Sets the corner radius of this item's own submenu panel, if it has one

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

@@ -40,6 +40,7 @@ export const EunomiaDropdownItemTagName = "eun-dropdown-item";
  * @cssprop [--dropdown-menu-disabled-color] - Sets the text color of this item when disabled
  * @cssprop [--dropdown-menu-hover-background] - Sets the background color of this item when highlighted or when its submenu is open
  * @cssprop [--dropdown-menu-accent-color] - Sets the color of the hover accent bar and the keyboard focus outline
+ * @cssprop [--dropdown-menu-focus-outline-color] - Sets the keyboard focus outline color, falling back to --dropdown-menu-accent-color
  * @cssprop [--dropdown-menu-background] - Sets the background color of this item's own submenu panel, if it has one
  * @cssprop [--dropdown-menu-border-color] - Sets the border color of this item's own submenu panel, if it has one
  * @cssprop [--dropdown-menu-border-radius] - Sets the corner radius of this item's own submenu panel, if it has one

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

@@ -52,8 +52,8 @@ const base = css `
   }
   :host(:focus-visible) .content {
     outline-color: var(
-      --dropdown-menu-accent-color,
-      var(--eun-color-primary-500, #3d6fff)
+      --dropdown-menu-focus-outline-color,
+      var(--dropdown-menu-accent-color, var(--eun-color-primary-500, #3d6fff))
     );
   }
   :host([aria-disabled="true"]) .content {
@@ -77,7 +77,7 @@ const base = css `
   .submenu-chevron {
     --icon-color: var(
       --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     margin-right: calc(-1 * var(--eun-space-s));
   }
@@ -95,7 +95,7 @@ const base = css `
     font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -33,7 +33,8 @@ declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Con
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--link-color] - Sets the color of the link
  * @cssprop [--link-color-hover] - Sets the color of the link on hover
- * @cssprop [--link-color-focus] - Sets the color of the link on focus
+ * @cssprop [--link-color-focus] - Sets the color of the link on focus, the hover color by default
+ * @cssprop [--link-focus-outline-color] - Sets the color of the focus ring
  * @cssprop [--link-color-visited] - Sets the color of a visited link
  * @cssprop [--link-color-visited-hover] - Sets the color of a visited link on hover
  * @cssprop [--link-color-current] - Sets the color of the current page link, kept on hover, focus and visited states

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

@@ -56,7 +56,8 @@ export const EunomiaLinkTagName = "eun-link";
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--link-color] - Sets the color of the link
  * @cssprop [--link-color-hover] - Sets the color of the link on hover
- * @cssprop [--link-color-focus] - Sets the color of the link on focus
+ * @cssprop [--link-color-focus] - Sets the color of the link on focus, the hover color by default
+ * @cssprop [--link-focus-outline-color] - Sets the color of the focus ring
  * @cssprop [--link-color-visited] - Sets the color of a visited link
  * @cssprop [--link-color-visited-hover] - Sets the color of a visited link on hover
  * @cssprop [--link-color-current] - Sets the color of the current page link, kept on hover, focus and visited states

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

@@ -1 +1,40 @@
-export declare const linkStyles: import("lit").CSSResult;
+import { CSSResult } from "lit";
+/**
+ * Base style for the link component.
+ *
+ * Custom css variables:
+ * [--link-color] - Set a custom link color, also used as the hover blend base. A visited link still uses the visited color, override it with --link-color-visited or set visited-style="off"
+ * [--link-font-size] - Set a custom font-size to the link
+ * [--link-line-height] - Set a custom line-height to the link. Inherits the surrounding text's line-height when unset
+ * [--link-color-hover] - Set a custom link color on hover state
+ * [--link-color-focus] - Set a custom link color on focus-visible state, the hover color by default
+ * [--link-focus-outline-color] - Set a custom focus ring color
+ * [--link-color-visited] - Set a custom link color on visited state
+ * [--link-color-visited-hover] - Set a custom link color on visited+hover state
+ * [--link-color-current] - Set a custom link color for the current page link (the `current` attribute). It stays this color on hover, focus and visited states
+ * [--link-text-decoration] - Set a custom text-decoration for the link
+ * [--link-icon-color] - Set a custom color for the leading icon, independent from the link text color
+ * [--link-icon-size] - Set a custom size for the leading icon, 18px by default. Also the font size of the icon slot, for an icon sized in em
+ * [--link-transition-duration] - Set a custom duration for the link transitions, --eun-duration-xl by default
+ * [--link-padding] - Set custom padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
+ * [--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
+ */
+/**
+ * The rule that gives an eun-link matched by `selector` the block layout :
+ * the host fills its container on one line, the inner link fills the host,
+ * the label cuts with an ellipsis, and the focus ring of a link with an
+ * icon surrounds the whole row instead of the text. Everything past the
+ * host's own layout goes through private custom properties, whose inline
+ * defaults are declared on :host below. Used for :host([block]), and by
+ * eun-nav-menu on its own eun-link children, which can't carry the
+ * attribute without a framework resetting it.
+ *
+ * @param selector the selector matching the eun-link hosts to lay out.
+ */
+export declare function linkBlockRule(selector: CSSResult): CSSResult;
+export declare const linkStyles: CSSResult;

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

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 /**
  * Base style for the link component.
  *
@@ -7,7 +7,8 @@ import { css } from "lit";
  * [--link-font-size] - Set a custom font-size to the link
  * [--link-line-height] - Set a custom line-height to the link. Inherits the surrounding text's line-height when unset
  * [--link-color-hover] - Set a custom link color on hover state
- * [--link-color-focus] - Set a custom link color on focus-visible state
+ * [--link-color-focus] - Set a custom link color on focus-visible state, the hover color by default
+ * [--link-focus-outline-color] - Set a custom focus ring color
  * [--link-color-visited] - Set a custom link color on visited state
  * [--link-color-visited-hover] - Set a custom link color on visited+hover state
  * [--link-color-current] - Set a custom link color for the current page link (the `current` attribute). It stays this color on hover, focus and visited states
@@ -23,15 +24,64 @@ import { css } from "lit";
  * [--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
  */
+/**
+ * The rule that gives an eun-link matched by `selector` the block layout :
+ * the host fills its container on one line, the inner link fills the host,
+ * the label cuts with an ellipsis, and the focus ring of a link with an
+ * icon surrounds the whole row instead of the text. Everything past the
+ * host's own layout goes through private custom properties, whose inline
+ * defaults are declared on :host below. Used for :host([block]), and by
+ * eun-nav-menu on its own eun-link children, which can't carry the
+ * attribute without a framework resetting it.
+ *
+ * @param selector the selector matching the eun-link hosts to lay out.
+ */
+export function linkBlockRule(selector) {
+    return css `
+    ${selector} {
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      white-space: nowrap;
+      --_blockLinkFlex: 1;
+      --_blockBoxSizing: border-box;
+      --_blockMinWidth: 0;
+      --_blockLabelOverflow: hidden;
+      --_blockLabelTextOverflow: ellipsis;
+      --_blockRowFocusBackground: var(
+        --link-background-focus,
+        var(--link-background, transparent)
+      );
+      --_blockRowFocusOutline: var(--_focusOutline);
+      --_blockRowFocusOffset: 2px;
+      --_blockLabelFocusBackground: none;
+      --_blockLabelFocusOutline: transparent;
+    }
+  `;
+}
 const base = css `
   :host {
+    --_blockLinkFlex: 0 1 auto;
+    --_blockBoxSizing: content-box;
+    --_blockMinWidth: auto;
+    --_blockLabelOverflow: visible;
+    --_blockLabelTextOverflow: clip;
+    --_blockRowFocusBackground: var(--link-background, transparent);
+    --_blockRowFocusOutline: transparent;
+    --_blockRowFocusOffset: 0px;
+    --_blockLabelFocusBackground: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    --_blockLabelFocusOutline: var(--_focusOutline);
     --_color: var(--link-color, var(--eun-text-color, #071621));
     --_colorHover: var(
       --link-color-hover,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_colorFocus: var(
-      --link-color-focus,
+    --_colorFocus: var(--link-color-focus, var(--_colorHover));
+    --_focusOutline: var(
+      --link-focus-outline-color,
       var(--eun-color-primary-700, #3662e0)
     );
     --_colorVisited: var(
@@ -61,7 +111,10 @@ const base = css `
       var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
     );
     --_colorHover: var(--link-color-hover, var(--eun-text-on-inverse, #fff));
-    --_colorFocus: var(--link-color-focus, var(--eun-text-on-inverse, #fff));
+    --_focusOutline: var(
+      --link-focus-outline-color,
+      var(--eun-text-on-inverse, #fff)
+    );
     --_colorVisited: var(
       --link-color-visited,
       var(--eun-color-purple-300, #bea0ed)
@@ -90,6 +143,9 @@ const base = css `
     transform: rotate(-45deg);
   }
   #link {
+    box-sizing: var(--_blockBoxSizing);
+    flex: var(--_blockLinkFlex);
+    min-width: var(--_blockMinWidth);
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-s, 8px);
@@ -146,26 +202,23 @@ const base = css `
     --icon-color: var(--link-icon-color, var(--_colorHover));
   }
   #link:focus-visible {
-    color: var(--_colorHover) !important;
+    color: var(--_colorFocus) !important;
     text-decoration: none;
     background: var(
       --link-background-focus,
       var(--link-background, transparent)
     );
-    outline-color: var(--_colorFocus);
+    outline-color: var(--_focusOutline);
     outline-offset: 2px;
-    --icon-color: var(--link-icon-color, var(--_colorHover));
+    --icon-color: var(--link-icon-color, var(--_colorFocus));
   }
   #link.has-icon:focus-visible {
-    background: var(--link-background, transparent);
-    outline-color: transparent;
+    background: var(--_blockRowFocusBackground);
+    outline-color: var(--_blockRowFocusOutline);
   }
   #link.has-icon:focus-visible #label {
-    background: var(
-      --link-background-focus,
-      var(--link-background, transparent)
-    );
-    outline-color: var(--_colorFocus);
+    background: var(--_blockLabelFocusBackground);
+    outline-color: var(--_blockLabelFocusOutline);
     outline-offset: 2px;
   }
 
@@ -196,8 +249,6 @@ 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),
@@ -235,7 +286,7 @@ const base = css `
     --icon-color: var(--link-icon-color, var(--_colorHover));
   }
   ::slotted(a:focus-visible) {
-    color: var(--_colorHover) !important;
+    color: var(--_colorFocus) !important;
     text-decoration: none;
     outline: none;
   }
@@ -248,24 +299,24 @@ const base = css `
       text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   #link.has-icon ::slotted(a:focus-visible) {
-    background: var(
-      --link-background-focus,
-      var(--link-background, transparent)
-    );
-    outline-color: var(--_colorFocus);
+    background: var(--_blockLabelFocusBackground);
+    outline-color: var(--_blockLabelFocusOutline);
     outline-offset: 2px;
   }
   :host(:state(focus-visible)) #link.slotted-link.has-icon {
-    --icon-color: var(--link-icon-color, var(--_colorHover));
+    background: var(--_blockRowFocusBackground);
+    outline-color: var(--_blockRowFocusOutline);
+    outline-offset: var(--_blockRowFocusOffset);
+    --icon-color: var(--link-icon-color, var(--_colorFocus));
   }
   :host(:state(focus-visible)) #link.slotted-link:not(.has-icon) {
     background: var(
       --link-background-focus,
       var(--link-background, transparent)
     );
-    outline-color: var(--_colorFocus);
+    outline-color: var(--_focusOutline);
     outline-offset: 2px;
-    --icon-color: var(--link-icon-color, var(--_colorHover));
+    --icon-color: var(--link-icon-color, var(--_colorFocus));
   }
   :host([current]) ::slotted(a),
   :host([current]) ::slotted(a:visited),
@@ -279,41 +330,13 @@ 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;
-  }
+  ${linkBlockRule(unsafeCSS(":host([block])"))}
 
-  :host([block]) #label,
-  :host([block]) ::slotted(a) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  #label,
+  ::slotted(a) {
+    min-width: var(--_blockMinWidth);
+    overflow: var(--_blockLabelOverflow);
+    text-overflow: var(--_blockLabelTextOverflow);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -40,7 +40,7 @@ export const buttonPaletteStyles = css `
     --_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);
+    --_flatFg: var(--eun-text-secondary, #666e8a);
     --_ring: var(--eun-color-primary-700, #3662e0);
   }
   :host([color="secondary"]) {

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

@@ -93,6 +93,7 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @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-focus-outline-color] - Sets the keyboard focus outline color of an option, for every 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

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

@@ -85,6 +85,7 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @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-focus-outline-color] - Sets the keyboard focus outline color of an option, for every 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

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

@@ -13,6 +13,7 @@
  * [--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-focus-outline-color] - Set a custom keyboard focus outline color for an 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

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

@@ -14,6 +14,7 @@ import { css } from "lit";
  * [--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-focus-outline-color] - Set a custom keyboard focus outline color for an 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
@@ -301,7 +302,10 @@ export const toggleGroupStyles = css `
     background: var(--_hoverBackground);
   }
   button:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --toggle-group-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 2px;
     transition:
       outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
@@ -379,7 +383,10 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) button:focus-visible,
   :host([appearance="flat"]) button:focus-visible {
-    outline-color: var(--_variantColor);
+    outline-color: var(
+      --toggle-group-focus-outline-color,
+      var(--_variantColor)
+    );
     color: var(--toggle-group-hover-color, var(--_variantColor));
   }
 `;