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

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.
  */
@@ -74,8 +75,8 @@ const DELETE_ICON_SIZES = {
  * @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
@@ -190,7 +191,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
     }
     /**
      * 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.
@@ -198,7 +199,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
      * @private
      */
     getRemoveLabel() {
-        const removeLabel = this.ariaLabelRemove ?? this.dictionary.chip.remove;
+        const removeLabel = this.removeLabel ?? this.dictionary.chip.remove;
         return this.labelText ? `${removeLabel} ${this.labelText}` : removeLabel;
     }
     /**
@@ -330,7 +331,7 @@ let EunomiaChip = class EunomiaChip extends LocalizableMixin(LitElement) {
  */
 EunomiaChip.styles = chipStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaChip.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
@@ -339,7 +340,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaChip.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaChip.prototype, "appearance", void 0);
 __decorate([
     property({ reflect: true })
@@ -363,17 +364,17 @@ __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 })
 ], EunomiaChip.prototype, "disabled", void 0);
 __decorate([
-    property({ attribute: "aria-label-remove" })
-], EunomiaChip.prototype, "ariaLabelRemove", void 0);
+    property({ attribute: "remove-label" })
+], EunomiaChip.prototype, "removeLabel", void 0);
 __decorate([
     state()
 ], EunomiaChip.prototype, "labelText", void 0);

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/description-list/description-list.js

@@ -90,13 +90,13 @@ let EunomiaDescriptionList = class EunomiaDescriptionList extends ReactiveElemen
     }
 };
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDescriptionList.prototype, "layout", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDescriptionList.prototype, "align", void 0);
 __decorate([
-    property({ type: Number, reflect: true })
+    property({ type: Number, reflect: true, useDefault: true })
 ], EunomiaDescriptionList.prototype, "columns", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -33,7 +33,10 @@ export declare function setIconBaseUrl(url: string): void;
  * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-border-width] - Sets the border width of the background box. Zero by default
+ * @cssprop [--icon-border-color] - Sets the border color of the background box, once --icon-border-width is set
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
+ * @csspart wrapper - The background box around the icon, for effects its CSS custom properties don't cover
  * @element eun-icon
  */
 export declare class EunomiaIcon extends LitElement {

package/dist/components/content/icon/icon.js

@@ -89,7 +89,10 @@ export function setIconBaseUrl(url) {
  * @cssprop [--icon-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --icon-padding is set
  * @cssprop [--icon-border-radius] - Sets the corner radius of the background box
+ * @cssprop [--icon-border-width] - Sets the border width of the background box. Zero by default
+ * @cssprop [--icon-border-color] - Sets the border color of the background box, once --icon-border-width is set
  * @cssprop [--icon-transition] - Sets the transition applied to the icon's color, background, and size changes. 0.2s by default
+ * @csspart wrapper - The background box around the icon, for effects its CSS custom properties don't cover
  * @element eun-icon
  */
 let EunomiaIcon = class EunomiaIcon extends LitElement {

package/dist/components/content/icon/icon.style.d.ts

@@ -8,6 +8,8 @@
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-border-width : border width of the background box. Zero by default.
+ * --icon-border-color : border color of the background box.
  * --icon-transition : transition applied to the icon's color, background,
  *   and size changes. 0.2s by default.
  */

package/dist/components/content/icon/icon.style.js

@@ -9,6 +9,8 @@ import { css } from "lit";
  * --icon-padding : space between the icon and its background box. Zero by
  *   default, so the background hugs the icon exactly unless widened.
  * --icon-border-radius : corner radius of the background box.
+ * --icon-border-width : border width of the background box. Zero by default.
+ * --icon-border-color : border color of the background box.
  * --icon-transition : transition applied to the icon's color, background,
  *   and size changes. 0.2s by default.
  */
@@ -30,6 +32,8 @@ export const iconStyles = css `
     fill: var(--_color);
     color: var(--_color);
     background-color: var(--_background);
+    border: var(--icon-border-width, 0) solid
+      var(--icon-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
     text-decoration: none;
     white-space: normal;

package/dist/components/content/image-carousel/image-carousel.d.ts

@@ -61,14 +61,14 @@ declare const EunomiaImageCarousel_base: import("../../../utils/constructor.type
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
  * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
- * @prop {string} [ariaLabelPrevious] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @attr {string} [aria-label-previous] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @prop {string} [ariaLabelNext] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @attr {string} [aria-label-next] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @prop {string} [ariaLabelExpand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @attr {string} [aria-label-expand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @prop {string} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
- * @attr {string} [aria-label-lightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @prop {string} [previousLabel] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [previous-label] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [nextLabel] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [next-label] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [expandLabel] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [expand-label] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [lightboxLabel] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [lightbox-label] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
@@ -191,26 +191,26 @@ export declare class EunomiaImageCarousel extends EunomiaImageCarousel_base {
      * `locale` automatically.
      * @default {i18n:imageCarousel.previous}
      */
-    ariaLabelPrevious?: string;
+    previousLabel?: string;
     /**
      * Accessible label of the Next controls (main stage and lightbox).
      * Resolved from the locale dictionary when unset, so it follows
      * `locale` automatically.
      * @default {i18n:imageCarousel.next}
      */
-    ariaLabelNext?: string;
+    nextLabel?: string;
     /**
      * Accessible label of the main stage's expand control. Resolved from the
      * locale dictionary when unset, so it follows `locale` automatically.
      * @default {i18n:imageCarousel.expand}
      */
-    ariaLabelExpand?: string;
+    expandLabel?: string;
     /**
      * Accessible name of the lightbox dialog. Resolved from the locale
      * dictionary when unset, so it follows `locale` automatically.
      * @default {i18n:imageCarousel.lightbox}
      */
-    ariaLabelLightbox?: string;
+    lightboxLabel?: string;
     /**
      * Text of the visually-hidden live region, debounced so rapid prev/next
      * clicks announce once rather than flooding it.

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.
  */
@@ -58,14 +59,14 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
  * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
- * @prop {string} [ariaLabelPrevious] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @attr {string} [aria-label-previous] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @prop {string} [ariaLabelNext] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @attr {string} [aria-label-next] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @prop {string} [ariaLabelExpand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @attr {string} [aria-label-expand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @prop {string} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
- * @attr {string} [aria-label-lightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @prop {string} [previousLabel] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [previous-label] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [nextLabel] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [next-label] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [expandLabel] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [expand-label] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [lightboxLabel] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [lightbox-label] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
@@ -968,7 +969,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         id="expand-trigger"
         aria-haspopup="dialog"
-        aria-label="${this.ariaLabelExpand ??
+        aria-label="${this.expandLabel ??
             this.dictionary.imageCarousel.expand} (${this.activeIndex +
             1}/${count})"
         @click=${this.handleExpandClick}
@@ -990,7 +991,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="prev"
-        aria-label=${this.ariaLabelPrevious ??
+        aria-label=${this.previousLabel ??
             this.dictionary.imageCarousel.previous}
         ?disabled=${disablePrev}
         @click=${() => this.previous()}
@@ -1001,7 +1002,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="next"
-        aria-label=${this.ariaLabelNext ?? this.dictionary.imageCarousel.next}
+        aria-label=${this.nextLabel ?? this.dictionary.imageCarousel.next}
         ?disabled=${disableNext}
         @click=${() => this.next()}
       >
@@ -1097,7 +1098,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
       <eun-modal
         id="modal"
         hide-actions
-        aria-label=${this.ariaLabelLightbox ??
+        aria-label=${this.lightboxLabel ??
             this.dictionary.imageCarousel.lightbox}
         @euncancel=${() => this.handleTransientResume()}
       >
@@ -1133,7 +1134,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-prev"
-                    aria-label=${this.ariaLabelPrevious ??
+                    aria-label=${this.previousLabel ??
                 this.dictionary.imageCarousel.previous}
                     ?disabled=${!this.loop && this.activeIndex <= 0}
                     @click=${() => this.previous()}
@@ -1144,7 +1145,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-next"
-                    aria-label=${this.ariaLabelNext ??
+                    aria-label=${this.nextLabel ??
                 this.dictionary.imageCarousel.next}
                     ?disabled=${!this.loop && this.activeIndex >= count - 1}
                     @click=${() => this.next()}
@@ -1248,7 +1249,7 @@ EunomiaImageCarousel.SWIPE_THRESHOLD = 40;
  */
 EunomiaImageCarousel.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "images", void 0);
 __decorate([
     property({ type: Number, attribute: "active-index" })
@@ -1260,22 +1261,22 @@ __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 })
 ], EunomiaImageCarousel.prototype, "loop", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "transition", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1284,17 +1285,17 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaImageCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaImageCarousel.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaImageCarousel.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaImageCarousel.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaImageCarousel.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-expand" })
-], EunomiaImageCarousel.prototype, "ariaLabelExpand", void 0);
+    property({ attribute: "expand-label" })
+], EunomiaImageCarousel.prototype, "expandLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-lightbox" })
-], EunomiaImageCarousel.prototype, "ariaLabelLightbox", void 0);
+    property({ attribute: "lightbox-label" })
+], EunomiaImageCarousel.prototype, "lightboxLabel", void 0);
 __decorate([
     state()
 ], EunomiaImageCarousel.prototype, "announcement", void 0);

package/dist/components/content/password-strength/password-strength.d.ts

@@ -4,6 +4,7 @@ import { PasswordStrengthLevel, PasswordStrengthRule } from "./password-strength
  * Tag name of the password strength component.
  */
 export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
+declare const EunomiaPasswordStrength_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A visual and assistive technology indicator of how well a password
  * satisfies a set of configurable requirements, graded into levels,
@@ -21,9 +22,10 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -42,7 +44,7 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-export declare class EunomiaPasswordStrength extends LitElement {
+export declare class EunomiaPasswordStrength extends EunomiaPasswordStrength_base {
     /**
      * Styles to import to the component.
      *
@@ -59,10 +61,10 @@ export declare class EunomiaPasswordStrength extends LitElement {
     /**
      * Static caption shown next to the current level's name, and used to
      * prefix the message announced to screen readers on every level change
-     * (e.g. "Password strength: Fair").
-     * @default Password strength
+     * (e.g. "Password strength: Fair"). Falls back to the localized string
+     * for the current locale when unset.
      */
-    label: string;
+    label?: string;
     /**
      * The shared pool of regex-based requirements levels are scored against
      * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -107,6 +109,18 @@ export declare class EunomiaPasswordStrength extends LitElement {
      * @internal
      */
     private get currentLevelIndex();
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    private get resolvedLevels();
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    private get caption();
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -122,3 +136,4 @@ declare global {
         [EunomiaPasswordStrengthTagName]: EunomiaPasswordStrength;
     }
 }
+export {};

package/dist/components/content/password-strength/password-strength.js

@@ -10,6 +10,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { passwordStrengthStyles } from "./password-strength.styles.js";
 import { DEFAULT_PASSWORD_STRENGTH_LEVELS, DEFAULT_PASSWORD_STRENGTH_RULES, getPasswordStrengthLevelIndex, } from "./password-strength.type.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the password strength component.
  */
@@ -31,9 +32,10 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -52,7 +54,7 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
+let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -60,13 +62,6 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
          * @default ''
          */
         this.value = "";
-        /**
-         * Static caption shown next to the current level's name, and used to
-         * prefix the message announced to screen readers on every level change
-         * (e.g. "Password strength: Fair").
-         * @default Password strength
-         */
-        this.label = "Password strength";
         /**
          * The shared pool of regex-based requirements levels are scored against
          * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -106,6 +101,30 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
     get currentLevelIndex() {
         return getPasswordStrengthLevelIndex(this.value, this.rules, this.levels);
     }
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    get resolvedLevels() {
+        if (this.levels !== DEFAULT_PASSWORD_STRENGTH_LEVELS) {
+            return this.levels;
+        }
+        const names = this.dictionary.passwordStrength.levels;
+        return this.levels.map((level, index) => ({
+            ...level,
+            label: names[index] ?? level.label,
+        }));
+    }
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    get caption() {
+        const { passwordStrength } = this.dictionary;
+        return passwordStrength.caption(this.label ?? passwordStrength.label);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -127,12 +146,14 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
         this.previousLevelIndex = index;
         if (this.announcerEl) {
             this.announcerEl.textContent =
-                index === -1 ? "" : `${this.label}: ${this.levels[index].label}`;
+                index === -1
+                    ? ""
+                    : `${this.caption} ${this.resolvedLevels[index].label}`;
         }
     }
     render() {
         const index = this.currentLevelIndex;
-        const level = index === -1 ? undefined : this.levels[index];
+        const level = index === -1 ? undefined : this.resolvedLevels[index];
         return html `
       <div id="wrapper" data-severity=${ifDefined(level?.severity)}>
         <div id="segments" role="presentation" aria-hidden="true">
@@ -145,12 +166,12 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
               ></span>
             `)}
         </div>
-        ${this.hideLabel || !level
+        ${this.hideLabel
             ? nothing
             : html `
-              <span id="label">
-                <span id="caption">${this.label}:</span>
-                <span id="level-name">${level.label}</span>
+              <span id="label" class=${classMap({ empty: !level })}>
+                <span id="caption">${this.caption}</span>
+                <span id="level-name">${level?.label ?? "\u00A0"}</span>
               </span>
             `}
       </div>

package/dist/components/content/password-strength/password-strength.styles.js

@@ -107,6 +107,10 @@ const base = css `
     );
   }
 
+  #label.empty {
+    visibility: hidden;
+  }
+
   #caption {
     color: var(
       --password-strength-caption-color,

package/dist/components/content/tag/tag.js

@@ -167,13 +167,13 @@ let EunomiaTag = class EunomiaTag extends LitElement {
  */
 EunomiaTag.styles = tagStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTag.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "appearance", void 0);
 __decorate([
     property()

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;