@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -59,7 +59,10 @@ export const toggleItemStyles = css `
     background: var(--_hoverBackground);
   }
   :host(:focus-visible) #item {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --toggle-group-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 2px;
     transition:
       outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
@@ -144,7 +147,10 @@ export const toggleItemStyles = css `
   }
   :host([appearance="outline"]:focus-visible) #item,
   :host([appearance="flat"]:focus-visible) #item {
-    outline-color: var(--_variantColor);
+    outline-color: var(
+      --toggle-group-focus-outline-color,
+      var(--_variantColor)
+    );
     color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,

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

@@ -35,6 +35,7 @@ declare const EunomiaToggle_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--toggle-active-color] - Sets the text color while pressed. Ignored while swap is set
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
+ * @cssprop [--toggle-focus-outline-color] - Sets the keyboard focus outline color
  * @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

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

@@ -44,6 +44,7 @@ export const EunomiaToggleTagName = "eun-toggle";
  * @cssprop [--toggle-active-color] - Sets the text color while pressed. Ignored while swap is set
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
+ * @cssprop [--toggle-focus-outline-color] - Sets the keyboard focus outline color
  * @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

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

@@ -15,6 +15,7 @@
  * [--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-focus-outline-color] - Set a custom keyboard focus outline color
  * [--toggle-shadow] - Set a custom box shadow, none by default
  * [--toggle-shadow-hover] - Set a custom box shadow on hover state, falls back to `--toggle-shadow`
  */

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

@@ -16,6 +16,7 @@ import { css } from "lit";
  * [--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-focus-outline-color] - Set a custom keyboard focus outline color
  * [--toggle-shadow] - Set a custom box shadow, none by default
  * [--toggle-shadow-hover] - Set a custom box shadow on hover state, falls back to `--toggle-shadow`
  */
@@ -74,7 +75,10 @@ export const toggleStyles = css `
     background: var(--_hoverBackground);
   }
   :host(:focus-visible) #toggle {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --toggle-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 2px;
     transition:
       outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),

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

@@ -29,17 +29,17 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @slot confirm-close - Optional custom content for the internal discard confirmation dialog, rendered below its heading and description
  * @prop {'start' | 'end'} [position='end'] - Which edge the drawer slides in from
  * @prop {string} heading - An optional heading, rendered as the header slot's fallback content
- * @prop {boolean} [closeable=true] - Whether the close button renders
+ * @prop {boolean} [closeable=false] - Whether the close button renders
  * @prop {boolean} [open=false] - Whether the drawer is open
- * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
+ * @prop {boolean} [closeOnBackdrop=false] - 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 {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the drawer 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 {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
- * @attr {string} confirm-close-description - The description of the internal discard confirmation dialog
+ * @prop {string} [confirmCloseHeading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @attr {string} [confirm-close-heading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @prop {string} [confirmCloseDescription] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
+ * @attr {string} [confirm-close-description] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
  * @prop {string} [confirmCloseCancelLabel] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @attr {string} [confirm-close-cancel-label] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @prop {string} [confirmCloseConfirmLabel] - The confirm label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard")
@@ -80,7 +80,7 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
     heading?: string;
     /**
      * Whether the close (X) button renders.
-     * @default true
+     * @default false
      */
     closeable: boolean;
     /**
@@ -91,7 +91,7 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
     /**
      * Whether clicking outside the drawer requests a close (subject to the
      * `dirty` gate).
-     * @default true
+     * @default false
      */
     closeOnBackdrop: boolean;
     /**
@@ -122,14 +122,15 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
     closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
-     * @default Discard changes?
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmCloseHeading: string;
+    confirmCloseHeading?: string;
     /**
-     * Description of the internal discard-confirmation dialog.
-     * @default You have unsaved changes. This action can't be undone.
+     * Description of the internal discard-confirmation dialog, hidden when
+     * empty. Falls back to the localized string for the current locale when
+     * unset.
      */
-    confirmCloseDescription: string;
+    confirmCloseDescription?: string;
     /**
      * Cancel label of the internal discard-confirmation dialog.
      * Falls back to the localized string for the current locale when unset.

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

@@ -15,7 +15,6 @@ import { getFocusableElements } from "../../../utils/focusable-elements.utils.js
 import { isKeyboardModality, trackInputModality, } from "../../../utils/input-modality.utils.js";
 import { drawerStyles } from "./drawer.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the drawer component.
  */
@@ -40,17 +39,17 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @slot confirm-close - Optional custom content for the internal discard confirmation dialog, rendered below its heading and description
  * @prop {'start' | 'end'} [position='end'] - Which edge the drawer slides in from
  * @prop {string} heading - An optional heading, rendered as the header slot's fallback content
- * @prop {boolean} [closeable=true] - Whether the close button renders
+ * @prop {boolean} [closeable=false] - Whether the close button renders
  * @prop {boolean} [open=false] - Whether the drawer is open
- * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
+ * @prop {boolean} [closeOnBackdrop=false] - 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 {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the drawer 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 {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
- * @attr {string} confirm-close-description - The description of the internal discard confirmation dialog
+ * @prop {string} [confirmCloseHeading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @attr {string} [confirm-close-heading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @prop {string} [confirmCloseDescription] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
+ * @attr {string} [confirm-close-description] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
  * @prop {string} [confirmCloseCancelLabel] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @attr {string} [confirm-close-cancel-label] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @prop {string} [confirmCloseConfirmLabel] - The confirm label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard")
@@ -80,9 +79,9 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
         this.position = "end";
         /**
          * Whether the close (X) button renders.
-         * @default true
+         * @default false
          */
-        this.closeable = true;
+        this.closeable = false;
         /**
          * Whether the drawer is open.
          * @default false
@@ -91,9 +90,9 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
         /**
          * Whether clicking outside the drawer requests a close (subject to the
          * `dirty` gate).
-         * @default true
+         * @default false
          */
-        this.closeOnBackdrop = true;
+        this.closeOnBackdrop = false;
         /**
          * Marks the drawer as having unsaved changes, gating any close attempt
          * behind a confirmation dialog.
@@ -110,16 +109,6 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
          * @default auto
          */
         this.initialFocus = "auto";
-        /**
-         * Heading of the internal discard-confirmation dialog.
-         * @default Discard changes?
-         */
-        this.confirmCloseHeading = "Discard changes?";
-        /**
-         * Description of the internal discard-confirmation dialog.
-         * @default You have unsaved changes. This action can't be undone.
-         */
-        this.confirmCloseDescription = "You have unsaved changes. This action can't be undone.";
         /**
          * Whether the internal discard-confirmation `eun-modal` has ever been
          * needed and should be part of the render output. Mounted lazily — the
@@ -244,7 +233,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
      */
     disconnectedCallback() {
         this.removeEventListener("command", this.handleCommandEvent);
-        this.teardownDialogSurface(this.open);
+        this.teardownDialogSurface();
         super.disconnectedCallback?.();
     }
     /**
@@ -439,11 +428,16 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
      * @private
      */
     renderConfirmCloseModal() {
+        const description = this.confirmCloseDescription ??
+            this.dictionary.common.discardChangesDescription;
         return html `
       <eun-modal
         id="confirm-close-modal"
         kind="alert"
-        heading=${this.confirmCloseHeading}
+        closeable
+        close-on-backdrop
+        heading=${this.confirmCloseHeading ??
+            this.dictionary.common.discardChangesHeading}
         cancel-label=${this.confirmCloseCancelLabel ??
             this.dictionary.common.keepEditing}
         confirm-label=${this.confirmCloseConfirmLabel ??
@@ -452,9 +446,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
-        ${this.confirmCloseDescription
-            ? html `<p>${this.confirmCloseDescription}</p>`
-            : nothing}
+        ${description ? html `<p>${description}</p>` : nothing}
         <slot name="confirm-close"></slot>
       </eun-modal>
     `;
@@ -519,13 +511,13 @@ __decorate([
     property()
 ], EunomiaDrawer.prototype, "heading", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter })
+    property({ type: Boolean })
 ], EunomiaDrawer.prototype, "closeable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "open", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
+    property({ type: Boolean, attribute: "close-on-backdrop" })
 ], EunomiaDrawer.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -29,20 +29,20 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @attr {string} aria-label - The accessible name of the dialog when no visible heading is set, such as a flush search shell. Ignored once heading is set, since that already provides one
  * @prop {string} description - An optional short description, rendered below the heading
  * @prop {'dialog' | 'alert' | 'search'} [kind='dialog'] - Alert renders the dialog as an alert dialog, for destructive or blocking confirmations. Search removes the surface's default padding for a flush command palette layout
- * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the dialog requests a close, subject to the dirty gate
+ * @prop {boolean} [closeOnBackdrop=false] - 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 {boolean} [closeable=false] - Shows the close button in the top right corner
  * @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} [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
- * @attr {string} confirm-close-description - The description of the internal discard confirmation dialog
+ * @prop {string} [confirmCloseHeading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @attr {string} [confirm-close-heading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @prop {string} [confirmCloseDescription] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
+ * @attr {string} [confirm-close-description] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
  * @prop {string} [confirmCloseCancelLabel] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @attr {string} [confirm-close-cancel-label] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @prop {string} [confirmCloseConfirmLabel] - The confirm label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard")
@@ -97,7 +97,7 @@ export declare class EunomiaModal extends EunomiaModal_base {
     kind: "dialog" | "alert" | "search";
     /**
      * Whether clicking outside the dialog closes it.
-     * @default true
+     * @default false
      */
     closeOnBackdrop: boolean;
     /**
@@ -128,7 +128,7 @@ export declare class EunomiaModal extends EunomiaModal_base {
     private readonly bodyEl?;
     /**
      * Shows the top-right close (X) button.
-     * @default true
+     * @default false
      */
     closeable: boolean;
     /**
@@ -159,14 +159,15 @@ export declare class EunomiaModal extends EunomiaModal_base {
     closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
-     * @default Discard changes?
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmCloseHeading: string;
+    confirmCloseHeading?: string;
     /**
-     * Description of the internal discard-confirmation dialog.
-     * @default You have unsaved changes. This action can't be undone.
+     * Description of the internal discard-confirmation dialog, hidden when
+     * empty. Falls back to the localized string for the current locale when
+     * unset.
      */
-    confirmCloseDescription: string;
+    confirmCloseDescription?: string;
     /**
      * Cancel label of the internal discard-confirmation dialog.
      * Falls back to the localized string for the current locale when unset.

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

@@ -16,7 +16,6 @@ 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.
  */
@@ -43,20 +42,20 @@ export const EunomiaModalTagName = "eun-modal";
  * @attr {string} aria-label - The accessible name of the dialog when no visible heading is set, such as a flush search shell. Ignored once heading is set, since that already provides one
  * @prop {string} description - An optional short description, rendered below the heading
  * @prop {'dialog' | 'alert' | 'search'} [kind='dialog'] - Alert renders the dialog as an alert dialog, for destructive or blocking confirmations. Search removes the surface's default padding for a flush command palette layout
- * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the dialog requests a close, subject to the dirty gate
+ * @prop {boolean} [closeOnBackdrop=false] - 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 {boolean} [closeable=false] - Shows the close button in the top right corner
  * @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} [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
- * @attr {string} confirm-close-description - The description of the internal discard confirmation dialog
+ * @prop {string} [confirmCloseHeading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @attr {string} [confirm-close-heading] - The heading of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard changes?")
+ * @prop {string} [confirmCloseDescription] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
+ * @attr {string} [confirm-close-description] - The description of the internal discard confirmation dialog, hidden when empty. Defaults to the localized string for the current locale (English: "You have unsaved changes. This action can't be undone.")
  * @prop {string} [confirmCloseCancelLabel] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @attr {string} [confirm-close-cancel-label] - The cancel label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Keep editing")
  * @prop {string} [confirmCloseConfirmLabel] - The confirm label of the internal discard confirmation dialog. Defaults to the localized string for the current locale (English: "Discard")
@@ -98,9 +97,9 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
         this.kind = "dialog";
         /**
          * Whether clicking outside the dialog closes it.
-         * @default true
+         * @default false
          */
-        this.closeOnBackdrop = true;
+        this.closeOnBackdrop = false;
         /**
          * Marks the modal as having unsaved changes, gating any close attempt
          * behind a confirmation dialog.
@@ -124,24 +123,14 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
         this.initialFocus = "auto";
         /**
          * Shows the top-right close (X) button.
-         * @default true
+         * @default false
          */
-        this.closeable = true;
+        this.closeable = false;
         /**
          * Color of the default confirm button.
          * @default primary
          */
         this.confirmColor = "primary";
-        /**
-         * Heading of the internal discard-confirmation dialog.
-         * @default Discard changes?
-         */
-        this.confirmCloseHeading = "Discard changes?";
-        /**
-         * Description of the internal discard-confirmation dialog.
-         * @default You have unsaved changes. This action can't be undone.
-         */
-        this.confirmCloseDescription = "You have unsaved changes. This action can't be undone.";
         /**
          * Whether the internal discard-confirmation dialog has ever been needed
          * and should be part of the render output. Mounted lazily — the first
@@ -262,7 +251,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
      */
     disconnectedCallback() {
         this.removeEventListener("command", this.handleCommandEvent);
-        this.teardownDialogSurface(this.open);
+        this.teardownDialogSurface();
         super.disconnectedCallback?.();
     }
     /**
@@ -416,11 +405,16 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
      * @private
      */
     renderConfirmCloseModal() {
+        const description = this.confirmCloseDescription ??
+            this.dictionary.common.discardChangesDescription;
         return html `
       <eun-modal
         id="confirm-close-modal"
         kind="alert"
-        heading=${this.confirmCloseHeading}
+        closeable
+        close-on-backdrop
+        heading=${this.confirmCloseHeading ??
+            this.dictionary.common.discardChangesHeading}
         cancel-label=${this.confirmCloseCancelLabel ??
             this.dictionary.common.keepEditing}
         confirm-label=${this.confirmCloseConfirmLabel ??
@@ -429,9 +423,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
-        ${this.confirmCloseDescription
-            ? html `<p>${this.confirmCloseDescription}</p>`
-            : nothing}
+        ${description ? html `<p>${description}</p>` : nothing}
         <slot name="confirm-close"></slot>
       </eun-modal>
     `;
@@ -518,7 +510,7 @@ __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaModal.prototype, "kind", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
+    property({ type: Boolean, attribute: "close-on-backdrop" })
 ], EunomiaModal.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -533,7 +525,7 @@ __decorate([
     query("#body")
 ], EunomiaModal.prototype, "bodyEl", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], EunomiaModal.prototype, "closeable", void 0);
 __decorate([
     property({ attribute: "cancel-label" })

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

@@ -152,7 +152,7 @@ const base = css `
   #description {
     margin: var(--eun-space-xs, 4px) 0 0;
     font-size: var(--eun-font-size-s, 14px);
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
   #actions {
     flex: none;

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

@@ -65,11 +65,11 @@ declare const EunomiaToast_base: import("../../../utils/constructor.type.js").Co
  * @attr {boolean} [hide-icon=false] - Hides the icon entirely
  * @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 {boolean} [closeable=false] - 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} [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
+ * @prop {boolean} [open=false] - Whether the toast is currently shown. Left off, the toast is inserted closed until show is called
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast, only used where the top layer is not supported
  * @cssprop [--toast-viewport-gap] - Sets the distance between the toast and the screen edges its position anchors to
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
@@ -148,7 +148,7 @@ export declare class EunomiaToast extends EunomiaToast_base {
     /**
      * Shows a close button. Forced to render regardless of this value when
      * `severity` is `critical`.
-     * @default true
+     * @default false
      */
     closeable: boolean;
     /**
@@ -164,7 +164,7 @@ export declare class EunomiaToast extends EunomiaToast_base {
     duration: number;
     /**
      * Whether the toast is currently shown.
-     * @default true
+     * @default false
      */
     open: boolean;
     /**
@@ -249,7 +249,7 @@ export declare class EunomiaToast extends EunomiaToast_base {
     private enteringFrameId?;
     /**
      * Lifecycle callback triggered when the component connects to the DOM.
-     * A toast typically starts life already `open` (its default), with no
+     * A toast inserted with `open` starts life already shown, with no
      * prior "closed" paint for a plain CSS transition to animate away from —
      * unlike a later {@link show}, which always toggles from an already-
      * rendered closed state. Without `@starting-style` (dropped elsewhere in

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

@@ -15,7 +15,6 @@ import { addDialogOverlay, removeDialogOverlay, } from "../../../utils/dialog-st
 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.
  */
@@ -66,11 +65,11 @@ const EXIT_FALLBACK_MS = 600;
  * @attr {boolean} [hide-icon=false] - Hides the icon entirely
  * @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 {boolean} [closeable=false] - 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} [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
+ * @prop {boolean} [open=false] - Whether the toast is currently shown. Left off, the toast is inserted closed until show is called
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast, only used where the top layer is not supported
  * @cssprop [--toast-viewport-gap] - Sets the distance between the toast and the screen edges its position anchors to
  * @cssprop [--toast-stack-gap] - Sets the gap between stacked toasts sharing the same position
@@ -113,9 +112,9 @@ let EunomiaToast = class EunomiaToast extends LocalizableMixin(LitElement) {
         /**
          * Shows a close button. Forced to render regardless of this value when
          * `severity` is `critical`.
-         * @default true
+         * @default false
          */
-        this.closeable = true;
+        this.closeable = false;
         /**
          * Milliseconds before the toast auto-dismisses. `0` disables auto-dismiss
          * entirely, same as `severity="critical"` regardless of this value.
@@ -124,9 +123,9 @@ let EunomiaToast = class EunomiaToast extends LocalizableMixin(LitElement) {
         this.duration = 5000;
         /**
          * Whether the toast is currently shown.
-         * @default true
+         * @default false
          */
-        this.open = true;
+        this.open = false;
         /**
          * Milliseconds left on the auto-dismiss timer — the full `duration` once
          * armed, then whatever remains once paused by hover/focus.
@@ -207,7 +206,7 @@ let EunomiaToast = class EunomiaToast extends LocalizableMixin(LitElement) {
     }
     /**
      * Lifecycle callback triggered when the component connects to the DOM.
-     * A toast typically starts life already `open` (its default), with no
+     * A toast inserted with `open` starts life already shown, with no
      * prior "closed" paint for a plain CSS transition to animate away from —
      * unlike a later {@link show}, which always toggles from an already-
      * rendered closed state. Without `@starting-style` (dropped elsewhere in
@@ -594,7 +593,7 @@ __decorate([
     property({ attribute: "rich-text" })
 ], EunomiaToast.prototype, "richText", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], EunomiaToast.prototype, "closeable", void 0);
 __decorate([
     property({ attribute: "close-label" })
@@ -603,7 +602,7 @@ __decorate([
     property({ type: Number })
 ], EunomiaToast.prototype, "duration", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter, reflect: true })
+    property({ type: Boolean, reflect: true })
 ], EunomiaToast.prototype, "open", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })

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

@@ -57,7 +57,7 @@ const base = css `
       visibility 0s linear var(--_transitionDuration);
   }
 
-  :host([open]:not([open="false"])) {
+  :host([open]) {
     visibility: visible;
     opacity: 1;
     --_baseX: 0px;
@@ -68,7 +68,7 @@ const base = css `
       visibility 0s linear 0s;
   }
 
-  :host([open]:not([open="false"])[entering]) {
+  :host([open][entering]) {
     visibility: hidden;
     opacity: 0;
     --_baseX: var(--_enterX, 0px);
@@ -322,7 +322,7 @@ const base = css `
     --button-text: var(--_onFilled, #fff);
   }
 
-  :host([closeable]:not([closeable="false"])) #toast {
+  :host([closeable]) #toast {
     padding-right: calc(
       var(
           --toast-padding,

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

@@ -150,7 +150,7 @@ const base = css `
     font-size: var(--image-card-description-size, var(--eun-font-size-s, 14px));
     color: var(
       --image-card-description-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
   }