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

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

@@ -48,6 +48,8 @@ export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
  * @prop {boolean} [disabled=false] - Whether the trigger button is disabled
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the trigger button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} variant - The color theme applied to the trigger 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 variants
+ * @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 variants
  * @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 {EunomiaDropdownPlacement} [placement='bottom-start'] - Where the menu opens relative to the trigger
@@ -96,6 +98,11 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
          * @default m
          */
         this.size = "m";
+        /**
+         * Forwarded to the trigger `eun-button`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * Forwarded to the trigger `eun-button`.
          * @default false
@@ -1065,6 +1072,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         type="button"
         size=${this.size}
         variant=${ifDefined(this.variant)}
+        ?fixed-color=${this.fixedColor}
         appearance=${this.appearance}
         ?rounded=${this.rounded}
         ?disabled=${this.disabled}
@@ -1121,6 +1129,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], EunomiaDropdownButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaDropdownButton.prototype, "fixedColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDropdownButton.prototype, "rounded", void 0);

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

@@ -34,17 +34,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,
@@ -118,7 +118,7 @@ const base = css `
   }
   #menu li.active,
   .submenu li.active {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(
       --dropdown-menu-accent-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -152,7 +152,7 @@ const base = css `
   }
   #menu li .description,
   .submenu li .description {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
       var(--eun-text-secondary, #484e61)
@@ -171,17 +171,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,

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

@@ -20,7 +20,7 @@ const base = css `
     display: block;
     white-space: nowrap;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     outline: none;
   }
   .content {
@@ -62,7 +62,7 @@ const base = css `
     );
   }
   :host([active]) .content {
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(
       --dropdown-menu-accent-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -90,7 +90,7 @@ const base = css `
     text-overflow: ellipsis;
   }
   .description {
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     color: var(
       --dropdown-menu-description-color,
       var(--eun-text-secondary, #484e61)
@@ -109,17 +109,17 @@ const base = css `
     max-height: 260px;
     overflow-y: auto;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--dropdown-menu-color, var(--eun-text-color, #071621));
     background: var(
       --dropdown-menu-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--dropdown-menu-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --dropdown-menu-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     box-shadow: var(
       --dropdown-menu-shadow,

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

@@ -26,6 +26,8 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark 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 variants
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark 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 variants
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
@@ -38,7 +40,7 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color
+ * @cssprop [--fab-background] - Sets the background color, for every variant
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline

package/dist/components/action/fab/fab.js

@@ -33,6 +33,8 @@ export const EunomiaFabTagName = "eun-fab";
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark 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 variants
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark 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 variants
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
@@ -45,7 +47,7 @@ export const EunomiaFabTagName = "eun-fab";
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color
+ * @cssprop [--fab-background] - Sets the background color, for every variant
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline

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

@@ -1,18 +1,17 @@
 import { css } from "lit";
+import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
 /**
  * Base style for the floating action button.
  *
- * The color/hover/text/focus custom-property convention (`--_mainColor`,
- * `--_mainColor-hover`, ...) mirrors `eun-button`'s own stylesheet, adapted
- * to a single circular `#fab` element instead of `#button` plus a default
- * slot — `button.styles.ts` only exports its final composed array, not the
- * individual pieces, so this re-derives the same pattern rather than
- * importing it.
+ * The variant palette is shared with `eun-button` (see
+ * {@link buttonPaletteStyles}) and read *behind* the `--fab-*` custom
+ * properties, so those win over every variant. A fab only has a solid look,
+ * so it only reads the solid slots.
  *
  * Custom css variables:
- * [--fab-background] - Set a custom background color
- * [--fab-background-hover] - Set a custom background color for hover state
- * [--fab-text] - Set a custom text/icon color
+ * [--fab-background] - Set a custom background color, for every variant
+ * [--fab-background-hover] - Set a custom background color for hover state. Derived from --fab-background when only that one is set
+ * [--fab-text] - Set a custom text/icon color, for every variant
  * [--fab-focus-outline] - Set a custom color to the focus outline
  * [--fab-transition] - Set a custom transition time, shared by the slide-open animation and the hover/focus color changes (mirrors `eun-button`'s own `--button-transition`)
  * [--fab-z-index] - Set a custom z-index for a positioned FAB
@@ -20,16 +19,8 @@ import { css } from "lit";
  */
 const base = css `
   :host {
-    --_mainColor: var(--fab-background, var(--eun-color-primary-500, #3d6fff));
-    --_mainColor-hover: var(
-      --fab-background-hover,
-      var(--eun-color-primary-700, #3662e0)
-    );
-    --_mainColor-text: var(
-      --fab-text,
-      var(--eun-color-on-primary-500, #ffffff)
-    );
-    --_focusIndicator: var(--fab-focus-outline, var(--_mainColor));
+    --_focusIndicator: var(--fab-focus-outline, var(--_solid));
+    --_hoverFromCustom: color-mix(in srgb, var(--fab-background) 88%, black);
     --_transition: var(--fab-transition, 0.3s);
     --_gap: var(--eun-space-xs, 4px);
     --_circleSize: 56px;
@@ -39,7 +30,7 @@ const base = css `
     user-select: none;
     outline: 2px solid transparent;
     z-index: 0;
-    border-radius: var(--eun-borderRadius-xl);
+    border-radius: var(--eun-border-radius-xl);
     transition:
       background 0.3s ease-out,
       box-shadow 0.3s ease-out,
@@ -69,32 +60,15 @@ const base = css `
     --_circleSize: 88px;
     --icon-size: 34px;
   }
-  :host([variant="secondary"]) {
-    --_mainColor: var(--eun-color-secondary-500, #e5a030);
-    --_mainColor-hover: var(--eun-color-secondary-700, #ca8d2a);
-    --_mainColor-text: var(--eun-color-on-secondary-500, #000000de);
-  }
-  :host([variant="critical"]) {
-    --_mainColor: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-hover: var(--eun-color-critical-100, #aa0014);
-    --_mainColor-text: #fff;
-  }
-  :host([variant="success"]) {
-    --_mainColor: var(--eun-color-success-100, #1a9948);
-    --_mainColor-hover: var(--eun-color-success-100, #1a9948);
-    --_mainColor-text: #fff;
-  }
-  :host([variant="warning"]) {
-    --_mainColor: var(--eun-color-warning-100, #c85207);
-    --_mainColor-hover: var(--eun-color-warning-100, #c85207);
-    --_mainColor-text: #fff;
-  }
   :host([disabled]) {
-    --_mainColor: var(--eun-disabled-color, #ecedf0);
-    --_mainColor-hover: var(--eun-disabled-color, #ecedf0);
-    --_mainColor-text: var(--eun-text-disabled-color, #8d93aa);
+    --_solid: var(--eun-disabled-color, #ecedf0);
+    --_solid-hover: var(--eun-disabled-color, #ecedf0);
+    --_onSolid: var(--eun-text-disabled-color, #8d93aa);
   }
+  /* A disabled fab never loses its look to a custom property. */
   :host([disabled]) #fab {
+    background: var(--_solid);
+    color: var(--_onSolid);
     cursor: not-allowed;
     pointer-events: none;
     box-shadow: none;
@@ -112,11 +86,11 @@ const base = css `
     box-sizing: border-box;
     overflow: hidden;
     border: none;
-    border-radius: var(--eun-borderRadius-xl, 999px);
-    background: var(--_mainColor);
-    color: var(--_mainColor-text);
+    border-radius: var(--eun-border-radius-xl, 999px);
+    background: var(--fab-background, var(--_solid));
+    color: var(--fab-text, var(--_onSolid));
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     text-decoration: none;
     cursor: pointer;
     outline: 2px solid transparent;
@@ -139,7 +113,10 @@ const base = css `
     transform: rotate(-45deg);
   }
   :host(:not([disabled]):not([loading])) #fab:hover {
-    background: var(--_mainColor-hover);
+    background: var(
+      --fab-background-hover,
+      var(--_hoverFromCustom, var(--_solid-hover))
+    );
     box-shadow: var(
       --eun-shadow-l,
       0 10px 15px -3px rgba(0, 0, 0, 0.15),
@@ -242,4 +219,4 @@ const position = css `
     left: var(--fab-offset, var(--eun-space-l, 32px));
   }
 `;
-export const fabStyles = [base, slide, position];
+export const fabStyles = [buttonPaletteStyles, base, slide, position];

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

@@ -18,6 +18,7 @@ export declare const EunomiaLinkTagName = "eun-link";
  * @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
  * @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
  * @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
  * @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
@@ -25,12 +26,15 @@ export declare const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-color-focus] - Sets the color of the link on focus
  * @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
+ * @cssprop [--link-line-height] - Sets the line-height of the link. Inherits the surrounding text's line-height when unset
  * @cssprop [--link-text-decoration] - Sets the text decoration of the link, for example none, when embedding a link inside an already distinct interactive surface such as a card
  * @cssprop [--link-icon-color] - Sets the color of the leading icon, independently of the link text color
  * @cssprop [--link-padding] - Sets padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
  * @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
  * @element eun-link
  */
 export declare class EunomiaLink extends LitElement {
@@ -67,6 +71,36 @@ export declare class EunomiaLink extends LitElement {
      * @default auto
      */
     visitedStyle: "auto" | "off" | "on";
+    /**
+     * Exposes the `focus-visible` custom state (see {@link handleFocus}).
+     * Absent where `ElementInternals` isn't available, such as server-side.
+     * @private
+     */
+    private readonly internals?;
+    /**
+     * The element's custom state set, typed locally since the bundled DOM
+     * typings don't declare `ElementInternals.states` yet.
+     * @private
+     */
+    private get states();
+    constructor();
+    /**
+     * Marks the link as the current page (for example the active item of a
+     * navigation) : renders `aria-current="page"` on the inner anchor and
+     * keeps `--link-color-current` in every state.
+     * @default false
+     */
+    current: boolean;
+    /**
+     * React's server renderer writes a custom element's camelCase prop as an
+     * attribute of that exact name, lowercased (`visitedStyle="off"` becomes
+     * `visitedstyle="off"`), which never matches `visited-style`. Without this
+     * alias the link would start in `auto` (so, visited) and only switch once
+     * hydration sets the property, flashing the visited color on first load.
+     * @internal
+     */
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
     /**
      * Elements assigned to the `icon` slot, if any ; queried live so
      * {@link render} can decide whether to fall back to the `icon` prop.
@@ -81,6 +115,22 @@ export declare class EunomiaLink extends LitElement {
      * @private
      */
     private handleIconSlotChange;
+    /**
+     * Mirrors the inner anchor's real `:focus-visible` state onto the host as
+     * the `focus-visible` custom state, styled from outside with
+     * `eun-link:state(focus-visible)`. The anchor is shadow-internal, so the
+     * host's own `:focus-visible` never matches, and a plain `focus` listener
+     * can't stand in for it (a mouse click focuses the anchor too). Checking
+     * `:focus-visible` on the anchor itself keeps mouse focus out.
+     * @param event the anchor's focus event.
+     * @private
+     */
+    private handleFocus;
+    /**
+     * Clears the `focus-visible` custom state once the anchor loses focus.
+     * @private
+     */
+    private handleBlur;
     /**
      * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...) a
      * chance to intercept the click and perform client-side navigation instead

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

@@ -28,6 +28,7 @@ export const EunomiaLinkTagName = "eun-link";
  * @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
  * @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
  * @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
  * @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
@@ -35,17 +36,28 @@ export const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-color-focus] - Sets the color of the link on focus
  * @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
+ * @cssprop [--link-line-height] - Sets the line-height of the link. Inherits the surrounding text's line-height when unset
  * @cssprop [--link-text-decoration] - Sets the text decoration of the link, for example none, when embedding a link inside an already distinct interactive surface such as a card
  * @cssprop [--link-icon-color] - Sets the color of the leading icon, independently of the link text color
  * @cssprop [--link-padding] - Sets padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
  * @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
  * @element eun-link
  */
 let EunomiaLink = class EunomiaLink extends LitElement {
+    /**
+     * The element's custom state set, typed locally since the bundled DOM
+     * typings don't declare `ElementInternals.states` yet.
+     * @private
+     */
+    get states() {
+        return this.internals?.states;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The native `target` attribute forwarded to the link.
          * @default _self
@@ -63,6 +75,13 @@ let EunomiaLink = class EunomiaLink extends LitElement {
          * @default auto
          */
         this.visitedStyle = "auto";
+        /**
+         * Marks the link as the current page (for example the active item of a
+         * navigation) : renders `aria-current="page"` on the inner anchor and
+         * keeps `--link-color-current` in every state.
+         * @default false
+         */
+        this.current = false;
         /**
          * Re-renders when the `icon` slot's assigned content changes, so the
          * `icon` prop fallback correctly appears/disappears as content is
@@ -72,6 +91,49 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         this.handleIconSlotChange = () => {
             this.requestUpdate();
         };
+        if (typeof this.attachInternals === "function") {
+            this.internals = this.attachInternals();
+        }
+    }
+    /**
+     * React's server renderer writes a custom element's camelCase prop as an
+     * attribute of that exact name, lowercased (`visitedStyle="off"` becomes
+     * `visitedstyle="off"`), which never matches `visited-style`. Without this
+     * alias the link would start in `auto` (so, visited) and only switch once
+     * hydration sets the property, flashing the visited color on first load.
+     * @internal
+     */
+    static get observedAttributes() {
+        return [...super.observedAttributes, "visitedstyle"];
+    }
+    attributeChangedCallback(name, oldValue, value) {
+        if (name === "visitedstyle") {
+            this.visitedStyle = (value ?? "auto");
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, value);
+    }
+    /**
+     * Mirrors the inner anchor's real `:focus-visible` state onto the host as
+     * the `focus-visible` custom state, styled from outside with
+     * `eun-link:state(focus-visible)`. The anchor is shadow-internal, so the
+     * host's own `:focus-visible` never matches, and a plain `focus` listener
+     * can't stand in for it (a mouse click focuses the anchor too). Checking
+     * `:focus-visible` on the anchor itself keeps mouse focus out.
+     * @param event the anchor's focus event.
+     * @private
+     */
+    handleFocus(event) {
+        if (event.currentTarget.matches(":focus-visible")) {
+            this.states?.add("focus-visible");
+        }
+    }
+    /**
+     * Clears the `focus-visible` custom state once the anchor loses focus.
+     * @private
+     */
+    handleBlur() {
+        this.states?.delete("focus-visible");
     }
     /**
      * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...) a
@@ -99,11 +161,14 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         class=${classMap({ "has-icon": hasIcon })}
         href=${ifDefined(this.href)}
         target=${this.target}
+        aria-current=${ifDefined(this.current ? "page" : undefined)}
         rel=${ifDefined(isBlank ? "noopener noreferrer" : undefined)}
         aria-label=${ifDefined(isBlank && this.ariaLabel
             ? `${this.ariaLabel} (opens in a new tab)`
             : (this.ariaLabel ?? undefined))}
         @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
       >
         <slot
           name="icon"
@@ -145,6 +210,9 @@ __decorate([
 __decorate([
     property({ reflect: true, attribute: "visited-style" })
 ], EunomiaLink.prototype, "visitedStyle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaLink.prototype, "current", void 0);
 __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaLink.prototype, "iconSlotEls", void 0);

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

@@ -3,12 +3,14 @@ import { css } 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
+ * [--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
  * [--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-padding] - Set custom padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
@@ -35,10 +37,15 @@ const base = css `
       --link-color-visited-hover,
       color-mix(in srgb, var(--_colorVisited) 80%, black)
     );
+    --_colorCurrent: var(
+      --link-color-current,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     --_textDecoration: var(--link-text-decoration, underline);
     --_iconColor: var(--link-icon-color, var(--_color));
     --icon-color: var(--_iconColor);
     font-size: var(--link-font-size, unset);
+    line-height: var(--link-line-height, inherit);
     display: inline-flex;
     align-items: center;
   }
@@ -68,7 +75,7 @@ const base = css `
     font: inherit;
     text-decoration: var(--_textDecoration);
     text-wrap: pretty;
-    border-radius: var(--link-border-radius, var(--eun-borderRadius-m, 8px));
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
@@ -117,6 +124,16 @@ const base = css `
     --icon-color: var(--link-icon-color, var(--_colorHover));
   }
 
+  :host([current]) #link,
+  :host([current]) #link:visited,
+  :host([current]) #link:hover,
+  :host([current]) #link:visited:hover,
+  :host([current]) #link:focus-visible {
+    color: var(--_colorCurrent) !important;
+    text-decoration-color: var(--_colorCurrent);
+    --icon-color: var(--link-icon-color, var(--_colorCurrent));
+  }
+
   @media (prefers-reduced-motion: reduce) {
     #link {
       transition: none;

package/dist/components/action/shared-styles/button-palette.styles.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 declare const buttonPaletteStyles: import("lit").CSSResult;