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

package/dist/components/alert/toast/toast.styles.js

@@ -16,6 +16,8 @@ import { css } from "lit";
  * [--toast-content-color] - Set a custom color for the description/action content, independent of the heading/icon color
  * [--toast-border-radius] - Set a custom border radius
  * [--toast-padding] - Set a custom padding
+ * [--toast-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toast-padding is set
+ * [--toast-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toast-padding is set
  * [--toast-gap] - Set a custom gap between the icon column and the heading/content column
  * [--toast-row-gap] - Set a custom gap between the heading, description, and action rows
  * [--toast-shadow] - Set a custom shadow
@@ -33,14 +35,17 @@ const base = css `
     z-index: var(--toast-z-index, 2147483000);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     --_gapEdge: var(--toast-viewport-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--toast-transition-duration, 0.3s);
+    --_transitionDuration: var(
+      --toast-transition-duration,
+      var(--eun-duration-xl, 300ms)
+    );
     --_baseX: var(--_enterX, 0px);
     --_baseY: var(--_enterY, 0px);
     visibility: hidden;
     opacity: 0;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease,
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
       visibility 0s linear var(--_transitionDuration);
   }
 
@@ -50,8 +55,8 @@ const base = css `
     --_baseX: 0px;
     --_baseY: 0px;
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease,
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease),
       visibility 0s linear 0s;
   }
 
@@ -145,25 +150,25 @@ const base = css `
     --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
-    --_background: var(--eun-color-info-30, #f0f7fa);
+    --_background: var(--eun-color-info-alpha-5, #097faf0d);
     --_backgroundFilled: var(--eun-color-info-100, #097faf);
     --_borderColor: var(--eun-color-info-100, #097faf);
     --_titleColor: var(--eun-color-info-100, #097faf);
   }
   :host([severity="success"]) {
-    --_background: var(--eun-color-success-30, #f1f9f4);
+    --_background: var(--eun-color-success-alpha-5, #1a99480d);
     --_backgroundFilled: var(--eun-color-success-100, #1a9948);
     --_borderColor: var(--eun-color-success-100, #1a9948);
     --_titleColor: var(--eun-color-success-100, #1a9948);
   }
   :host([severity="warning"]) {
-    --_background: var(--eun-color-warning-30, #fcf5f0);
+    --_background: var(--eun-color-warning-alpha-5, #c852070d);
     --_backgroundFilled: var(--eun-color-warning-100, #c85207);
     --_borderColor: var(--eun-color-warning-100, #c85207);
     --_titleColor: var(--eun-color-warning-100, #c85207);
   }
   :host([severity="critical"]) {
-    --_background: var(--eun-color-critical-30, #faf0f1);
+    --_background: var(--eun-color-critical-alpha-5, #aa00140d);
     --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
     --_borderColor: var(--eun-color-critical-100, #aa0014);
     --_titleColor: var(--eun-color-critical-100, #aa0014);
@@ -189,8 +194,13 @@ const base = css `
     /* Every appearance carries the same border box (transparent unless
        drawn), taken out of the padding, so switching appearance or adding a
        --toast-border-* never changes the size. */
-    border: var(--_bw) solid var(--toast-border-color, var(--_frame, transparent));
-    padding: var(--toast-padding, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))));
+    border: var(--_bw) solid
+      var(--toast-border-color, var(--_frame, transparent));
+    padding: var(
+      --toast-padding,
+      var(--toast-padding-block, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
+        var(--toast-padding-inline, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
+    );
     border-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
       --toast-shadow,
@@ -223,7 +233,10 @@ const base = css `
   }
   :host([appearance="outline"]) #toast {
     --_frame: var(--_borderColor);
-    background: var(--toast-background-color, var(--eun-surface-color, #ffffff));
+    background: var(
+      --toast-background-color,
+      var(--eun-surface-color, #ffffff)
+    );
   }
   :host([appearance="fill"]) #toast {
     background: var(--toast-background-color, var(--_backgroundFilled));
@@ -242,14 +255,20 @@ const base = css `
   }
 
   slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_titleColor)));
+    --icon-color: var(
+      --toast-icon-color,
+      var(--toast-color, var(--_titleColor))
+    );
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_onFilled, #fff)));
+    --icon-color: var(
+      --toast-icon-color,
+      var(--toast-color, var(--_onFilled, #fff))
+    );
   }
 
   #description,
@@ -290,7 +309,10 @@ const base = css `
 
   :host([closeable]) #toast {
     padding-right: calc(
-      var(--toast-padding, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))) +
+      var(
+          --toast-padding,
+          var(--toast-padding-inline, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw))))
+        ) +
         var(--eun-space-l, 32px)
     );
   }

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

@@ -1,13 +1,13 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
-import { EunomiaActionVariant, EunomiaCompactSize } from "../../../types/variant.type.js";
+import { EunomiaActionColor, EunomiaCompactSize } from "../../../types/variant.type.js";
 /**
  * Tag name of the badge component.
  */
 export declare const EunomiaBadgeTagName = "eun-badge";
 /**
- * All available badge variants.
+ * All available badge colors.
  */
-export type EunomiaBadgeVariant = EunomiaActionVariant;
+export type EunomiaBadgeColor = EunomiaActionColor;
 /**
  * All available badge sizes.
  */
@@ -23,7 +23,7 @@ export type EunomiaBadgeSize = EunomiaCompactSize;
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -43,10 +43,10 @@ export declare class EunomiaBadge extends LitElement {
      */
     static readonly styles: import("lit").CSSResult;
     /**
-     * The color variant to apply.
+     * The color to apply.
      * @default critical
      */
-    variant: EunomiaBadgeVariant;
+    color: EunomiaBadgeColor;
     /**
      * The size of the badge.
      * @default m

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

@@ -22,7 +22,7 @@ export const EunomiaBadgeTagName = "eun-badge";
  *
  * @slot [default] - The badge's content, typically a short number. Left empty, the badge renders as a plain dot
  * @csspart badge - The badge's own box, carrying its size, padding, and background. Exposed for effects the badge's CSS custom properties don't cover
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='critical'] - The color variant to apply
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='critical'] - The color to apply
  * @prop {'s' | 'm' | 'l'} [size='m'] - The size of the badge
  * @prop {string} label - An optional accessible name. When set, the badge announces this text instead of staying hidden from assistive technology
  * @cssprop [--badge-background] - Sets the background color of the badge
@@ -36,10 +36,10 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
     constructor() {
         super(...arguments);
         /**
-         * The color variant to apply.
+         * The color to apply.
          * @default critical
          */
-        this.variant = "critical";
+        this.color = "critical";
         /**
          * The size of the badge.
          * @default m
@@ -129,7 +129,7 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
 EunomiaBadge.styles = badgeStyles;
 __decorate([
     property({ reflect: true })
-], EunomiaBadge.prototype, "variant", void 0);
+], EunomiaBadge.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaBadge.prototype, "size", void 0);

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

@@ -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,15 +17,25 @@ 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`
- * @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
+ * 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. It isolates its own stacking context, so a decoration placed at z-index -1 stays above its background and below its content
  * @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
+ * @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. Ignored with a slotted anchor, which takes it instead
  * @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-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --card-padding is set
+ * @cssprop [--card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --card-padding is set
  * @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 every appearance. Fill and raised have no border by default, so it draws one when set
@@ -34,7 +44,9 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * @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-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance. Ignored when --card-hover-shadow is set
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, for every appearance, linked or not. Defaults to the resting shadow, or a deeper one for raised
+ * @cssprop [--card-overflow] - Sets the overflow of the card, visible by default. Set it to hidden to clip a decoration or a full-bleed image to the rounded corners
  * @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 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
@@ -48,6 +60,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 +74,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,15 +34,25 @@ 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`
- * @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
+ * 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. It isolates its own stacking context, so a decoration placed at z-index -1 stays above its background and below its content
  * @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
+ * @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. Ignored with a slotted anchor, which takes it instead
  * @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-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --card-padding is set
+ * @cssprop [--card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --card-padding is set
  * @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 every appearance. Fill and raised have no border by default, so it draws one when set
@@ -42,7 +61,9 @@ export const EunomiaCardTagName = "eun-card";
  * @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-raised-hover-shadow] - Sets the box shadow on hover for the raised appearance. Ignored when --card-hover-shadow is set
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, for every appearance, linked or not. Defaults to the resting shadow, or a deeper one for raised
+ * @cssprop [--card-overflow] - Sets the overflow of the card, visible by default. Set it to hidden to clip a decoration or a full-bleed image to the rounded corners
  * @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 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
@@ -63,15 +84,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

@@ -17,9 +17,15 @@ const base = css `
     flex-direction: column;
     gap: var(--card-gap, var(--eun-space-s, 8px));
     position: relative;
+    isolation: isolate;
     box-sizing: border-box;
     height: 100%;
-    padding: var(--card-padding, var(--eun-space-m, 16px));
+    overflow: var(--card-overflow, visible);
+    padding: var(
+      --card-padding,
+      var(--card-padding-block, var(--eun-space-m, 16px))
+        var(--card-padding-inline, var(--eun-space-m, 16px))
+    );
     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));
@@ -31,11 +37,15 @@ const base = css `
     outline: 2px solid transparent;
     transition: var(
       --card-transition,
-      transform var(--card-hover-duration, 0.3s) ease,
-      outline 0.2s ease-out,
-      box-shadow var(--card-hover-duration, 0.3s) ease,
-      background-color var(--card-hover-duration, 0.3s) ease,
-      border-color var(--card-hover-duration, 0.3s) ease
+      transform var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      background-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease),
+      border-color var(--card-hover-duration, var(--eun-duration-xl, 300ms))
+        var(--eun-easing-default, ease)
     );
   }
 
@@ -95,6 +105,7 @@ const base = css `
   #card:hover,
   #card:focus-visible {
     border-color: var(--card-hover-border-color, var(--_hoverBorderDefault));
+    box-shadow: var(--card-hover-shadow, var(--card-shadow, none));
   }
 
   :host([appearance="fill"]) #card {
@@ -122,17 +133,53 @@ const base = css `
   :host([appearance="raised"]) #card:hover {
     transform: var(--card-hover-transform, var(--_hoverLift));
     box-shadow: var(
-      --card-raised-hover-shadow,
+      --card-hover-shadow,
       var(
-        --eun-shadow-m,
-        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
-        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
+        --card-raised-hover-shadow,
+        var(
+          --eun-shadow-m,
+          rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
+          rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
+        )
       )
     );
   }
 
+  #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 var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, 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;
     }
   }