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

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

@@ -3,9 +3,10 @@ import { css } from "lit";
  * Base style for the alert component.
  *
  * Custom css variables:
- * [--alert-background-color] - Set a custom background color when `severity` is unset
- * [--alert-border-color] - Set a custom border color (outline type, and the default type's leading accent) when `severity` is unset
- * [--alert-color] - Set a custom heading/icon color when `severity` is unset ; the icon always matches this unless --alert-icon-color overrides it
+ * [--alert-background-color] - Set a custom background color, for every appearance and severity
+ * [--alert-border-color] - Set a custom border color, for every appearance and severity : the leading accent of the default appearance, and the border of every other one
+ * [--alert-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --alert-border-color is set
+ * [--alert-color] - Set a custom heading/icon/link color, for every appearance and severity ; the icon always matches this unless --alert-icon-color overrides it
  * [--alert-icon-color] - Set a custom icon color only, independent of the heading — defaults to matching --alert-color/the severity accent
  * [--alert-content-color] - Set a custom color for the description/action content, independent of the heading/icon color
  * [--alert-border-radius] - Set a custom border radius
@@ -23,16 +24,10 @@ const base = css `
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --alert-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-surface-sunken, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --alert-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--alert-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -59,7 +54,8 @@ const base = css `
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
-    --_background: var(--eun-color-grey-200, #ecedf0);
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
+    --_background: var(--eun-surface-sunken-strong, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
     --_titleColor: var(--eun-color-grey-700, #484e61);
@@ -74,9 +70,18 @@ const base = css `
     row-gap: var(--alert-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--alert-padding, var(--eun-space-m, 16px));
-    border-radius: var(--alert-border-radius, var(--eun-borderRadius-m, 8px));
-    font-size: var(--eun-fontSize-s, 14px);
+    --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
+    /* Every appearance carries the same border box (transparent unless
+       drawn), taken out of the padding, so switching appearance or adding a
+       --alert-border-* never changes the size. */
+    border: var(--_bw) solid
+      var(--alert-border-color, var(--_frame, transparent));
+    padding: var(
+      --alert-padding,
+      max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+    );
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--alert-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -90,44 +95,53 @@ const base = css `
   :host([appearance="default"]) #alert {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--_background) 4px
+      var(--alert-border-color, var(--_borderColor)) 4px,
+      var(--alert-background-color, var(--_background)) 4px
     );
   }
   :host([appearance="flat"]) #alert {
-    background: var(--_background);
+    background: var(--alert-background-color, var(--_background));
   }
   :host([appearance="outline"]) #alert {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(
+      --alert-background-color,
+      var(--eun-surface-color, #ffffff)
+    );
   }
   :host([appearance="fill"]) #alert {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--alert-content-color, #fff);
+    background: var(--alert-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--alert-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, var(--_titleColor));
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_titleColor))
+    );
     grid-column: 1;
     grid-row: 1;
     align-self: center;
     display: flex;
   }
   :host([appearance="fill"]) slot[name="icon"] {
-    --icon-color: var(--alert-icon-color, #fff);
+    --icon-color: var(
+      --alert-icon-color,
+      var(--alert-color, var(--_onFilled, #fff))
+    );
   }
   #heading {
     grid-column: 2;
     grid-row: 1;
     align-self: center;
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   #description,
@@ -145,7 +159,10 @@ const base = css `
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--alert-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--alert-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -162,15 +179,19 @@ const base = css `
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #alert {
     padding-right: calc(
-      var(--alert-padding, var(--eun-space-m, 16px)) + var(--eun-space-l, 32px)
+      var(
+          --alert-padding,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        ) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -179,7 +200,7 @@ const base = css `
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--alert-color, var(--_titleColor));
     --button-focus-outline: var(
       --alert-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -188,7 +209,7 @@ const base = css `
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--alert-color, var(--_onFilled, #fff));
   }
 `;
 export const alertStyles = base;

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

@@ -105,8 +105,8 @@ const base = css `
   }
   #heading {
     margin: 0;
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: inherit;
   }
   #close-button {
@@ -117,7 +117,7 @@ const base = css `
     min-height: 0;
     overflow-y: auto;
     padding: var(--_gap) var(--_padding);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
     flex: none;

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

@@ -44,7 +44,7 @@ const base = css `
     color: var(--eun-text-color, #071621);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     border: none;
-    border-radius: var(--modal-border-radius, var(--eun-borderRadius-l, 12px));
+    border-radius: var(--modal-border-radius, var(--eun-border-radius-l, 12px));
     box-shadow: var(
       --eun-shadow-l,
       rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
@@ -112,26 +112,26 @@ const base = css `
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   #header {
     flex: none;
     padding-bottom: var(--modal-gap, var(--eun-space-s, 8px));
     border-bottom: var(
       --modal-header-border,
-      var(--eun-borderWidth-m, 1.5px) solid var(--eun-border-color, #dee0e7)
+      var(--eun-border-width-m, 1.5px) solid var(--eun-border-color, #dee0e7)
     );
   }
   #heading {
     margin: 0;
     padding-inline-end: var(--eun-space-l, 32px);
-    font-size: var(--eun-fontSize-l, 18px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-l, 18px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-text-color, #071621);
   }
   #description {
     margin: var(--eun-space-xs, 4px) 0 0;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     color: var(--eun-text-secondary, #484e61);
   }
   #actions {

package/dist/components/alert/toast/toast.d.ts

@@ -74,9 +74,10 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
  * @cssprop [--toast-width] - Sets the width of the toast
  * @cssprop [--toast-transition-duration] - Sets the duration of the enter, exit, and stack reflow transitions
- * @cssprop [--toast-background-color] - Sets the background color when severity is unset
- * @cssprop [--toast-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--toast-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless toast-icon-color overrides it
+ * @cssprop [--toast-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--toast-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--toast-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--toast-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless toast-icon-color overrides it
  * @cssprop [--toast-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching toast-color or the severity accent
  * @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

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

@@ -73,9 +73,10 @@ const EXIT_FALLBACK_MS = 600;
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
  * @cssprop [--toast-width] - Sets the width of the toast
  * @cssprop [--toast-transition-duration] - Sets the duration of the enter, exit, and stack reflow transitions
- * @cssprop [--toast-background-color] - Sets the background color when severity is unset
- * @cssprop [--toast-border-color] - Sets the border color when severity is unset, for the outline appearance
- * @cssprop [--toast-color] - Sets the heading and icon color when severity is unset. The icon always matches this unless toast-icon-color overrides it
+ * @cssprop [--toast-background-color] - Sets the background color, for every appearance and severity
+ * @cssprop [--toast-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
+ * @cssprop [--toast-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
+ * @cssprop [--toast-color] - Sets the heading, icon and link color, for every appearance and severity. The icon always matches this unless toast-icon-color overrides it
  * @cssprop [--toast-icon-color] - Sets the icon color only, independently of the heading. Defaults to matching toast-color or the severity accent
  * @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

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

@@ -8,9 +8,10 @@ import { css } from "lit";
  * [--toast-stack-gap] - Set a custom gap between stacked toasts sharing the same `position` ; read by `toast-stack.utils.ts` itself, not just CSS
  * [--toast-width] - Set a custom width
  * [--toast-transition-duration] - Set a custom duration for the enter/exit and stack-reflow transitions
- * [--toast-background-color] - Set a custom background color when `severity` is unset
- * [--toast-border-color] - Set a custom border color (outline type) when `severity` is unset
- * [--toast-color] - Set a custom heading/icon color when `severity` is unset ; the icon always matches this unless --toast-icon-color overrides it
+ * [--toast-background-color] - Set a custom background color, for every appearance and severity
+ * [--toast-border-color] - Set a custom border color, for every appearance and severity : the leading accent of the default appearance, and the border of every other one
+ * [--toast-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --toast-border-color is set
+ * [--toast-color] - Set a custom heading/icon/link color, for every appearance and severity ; the icon always matches this unless --toast-icon-color overrides it
  * [--toast-icon-color] - Set a custom icon color only, independent of the heading — defaults to matching --toast-color
  * [--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
@@ -138,16 +139,10 @@ const base = css `
   }
 
   :host(:not([severity])) {
-    --_background: var(
-      --toast-background-color,
-      var(--eun-color-grey-100, #f7f8fa)
-    );
+    --_background: var(--eun-color-grey-100, #f7f8fa);
     --_backgroundFilled: var(--_background);
-    --_borderColor: var(
-      --toast-border-color,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --_titleColor: var(--toast-color, var(--eun-text-color, #071621));
+    --_borderColor: var(--eun-color-grey-300, #dee0e7);
+    --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
     --_background: var(--eun-color-info-30, #f0f7fa);
@@ -174,6 +169,7 @@ const base = css `
     --_titleColor: var(--eun-color-critical-100, #aa0014);
   }
   :host([severity="neutral"]) {
+    --_onFilled: var(--eun-color-grey-0, #ffffff);
     --_background: var(--eun-color-grey-200, #ecedf0);
     --_backgroundFilled: var(--eun-color-grey-700, #484e61);
     --_borderColor: var(--eun-color-grey-700, #484e61);
@@ -189,8 +185,13 @@ const base = css `
     row-gap: var(--toast-row-gap, var(--eun-space-s, 8px));
     width: 100%;
     box-sizing: border-box;
-    padding: var(--toast-padding, var(--eun-space-m, 16px));
-    border-radius: var(--toast-border-radius, var(--eun-borderRadius-m, 8px));
+    --_bw: var(--toast-border-width, var(--eun-border-width-s, 1px));
+    /* 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-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
       --toast-shadow,
       var(
@@ -199,7 +200,7 @@ const base = css `
         rgba(0, 0, 0, 0.05) 0 4px 6px -2px
       )
     );
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     --_contentColor: var(--toast-content-color, var(--eun-text-color, #071621));
     color: var(--_contentColor);
   }
@@ -213,42 +214,42 @@ const base = css `
   :host([appearance="default"]) #toast {
     background: linear-gradient(
       to right,
-      var(--_borderColor) 4px,
-      var(--eun-surface-color, #ffffff) 4px
+      var(--toast-border-color, var(--_borderColor)) 4px,
+      var(--toast-background-color, var(--eun-surface-color, #ffffff)) 4px
     );
   }
   :host([appearance="flat"]) #toast {
-    background: var(--_background);
+    background: var(--toast-background-color, var(--_background));
   }
   :host([appearance="outline"]) #toast {
-    background: var(--eun-surface-color, #ffffff);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    --_frame: var(--_borderColor);
+    background: var(--toast-background-color, var(--eun-surface-color, #ffffff));
   }
   :host([appearance="fill"]) #toast {
-    background: var(--_backgroundFilled);
-    --_contentColor: var(--toast-content-color, #fff);
+    background: var(--toast-background-color, var(--_backgroundFilled));
+    --_contentColor: var(--toast-content-color, var(--_onFilled, #fff));
   }
 
   #heading {
-    color: var(--_titleColor);
-    font-weight: var(--eun-fontWeight-l, 700);
+    color: var(--toast-color, var(--_titleColor));
+    font-weight: var(--eun-font-weight-l, 700);
     grid-column: 2;
     grid-row: 1;
     align-self: center;
   }
   :host([appearance="fill"]) #heading {
-    color: #fff;
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   slot[name="icon"] {
-    --icon-color: var(--toast-icon-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, #fff);
+    --icon-color: var(--toast-icon-color, var(--toast-color, var(--_onFilled, #fff)));
   }
 
   #description,
@@ -266,7 +267,10 @@ const base = css `
     margin-block-end: 0;
   }
   #rich-text a {
-    color: var(--_titleColor);
+    color: var(--toast-color, var(--_titleColor));
+  }
+  :host([appearance="fill"]) #rich-text a {
+    color: var(--toast-color, var(--_onFilled, #fff));
   }
 
   ::slotted([slot="description"]) {
@@ -277,16 +281,17 @@ const base = css `
     display: inline-block;
   }
   :host([appearance="fill"]) ::slotted([slot="action"]) {
-    --link-color: #fff;
-    --link-color-hover: #fff;
-    --link-color-visited: #fff;
-    --link-color-visited-hover: #fff;
-    --button-text: #fff;
+    --link-color: var(--_onFilled, #fff);
+    --link-color-hover: var(--_onFilled, #fff);
+    --link-color-visited: var(--_onFilled, #fff);
+    --link-color-visited-hover: var(--_onFilled, #fff);
+    --button-text: var(--_onFilled, #fff);
   }
 
   :host([closeable]) #toast {
     padding-right: calc(
-      var(--toast-padding, var(--eun-space-s, 8px)) + var(--eun-space-l, 32px)
+      var(--toast-padding, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))) +
+        var(--eun-space-l, 32px)
     );
   }
   #close-button {
@@ -295,7 +300,7 @@ const base = css `
     display: flex;
     top: var(--eun-space-s, 8px);
     right: var(--eun-space-s, 8px);
-    --button-text: var(--_titleColor);
+    --button-text: var(--toast-color, var(--_titleColor));
     --button-focus-outline: var(
       --toast-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -304,7 +309,7 @@ const base = css `
     justify-content: center;
   }
   :host([appearance="fill"]) #close-button {
-    --button-text: #fff;
+    --button-text: var(--toast-color, var(--_onFilled, #fff));
   }
 
   @media (prefers-reduced-motion: reduce) {

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;

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

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

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

@@ -36,15 +36,15 @@ export const EunomiaCardTagName = "eun-card";
  * @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 the default appearance only. 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

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,
@@ -72,19 +81,27 @@ const base = css `
       --card-hover-background,
       var(--card-background, var(--eun-surface-color, #ffffff))
     );
-    border-color: var(
-      --card-hover-border-color,
-      var(--eun-color-primary-500, #3d6fff)
-    );
   }
 
   :host([appearance="fill"]) #card,
   :host([appearance="raised"]) #card {
-    border: none;
+    border-color: var(--card-border-color, transparent);
+  }
+
+  :host([appearance="fill"]) #card:hover,
+  :host([appearance="fill"]) #card:focus-visible,
+  :host([appearance="raised"]) #card:hover,
+  :host([appearance="raised"]) #card:focus-visible,
+  #card:hover,
+  #card:focus-visible {
+    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 {
@@ -98,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)
     );
   }
 

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

@@ -30,7 +30,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

@@ -39,7 +39,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