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

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

@@ -1,11 +1,12 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { EunomiaDialogInitialFocus } from "../../../mixins/dialog-surface.mixin.js";
 import { ButtonColor } from "../../../mixins/button.mixin.js";
 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
@@ -31,12 +32,13 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the dialog requests a close, subject to the dirty gate
  * @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 {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the modal was opened from the keyboard, and behaves like auto after a click or a touch, so a mobile virtual keyboard doesn't pop up on its own. A slotted autofocus element always wins
  * @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
@@ -53,6 +55,7 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @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-close-offset] - Sets the distance from the top and inline-end edges of the dialog panel to the close button, aligned on the panel padding by default
  * @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
@@ -108,6 +111,21 @@ export declare class EunomiaModal extends EunomiaModal_base {
      * @default false
      */
     hideActions: boolean;
+    /**
+     * Where focus lands on open. `auto` keeps the default target described
+     * on {@link focusInitialElement}. `first-field` focuses the first
+     * focusable element of the body when the modal was opened from the
+     * keyboard, and behaves like `auto` after a click or a touch, so a
+     * mobile virtual keyboard doesn't pop up on its own. A slotted
+     * `[autofocus]` element always wins.
+     * @default auto
+     */
+    initialFocus: EunomiaDialogInitialFocus;
+    /**
+     * The body wrapping the default slot, searched by `initial-focus="first-field"`.
+     * @internal
+     */
+    private readonly bodyEl?;
     /**
      * Shows the top-right close (X) button.
      * @default true
@@ -115,14 +133,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
@@ -136,9 +154,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?
@@ -305,6 +323,13 @@ export declare class EunomiaModal extends EunomiaModal_base {
      * @private
      */
     private readonly stopDialogPropagation;
+    /**
+     * Focuses the body's first focusable element when `initialFocus` is
+     * `first-field` and the latest interaction came from the keyboard.
+     * @returns whether an element was focused.
+     * @private
+     */
+    private focusFirstField;
     /**
      * Focuses the `[autofocus]` slotted element if present, otherwise the
      * cancel button, otherwise the dialog surface itself.

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

@@ -11,8 +11,12 @@ import { ConfirmEvent } from "../../../events/confirm.event.js";
 import { DialogCancelEvent } from "../../../events/dialog-cancel.event.js";
 import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
-import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
+import { DialogSurfaceMixin, } from "../../../mixins/dialog-surface.mixin.js";
+import { getFocusableElements } from "../../../utils/focusable-elements.utils.js";
+import { isKeyboardModality, trackInputModality, } from "../../../utils/input-modality.utils.js";
 import { modalStyles } from "./modal.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the modal component.
  */
@@ -42,12 +46,13 @@ export const EunomiaModalTagName = "eun-modal";
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the dialog requests a close, subject to the dirty gate
  * @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 {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the modal was opened from the keyboard, and behaves like auto after a click or a touch, so a mobile virtual keyboard doesn't pop up on its own. A slotted autofocus element always wins
  * @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
@@ -64,6 +69,7 @@ export const EunomiaModalTagName = "eun-modal";
  * @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-close-offset] - Sets the distance from the top and inline-end edges of the dialog panel to the close button, aligned on the panel padding by default
  * @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
@@ -73,7 +79,7 @@ export const EunomiaModalTagName = "eun-modal";
  * @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);
         /**
@@ -106,31 +112,26 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
          * @default false
          */
         this.hideActions = false;
+        /**
+         * Where focus lands on open. `auto` keeps the default target described
+         * on {@link focusInitialElement}. `first-field` focuses the first
+         * focusable element of the body when the modal was opened from the
+         * keyboard, and behaves like `auto` after a click or a touch, so a
+         * mobile virtual keyboard doesn't pop up on its own. A slotted
+         * `[autofocus]` element always wins.
+         * @default auto
+         */
+        this.initialFocus = "auto";
         /**
          * Shows the top-right close (X) button.
          * @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?
@@ -262,6 +263,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
      */
     connectedCallback() {
         super.connectedCallback?.();
+        trackInputModality();
         this.addEventListener("command", this.handleCommandEvent);
     }
     /**
@@ -365,6 +367,20 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
         this.dirty = false;
         this.cancel();
     }
+    /**
+     * Focuses the body's first focusable element when `initialFocus` is
+     * `first-field` and the latest interaction came from the keyboard.
+     * @returns whether an element was focused.
+     * @private
+     */
+    focusFirstField() {
+        if (this.initialFocus !== "first-field" || !isKeyboardModality()) {
+            return false;
+        }
+        const [first] = this.bodyEl ? getFocusableElements(this.bodyEl) : [];
+        first?.focus();
+        return first !== undefined;
+    }
     /**
      * Focuses the `[autofocus]` slotted element if present, otherwise the
      * cancel button, otherwise the dialog surface itself.
@@ -376,6 +392,9 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
             autofocusTarget.focus();
             return;
         }
+        if (this.focusFirstField()) {
+            return;
+        }
         if (!this.hideActions) {
             this.cancelButtonEl?.focus();
             return;
@@ -449,7 +468,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>
@@ -469,12 +488,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>
@@ -502,10 +523,10 @@ __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" })
+    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
 ], EunomiaModal.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -514,7 +535,13 @@ __decorate([
     property({ type: Boolean, attribute: "hide-actions" })
 ], EunomiaModal.prototype, "hideActions", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ attribute: "initial-focus", reflect: true, useDefault: true })
+], EunomiaModal.prototype, "initialFocus", void 0);
+__decorate([
+    query("#body")
+], EunomiaModal.prototype, "bodyEl", void 0);
+__decorate([
+    property({ converter: defaultTrueConverter, reflect: true })
 ], EunomiaModal.prototype, "closeable", void 0);
 __decorate([
     property({ attribute: "cancel-label" })
@@ -529,8 +556,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

@@ -8,6 +8,7 @@ import { css } from "lit";
  * [--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-close-offset] - Set a custom distance from the top and inline-end edges of the dialog panel to the close button
  * [--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
@@ -19,6 +20,8 @@ import { css } from "lit";
 const base = css `
   :host {
     display: contents;
+    /* Rendered width of the size="xs" close button. */
+    --_closeButtonSize: 26px;
   }
   #surface {
     position: fixed;
@@ -34,10 +37,8 @@ const base = css `
     );
     padding: var(
       --modal-padding,
-      var(--modal-padding-block, var(--eun-space-l, 32px))
+      var(--modal-padding-block, var(--eun-space-m, 16px))
         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;
@@ -112,8 +113,8 @@ const base = css `
   }
   #close-button {
     position: absolute;
-    top: var(--eun-space-s, 8px);
-    right: var(--eun-space-s, 8px);
+    top: var(--modal-close-offset, var(--eun-space-m, 16px));
+    inset-inline-end: var(--modal-close-offset, var(--eun-space-m, 16px));
     z-index: 10;
   }
   #body {
@@ -133,7 +134,17 @@ const base = css `
   }
   #heading {
     margin: 0;
-    padding-inline-end: var(--eun-space-l, 32px);
+    padding-inline-end: max(
+      0px,
+      calc(
+        var(--modal-close-offset, var(--eun-space-m, 16px)) +
+          var(--_closeButtonSize) +
+          var(--eun-space-s, 8px) - var(
+            --modal-padding-inline,
+            var(--eun-space-m, 16px)
+          )
+      )
+    );
     font-size: var(--eun-font-size-l, 18px);
     font-weight: var(--eun-font-weight-l, 700);
     color: var(--eun-text-color, #071621);

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
@@ -90,7 +91,7 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @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.
      *
@@ -152,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.
@@ -425,3 +426,4 @@ declare global {
         [EunomiaToastTagName]: EunomiaToast;
     }
 }
+export {};

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

@@ -13,6 +13,8 @@ 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";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the toast component.
  */
@@ -64,8 +66,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
@@ -89,7 +91,7 @@ const EXIT_FALLBACK_MS = 600;
  * @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);
         /**
@@ -113,11 +115,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.
@@ -503,7 +500,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>
@@ -553,10 +550,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 })
@@ -574,16 +571,16 @@ __decorate([
     property({ attribute: "rich-text" })
 ], EunomiaToast.prototype, "richText", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ converter: defaultTrueConverter, 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);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ converter: defaultTrueConverter, reflect: true })
 ], EunomiaToast.prototype, "open", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })

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

@@ -49,7 +49,7 @@ const base = css `
       visibility 0s linear var(--_transitionDuration);
   }
 
-  :host([open]) {
+  :host([open]:not([open="false"])) {
     visibility: visible;
     opacity: 1;
     --_baseX: 0px;
@@ -60,7 +60,7 @@ const base = css `
       visibility 0s linear 0s;
   }
 
-  :host([open][entering]) {
+  :host([open]:not([open="false"])[entering]) {
     visibility: hidden;
     opacity: 0;
     --_baseX: var(--_enterX, 0px);
@@ -81,7 +81,7 @@ const base = css `
     --_stackSign: 1;
     --_enterY: -24px;
   }
-  :host([position="top-right"]) {
+  :host(:is([position="top-right"], :not([position]))) {
     top: var(--_gapEdge);
     right: var(--_gapEdge);
     --_stackSign: 1;
@@ -126,7 +126,7 @@ const base = css `
     --_enterX: -24px;
     --_enterY: 0px;
   }
-  :host([position="top-right"][slide="horizontal"]),
+  :host(:is([position="top-right"], :not([position]))[slide="horizontal"]),
   :host([position="bottom-right"][slide="horizontal"]) {
     --_enterX: 24px;
     --_enterY: 0px;
@@ -198,8 +198,14 @@ const base = css `
       var(--toast-border-color, var(--_frame, transparent));
     padding: var(
       --toast-padding,
-      var(--toast-padding-block, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
-        var(--toast-padding-inline, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
+      var(
+          --toast-padding-block,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+        var(
+          --toast-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
     );
     border-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
@@ -221,7 +227,7 @@ const base = css `
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #toast {
+  :host(:is([appearance="default"], :not([appearance]))) #toast {
     background: linear-gradient(
       to right,
       var(--toast-border-color, var(--_borderColor)) 4px,
@@ -307,11 +313,14 @@ const base = css `
     --button-text: var(--_onFilled, #fff);
   }
 
-  :host([closeable]) #toast {
+  :host([closeable]:not([closeable="false"])) #toast {
     padding-right: calc(
       var(
           --toast-padding,
-          var(--toast-padding-inline, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw))))
+          var(
+            --toast-padding-inline,
+            max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+          )
         ) +
         var(--eun-space-l, 32px)
     );

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

@@ -128,10 +128,10 @@ let EunomiaBadge = class EunomiaBadge extends LitElement {
  */
 EunomiaBadge.styles = badgeStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaBadge.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaBadge.prototype, "size", void 0);
 __decorate([
     property()

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

@@ -145,7 +145,7 @@ _EunomiaCard_newTab = new WeakMap();
  */
 EunomiaCard.styles = [cardStyles, cardLinkStyles];
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaCard.prototype, "appearance", void 0);
 EunomiaCard = __decorate([
     customElement(EunomiaCardTagName)

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

@@ -84,8 +84,8 @@ const base = css `
     --_hoverBorderDefault: var(--eun-color-primary-500, #3d6fff);
   }
 
-  :host([appearance="default"]) #card:hover,
-  :host([appearance="default"]) #card:focus-visible {
+  :host(:is([appearance="default"], :not([appearance]))) #card:hover,
+  :host(:is([appearance="default"], :not([appearance]))) #card:focus-visible {
     transform: var(--card-hover-transform, var(--_hoverLift));
     background: var(
       --card-hover-background,

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

@@ -70,8 +70,8 @@ declare const EunomiaChip_base: import("../../../utils/constructor.type.js").Con
  * @prop {boolean} [rounded=true] - Whether the chip is fully rounded, as a pill
  * @prop {boolean} [removable=true] - Shows the delete button. Clicking it fires the close event without changing the chip's own rendering
  * @prop {boolean} [disabled=false] - Disables the delete button, preventing removal
- * @prop {string} [ariaLabelRemove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
- * @attr {string} [aria-label-remove] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
+ * @prop {string} [removeLabel] - A prefix combined with the chip's own slotted text to build the delete button's accessible name, such as "Remove Alice Doe", so multiple chips on the same page stay distinguishable to assistive technology. Defaults to the localized string for the current locale (English: "Remove")
+ * @attr {string} [remove-label] - A prefix combined with the chip's own slotted text to build the delete button's accessible name. Defaults to the localized string for the current locale (English: "Remove")
  * @prop {string} [locale] - The locale used to resolve the default accessible label of the delete button. Defaults to the runtime's own
  * @cssprop [--chip-background-color] - Sets the background color of the chip, for every appearance, color and severity
  * @cssprop [--chip-border-color] - Sets the border color of the chip, for every appearance, color and severity
@@ -182,7 +182,7 @@ export declare class EunomiaChip extends EunomiaChip_base {
      * unless the consumer overrides it explicitly.
      * @default {i18n:chip.remove}
      */
-    ariaLabelRemove?: string;
+    removeLabel?: string;
     /**
      * The chip's current slotted label text, trimmed ; tracked so the delete
      * button's accessible name can include it (see {@link getRemoveLabel}).
@@ -224,7 +224,7 @@ export declare class EunomiaChip extends EunomiaChip_base {
     private readonly handleRemove;
     /**
      * Builds the delete button's accessible name : the chip's own slotted
-     * text appended to `ariaLabelRemove` (or its locale-resolved fallback),
+     * text appended to `removeLabel` (or its locale-resolved fallback),
      * so multiple chips on the same page stay distinguishable from one
      * another by sound alone. Falls back to that prefix alone when there's
      * no label text yet.