@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.5

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;
   }
@@ -58,6 +65,12 @@ const base = css `
     display: inline-flex;
     flex-shrink: 0;
   }
+  #external-link-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline-start: calc(-1 * var(--eun-space-xs, 4px));
+    transform: rotate(-45deg);
+  }
   #link {
     display: inline-flex;
     align-items: center;
@@ -68,7 +81,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,8 +130,97 @@ 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));
+  }
+
+  #link.slotted-link {
+    position: relative;
+    text-decoration: none;
+    cursor: auto;
+  }
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  ::slotted(a) {
+    color: var(--_color);
+    font: inherit;
+    text-decoration: var(--_textDecoration);
+    text-wrap: pretty;
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    transition:
+      color 0.3s ease-out,
+      background-color 0.3s ease-out,
+      text-decoration-color 0.3s ease-out;
+  }
+  ::slotted(a:visited) {
+    color: var(--_colorVisited);
+    text-decoration-color: var(--_colorVisited);
+  }
+  ::slotted(a:visited:hover) {
+    color: var(--_colorVisitedHover);
+    text-decoration-color: var(--_colorVisitedHover);
+  }
+  :host([visited-style="off"]) ::slotted(a:visited) {
+    color: var(--_color);
+    text-decoration-color: currentColor;
+  }
+  :host([visited-style="off"]) ::slotted(a:visited:hover) {
+    color: var(--_colorHover);
+    text-decoration-color: currentColor;
+  }
+  :host([visited-style="on"]) ::slotted(a) {
+    color: var(--_colorVisited);
+    text-decoration-color: var(--_colorVisited);
+  }
+  :host([visited-style="on"]) ::slotted(a:hover) {
+    color: var(--_colorVisitedHover);
+    text-decoration-color: var(--_colorVisitedHover);
+  }
+  ::slotted(a:hover) {
+    color: var(--_colorHover);
+  }
+  #link.slotted-link:hover {
+    --icon-color: var(--link-icon-color, var(--_colorHover));
+  }
+  ::slotted(a:focus-visible) {
+    color: var(--_colorHover) !important;
+    text-decoration: none;
+    outline: none !important;
+  }
+  :host(:state(focus-visible)) #link.slotted-link {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+    --icon-color: var(--link-icon-color, var(--_colorHover));
+  }
+  :host([current]) ::slotted(a),
+  :host([current]) ::slotted(a:visited),
+  :host([current]) ::slotted(a:hover),
+  :host([current]) ::slotted(a:visited:hover),
+  :host([current]) ::slotted(a:focus-visible) {
+    color: var(--_colorCurrent) !important;
+    text-decoration-color: var(--_colorCurrent);
+  }
+  :host([current]) #link.slotted-link {
+    --icon-color: var(--link-icon-color, var(--_colorCurrent));
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    #link {
+    #link,
+    ::slotted(a) {
       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 `color` fills
+ * the same slots on the host, and each component's stylesheet then reads
+ * them, per appearance and state, *behind* its public `--<component>-*`
+ * custom properties, so those always win over any color 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 color shares. By default they follow the
+ * grey scale, which flips with the active theme ; `fixed-color` pins them to
+ * the light theme's white and black instead.
+ */
+export declare const buttonPaletteStyles: import("lit").CSSResult;

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

@@ -0,0 +1,151 @@
+import { css } from "lit";
+/**
+ * Shared color palette of the button family (`eun-button`, `eun-fab`, and so
+ * `eun-dropdown-button`, which renders an `eun-button`). A `color` fills
+ * the same slots on the host, and each component's stylesheet then reads
+ * them, per appearance and state, *behind* its public `--<component>-*`
+ * custom properties, so those always win over any color 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 color shares. By default they follow the
+ * grey scale, which flips with the active theme ; `fixed-color` pins them to
+ * the light theme's white and black instead.
+ */
+export const buttonPaletteStyles = css `
+  :host {
+    --_solid: var(--eun-color-primary-500, #3d6fff);
+    --_solid-hover: var(--eun-color-primary-700, #3662e0);
+    --_solid-active: var(--eun-color-primary-800, #2d52bd);
+    --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+    --_accent: var(--eun-color-primary-500, #3d6fff);
+    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
+    --_tint-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
+    --_tint-active: var(--eun-color-primary-transparent-active, #3d6fff66);
+    --_fgTint: var(--_accent);
+    --_wash-hover: var(--_tint-hover);
+    --_wash-active: var(--_tint-active);
+    --_flat: var(--eun-surface-sunken, #f7f8fa);
+    --_flat-hover: var(--eun-surface-sunken-hover, #edeff0);
+    --_flatFg: var(--eun-text-secondary, #484e61);
+    --_ring: var(--eun-color-primary-700, #3662e0);
+  }
+  :host([color="secondary"]) {
+    --_solid: var(--eun-color-secondary-500, #e5a030);
+    --_solid-hover: var(--eun-color-secondary-700, #ca8d2a);
+    --_solid-active: var(--eun-color-secondary-800, #a97624);
+    --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+    --_accent: var(--eun-color-secondary-500, #e5a030);
+    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
+    --_tint-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
+    --_tint-active: var(--eun-color-secondary-transparent-active, #e5a03066);
+    --_ring: var(--eun-color-secondary-700, #ca8d2a);
+  }
+  :host([color="critical"]) {
+    --_solid: var(--eun-color-critical-100, #aa0014);
+    --_solid-hover: var(--eun-color-critical-100, #aa0014);
+    --_solid-active: var(--eun-color-critical-100, #aa0014);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-critical-100, #aa0014);
+    --_tint: var(--eun-color-critical-30, #faf0f1);
+    --_tint-hover: var(--eun-color-critical-50, #f1d6d9);
+    --_tint-active: var(--eun-color-critical-90, #e4adb4);
+    --_ring: var(--eun-color-critical-100, #aa0014);
+  }
+  :host([color="success"]) {
+    --_solid: var(--eun-color-success-100, #1a9948);
+    --_solid-hover: var(--eun-color-success-100, #1a9948);
+    --_solid-active: var(--eun-color-success-100, #1a9948);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-success-100, #1a9948);
+    --_tint: var(--eun-color-success-30, #f1f9f4);
+    --_tint-hover: var(--eun-color-success-50, #daefe2);
+    --_tint-active: var(--eun-color-success-90, #b6dec4);
+    --_ring: var(--eun-color-success-100, #1a9948);
+  }
+  :host([color="warning"]) {
+    --_solid: var(--eun-color-warning-100, #c85207);
+    --_solid-hover: var(--eun-color-warning-100, #c85207);
+    --_solid-active: var(--eun-color-warning-100, #c85207);
+    --_onSolid: #fff;
+    --_accent: var(--eun-color-warning-100, #c85207);
+    --_tint: var(--eun-color-warning-30, #fcf5f0);
+    --_tint-hover: var(--eun-color-warning-50, #f6e3d7);
+    --_tint-active: var(--eun-color-warning-90, #edc8b0);
+    --_ring: var(--eun-color-warning-100, #c85207);
+  }
+  :host([color="medium"]) {
+    --_solid: var(--eun-color-grey-700, #484e61);
+    --_solid-hover: var(--eun-color-grey-800, #071621);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+    --_accent: var(--eun-color-grey-900, #000000);
+    --_tint: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 20%,
+      transparent
+    );
+    --_tint-hover: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 30%,
+      transparent
+    );
+    --_tint-active: color-mix(
+      in srgb,
+      var(--eun-color-grey-700, #484e61) 40%,
+      transparent
+    );
+    --_ring: var(--eun-color-grey-700, #484e61);
+  }
+  :host([color="light"]) {
+    --_solid: var(--eun-color-grey-0, #ffffff);
+    --_solid-hover: var(--eun-color-grey-200, #ecedf0);
+    --_solid-active: var(--eun-color-grey-300, #dee0e7);
+    --_onSolid: var(--eun-color-grey-900, #000000);
+  }
+  :host([color="light"][fixed-color]) {
+    --_solid: #ffffff;
+    --_solid-hover: #ecedf0;
+    --_solid-active: #dee0e7;
+    --_onSolid: #000000;
+  }
+  :host([color="dark"]) {
+    --_solid: var(--eun-color-grey-800, #071621);
+    --_solid-hover: var(--eun-color-grey-900, #000000);
+    --_solid-active: var(--eun-color-grey-900, #000000);
+    --_onSolid: var(--eun-color-grey-0, #ffffff);
+  }
+  :host([color="dark"][fixed-color]) {
+    --_solid: #071621;
+    --_solid-hover: #000000;
+    --_solid-active: #000000;
+    --_onSolid: #ffffff;
+  }
+  :host([color="light"]),
+  :host([color="dark"]) {
+    --_accent: var(--_solid);
+    --_tint: var(--_solid);
+    --_tint-hover: var(--_solid-hover);
+    --_tint-active: var(--_solid-active);
+    --_fgTint: var(--_onSolid);
+    --_wash-hover: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_wash-active: color-mix(in srgb, var(--_solid) 28%, transparent);
+    --_flat: color-mix(in srgb, var(--_solid) 16%, transparent);
+    --_flat-hover: color-mix(in srgb, var(--_solid) 24%, transparent);
+    --_flatFg: var(--_solid);
+    --_ring: var(--_solid);
+  }
+`;

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

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
-import { ButtonVariant } from "../../../mixins/button.mixin.js";
+import { ButtonColor } from "../../../mixins/button.mixin.js";
 import { EunomiaToggleAppearance } from "../../../types/variant.type.js";
 import type { EunomiaToggleItem } from "./toggle-item.js";
 /**
@@ -36,13 +36,13 @@ export type EunomiaToggleGroupOption = {
     showLabel?: boolean;
     /**
      * This choice's own semantic color, once the group's `appearance` isn't
-     * `default` — see {@link ButtonVariant}. Falls back to a neutral style at
+     * `default` — see {@link ButtonColor}. Falls back to a neutral style at
      * rest, taking on this color only once selected ; unset choices default
      * to `primary`. Ignored entirely in `default` appearance.
      */
-    variant?: ButtonVariant;
+    color?: ButtonColor;
 };
-declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
+declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/overflow-navigation.mixin.js").NavigationOverflowMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
 /**
  * Groups toggle choices, declared through options, slotted toggle item
  * elements, or both at once, into a single segmented control. The
@@ -70,6 +70,8 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * the Examples tab for what each shape looks like.
  *
  * @slot [default] - Toggle item elements, used instead of or alongside options
+ * @prop {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
+ * @attr {boolean} [full=false] - Stretches the group to 100% of its parent's width, dividing that width equally between every choice, instead of sizing to content
  * @prop {Array<EunomiaToggleGroupOption>} options - The choices to render, in order
  * @prop {Array<string>} value - The currently selected choices' values. Always exactly one entry in exclusive mode
  * @prop {boolean} [single=false] - Forces the exclusive, sliding indicator mode regardless of choice count. Already the case for exactly two choices without setting this
@@ -77,18 +79,20 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @prop {boolean} [disabled=false] - Whether the whole group is disabled
  * @attr {string} [aria-label] - The accessible label for the group, required since the group has no visible legend of its own
  * @fires {ChangeEvent} eunchange - Fired whenever the selection changes
- * @cssprop [--toggle-group-background] - Sets the background color of the track. Ignored once appearance isn't default, which has no shared background
- * @cssprop [--toggle-group-border-color] - Sets the border color of the track, and the border color of each option at rest in the outline appearance
+ * @cssprop [--toggle-group-background] - Sets the background color of the track, for every appearance (transparent by default in outline and flat)
+ * @cssprop [--toggle-group-border-color] - Sets the border color of the track in the default appearance, and the border color of each option at rest in the outline and flat appearances
  * @cssprop [--toggle-group-color] - Sets the text color of unselected options
- * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. Also sets the primary variant's selected color in the outline and flat appearances, for an option that sets no variant of its own
- * @cssprop [--toggle-group-active-color] - Sets the text color of selected options in the default appearance. Ignored in the outline and flat appearances, where the selected text color always follows the option's own color instead
+ * @cssprop [--toggle-group-active-background] - Sets the background color of selected options, and the sliding indicator in exclusive mode, in the default appearance. In the outline and flat appearances, sets the selected color of every option, over its own color
+ * @cssprop [--toggle-group-active-color] - Sets the text color of selected options, for every appearance
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
- * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover, in the default appearance. Ignored in the outline and flat appearances, where hover and focus text color always follow the option's own color instead, exactly like the selected state
+ * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
+ * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default
  * @cssprop [--toggle-group-shadow] - Sets a box shadow on every option, and the sliding indicator in exclusive mode. None by default
  * @cssprop [--toggle-group-shadow-hover] - Sets the box shadow of an unselected option on hover, falling back to toggle-group-shadow when unset
+ * @cssprop [--toggle-group-arrows-color] - Sets the background color the overflow arrows fade out to, once the group overflows its container
  * @element eun-toggle-group
  */
 export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
@@ -103,7 +107,8 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
     static readonly styles: import("lit").CSSResult[];
     /**
      * The choices to render, in order. Also reflected as a JSON-serialized
-     * `options` attribute (Lit's default `Array` converter).
+     * `options` attribute (Lit's default `Array` converter), left out while
+     * empty so an SSR framework doesn't see an attribute it never rendered.
      * @default []
      */
     options: EunomiaToggleGroupOption[];
@@ -128,6 +133,13 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @default default
      */
     appearance: EunomiaToggleGroupAppearance;
+    /**
+     * Stretches the group to 100% of its parent's width, dividing that width
+     * equally between every choice instead of sizing to content. A label
+     * that doesn't fit its share makes the row overflow rather than shrink.
+     * @default false
+     */
+    full: boolean;
     /**
      * The `eun-toggle-item` elements slotted in, if any.
      * @internal
@@ -149,6 +161,14 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @readonly
      */
     private readonly indicatorEl?;
+    /**
+     * Whether the initial selection has been painted once. Until then, the
+     * choices and their icons skip their color transitions (see the
+     * `#scrollable:not(.settled)` rule), so the selected one appears in its
+     * final state on load instead of fading in from the unselected color.
+     * @internal
+     */
+    private settled;
     /**
      * The total number of choices, combining `options` and slotted
      * `eun-toggle-item` elements. Drives {@link exclusive} together with
@@ -169,7 +189,7 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
     private get entries();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     protected updated(_changedProperties: PropertyValues): void;
     /**
      * Waits for every slotted item's custom element to be *defined*, not
@@ -293,6 +313,14 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @private
      */
     private refreshIndicator;
+    /**
+     * Scrolls the row just enough to bring the selected entry into view, once
+     * the group overflows its container, leaving room for the arrows.
+     *
+     * @param animate whether to scroll smoothly, or jump there instantly.
+     * @private
+     */
+    private revealActive;
     /**
      * Debounced wrapper around {@link moveIndicator}, used by the resize
      * observer so a burst of layout changes doesn't retrigger it constantly.
@@ -340,6 +368,22 @@ export declare class EunomiaToggleGroup extends EunomiaToggleGroup_base {
      * @private
      */
     private readonly handleSlotChange;
+    /**
+     * Whether a given overflow arrow should currently be visible : hidden
+     * when nothing overflows, and once scrolled all the way to that edge.
+     *
+     * @param arrowPosition the position of the arrow to check.
+     * @returns true if it should be visible, false otherwise.
+     * @private
+     */
+    private arrowVisible;
+    /**
+     * The row mixes internal `<button>`s (`options`) with slotted items, so the
+     * mixin's slot-based measurement can't see every choice : compares the
+     * scrollable's own sizes instead.
+     * @protected
+     */
+    protected isOnOverflow(): boolean;
     render(): TemplateResult;
 }
 declare global {