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

package/dist/components/content/badge/badge.styles.js

@@ -46,7 +46,7 @@ const base = css `
     color: var(--_color);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--_fontSize);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
     line-height: 1;
     white-space: nowrap;
     user-select: none;
@@ -69,7 +69,7 @@ const base = css `
     --_fontSize: var(--badge-font-size, 12px);
   }
 
-  :host([variant="primary"]) {
+  :host([color="primary"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -77,7 +77,7 @@ const base = css `
     --_color: var(--badge-color, var(--eun-color-on-primary-500, #ffffff));
   }
 
-  :host([variant="secondary"]) {
+  :host([color="secondary"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-secondary-500, #e5a030)
@@ -85,7 +85,7 @@ const base = css `
     --_color: var(--badge-color, var(--eun-color-on-secondary-500, #000000de));
   }
 
-  :host([variant="success"]) {
+  :host([color="success"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-success-100, #1a9948)
@@ -93,7 +93,7 @@ const base = css `
     --_color: var(--badge-color, #fff);
   }
 
-  :host([variant="warning"]) {
+  :host([color="warning"]) {
     --_background: var(
       --badge-background,
       var(--eun-color-warning-100, #c85207)

package/dist/components/content/card/card.d.ts

@@ -1,10 +1,10 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaCardAppearance } from "../../../types/variant.type.js";
 /**
  * Tag name of the card component.
  */
 export declare const EunomiaCardTagName = "eun-card";
-declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A padded, bordered surface around whatever's slotted in, with nothing
  * else opinionated about the content : no dedicated slots, no forced
@@ -17,26 +17,34 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * slotting your own markup, styled with your own CSS, rather than
  * reaching for a layout variant baked into the component.
  *
- * @slot [default] - The card's content, arranged in a column by `--card-gap`
+ * Without href, a native anchor placed as a direct child links the whole
+ * card instead, stretched over its surface, so the link exists in the
+ * server-rendered HTML and can be a framework's own link component. Its
+ * accessible name stays the anchor's own text, typically the card title.
+ * When it opens in a new tab, the card shows the same external link badge
+ * and announces it through the anchor's aria-description.
+ *
+ * @slot [default] - The card's content, arranged in a column by `--card-gap`. A native anchor as a direct child links the whole card when href is unset
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {'default' | 'fill' | 'raised'} [appearance='default'] - The card's surface style. Default is a plain surface colored box with a border. Fill and raised both drop the border, fill for a muted tinted background and raised for a drop shadow. All three animate a border, tint, or shadow change on hover or focus regardless of whether the card is a link, though the accompanying lift is narrower
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
- * @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 badge 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 badge and announces it to assistive technology, in the current locale
+ * @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
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
  * @cssprop [--card-padding] - Sets the padding of the card
  * @cssprop [--card-gap] - Sets the gap between the card's own direct children
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
- * @cssprop [--card-border-color] - Sets the border color, for the default appearance only, since fill and raised have no border
- * @cssprop [--card-border-width] - Sets the width of the border, for the default appearance only, since fill and raised have no border
- * @cssprop [--card-background] - Sets the background color, for the default appearance only. See card-fill-background for the fill appearance
+ * @cssprop [--card-border-color] - Sets the border color, for every appearance. Fill and raised have no border by default, so it draws one when set
+ * @cssprop [--card-border-width] - Sets the border width, for every appearance. Fill and raised have a transparent border by default, so it only shows once --card-border-color is set
+ * @cssprop [--card-background] - Sets the background color, for every appearance. The fill appearance reads card-fill-background first, then this one
  * @cssprop [--card-fill-background] - Sets the background color for the fill appearance
  * @cssprop [--card-fill-hover-background] - Sets the background color on hover for the fill appearance
  * @cssprop [--card-shadow] - Sets a box shadow for the default appearance, none by default. Replaced by a subtle elevation for the raised appearance, and unused by fill
  * @cssprop [--card-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for every appearance. Setting this always applies it, link or not. Left unset, a small lift only applies to linked cards, since a non-linked card gets the border, tint, or shadow change on hover but stays in place otherwise
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest (unchanged for default, still transparent for fill/raised) — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, for the default appearance only, unchanged by default. See card-fill-hover-background for the fill appearance
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, outline, box shadow, background color, and border color
@@ -48,6 +56,7 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * @element eun-card
  */
 export declare class EunomiaCard extends EunomiaCard_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -61,6 +70,25 @@ export declare class EunomiaCard extends EunomiaCard_base {
      * @default default
      */
     appearance: EunomiaCardAppearance;
+    /**
+     * Whether a native `<a>` slotted as a direct child links the card while
+     * `href` is unset (see the class doc). Navigation, `target`/`rel` and
+     * the new-tab hint are the consumer's own in this mode.
+     * @private
+     */
+    private get hasSlottedAnchor();
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset.
+     * @internal
+     */
+    private get slottedAnchor();
+    /**
+     * Re-renders when the default slot changes, so an anchor added or removed
+     * after the first render switches between the two modes.
+     * @private
+     */
+    private handleSlotChange;
+    protected updated(changed: PropertyValues): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/content/card/card.js

@@ -4,9 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EunomiaCard_newTab;
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { CardLinkMixin } from "../../../mixins/card-link.mixin.js";
+import { warnIgnoredHostLinkAttributes } from "../../../utils/navigation.utils.js";
+import { NewTabAnchorController } from "../../../utils/new-tab-anchor.controller.js";
 import { cardStyles } from "./card.styles.js";
 import { cardLinkStyles } from "../shared-styles/card-link.styles.js";
 /**
@@ -25,26 +34,34 @@ export const EunomiaCardTagName = "eun-card";
  * slotting your own markup, styled with your own CSS, rather than
  * reaching for a layout variant baked into the component.
  *
- * @slot [default] - The card's content, arranged in a column by `--card-gap`
+ * Without href, a native anchor placed as a direct child links the whole
+ * card instead, stretched over its surface, so the link exists in the
+ * server-rendered HTML and can be a framework's own link component. Its
+ * accessible name stays the anchor's own text, typically the card title.
+ * When it opens in a new tab, the card shows the same external link badge
+ * and announces it through the anchor's aria-description.
+ *
+ * @slot [default] - The card's content, arranged in a column by `--card-gap`. A native anchor as a direct child links the whole card when href is unset
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {'default' | 'fill' | 'raised'} [appearance='default'] - The card's surface style. Default is a plain surface colored box with a border. Fill and raised both drop the border, fill for a muted tinted background and raised for a drop shadow. All three animate a border, tint, or shadow change on hover or focus regardless of whether the card is a link, though the accompanying lift is narrower
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
- * @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 badge 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 badge and announces it to assistive technology, in the current locale
+ * @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
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
  * @cssprop [--card-padding] - Sets the padding of the card
  * @cssprop [--card-gap] - Sets the gap between the card's own direct children
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
- * @cssprop [--card-border-color] - Sets the border color, for the default appearance only, since fill and raised have no border
- * @cssprop [--card-border-width] - Sets the width of the border, for the default appearance only, since fill and raised have no border
- * @cssprop [--card-background] - Sets the background color, for the default appearance only. See card-fill-background for the fill appearance
+ * @cssprop [--card-border-color] - Sets the border color, for every appearance. Fill and raised have no border by default, so it draws one when set
+ * @cssprop [--card-border-width] - Sets the border width, for every appearance. Fill and raised have a transparent border by default, so it only shows once --card-border-color is set
+ * @cssprop [--card-background] - Sets the background color, for every appearance. The fill appearance reads card-fill-background first, then this one
  * @cssprop [--card-fill-background] - Sets the background color for the fill appearance
  * @cssprop [--card-fill-hover-background] - Sets the background color on hover for the fill appearance
  * @cssprop [--card-shadow] - Sets a box shadow for the default appearance, none by default. Replaced by a subtle elevation for the raised appearance, and unused by fill
  * @cssprop [--card-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for every appearance. Setting this always applies it, link or not. Left unset, a small lift only applies to linked cards, since a non-linked card gets the border, tint, or shadow change on hover but stays in place otherwise
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, for every appearance, including fill and raised, whose border is otherwise transparent rather than absent, reserving the space so the color reveals with no layout shift. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest (unchanged for default, still transparent for fill/raised) — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, for the default appearance only, unchanged by default. See card-fill-hover-background for the fill appearance
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, outline, box shadow, background color, and border color
@@ -63,15 +80,58 @@ let EunomiaCard = class EunomiaCard extends CardLinkMixin(LitElement) {
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaCard_newTab.set(this, new NewTabAnchorController(this, () => this.slottedAnchor, () => this.dictionary.link.opensInNewTab));
+        /**
+         * Re-renders when the default slot changes, so an anchor added or removed
+         * after the first render switches between the two modes.
+         * @private
+         */
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    /**
+     * Whether a native `<a>` slotted as a direct child links the card while
+     * `href` is unset (see the class doc). Navigation, `target`/`rel` and
+     * the new-tab hint are the consumer's own in this mode.
+     * @private
+     */
+    get hasSlottedAnchor() {
+        return !!this.slottedAnchor;
+    }
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(":scope > a");
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.hasSlottedAnchor) {
+            warnIgnoredHostLinkAttributes(this);
+        }
     }
     render() {
-        const inner = html `<slot></slot>${this.renderExternalLinkBadge()}`;
+        const inner = html `<slot @slotchange=${this.handleSlotChange}></slot
+      >${this.renderExternalLinkBadge(__classPrivateFieldGet(this, _EunomiaCard_newTab, "f").isBlank)}`;
         if (this.href) {
             return this.renderCardLink("card", inner);
         }
-        return html `<div id="card" part="card">${inner}</div>`;
+        return html `<div
+      id="card"
+      part="card"
+      class=${ifDefined(this.hasSlottedAnchor ? "slotted-link" : undefined)}
+    >
+      ${inner}
+    </div>`;
     }
 };
+_EunomiaCard_newTab = new WeakMap();
 /**
  * Styles to import to the component.
  *

package/dist/components/content/card/card.styles.js

@@ -20,13 +20,13 @@ const base = css `
     box-sizing: border-box;
     height: 100%;
     padding: var(--card-padding, var(--eun-space-m, 16px));
-    border-radius: var(--card-border-radius, var(--eun-borderRadius-m, 8px));
-    border: var(--card-border-width, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+    border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
       var(--card-border-color, var(--eun-border-color, #dee0e7));
     background: var(--card-background, var(--eun-surface-color, #ffffff));
     box-shadow: var(--card-shadow, none);
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     text-decoration: none;
     outline: 2px solid transparent;
     transition: var(
@@ -60,9 +60,18 @@ const base = css `
 
   :host {
     --_hoverLift: none;
+    --_hoverBorderDefault: var(
+      --card-border-color,
+      var(--eun-border-color, #dee0e7)
+    );
+  }
+  :host([appearance="fill"]),
+  :host([appearance="raised"]) {
+    --_hoverBorderDefault: var(--card-border-color, transparent);
   }
   :host([href]) {
     --_hoverLift: translateY(-4px);
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
   }
 
   :host([appearance="default"]) #card:hover,
@@ -76,7 +85,7 @@ const base = css `
 
   :host([appearance="fill"]) #card,
   :host([appearance="raised"]) #card {
-    border-color: transparent;
+    border-color: var(--card-border-color, transparent);
   }
 
   :host([appearance="fill"]) #card:hover,
@@ -85,14 +94,14 @@ const base = css `
   :host([appearance="raised"]) #card:focus-visible,
   #card:hover,
   #card:focus-visible {
-    border-color: var(
-      --card-hover-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
   }
 
   :host([appearance="fill"]) #card {
-    background: var(--card-fill-background, var(--eun-color-grey-100, #f7f8fa));
+    background: var(
+      --card-fill-background,
+      var(--card-background, var(--eun-surface-sunken, #f7f8fa))
+    );
   }
 
   :host([appearance="raised"]) #card {
@@ -106,7 +115,7 @@ const base = css `
     transform: var(--card-hover-transform, var(--_hoverLift));
     background: var(
       --card-fill-hover-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken-hover, #ecedf0)
     );
   }
 
@@ -122,8 +131,40 @@ const base = css `
     );
   }
 
+  #card.slotted-link {
+    --_hoverLift: translateY(-4px);
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+    cursor: pointer;
+  }
+  ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
+  }
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--card-border-width, var(--eun-border-width-s, 1px)));
+    z-index: 1;
+    border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+    outline: 2px solid transparent;
+    transition: outline 0.2s ease-out;
+  }
+  ::slotted(a:focus-visible)::after {
+    outline-color: var(
+      --card-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    outline-offset: 2px;
+  }
+  :host(:focus-within) #card.slotted-link {
+    transform: var(--card-hover-transform, var(--_hoverLift));
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    #card {
+    #card,
+    ::slotted(a)::after {
       transition: none;
     }
   }

package/dist/components/content/card/image-card.d.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the image card component.
  */
 export declare const EunomiaImageCardTagName = "eun-image-card";
-declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * An image header with a title and description footer, such as a blog post
  * preview, a product tile, or a team member card. It shares the same CSS
@@ -19,6 +19,7 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
  * @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 badge and announces it to assistive technology
+ * @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
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -30,7 +31,7 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for linked cards only, defaulting to a small lift
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, linked or not. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, linked or not, unchanged by default
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, box shadow, background color, and border color

package/dist/components/content/card/image-card.js

@@ -28,6 +28,7 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * @csspart card - The outer box, a link once href is set, a plain container otherwise. Exposed for effects the card's CSS custom properties don't cover, such as a hover accent
  * @prop {string} href - The URL the card navigates to. When set, the card renders as a link instead of a plain wrapper
  * @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 badge and announces it to assistive technology
+ * @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
  * @attr {string} aria-label - An accessible label that overrides the card content. When the card also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -39,7 +40,7 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
  * @cssprop [--card-hover-transform] - Sets a transform applied on hover or focus, for linked cards only, defaulting to a small lift
- * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus, linked or not. Defaults to the primary color
+ * @cssprop [--card-hover-border-color] - Sets the border color on hover or focus. Defaults to the primary color when `href` is set, otherwise the border stays exactly as it is at rest — hovering a non-link card gives no color feedback, since there's nothing to click
  * @cssprop [--card-hover-background] - Sets the background color on hover or focus, linked or not, unchanged by default
  * @cssprop [--card-hover-duration] - Sets the duration of the hover transition
  * @cssprop [--card-transition] - Overrides the card's whole hover transition, for example to animate an extra property alongside the built-in ones. Defaults to transform, box shadow, background color, and border color

package/dist/components/content/card/image-card.styles.js

@@ -20,8 +20,8 @@ const base = css `
     box-sizing: border-box;
     height: 100%;
     overflow: hidden;
-    border-radius: var(--card-border-radius, var(--eun-borderRadius-m, 8px));
-    border: var(--card-border-width, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--card-border-radius, var(--eun-border-radius-m, 8px));
+    border: var(--card-border-width, var(--eun-border-width-s, 1px)) solid
       var(--card-border-color, var(--eun-border-color, #dee0e7));
     background: var(--card-background, var(--eun-surface-color, #ffffff));
     box-shadow: var(--card-shadow, none);
@@ -36,12 +36,19 @@ const base = css `
     );
   }
 
+  :host {
+    --_hoverBorderDefault: var(
+      --card-border-color,
+      var(--eun-border-color, #dee0e7)
+    );
+  }
+  :host([href]) {
+    --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
+  }
+
   #card:hover,
   #card:focus-visible {
-    border-color: var(
-      --card-hover-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
+    border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
     background: var(
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
@@ -85,14 +92,14 @@ const base = css `
   }
 
   ::slotted([slot="title"]) {
-    font-weight: var(--eun-fontWeight-l, 700);
-    font-size: var(--image-card-title-size, var(--eun-fontSize-m, 16px));
+    font-weight: var(--eun-font-weight-l, 700);
+    font-size: var(--image-card-title-size, var(--eun-font-size-m, 16px));
     color: var(--eun-text-color, #071621);
   }
 
   ::slotted([slot="description"]) {
-    font-weight: var(--eun-fontWeight-s, 300);
-    font-size: var(--image-card-description-size, var(--eun-fontSize-s, 14px));
+    font-weight: var(--eun-font-weight-s, 300);
+    font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
     color: var(--eun-text-secondary, #484e61);
   }
 

package/dist/components/content/card/sliding-card.d.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the sliding card component.
  */
 export declare const EunomiaSlidingCardTagName = "eun-sliding-card";
-declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface> & typeof LitElement;
+declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/card-link.mixin.js").CardLinkMixinInterface & import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A card with a two layer slide reveal. The front layer is always visible
  * and slides down to expose the back layer underneath.
@@ -35,6 +35,7 @@ declare const EunomiaSlidingCard_base: import("../../../utils/constructor.type.j
  * @prop {boolean} [hint=false] - Loops a bounce animation on touch devices while closed, hinting that the card is interactive
  * @prop {string} href - The URL the back layer navigates to. When set, the back layer renders as a link instead of a plain container
  * @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 badge and announces it to assistive technology
+ * @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
  * @attr {string} aria-label - The accessible label for the front layer's toggle control, touch devices only, since desktop has no such control. When the back layer also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

package/dist/components/content/card/sliding-card.js

@@ -47,6 +47,7 @@ export const EunomiaSlidingCardTagName = "eun-sliding-card";
  * @prop {boolean} [hint=false] - Loops a bounce animation on touch devices while closed, hinting that the card is interactive
  * @prop {string} href - The URL the back layer navigates to. When set, the back layer renders as a link instead of a plain container
  * @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 badge and announces it to assistive technology
+ * @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
  * @attr {string} aria-label - The accessible label for the front layer's toggle control, touch devices only, since desktop has no such control. When the back layer also opens in a new tab, a note announcing it is appended automatically
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable

package/dist/components/content/card/sliding-card.styles.js

@@ -63,7 +63,7 @@ const base = css `
     position: absolute;
     border-radius: var(
       --sliding-card-border-radius,
-      var(--eun-borderRadius-l, 16px)
+      var(--eun-border-radius-l, 16px)
     );
     padding: var(--sliding-card-padding, var(--eun-space-l, 32px));
     overflow: hidden;
@@ -115,7 +115,8 @@ const base = css `
       --sliding-card-front-background,
       var(--eun-surface-color, #ffffff)
     );
-    border: var(--eun-borderWidth-s, 1px) solid var(--eun-border-color, #dee0e7);
+    border: var(--eun-border-width-s, 1px) solid
+      var(--eun-border-color, #dee0e7);
     z-index: 2;
   }
 

package/dist/components/content/chip/chip.d.ts

@@ -52,7 +52,9 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @fires {CloseEvent} eunclose - Fired when the delete button is activated. The chip has no visibility state of its own, so removing or hiding it in response is the consumer's own responsibility
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='medium'] - The color to apply to the chip
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the chip, matching the nature of the information conveyed. Takes priority over color when both are set
- * @prop {'default' | 'fill' | 'outline' | 'flat'} [appearance='default'] - The surface style of the chip. Flat always renders the same muted, low emphasis surface regardless of color or severity
+ * @prop {'default' | 'fill' | 'outline' | 'flat'} [appearance='default'] - The surface style of the chip. Flat renders the same muted, low emphasis surface regardless of color or severity, except for the light and dark colors, which keep their own white or black
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark chip 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 or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark chip 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 or on severity
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the chip
  * @prop {EunomiaIconName} icon - The leading icon to display. Ignored once an avatar image or initials are set. When severity is set and icon isn't, the icon is set according to the chip's severity
  * @prop {boolean} [hideIcon=false] - Whether the leading icon is hidden from the chip, once resolved. The avatar and initials are unaffected
@@ -71,13 +73,13 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
- * @cssprop [--chip-background-color] - Sets the background color of the chip
- * @cssprop [--chip-border-color] - Sets the border color of the chip, for the outline appearance
- * @cssprop [--chip-border-width] - Sets the border width of the chip, for the outline appearance
+ * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-width] - Sets the border width of the chip, for every appearance. The border takes room out of the padding, so the chip keeps its size
  * @cssprop [--chip-box-shadow] - Sets a box shadow on the chip, none by default
- * @cssprop [--chip-color] - Sets the text color of the chip
+ * @cssprop [--chip-color] - Sets the text color of the chip, for every appearance, color and severity
  * @cssprop [--chip-icon-color] - Sets the color of the leading icon only, not the avatar, initials, or delete button icon. Defaults to matching the chip's own text color
- * @cssprop [--chip-border-radius] - Sets the corner radius of the chip when rounded is unset
+ * @cssprop [--chip-border-radius] - Sets the corner radius of the chip, also over rounded
  * @cssprop [--chip-gap] - Sets the gap between the chip's leading visual, label, and delete button
  * @cssprop [--chip-avatar-background] - Sets the background color of the initials badge
  * @cssprop [--chip-avatar-color] - Sets the text color of the initials badge
@@ -93,11 +95,18 @@ export declare class EunomiaChip extends EunomiaChip_base {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * The color of the chip.
      */
     color: EunomiaChipColor;
+    /**
+     * Keeps a `light` or `dark` chip 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 or on `severity`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * The severity of the chip to display.
      */

package/dist/components/content/chip/chip.js

@@ -56,7 +56,9 @@ const DELETE_ICON_SIZES = {
  * @fires {CloseEvent} eunclose - Fired when the delete button is activated. The chip has no visibility state of its own, so removing or hiding it in response is the consumer's own responsibility
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='medium'] - The color to apply to the chip
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the chip, matching the nature of the information conveyed. Takes priority over color when both are set
- * @prop {'default' | 'fill' | 'outline' | 'flat'} [appearance='default'] - The surface style of the chip. Flat always renders the same muted, low emphasis surface regardless of color or severity
+ * @prop {'default' | 'fill' | 'outline' | 'flat'} [appearance='default'] - The surface style of the chip. Flat renders the same muted, low emphasis surface regardless of color or severity, except for the light and dark colors, which keep their own white or black
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark chip 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 or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark chip 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 or on severity
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the chip
  * @prop {EunomiaIconName} icon - The leading icon to display. Ignored once an avatar image or initials are set. When severity is set and icon isn't, the icon is set according to the chip's severity
  * @prop {boolean} [hideIcon=false] - Whether the leading icon is hidden from the chip, once resolved. The avatar and initials are unaffected
@@ -75,13 +77,13 @@ const DELETE_ICON_SIZES = {
  * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
  * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
- * @cssprop [--chip-background-color] - Sets the background color of the chip
- * @cssprop [--chip-border-color] - Sets the border color of the chip, for the outline appearance
- * @cssprop [--chip-border-width] - Sets the border width of the chip, for the outline appearance
+ * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
+ * @cssprop [--chip-border-width] - Sets the border width of the chip, for every appearance. The border takes room out of the padding, so the chip keeps its size
  * @cssprop [--chip-box-shadow] - Sets a box shadow on the chip, none by default
- * @cssprop [--chip-color] - Sets the text color of the chip
+ * @cssprop [--chip-color] - Sets the text color of the chip, for every appearance, color and severity
  * @cssprop [--chip-icon-color] - Sets the color of the leading icon only, not the avatar, initials, or delete button icon. Defaults to matching the chip's own text color
- * @cssprop [--chip-border-radius] - Sets the corner radius of the chip when rounded is unset
+ * @cssprop [--chip-border-radius] - Sets the corner radius of the chip, also over rounded
  * @cssprop [--chip-gap] - Sets the gap between the chip's leading visual, label, and delete button
  * @cssprop [--chip-avatar-background] - Sets the background color of the initials badge
  * @cssprop [--chip-avatar-color] - Sets the text color of the initials badge
@@ -96,6 +98,13 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
          * The color of the chip.
          */
         this.color = "medium";
+        /**
+         * Keeps a `light` or `dark` chip 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 or on `severity`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * The surface treatment of the chip.
          * @default default
@@ -323,6 +332,9 @@ EunomiaChip.styles = chipStyles;
 __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaChip.prototype, "fixedColor", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "severity", void 0);