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

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

@@ -1,100 +1,164 @@
-@use "sass:map";
-@use "./../../variables/eunomia.breakpoints.scss" as *;
+@use "./../media-queries/eunomia-media-queries.mixin.scss" as *;
 
 @mixin eunomia-grid-layouts {
-  .eun-grid {
+  :where(.eun-grid) {
+    --_cols0: var(--eun-grid-columns, var(--_variantCols0, 1));
+    --_cols1: var(
+      --eun-grid-columns-mobile,
+      var(--eun-grid-columns, var(--_variantCols1, var(--_variantCols0, 1)))
+    );
+    --_cols2: var(
+      --eun-grid-columns-tablet,
+      var(
+        --eun-grid-columns-mobile,
+        var(
+          --eun-grid-columns,
+          var(--_variantCols2, var(--_variantCols1, var(--_variantCols0, 1)))
+        )
+      )
+    );
+    --_cols3: var(
+      --eun-grid-columns-laptop,
+      var(
+        --eun-grid-columns-tablet,
+        var(
+          --eun-grid-columns-mobile,
+          var(
+            --eun-grid-columns,
+            var(
+              --_variantCols3,
+              var(
+                --_variantCols2,
+                var(--_variantCols1, var(--_variantCols0, 1))
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols4: var(
+      --eun-grid-columns-desktop,
+      var(
+        --eun-grid-columns-laptop,
+        var(
+          --eun-grid-columns-tablet,
+          var(
+            --eun-grid-columns-mobile,
+            var(
+              --eun-grid-columns,
+              var(
+                --_variantCols4,
+                var(
+                  --_variantCols3,
+                  var(
+                    --_variantCols2,
+                    var(--_variantCols1, var(--_variantCols0, 1))
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols: var(--_cols0);
     display: grid;
+    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
     row-gap: var(--eun-grid-row-gap, var(--eun-space-s));
     column-gap: var(--eun-grid-column-gap, var(--eun-space-m));
   }
 
-  .eun-grid--halves {
-    grid-template-columns: repeat(2, 1fr);
+  @include eunomia-from(mobile) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols1);
+    }
   }
-
-  .eun-grid--thirds-1-2 {
-    grid-template-columns: 1fr 2fr;
+  @include eunomia-from(tablet) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols2);
+    }
+  }
+  @include eunomia-from(laptop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols3);
+    }
+  }
+  @include eunomia-from(desktop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols4);
+    }
   }
 
-  .eun-grid--thirds-2-1 {
-    grid-template-columns: 2fr 1fr;
+  :where(.eun-grid--halves),
+  :where(.eun-grid--2x2) {
+    --_variantCols2: 2;
   }
 
-  .eun-grid--thirds-equal {
-    grid-template-columns: repeat(3, 1fr);
+  :where(.eun-grid--thirds-equal) {
+    --_variantCols2: 3;
   }
 
-  .eun-grid--2x2 {
-    grid-template-columns: repeat(2, 1fr);
+  :where(.eun-grid--2x2) {
     grid-auto-flow: row;
   }
 
-  .eun-grid--sidebar-left,
-  .eun-grid--sidebar-right {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-  }
+  @include eunomia-from(tablet) {
+    :where(.eun-grid--thirds-1-2) {
+      grid-template-columns: 1fr 2fr;
+    }
 
-  .eun-grid--sidebar-left > :first-child {
-    grid-column: 1;
-    grid-row: 1 / span 2;
-  }
+    :where(.eun-grid--thirds-2-1) {
+      grid-template-columns: 2fr 1fr;
+    }
 
-  .eun-grid--sidebar-right > :first-child {
-    grid-column: 2;
-    grid-row: 1 / span 2;
+    :where(.eun-grid--sidebar-left),
+    :where(.eun-grid--sidebar-right) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+
+    :where(.eun-grid--sidebar-left > :first-child) {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+    }
+
+    :where(.eun-grid--sidebar-right > :first-child) {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
   }
 
-  .eun-grid--lead-left,
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-left),
+  :where(.eun-grid--lead-right) {
     grid-template-rows: repeat(2, auto);
   }
 
-  .eun-grid--lead-left {
+  :where(.eun-grid--lead-left) {
     grid-template-columns: auto 1fr;
   }
 
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-right) {
     grid-template-columns: 1fr auto;
   }
 
-  .eun-grid--lead-left > :first-child {
+  :where(.eun-grid--lead-left > :first-child) {
     grid-column: 1;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--lead-right > :first-child {
+  :where(.eun-grid--lead-right > :first-child) {
     grid-column: 2;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--gallery {
+  :where(.eun-grid--gallery) {
     grid-template-columns: repeat(
       auto-fill,
       minmax(var(--eun-grid-min-width, 220px), 1fr)
     );
   }
 
-  .eun-grid--panel {
+  :where(.eun-grid--panel) {
     grid-template-rows: auto 1fr auto;
   }
-
-  @media (max-width: map.get($map-device-width, tablet) - 1) {
-    .eun-grid--halves,
-    .eun-grid--thirds-1-2,
-    .eun-grid--thirds-2-1,
-    .eun-grid--thirds-equal,
-    .eun-grid--2x2,
-    .eun-grid--sidebar-left,
-    .eun-grid--sidebar-right {
-      grid-template-columns: 1fr;
-      grid-template-rows: none;
-    }
-
-    .eun-grid--sidebar-left > :first-child,
-    .eun-grid--sidebar-right > :first-child {
-      grid-column: 1;
-      grid-row: auto;
-    }
-  }
 }

package/dist/cdn/styles/tools/mixins/media-queries/eunomia-media-queries.mixin.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "./../../variables/eunomia.breakpoints.scss" as *;
+
+@function -eunomia-breakpoint($breakpoint) {
+  @if not map.has-key($map-device-width, $breakpoint) {
+    @error "Unknown breakpoint `#{$breakpoint}`, expected one of #{map.keys($map-device-width)}.";
+  }
+  @return map.get($map-device-width, $breakpoint);
+}
+
+@mixin eunomia-below($breakpoint) {
+  @media (width < #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-from($breakpoint) {
+  @media (width >= #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-mobile {
+  @include eunomia-below(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-tablet {
+  @include eunomia-below(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-laptop {
+  @include eunomia-below(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-desktop {
+  @include eunomia-below(desktop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-mobile {
+  @include eunomia-from(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-tablet {
+  @include eunomia-from(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-laptop {
+  @include eunomia-from(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-desktop {
+  @include eunomia-from(desktop) {
+    @content;
+  }
+}

package/dist/cdn/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -1,6 +1,3 @@
-// Translucent surface/text primitives, derived from the active theme's
-// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
-// color mixin, so they follow light/dark and brand switches automatically.
 @mixin eunomia-alpha {
   --eun-surface-transparent-25: color-mix(
     in srgb,
@@ -34,6 +31,33 @@
     transparent
   );
 
-  // Fixed (theme-independent) muted text, legible on a dark surface
   --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+
+  --eun-text-on-inverse-secondary: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 70%,
+    transparent
+  );
+  --eun-border-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 20%,
+    transparent
+  );
+  --eun-content-hover-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 8%,
+    transparent
+  );
+  --eun-content-pressed-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 14%,
+    transparent
+  );
+
+  // Dimmed layer behind a modal or a drawer
+  --eun-backdrop-color: color-mix(
+    in srgb,
+    var(--eun-surface-inverse) 45%,
+    transparent
+  );
 }

package/dist/cdn/styles/tools/mixins/settings/eunomia-motion.mixin.scss

@@ -0,0 +1,9 @@
+@mixin eunomia-motion {
+  --eun-duration-xs: 100ms;
+  --eun-duration-s: 150ms;
+  --eun-duration-m: 200ms;
+  --eun-duration-l: 250ms;
+  --eun-duration-xl: 300ms;
+  --eun-easing-default: ease;
+  --eun-easing-out: ease-out;
+}

package/dist/cdn/styles/tools/variables/eunomia.breakpoints.scss

@@ -1,3 +1,7 @@
+// Generated by library/scripts/breakpoints.mjs from
+// library/src/breakpoints.ts, the single source of the library's
+// breakpoints. Don't edit it : change them there, then run
+// `npm run breakpoints` in library/.
 $map-device-width: (
   mobile: 600px,
   tablet: 768px,

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

@@ -6,53 +6,60 @@ import { EunomiaSeverity } from "../../../types/variant.type.js";
  * Tag name of the button component.
  */
 export declare const EunomiaButtonTagName = "eun-button";
-declare const EunomiaButton_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
+declare const EunomiaButton_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A clickable control for performing an action or navigating to a link,
- * available in several variants, sizes, and surface styles.
+ * available in several colors, sizes, and surface styles.
  *
  * @slot [default] - The button content
  * @slot [start] - An icon or other content shown at the start of the button. Takes priority over the default icon from icon or severity. Leave empty to let one of those render instead
- * @slot [end] - An icon or other content shown at the end of the button. Ignored when href and target are set to open in a new tab, since an external link indicator takes its place
+ * @slot [end] - An icon or other content shown at the end of the button. Ignored when the button opens a link in a new tab, through href and target or a slotted anchor, since an external link indicator takes its place
  * @prop {'button' | 'submit' | 'reset'} [type='button'] - The button's native type. Ignored when href is set
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning' | 'light' | 'medium' | 'dark'} [variant='primary'] - The color theme applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
- * @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 {'primary' | 'secondary' | 'critical' | 'success' | 'warning' | 'light' | 'medium' | 'dark'} [color='primary'] - The color applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
+ * @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 colors
+ * @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 colors
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon, shown at the start of the button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
- * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this button leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
+ * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this button leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by color
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} rounded - Whether the button has fully rounded corners
  * @prop {boolean} slide - Whether the button uses a sliding open animation
  * @prop {boolean} full - Whether the button stretches to fill 100% of the width available from its parent, instead of sizing to its content. Its content stays centered once stretched
  * @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
- * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link icon and announces it to assistive technology
+ * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link icon and announces it to assistive technology, in the current locale. A slotted anchor opening in a new tab gets the same icon and announcement
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @prop {boolean} [loading=false] - Whether the button shows a loading indicator. Like disabled, it blocks interaction, but keeps the original content in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
  * @prop {string} command - The command sent to the element targeted by commandFor when the button is clicked, following the Invoker Commands API
  * @prop {string} commandFor - The id of the element that command is sent to
- * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it
- * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of variant. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
+ * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it. Ignored with a slotted anchor, which takes it instead
+ * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of color. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
  * @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 [--button-background] - Sets the background color
  * @cssprop [--button-background-hover] - Sets the background color on hover
  * @cssprop [--button-background-active] - Sets the background color while pressed
  * @cssprop [--button-text] - Sets the text color
- * @cssprop [--button-padding] - Sets the button's padding
- * @cssprop [--button-border-radius] - Sets the corner radius of the button
+ * @cssprop [--button-padding] - Sets the button's padding, for every size
+ * @cssprop [--button-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @cssprop [--button-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @cssprop [--button-border-radius] - Sets the corner radius of the button, for every size and over rounded
  * @cssprop [--button-focus-outline] - Sets the color of the focus outline
  * @cssprop [--button-transition] - Sets the duration of the button's transitions
  * @cssprop [--button-shadow] - Sets a box shadow. None is applied by default
  * @cssprop [--button-shadow-hover] - Sets the box shadow on hover, falling back to button-shadow when unset
- * @cssprop [--button-border-color] - Sets the border color, overriding the color the active variant would otherwise use
+ * @cssprop [--button-border-color] - Sets the border color, overriding the color the active color would otherwise use
  * @cssprop [--button-border-color-hover] - Sets the border color on hover or focus, falling back to button-border-color when unset
- * @cssprop [--button-border-size] - Sets the width of the border
+ * @cssprop [--button-border-size] - Sets the width of the border. Defaults to 1px for outline and 1.5px otherwise
+ * @cssprop [--button-font-size] - Sets the font size, for every size
+ * @cssprop [--button-font-weight] - Sets the font weight
+ * @cssprop [--button-line-height] - Sets the line height, for every size. Also sizes the icons
  * @cssprop [--button-full] - Set to true to stretch the button like the full attribute does. Unlike the attribute, a container query can set it, keeping the responsive behavior in pure CSS. Needs a browser supporting the CSS if() function
  * @element eun-button
  */
 export declare class EunomiaButton extends EunomiaButton_base {
+    #private;
     /**
      * Style to import to the component.
      *
@@ -77,19 +84,19 @@ export declare class EunomiaButton extends EunomiaButton_base {
      * `severity` is set and `icon` isn't (and nothing is slotted into
      * `start`), the leading icon is set according to it (see
      * {@link resolveIcon}) — same vocabulary as `eun-alert`/`eun-tag`. Has no
-     * effect on color, which stays driven by `variant` : a full severity
+     * effect on color, which stays driven by `color` : a full severity
      * range (`info`/`neutral` included) doesn't have a matching action color.
      */
     severity?: EunomiaSeverity;
     /**
      * The button's surface treatment. `fill` is a solid, opaque
-     * `variant`-colored background with light text ; `default` is a pale
+     * `color`-colored background with light text ; `default` is a pale
      * tinted wash of the same color ; `outline` drops the fill for a colored
      * border ; `flat` always renders the same muted, low-emphasis surface
-     * regardless of `variant` ; `raised` adds a drop shadow ; `ghost` has no
+     * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
      * visible surface at rest at all — a border (and a tinted background)
      * only appear on hover/focus/active, defaulting to a neutral gray when
-     * `variant` isn't also set.
+     * `color` isn't also set.
      * @default fill
      */
     appearance: EunomiaButtonAppearance;
@@ -114,9 +121,34 @@ export declare class EunomiaButton extends EunomiaButton_base {
      * @param _changedProperties - Map of changed properties
      */
     protected updated(_changedProperties: PropertyValues): void;
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset, which
+     * then acts as the button's link : it's in the light DOM, so it's part of
+     * the server-rendered HTML, and a framework's own link component can be
+     * that anchor. Navigation, `target`/`rel` and the new-tab hint are the
+     * consumer's own in this mode.
+     * @internal
+     */
+    private get slottedAnchor();
+    /**
+     * Links have no native disabled state : while `disabled` or `loading`,
+     * the slotted anchor is announced as disabled and taken out of the tab
+     * order (its pointer events are cut by the stylesheet), then restored.
+     * @param anchor the slotted anchor.
+     * @private
+     */
+    private syncSlottedAnchor;
+    /**
+     * Re-renders when the default slot changes, so an anchor added or removed
+     * after the first render switches between the two modes.
+     * @private
+     */
+    private handleDefaultSlotChange;
     /**
      * Renders the end-of-content slot, replaced by an external-link indicator
-     * (icon + accessible hint) when navigating away in a new tab.
+     * (icon + accessible hint) when navigating away in a new tab. A slotted
+     * anchor gets the icon only : the hint would sit outside it, so it's
+     * announced through its aria-description instead.
      * @private
      */
     private renderEndContent;