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

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

@@ -12,6 +12,7 @@ import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
 import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { drawerStyles } from "./drawer.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the drawer component.
  */
@@ -40,8 +41,8 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @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
@@ -55,13 +56,15 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @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
  */
-let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
+let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -91,11 +94,6 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
          * @default false
          */
         this.dirty = false;
-        /**
-         * Accessible label of the close (X) button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -166,7 +164,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
                         }
                     },
                 });
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface();
@@ -402,7 +400,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${() => this.requestClose()}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -489,7 +487,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
  */
 EunomiaDrawer.styles = drawerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDrawer.prototype, "position", void 0);
 __decorate([
     property()
@@ -507,8 +505,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "dirty", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaDrawer.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaDrawer.prototype, "closeLabel", void 0);
 __decorate([
     property({ attribute: "confirm-close-heading" })
 ], EunomiaDrawer.prototype, "confirmCloseHeading", void 0);

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

@@ -8,6 +8,8 @@ import { css } from "lit";
  * [--drawer-color] - Set a custom text color to the drawer panel (pair with --drawer-background for contrast)
  * [--drawer-backdrop-color] - Set a custom color to the backdrop behind the drawer
  * [--drawer-padding] - Set a custom padding to the header/body/footer
+ * [--drawer-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --drawer-padding is set
+ * [--drawer-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --drawer-padding is set
  * [--drawer-gap] - Set a custom gap inside the header/footer rows
  * [--drawer-transition-duration] - Set a custom duration for the slide transition
  */
@@ -16,9 +18,19 @@ const base = css `
     --_width: var(--drawer-width, min(420px, 100vw));
     --_background: var(--drawer-background, var(--eun-surface-color, #ffffff));
     --_color: var(--drawer-color, var(--eun-text-color, #071621));
-    --_padding: var(--drawer-padding, var(--eun-space-m, 16px));
+    --_paddingBlock: var(
+      --drawer-padding,
+      var(--drawer-padding-block, var(--eun-space-m, 16px))
+    );
+    --_paddingInline: var(
+      --drawer-padding,
+      var(--drawer-padding-inline, var(--eun-space-m, 16px))
+    );
     --_gap: var(--drawer-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--drawer-transition-duration, 0.25s);
+    --_transitionDuration: var(
+      --drawer-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     --_offset: 1;
     display: contents;
   }
@@ -43,10 +55,14 @@ const base = css `
   }
   #surface::backdrop {
     background-color: rgba(7, 22, 33, 0);
-    transition: background-color var(--_transitionDuration) ease;
+    transition: background-color var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   #surface:popover-open::backdrop {
-    background-color: var(--drawer-backdrop-color, rgba(7, 22, 33, 0.45));
+    background-color: var(
+      --drawer-backdrop-color,
+      var(--eun-backdrop-color, rgba(7, 22, 33, 0.45))
+    );
   }
   @starting-style {
     #surface:popover-open::backdrop {
@@ -56,7 +72,7 @@ const base = css `
   #surface[closing]::backdrop {
     background-color: rgba(7, 22, 33, 0);
   }
-  :host([position="end"]) #surface {
+  :host(:is([position="end"], :not([position]))) #surface {
     justify-content: flex-end;
   }
   :host([position="start"]) #surface {
@@ -67,8 +83,8 @@ const base = css `
     opacity: 1;
     transform: translateX(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);
   }
   #surface[closing] {
     opacity: 0;
@@ -101,7 +117,7 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_padding) var(--_padding) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline) 0;
   }
   #heading {
     margin: 0;
@@ -116,7 +132,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_padding);
+    padding: var(--_gap) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -124,7 +140,7 @@ const base = css `
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    padding: var(--_padding);
+    padding: var(--_paddingBlock) var(--_paddingInline);
   }
 
   #confirm-close-modal {

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

@@ -5,7 +5,7 @@ import { EunomiaModalConfirmColor } from "../../../types/variant.type.js";
  * Tag name of the modal component.
  */
 export declare const EunomiaModalTagName = "eun-modal";
-declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaModal_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 generic, reusable dialog template. Arbitrary content is passed through
  * the default slot. Confirm and cancel are exposed as public methods and
@@ -32,11 +32,11 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @prop {boolean} [dirty=false] - Marks the modal as having unsaved changes, requiring confirmation before any close attempt succeeds
  * @prop {boolean} [hideActions=false] - Hides the default confirm and cancel footer entirely, for fully custom content-driven dialogs
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
- * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
- * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
+ * @prop {string} [cancelLabel] - The label of the default cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [confirmLabel] - The label of the default confirm button. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
- * @prop {string} ariaLabelClose - 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")
  * @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
@@ -51,11 +51,13 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @cssprop [--modal-width] - Sets the width of the dialog panel
  * @cssprop [--modal-max-height] - Sets the maximum height of the dialog panel, defaulting to the viewport height minus a margin. The body scrolls internally once content exceeds it, while the heading, description, and actions stay fixed
  * @cssprop [--modal-padding] - Sets the padding of the dialog panel
+ * @cssprop [--modal-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * @cssprop [--modal-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * @cssprop [--modal-gap] - Sets the gap between the heading, body, and actions blocks
  * @cssprop [--modal-border-radius] - Sets the corner radius of the dialog panel
  * @cssprop [--modal-background] - Sets the background color of the dialog panel
  * @cssprop [--modal-header-border] - Sets the border between the heading and description and the body, or none to remove it. Only visible when heading or description is set
- * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel
+ * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel, --eun-backdrop-color by default
  * @cssprop [--modal-backdrop-blur] - Sets the blur radius applied behind the backdrop. None by default
  * @cssprop [--modal-search-top] - For the search kind only, sets the fixed distance from the top of the viewport to the dialog, since a search dialog never vertically centers and its top edge shouldn't drift as content grows or shrinks
  * @element eun-modal
@@ -113,14 +115,14 @@ export declare class EunomiaModal extends EunomiaModal_base {
     closeable: boolean;
     /**
      * Label of the default cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Label of the default confirm button.
-     * @default Confirm
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Color of the default confirm button.
      * @default primary
@@ -134,9 +136,9 @@ export declare class EunomiaModal extends EunomiaModal_base {
     cancelColor?: ButtonColor;
     /**
      * Aria 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?

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

@@ -13,6 +13,7 @@ import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
 import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { modalStyles } from "./modal.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the modal component.
  */
@@ -43,11 +44,11 @@ export const EunomiaModalTagName = "eun-modal";
  * @prop {boolean} [dirty=false] - Marks the modal as having unsaved changes, requiring confirmation before any close attempt succeeds
  * @prop {boolean} [hideActions=false] - Hides the default confirm and cancel footer entirely, for fully custom content-driven dialogs
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
- * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
- * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
+ * @prop {string} [cancelLabel] - The label of the default cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [confirmLabel] - The label of the default confirm button. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
- * @prop {string} ariaLabelClose - 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")
  * @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
@@ -62,16 +63,18 @@ export const EunomiaModalTagName = "eun-modal";
  * @cssprop [--modal-width] - Sets the width of the dialog panel
  * @cssprop [--modal-max-height] - Sets the maximum height of the dialog panel, defaulting to the viewport height minus a margin. The body scrolls internally once content exceeds it, while the heading, description, and actions stay fixed
  * @cssprop [--modal-padding] - Sets the padding of the dialog panel
+ * @cssprop [--modal-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * @cssprop [--modal-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * @cssprop [--modal-gap] - Sets the gap between the heading, body, and actions blocks
  * @cssprop [--modal-border-radius] - Sets the corner radius of the dialog panel
  * @cssprop [--modal-background] - Sets the background color of the dialog panel
  * @cssprop [--modal-header-border] - Sets the border between the heading and description and the body, or none to remove it. Only visible when heading or description is set
- * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel
+ * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel, --eun-backdrop-color by default
  * @cssprop [--modal-backdrop-blur] - Sets the blur radius applied behind the backdrop. None by default
  * @cssprop [--modal-search-top] - For the search kind only, sets the fixed distance from the top of the viewport to the dialog, since a search dialog never vertically centers and its top edge shouldn't drift as content grows or shrinks
  * @element eun-modal
  */
-let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
+let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -109,26 +112,11 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
          * @default true
          */
         this.closeable = true;
-        /**
-         * Label of the default cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Label of the default confirm button.
-         * @default Confirm
-         */
-        this.confirmLabel = "Confirm";
         /**
          * Color of the default confirm button.
          * @default primary
          */
         this.confirmColor = "primary";
-        /**
-         * Aria label of the close (X) button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -212,7 +200,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                         }
                     },
                 });
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface();
@@ -447,7 +435,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${() => this.requestClose()}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -467,12 +455,14 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                     appearance="ghost"
                     color=${ifDefined(this.cancelColor)}
                     @click=${() => this.requestClose()}
-                    >${this.cancelLabel}</eun-button
+                    >${this.cancelLabel ??
+                this.dictionary.common.cancel}</eun-button
                   >
                   <eun-button
                     color=${this.confirmColor}
                     @click=${() => this.confirm()}
-                    >${this.confirmLabel}</eun-button
+                    >${this.confirmLabel ??
+                this.dictionary.common.confirm}</eun-button
                   >
                 </slot>
               </div>
@@ -500,7 +490,7 @@ __decorate([
     property()
 ], EunomiaModal.prototype, "description", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaModal.prototype, "kind", void 0);
 __decorate([
     property({ type: Boolean, attribute: "close-on-backdrop" })
@@ -527,8 +517,8 @@ __decorate([
     property({ attribute: "cancel-color" })
 ], EunomiaModal.prototype, "cancelColor", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaModal.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaModal.prototype, "closeLabel", void 0);
 __decorate([
     property({ attribute: "confirm-close-heading" })
 ], EunomiaModal.prototype, "confirmCloseHeading", void 0);

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

@@ -6,6 +6,8 @@ import { css } from "lit";
  * [--modal-width] - Set a custom width to the dialog panel
  * [--modal-max-height] - Set a custom max-height to the dialog panel (defaults to the viewport height minus a margin)
  * [--modal-padding] - Set a custom padding to the dialog panel
+ * [--modal-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * [--modal-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * [--modal-gap] - Set a custom gap between the heading/body/actions blocks
  * [--modal-border-radius] - Set a custom border radius to the dialog panel
  * [--modal-background] - Set a custom background color to the dialog panel
@@ -32,8 +34,10 @@ const base = css `
     );
     padding: var(
       --modal-padding,
-      var(--eun-space-l, 32px) var(--eun-space-m, 16px) var(--eun-space-m, 16px)
-        var(--eun-space-l, 32px)
+      var(--modal-padding-block, var(--eun-space-l, 32px))
+        var(--modal-padding-inline, var(--eun-space-m, 16px))
+        var(--modal-padding-block, var(--eun-space-m, 16px))
+        var(--modal-padding-inline, var(--eun-space-l, 32px))
     );
     box-sizing: border-box;
     display: flex;
@@ -55,8 +59,8 @@ const base = css `
     opacity: 0;
     transform: scale(0.96);
     transition:
-      opacity 0.18s ease,
-      transform 0.18s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      transform var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #surface:popover-open {
     visibility: visible;
@@ -83,12 +87,17 @@ const base = css `
     background-color: rgba(7, 22, 33, 0);
     backdrop-filter: blur(0px);
     transition:
-      background-color 0.18s ease,
-      backdrop-filter 0.18s ease;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      backdrop-filter var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   #surface:popover-open::backdrop {
     pointer-events: auto;
-    background-color: var(--modal-backdrop-color, rgba(7, 22, 33, 0.45));
+    background-color: var(
+      --modal-backdrop-color,
+      var(--eun-backdrop-color, rgba(7, 22, 33, 0.45))
+    );
     backdrop-filter: blur(var(--modal-backdrop-blur, 0px));
   }
   @starting-style {

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

@@ -25,6 +25,7 @@ export type EunomiaToastPosition = "top-left" | "top-center" | "top-right" | "ri
  * sides) and ignores this.
  */
 export type EunomiaToastSlide = "vertical" | "horizontal";
+declare const EunomiaToast_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A self-dismissing notification anchored to a screen corner or edge,
  * reporting something that just happened without requiring the user's
@@ -65,8 +66,8 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @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=true] - Shows a close button. Always shown when severity is critical, so an error toast is never left with no way to dismiss it
- * @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")
  * @prop {number} [duration=5000] - Milliseconds before the toast auto-dismisses. Zero, or a critical severity regardless of this value, disables auto-dismiss entirely, requiring a manual close
  * @prop {boolean} [open=true] - Whether the toast is currently shown. Set it to false upfront, or hide it right after inserting, to insert a toast that's already closed
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast
@@ -82,13 +83,15 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @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
  * @cssprop [--toast-focus-outline-color] - Sets the focus outline color of the close button
  * @element eun-toast
  */
-export declare class EunomiaToast extends LitElement {
+export declare class EunomiaToast extends EunomiaToast_base {
     /**
      * Styles to import to the component.
      *
@@ -150,9 +153,9 @@ export declare class EunomiaToast 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;
     /**
      * Milliseconds before the toast auto-dismisses. `0` disables auto-dismiss
      * entirely, same as `severity="critical"` regardless of this value.
@@ -423,3 +426,4 @@ declare global {
         [EunomiaToastTagName]: EunomiaToast;
     }
 }
+export {};

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

@@ -13,6 +13,7 @@ import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { popToast, pushToast } from "../../../utils/toast-stack.utils.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { toastStyles } from "./toast.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the toast component.
  */
@@ -64,8 +65,8 @@ const EXIT_FALLBACK_MS = 600;
  * @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=true] - Shows a close button. Always shown when severity is critical, so an error toast is never left with no way to dismiss it
- * @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")
  * @prop {number} [duration=5000] - Milliseconds before the toast auto-dismisses. Zero, or a critical severity regardless of this value, disables auto-dismiss entirely, requiring a manual close
  * @prop {boolean} [open=true] - Whether the toast is currently shown. Set it to false upfront, or hide it right after inserting, to insert a toast that's already closed
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast
@@ -81,13 +82,15 @@ 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
  * @cssprop [--toast-focus-outline-color] - Sets the focus outline color of the close button
  * @element eun-toast
  */
-let EunomiaToast = class EunomiaToast extends LitElement {
+let EunomiaToast = class EunomiaToast extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -111,11 +114,6 @@ let EunomiaToast = class EunomiaToast extends LitElement {
          * @default true
          */
         this.closeable = true;
-        /**
-         * Accessible label of the close button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Milliseconds before the toast auto-dismisses. `0` disables auto-dismiss
          * entirely, same as `severity="critical"` regardless of this value.
@@ -501,7 +499,7 @@ let EunomiaToast = class EunomiaToast extends LitElement {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${this.handleCloseClick}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -551,10 +549,10 @@ __decorate([
     property({ reflect: true })
 ], EunomiaToast.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToast.prototype, "appearance", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToast.prototype, "position", void 0);
 __decorate([
     property({ reflect: true })
@@ -575,8 +573,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToast.prototype, "closeable", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaToast.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaToast.prototype, "closeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], EunomiaToast.prototype, "duration", void 0);