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

package/dist/components/action/toggle/toggle-group.styles.js

@@ -11,6 +11,8 @@ import { css } from "lit";
  * [--toggle-group-border-radius] - Set a custom border radius for the track and its options
  * [--toggle-group-gap] - Set a custom gap between the options
  * [--toggle-group-padding] - Set a custom padding for the track ; also used as the indicator's inset, so it stays flush with the track's edge. Ignored once `appearance` isn't `default`
+ * [--toggle-group-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * [--toggle-group-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, for every appearance
  * [--toggle-group-hover-background] - Set a custom background color on hover state, for an unselected option ; transparent by default. Applies regardless of `appearance`
  * [--toggle-group-box-shadow] - Set a custom box shadow on the track itself, for every appearance, none by default
@@ -31,11 +33,21 @@ export const toggleGroupStyles = css `
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_trackPaddingBlock: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-block, 4px)
+    );
+    --_trackPaddingInline: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-inline, 4px)
+    );
+    --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
@@ -61,7 +73,7 @@ export const toggleGroupStyles = css `
     display: inline-flex;
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
-    padding: var(--toggle-group-padding, 4px);
+    padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
     border-radius: var(
       --toggle-group-border-radius,
       var(--eun-border-radius-m, 8px)
@@ -91,13 +103,19 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) #scrollable,
   :host([appearance="flat"]) #scrollable {
-    padding: 0;
+    padding: var(--_focusRoom);
+    margin: calc(-1 * var(--_focusRoom));
+    max-width: calc(100% + 2 * var(--_focusRoom));
     background: var(--toggle-group-background, transparent);
     border: none;
   }
+  :host([full][appearance="outline"]) #scrollable,
+  :host([full][appearance="flat"]) #scrollable {
+    width: calc(100% + 2 * var(--_focusRoom));
+  }
   #arrows {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--_focusRoom));
     z-index: 2;
     pointer-events: none;
   }
@@ -108,7 +126,8 @@ export const toggleGroupStyles = css `
     opacity: 0;
     min-width: 24px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -153,8 +172,8 @@ export const toggleGroupStyles = css `
   }
   #indicator {
     position: absolute;
-    top: var(--toggle-group-padding, 4px);
-    bottom: var(--toggle-group-padding, 4px);
+    top: var(--_trackPaddingBlock);
+    bottom: var(--_trackPaddingBlock);
     left: 0;
     width: 0;
     opacity: 0;
@@ -171,13 +190,14 @@ export const toggleGroupStyles = css `
       var(--eun-shadow-xs, rgba(7, 22, 33, 0.08) 0 1px 2px)
     );
     transition:
-      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.15s ease-out;
+      transform var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      width var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      opacity var(--eun-duration-s, 150ms) var(--eun-easing-out, ease-out);
   }
   @media (prefers-reduced-motion: reduce) {
     #indicator {
-      transition: opacity 0.15s ease-out;
+      transition: opacity var(--eun-duration-s, 150ms)
+        var(--eun-easing-out, ease-out);
     }
   }
   button {
@@ -189,7 +209,7 @@ export const toggleGroupStyles = css `
     --_boxShadow: var(--toggle-group-shadow, none);
     --_boxShadow-hover: var(--toggle-group-shadow-hover, var(--_boxShadow));
     --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
-    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -207,7 +227,6 @@ export const toggleGroupStyles = css `
     flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     border: none;
@@ -222,9 +241,10 @@ export const toggleGroupStyles = css `
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host([full]) button,
@@ -245,19 +265,22 @@ export const toggleGroupStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
+  :host(:is([appearance="default"], :not([appearance])))
+    #scrollable:has(#indicator)
+    button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"])
+  :host(:is([appearance="default"], :not([appearance])))
     #scrollable:not(:has(#indicator))
     button.active {
     background: var(
@@ -276,19 +299,19 @@ export const toggleGroupStyles = css `
 
   button[data-color="secondary"] {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
   button[data-color="critical"] {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
   button[data-color="success"] {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
   button[data-color="warning"] {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {

package/dist/components/action/toggle/toggle-item.styles.js

@@ -31,7 +31,6 @@ export const toggleItemStyles = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
@@ -43,9 +42,10 @@ export const toggleItemStyles = css `
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host(:not([disabled]):hover) #item {
@@ -59,9 +59,10 @@ export const toggleItemStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #item {
     cursor: not-allowed;
@@ -85,7 +86,7 @@ export const toggleItemStyles = css `
 
   :host {
     --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
-    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -99,19 +100,19 @@ export const toggleItemStyles = css `
   }
   :host([color="secondary"]) {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
   :host([color="critical"]) {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
   :host([color="success"]) {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
   :host([color="warning"]) {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {

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

@@ -36,6 +36,8 @@ declare const EunomiaToggle_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
  * @cssprop [--toggle-padding] - Sets the padding of the toggle
+ * @cssprop [--toggle-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * @cssprop [--toggle-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * @element eun-toggle
  */
 export declare class EunomiaToggle extends EunomiaToggle_base {

package/dist/components/action/toggle/toggle.js

@@ -45,6 +45,8 @@ export const EunomiaToggleTagName = "eun-toggle";
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
  * @cssprop [--toggle-padding] - Sets the padding of the toggle
+ * @cssprop [--toggle-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * @cssprop [--toggle-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * @element eun-toggle
  */
 let EunomiaToggle = class EunomiaToggle extends DisabledMixin(LitElement) {
@@ -159,7 +161,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggle.prototype, "swap", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToggle.prototype, "appearance", void 0);
 EunomiaToggle = __decorate([
     customElement(EunomiaToggleTagName)

package/dist/components/action/toggle/toggle.styles.d.ts

@@ -11,6 +11,8 @@
  * [--toggle-border-size] - Set a custom border size
  * [--toggle-border-radius] - Set a custom border radius
  * [--toggle-padding] - Set a custom padding
+ * [--toggle-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * [--toggle-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * [--toggle-hover-color] - Set a custom text color on hover state, while not pressed
  * [--toggle-hover-background] - Set a custom background color on hover state, while not pressed ; transparent by default
  * [--toggle-shadow] - Set a custom box shadow, none by default

package/dist/components/action/toggle/toggle.styles.js

@@ -12,6 +12,8 @@ import { css } from "lit";
  * [--toggle-border-size] - Set a custom border size
  * [--toggle-border-radius] - Set a custom border radius
  * [--toggle-padding] - Set a custom padding
+ * [--toggle-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * [--toggle-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * [--toggle-hover-color] - Set a custom text color on hover state, while not pressed
  * [--toggle-hover-background] - Set a custom background color on hover state, while not pressed ; transparent by default
  * [--toggle-shadow] - Set a custom box shadow, none by default
@@ -40,11 +42,11 @@ export const toggleStyles = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
       --toggle-padding,
-      calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
+      var(--toggle-padding-block, calc(var(--eun-space-xs, 4px) * 1.5))
+        var(--toggle-padding-inline, var(--eun-space-m, 16px))
     );
     outline: 2px solid transparent;
     border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
@@ -53,10 +55,11 @@ export const toggleStyles = css `
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   :host(:not([disabled]):hover) #toggle {
     box-shadow: var(--_boxShadow-hover);
@@ -74,8 +77,9 @@ export const toggleStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #toggle {
     cursor: not-allowed;

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

@@ -13,6 +13,7 @@ type AlertSeverity = EunomiaSeverity;
  * All available alert surface treatments.
  */
 type AlertAppearance = EunomiaDisplayAppearance;
+declare const EunomiaAlert_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * An inline banner that relays information to the user without
  * interrupting their current task, such as a form submission result, a
@@ -44,8 +45,8 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-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 [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -54,12 +55,14 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert
  * @cssprop [--alert-padding] - Sets the padding of the alert
+ * @cssprop [--alert-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
- * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-export declare class EunomiaAlert extends LitElement {
+export declare class EunomiaAlert extends EunomiaAlert_base {
     /**
      * Styles to import to the component.
      *
@@ -73,7 +76,8 @@ export declare class EunomiaAlert extends LitElement {
      */
     severity?: AlertSeverity;
     /**
-     * The surface treatment of the alert.
+     * The surface treatment of the alert. The default isn't reflected, so an
+     * SSR framework doesn't see an attribute it never rendered.
      * @default default
      */
     appearance: AlertAppearance;
@@ -106,9 +110,9 @@ export declare class EunomiaAlert extends LitElement {
     closeable: boolean;
     /**
      * Accessible label of the close button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Elements assigned to the `description` slot, if any ; queried live so
      * {@link render} can decide whether the description row should render at

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

@@ -12,6 +12,7 @@ import { CloseEvent } from "../../../events/close.event.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { alertStyles } from "./alert.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the alert component.
  */
@@ -47,8 +48,8 @@ export const EunomiaAlertTagName = "eun-alert";
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-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 [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -57,16 +58,19 @@ export const EunomiaAlertTagName = "eun-alert";
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert
  * @cssprop [--alert-padding] - Sets the padding of the alert
+ * @cssprop [--alert-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
- * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-let EunomiaAlert = class EunomiaAlert extends LitElement {
+let EunomiaAlert = class EunomiaAlert extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
-         * The surface treatment of the alert.
+         * The surface treatment of the alert. The default isn't reflected, so an
+         * SSR framework doesn't see an attribute it never rendered.
          * @default default
          */
         this.appearance = "default";
@@ -81,11 +85,6 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
          * @default false
          */
         this.closeable = false;
-        /**
-         * Accessible label of the close button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Re-renders when a named slot's assigned content changes, so the
          * description/action rows correctly appear/disappear as content is slotted
@@ -177,7 +176,7 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${this.handleClose}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -233,7 +232,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaAlert.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAlert.prototype, "appearance", void 0);
 __decorate([
     property()
@@ -251,8 +250,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaAlert.prototype, "closeable", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaAlert.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaAlert.prototype, "closeLabel", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })
 ], EunomiaAlert.prototype, "descriptionSlotEls", void 0);

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

@@ -11,9 +11,11 @@ import { css } from "lit";
  * [--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
  * [--alert-padding] - Set a custom padding
+ * [--alert-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * [--alert-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * [--alert-gap] - Set a custom gap between the icon column and the heading/content column
  * [--alert-row-gap] - Set a custom gap between the heading, description, and action rows
- * [--alert-focus-outline-color] - Set a custom focus outline color for the close button
+ * [--alert-focus-outline-color] - Set a custom focus outline color for the close button, and for the alert itself when it's given focus
  */
 const base = css `
   :host {
@@ -21,6 +23,12 @@ const base = css `
     width: 100%;
     box-sizing: border-box;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+  }
+  :host(:focus-visible) {
+    outline: 2px solid
+      var(--alert-focus-outline-color, var(--eun-color-primary-500, #3d6fff));
+    outline-offset: 2px;
   }
 
   :host(:not([severity])) {
@@ -30,25 +38,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);
@@ -71,14 +79,18 @@ const base = css `
     width: 100%;
     box-sizing: border-box;
     --_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)))
+      var(
+          --alert-padding-block,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+        var(
+          --alert-padding-inline,
+          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);
@@ -92,12 +104,14 @@ const base = css `
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #alert {
+  :host([appearance="default"]) #alert,
+  :host(:not([appearance])) #alert {
     background: linear-gradient(
-      to right,
-      var(--alert-border-color, var(--_borderColor)) 4px,
-      var(--alert-background-color, var(--_background)) 4px
-    );
+        to right,
+        var(--alert-border-color, var(--_borderColor)) 4px,
+        var(--alert-background-color, var(--_background)) 4px
+      )
+      border-box;
   }
   :host([appearance="flat"]) #alert {
     background: var(--alert-background-color, var(--_background));
@@ -189,7 +203,10 @@ const base = css `
     padding-right: calc(
       var(
           --alert-padding,
-          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+          var(
+            --alert-padding-inline,
+            max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+          )
         ) +
         var(--eun-space-l, 32px)
     );

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

@@ -7,7 +7,7 @@ export declare const EunomiaDrawerTagName = "eun-drawer";
  * Which edge of the viewport the drawer slides in from.
  */
 export type EunomiaDrawerPosition = "start" | "end";
-declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A full-height side panel that behaves as a modal overlay, sliding in from
  * an edge of the screen. It's the same idea as a modal turned into a
@@ -32,8 +32,8 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
- * @prop {string} ariaLabelClose - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -47,8 +47,10 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--drawer-width] - Sets the width of the drawer panel
  * @cssprop [--drawer-background] - Sets the background color of the drawer panel
  * @cssprop [--drawer-color] - Sets the text color of the drawer panel
- * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer
+ * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer, --eun-backdrop-color by default
  * @cssprop [--drawer-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--drawer-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --drawer-padding is set
+ * @cssprop [--drawer-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --drawer-padding is set
  * @cssprop [--drawer-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
@@ -96,9 +98,9 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
     dirty: boolean;
     /**
      * Accessible label of the close (X) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
      * @default Discard changes?