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

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

@@ -81,6 +81,8 @@ const EXIT_FALLBACK_MS = 600;
  * @cssprop [--toast-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--toast-border-radius] - Sets the corner radius of the toast
  * @cssprop [--toast-padding] - Sets the padding of the toast
+ * @cssprop [--toast-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toast-padding is set
+ * @cssprop [--toast-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toast-padding is set
  * @cssprop [--toast-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--toast-row-gap] - Sets the gap between the heading, description, and action rows
  * @cssprop [--toast-shadow] - Sets the shadow of the toast

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/card/card.d.ts

@@ -25,15 +25,17 @@ declare const EunomiaCard_base: import("../../../utils/constructor.type.js").Con
  * 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
+ * @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, 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 +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

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

@@ -42,15 +42,17 @@ export const EunomiaCardTagName = "eun-card";
  * 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
+ * @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, 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
@@ -59,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

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,11 +133,14 @@ 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
+        )
       )
     );
   }
@@ -148,7 +162,8 @@ const base = css `
     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;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   ::slotted(a:focus-visible)::after {
     outline-color: var(

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

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult } from "lit";
 /**
  * Tag name of the image card component.
  */
@@ -11,34 +11,52 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * family.
  *
  * Like every card in this family, setting href turns the whole card into a
- * link.
+ * link. Without href, a native anchor slotted into title 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. When
+ * it opens in a new tab, the card shows the external link badge and
+ * announces it through the anchor's aria-description.
+ *
+ * The footer stretches to the card's height, so a card in a grid row can
+ * push its last line to the bottom with margin-top auto. It isn't
+ * rendered at all while title and description are both empty.
  *
  * @slot [image] - The card's image, as a plain image element shown edge to edge, ignoring padding. The alt text is the author's own responsibility: describe the image, or leave it empty when it's purely decorative and the title or description already convey the same information
- * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure
- * @slot [description] - The card's description, below the title
+ * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure. A native anchor slotted here links the whole card when href is unset. The title typography is inherited, so a composition styles its own parts freely
+ * @slot [description] - The card's description, below the title. Its typography is inherited too
  * @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
+ * @csspart footer - The box holding the title and description, below the image
  * @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
+ * @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 footer, holding the title and description
+ * @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 title and description
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
  * @cssprop [--card-border-color] - Sets the border color of the card
  * @cssprop [--card-border-width] - Sets the width of the border
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, linked or not. Defaults to the resting shadow
+ * @cssprop [--card-overflow] - Sets the overflow of the card, hidden by default so the image follows the rounded corners
  * @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. 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
  * @cssprop [--card-focus-outline-color] - Sets the focus outline color, for linked cards only
- * @cssprop [--image-card-image-height] - Sets the height of the image
+ * @cssprop [--image-card-image-height] - Sets the height of the image, 180px by default. Set it to auto to size the image from its aspect ratio instead
+ * @cssprop [--image-card-image-aspect-ratio] - Sets the aspect ratio of the image, such as 4 / 3. Only applies once --image-card-image-height is auto
  * @cssprop [--image-card-title-size] - Sets the font size of the title
+ * @cssprop [--image-card-title-weight] - Sets the font weight of the title
+ * @cssprop [--image-card-title-color] - Sets the color of the title
  * @cssprop [--image-card-description-size] - Sets the font size of the description
+ * @cssprop [--image-card-description-weight] - Sets the font weight of the description
+ * @cssprop [--image-card-description-color] - Sets the color of the description
  * @cssprop [--card-link-badge-offset] - Sets the inset of the external link badge from the card's top and right edges
  * @cssprop [--card-link-badge-size] - Sets the diameter of the external link badge
  * @cssprop [--card-link-badge-background] - Sets the background color of the external link badge
@@ -46,6 +64,7 @@ declare const EunomiaImageCard_base: import("../../../utils/constructor.type.js"
  * @element eun-image-card
  */
 export declare class EunomiaImageCard extends EunomiaImageCard_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -54,6 +73,41 @@ export declare class EunomiaImageCard extends EunomiaImageCard_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Whether the slotted anchor has keyboard focus. The ring is drawn on
+     * the card itself, since the card clips its content and an outline
+     * around the stretched anchor would be cut off.
+     * @internal
+     */
+    private anchorFocusVisible;
+    /**
+     * The native `<a>` slotted into `title` while `href` is unset, which
+     * then links the whole card. Navigation, `target`/`rel` and the new-tab
+     * hint are the consumer's own in this mode.
+     * @internal
+     */
+    private get slottedAnchor();
+    /**
+     * Whether anything is slotted into `title` or `description`. The footer
+     * isn't rendered otherwise, so an image-only card has no empty band
+     * under its image.
+     * @internal
+     */
+    private get hasFooterContent();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Tracks keyboard focus on the slotted anchor.
+     * @private
+     */
+    private handleFocusChange;
+    /**
+     * Re-renders when a slot changes, so an anchor or a footer slot added or
+     * removed after the first render is picked up.
+     * @private
+     */
+    private handleSlotChange;
+    protected updated(changed: PropertyValues): void;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/content/card/image-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;
 };
-import { customElement } from "lit/decorators.js";
+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 _EunomiaImageCard_newTab;
+import { customElement, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
+import { classMap } from "lit/directives/class-map.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 { imageCardStyles } from "./image-card.styles.js";
 import { cardLinkStyles } from "../shared-styles/card-link.styles.js";
 /**
@@ -20,34 +29,52 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * family.
  *
  * Like every card in this family, setting href turns the whole card into a
- * link.
+ * link. Without href, a native anchor slotted into title 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. When
+ * it opens in a new tab, the card shows the external link badge and
+ * announces it through the anchor's aria-description.
+ *
+ * The footer stretches to the card's height, so a card in a grid row can
+ * push its last line to the bottom with margin-top auto. It isn't
+ * rendered at all while title and description are both empty.
  *
  * @slot [image] - The card's image, as a plain image element shown edge to edge, ignoring padding. The alt text is the author's own responsibility: describe the image, or leave it empty when it's purely decorative and the title or description already convey the same information
- * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure
- * @slot [description] - The card's description, below the title
+ * @slot [title] - The card's title, below the image. Use a heading element at whatever level fits the surrounding page structure. A native anchor slotted here links the whole card when href is unset. The title typography is inherited, so a composition styles its own parts freely
+ * @slot [description] - The card's description, below the title. Its typography is inherited too
  * @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
+ * @csspart footer - The box holding the title and description, below the image
  * @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
+ * @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 footer, holding the title and description
+ * @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 title and description
  * @cssprop [--card-border-radius] - Sets the corner radius of the card
  * @cssprop [--card-border-color] - Sets the border color of the card
  * @cssprop [--card-border-width] - Sets the width of the border
  * @cssprop [--card-background] - Sets the background color of the card
  * @cssprop [--card-shadow] - Sets a box shadow, none by default
+ * @cssprop [--card-hover-shadow] - Sets the box shadow on hover or focus, linked or not. Defaults to the resting shadow
+ * @cssprop [--card-overflow] - Sets the overflow of the card, hidden by default so the image follows the rounded corners
  * @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. 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
  * @cssprop [--card-focus-outline-color] - Sets the focus outline color, for linked cards only
- * @cssprop [--image-card-image-height] - Sets the height of the image
+ * @cssprop [--image-card-image-height] - Sets the height of the image, 180px by default. Set it to auto to size the image from its aspect ratio instead
+ * @cssprop [--image-card-image-aspect-ratio] - Sets the aspect ratio of the image, such as 4 / 3. Only applies once --image-card-image-height is auto
  * @cssprop [--image-card-title-size] - Sets the font size of the title
+ * @cssprop [--image-card-title-weight] - Sets the font weight of the title
+ * @cssprop [--image-card-title-color] - Sets the color of the title
  * @cssprop [--image-card-description-size] - Sets the font size of the description
+ * @cssprop [--image-card-description-weight] - Sets the font weight of the description
+ * @cssprop [--image-card-description-color] - Sets the color of the description
  * @cssprop [--card-link-badge-offset] - Sets the inset of the external link badge from the card's top and right edges
  * @cssprop [--card-link-badge-size] - Sets the diameter of the external link badge
  * @cssprop [--card-link-badge-background] - Sets the background color of the external link badge
@@ -55,21 +82,100 @@ export const EunomiaImageCardTagName = "eun-image-card";
  * @element eun-image-card
  */
 let EunomiaImageCard = class EunomiaImageCard extends CardLinkMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the slotted anchor has keyboard focus. The ring is drawn on
+         * the card itself, since the card clips its content and an outline
+         * around the stretched anchor would be cut off.
+         * @internal
+         */
+        this.anchorFocusVisible = false;
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaImageCard_newTab.set(this, new NewTabAnchorController(this, () => this.slottedAnchor, () => this.dictionary.link.opensInNewTab));
+        /**
+         * Tracks keyboard focus on the slotted anchor.
+         * @private
+         */
+        this.handleFocusChange = () => {
+            const anchor = this.slottedAnchor;
+            this.anchorFocusVisible =
+                !!anchor &&
+                    anchor === document.activeElement &&
+                    anchor.matches(":focus-visible");
+        };
+        /**
+         * Re-renders when a slot changes, so an anchor or a footer slot added or
+         * removed after the first render is picked up.
+         * @private
+         */
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    /**
+     * The native `<a>` slotted into `title` while `href` is unset, which
+     * then links the whole card. Navigation, `target`/`rel` and the new-tab
+     * hint are the consumer's own in this mode.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(':scope > a[slot="title"]');
+    }
+    /**
+     * Whether anything is slotted into `title` or `description`. The footer
+     * isn't rendered otherwise, so an image-only card has no empty band
+     * under its image.
+     * @internal
+     */
+    get hasFooterContent() {
+        return !!this.querySelector(':scope > [slot="title"], :scope > [slot="description"]');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusin", this.handleFocusChange);
+        this.addEventListener("focusout", this.handleFocusChange);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("focusin", this.handleFocusChange);
+        this.removeEventListener("focusout", this.handleFocusChange);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (this.slottedAnchor) {
+            warnIgnoredHostLinkAttributes(this);
+        }
+    }
     render() {
         const inner = html `
       <slot name="image"></slot>
-      <div id="footer">
-        <slot name="title"></slot>
-        <slot name="description"></slot>
+      <div id="footer" part="footer" ?hidden=${!this.hasFooterContent}>
+        <slot name="title" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="description" @slotchange=${this.handleSlotChange}></slot>
       </div>
-      ${this.renderExternalLinkBadge()}
+      ${this.renderExternalLinkBadge(__classPrivateFieldGet(this, _EunomiaImageCard_newTab, "f").isBlank)}
     `;
         if (this.href) {
             return this.renderCardLink("card", inner);
         }
-        return html `<div id="card" part="card">${inner}</div>`;
+        const anchored = !!this.slottedAnchor;
+        return html `<div
+      id="card"
+      part="card"
+      class=${classMap({
+            "slotted-link": anchored,
+            "focus-visible": anchored && this.anchorFocusVisible,
+        })}
+    >
+      ${inner}
+    </div>`;
     }
 };
+_EunomiaImageCard_newTab = new WeakMap();
 /**
  * Styles to import to the component.
  *
@@ -78,6 +184,9 @@ let EunomiaImageCard = class EunomiaImageCard extends CardLinkMixin(LitElement)
  * @readonly
  */
 EunomiaImageCard.styles = [imageCardStyles, cardLinkStyles];
+__decorate([
+    state()
+], EunomiaImageCard.prototype, "anchorFocusVisible", void 0);
 EunomiaImageCard = __decorate([
     customElement(EunomiaImageCardTagName)
 ], EunomiaImageCard);