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

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

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { EunomiaDialogInitialFocus } from "../../../mixins/dialog-surface.mixin.js";
 /**
  * Tag name of the drawer component.
  */
@@ -32,6 +33,7 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
+ * @prop {'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
@@ -52,6 +54,7 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @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-header-padding-bottom] - Sets the padding below the header, --drawer-gap by default
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
  */
@@ -96,6 +99,21 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
      * @default false
      */
     dirty: 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 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.
+     * @default auto
+     */
+    initialFocus: EunomiaDialogInitialFocus;
+    /**
+     * The body wrapping the default slot, searched by `initial-focus="first-field"`.
+     * @internal
+     */
+    private readonly bodyEl?;
     /**
      * Accessible label of the close (X) button.
      * Falls back to the localized string for the current locale when unset.
@@ -252,6 +270,13 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
      * @private
      */
     private readonly handleDiscardConfirmed;
+    /**
+     * 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
      * drawer panel itself.

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

@@ -10,9 +10,12 @@ import { ifDefined } from "lit/directives/if-defined.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 { 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.
  */
@@ -41,6 +44,7 @@ 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 {'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
@@ -61,6 +65,7 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @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-header-padding-bottom] - Sets the padding below the header, --drawer-gap by default
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
  */
@@ -94,6 +99,16 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
          * @default false
          */
         this.dirty = 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 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.
+         * @default auto
+         */
+        this.initialFocus = "auto";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -229,6 +244,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
      */
     connectedCallback() {
         super.connectedCallback?.();
+        trackInputModality();
         this.addEventListener("command", this.handleCommandEvent);
     }
     /**
@@ -323,6 +339,20 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
         this.dirty = false;
         this.attemptClose();
     }
+    /**
+     * 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
      * drawer panel itself.
@@ -334,6 +364,9 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMi
             autofocusTarget.focus();
             return;
         }
+        if (this.focusFirstField()) {
+            return;
+        }
         (this.panelEl ?? this.surfaceEl)?.focus();
     }
     /**
@@ -493,17 +526,23 @@ __decorate([
     property()
 ], EunomiaDrawer.prototype, "heading", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaDrawer.prototype, "closeable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "open", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "close-on-backdrop" })
+    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
 ], EunomiaDrawer.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "dirty", void 0);
+__decorate([
+    property({ attribute: "initial-focus", reflect: true, useDefault: true })
+], EunomiaDrawer.prototype, "initialFocus", void 0);
+__decorate([
+    query("#body")
+], EunomiaDrawer.prototype, "bodyEl", void 0);
 __decorate([
     property({ attribute: "close-label" })
 ], EunomiaDrawer.prototype, "closeLabel", void 0);

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

@@ -11,6 +11,7 @@ import { css } from "lit";
  * [--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-header-padding-bottom] - Set a custom padding below the header, --drawer-gap by default
  * [--drawer-transition-duration] - Set a custom duration for the slide transition
  */
 const base = css `
@@ -20,11 +21,11 @@ const base = css `
     --_color: var(--drawer-color, var(--eun-text-color, #071621));
     --_paddingBlock: var(
       --drawer-padding,
-      var(--drawer-padding-block, var(--eun-space-m, 16px))
+      var(--drawer-padding-block, var(--eun-space-l, 32px))
     );
     --_paddingInline: var(
       --drawer-padding,
-      var(--drawer-padding-inline, var(--eun-space-m, 16px))
+      var(--drawer-padding-inline, var(--eun-space-l, 32px))
     );
     --_gap: var(--drawer-gap, var(--eun-space-m, 16px));
     --_transitionDuration: var(
@@ -117,7 +118,8 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_paddingBlock) var(--_paddingInline) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline)
+      var(--drawer-header-padding-bottom, var(--_gap));
   }
   #heading {
     margin: 0;
@@ -132,7 +134,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_paddingInline);
+    padding: var(--eun-space-xs, 4px) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -144,8 +146,6 @@ const base = css `
   }
 
   #confirm-close-modal {
-    --modal-padding: var(--eun-space-l, 32px) var(--eun-space-m, 16px)
-      var(--eun-space-m, 16px) var(--eun-space-l, 32px);
     --modal-gap: var(--eun-space-m, 16px);
     --modal-backdrop-blur: 6px;
   }

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

@@ -1,4 +1,5 @@
 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";
 /**
@@ -31,6 +32,7 @@ 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] - 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")
@@ -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
@@ -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,9 +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.
  */
@@ -43,6 +46,7 @@ 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] - 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")
@@ -65,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
@@ -107,6 +112,16 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
          * @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
@@ -248,6 +263,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
      */
     connectedCallback() {
         super.connectedCallback?.();
+        trackInputModality();
         this.addEventListener("command", this.handleCommandEvent);
     }
     /**
@@ -351,6 +367,20 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
         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.
@@ -362,6 +392,9 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixi
             autofocusTarget.focus();
             return;
         }
+        if (this.focusFirstField()) {
+            return;
+        }
         if (!this.hideActions) {
             this.cancelButtonEl?.focus();
             return;
@@ -493,7 +526,7 @@ __decorate([
     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 })
@@ -502,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" })

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.js

@@ -14,6 +14,7 @@ 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.
  */
@@ -570,7 +571,7 @@ __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: "close-label" })
@@ -579,7 +580,7 @@ __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);
@@ -313,7 +313,7 @@ const base = css `
     --button-text: var(--_onFilled, #fff);
   }
 
-  :host([closeable]) #toast {
+  :host([closeable]:not([closeable="false"])) #toast {
     padding-right: calc(
       var(
           --toast-padding,

package/dist/components/content/chip/chip.js

@@ -10,6 +10,7 @@ import { CloseEvent } from "../../../events/close.event.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { chipStyles } from "./chip.styles.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the chip component.
  */
@@ -363,10 +364,10 @@ __decorate([
     property({ attribute: "avatar-initials" })
 ], EunomiaChip.prototype, "avatarInitials", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ converter: defaultTrueConverter, reflect: true })
 ], EunomiaChip.prototype, "rounded", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ converter: defaultTrueConverter, reflect: true })
 ], EunomiaChip.prototype, "removable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -65,7 +65,7 @@ const base = css `
   :host {
     --_radius: var(--eun-border-radius-s, 5px);
   }
-  :host([rounded]) {
+  :host([rounded]:not([rounded="false"])) {
     --_radius: var(--eun-border-radius-xl, 999px);
   }
 
@@ -82,8 +82,14 @@ const base = css `
        --chip-border-* never changes the chip's size. */
     border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
     border-radius: var(--chip-border-radius, var(--_radius));
-    padding-inline-start: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
-    padding-inline-end: max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+    padding-inline-start: max(
+      0px,
+      calc(var(--_paddingInline) - var(--_borderWidth))
+    );
+    padding-inline-end: max(
+      0px,
+      calc(var(--_paddingInline) - var(--_borderWidth))
+    );
     font-size: var(--_fontSize);
     gap: var(--chip-gap, var(--_gap));
     color: var(--chip-color, var(--_fg));

package/dist/components/content/image-carousel/image-carousel.js

@@ -14,6 +14,7 @@ import { ImageChangeEvent } from "../../../events/imagechange.event.js";
 import { imageCarouselStyles } from "./image-carousel.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { cssTimeToMs } from "../../../utils/motion.utils.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the image carousel component.
  */
@@ -1260,16 +1261,16 @@ __decorate([
     property({ type: Number, attribute: "magnifier-zoom" })
 ], EunomiaImageCarousel.prototype, "magnifierZoom", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-thumbnails" })
+    property({ converter: defaultTrueConverter, attribute: "show-thumbnails" })
 ], EunomiaImageCarousel.prototype, "showThumbnails", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-dots" })
+    property({ converter: defaultTrueConverter, attribute: "show-dots" })
 ], EunomiaImageCarousel.prototype, "showDots", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaImageCarousel.prototype, "lightbox", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "lightbox-grid" })
+    property({ converter: defaultTrueConverter, attribute: "lightbox-grid" })
 ], EunomiaImageCarousel.prototype, "lightboxGrid", void 0);
 __decorate([
     property({ type: Boolean })

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

@@ -614,16 +614,23 @@ export declare class EunomiaTooltip extends EunomiaTooltipMixinBase {
      */
     private readGap;
     /**
-     * Links the slotted anchor's `aria-describedby` to the panel, so a screen
-     * reader announces the tooltip's content as a description of the anchor.
-     * Idempotent — only ever applied once per anchor.
+     * Links the anchor's focusable element to the panel, so a screen reader
+     * announces the tooltip's content as a description of whatever actually
+     * holds focus. Idempotent — only ever applied once per anchor.
      *
-     * A plain `id`-string `aria-describedby` reference works correctly here :
-     * unlike an earlier version of this component (where the panel lived in
-     * `eun-tooltip`'s own shadow root, a different tree scope than the
-     * anchor's), the panel is now portaled into the anchor's own tree scope
-     * (see {@link ensurePortal}), so this is an entirely ordinary same-scope
-     * ARIA reference.
+     * The described element is resolved by `resolveFocusTarget` rather than
+     * being the slotted anchor itself : when the anchor is a component
+     * (`<eun-link slot="anchor"><a href>…</a></eun-link>`, an `eun-button`
+     * with `href`), focus lands on the slotted `<a>` or on a control inside
+     * the component's shadow root, and a description set on the host is
+     * never announced.
+     *
+     * When that element shares the panel's tree scope (the anchor itself, or
+     * its light DOM descendants, since the panel is portaled into the
+     * anchor's own scope, see {@link ensurePortal}), a plain `id`-string
+     * `aria-describedby` is enough. A control inside the anchor's shadow root
+     * can't reference an id outside it, so it gets an element reference
+     * through `ariaDescribedByElements` instead.
      * @private
      */
     private applyAriaDescribedBy;