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

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

@@ -5,7 +5,7 @@ import { EunomiaModalConfirmColor } from "../../../types/variant.type.js";
  * Tag name of the modal component.
  */
 export declare const EunomiaModalTagName = "eun-modal";
-declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A generic, reusable dialog template. Arbitrary content is passed through
  * the default slot. Confirm and cancel are exposed as public methods and
@@ -32,11 +32,11 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @prop {boolean} [dirty=false] - Marks the modal as having unsaved changes, requiring confirmation before any close attempt succeeds
  * @prop {boolean} [hideActions=false] - Hides the default confirm and cancel footer entirely, for fully custom content-driven dialogs
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
- * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
- * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
+ * @prop {string} [cancelLabel] - The label of the default cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [confirmLabel] - The label of the default confirm button. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
- * @prop {string} ariaLabelClose - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -115,14 +115,14 @@ export declare class EunomiaModal extends EunomiaModal_base {
     closeable: boolean;
     /**
      * Label of the default cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Label of the default confirm button.
-     * @default Confirm
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Color of the default confirm button.
      * @default primary
@@ -136,9 +136,9 @@ export declare class EunomiaModal extends EunomiaModal_base {
     cancelColor?: ButtonColor;
     /**
      * Aria label of the close (X) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
      * @default Discard changes?

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

@@ -13,6 +13,7 @@ import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
 import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { modalStyles } from "./modal.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the modal component.
  */
@@ -43,11 +44,11 @@ export const EunomiaModalTagName = "eun-modal";
  * @prop {boolean} [dirty=false] - Marks the modal as having unsaved changes, requiring confirmation before any close attempt succeeds
  * @prop {boolean} [hideActions=false] - Hides the default confirm and cancel footer entirely, for fully custom content-driven dialogs
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
- * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
- * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
+ * @prop {string} [cancelLabel] - The label of the default cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [confirmLabel] - The label of the default confirm button. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
- * @prop {string} ariaLabelClose - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -73,7 +74,7 @@ export const EunomiaModalTagName = "eun-modal";
  * @cssprop [--modal-search-top] - For the search kind only, sets the fixed distance from the top of the viewport to the dialog, since a search dialog never vertically centers and its top edge shouldn't drift as content grows or shrinks
  * @element eun-modal
  */
-let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
+let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -111,26 +112,11 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
          * @default true
          */
         this.closeable = true;
-        /**
-         * Label of the default cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Label of the default confirm button.
-         * @default Confirm
-         */
-        this.confirmLabel = "Confirm";
         /**
          * Color of the default confirm button.
          * @default primary
          */
         this.confirmColor = "primary";
-        /**
-         * Aria label of the close (X) button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -449,7 +435,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${() => this.requestClose()}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -469,12 +455,14 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                     appearance="ghost"
                     color=${ifDefined(this.cancelColor)}
                     @click=${() => this.requestClose()}
-                    >${this.cancelLabel}</eun-button
+                    >${this.cancelLabel ??
+                this.dictionary.common.cancel}</eun-button
                   >
                   <eun-button
                     color=${this.confirmColor}
                     @click=${() => this.confirm()}
-                    >${this.confirmLabel}</eun-button
+                    >${this.confirmLabel ??
+                this.dictionary.common.confirm}</eun-button
                   >
                 </slot>
               </div>
@@ -502,7 +490,7 @@ __decorate([
     property()
 ], EunomiaModal.prototype, "description", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaModal.prototype, "kind", void 0);
 __decorate([
     property({ type: Boolean, attribute: "close-on-backdrop" })
@@ -529,8 +517,8 @@ __decorate([
     property({ attribute: "cancel-color" })
 ], EunomiaModal.prototype, "cancelColor", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaModal.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaModal.prototype, "closeLabel", void 0);
 __decorate([
     property({ attribute: "confirm-close-heading" })
 ], EunomiaModal.prototype, "confirmCloseHeading", void 0);

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

@@ -25,6 +25,7 @@ export type EunomiaToastPosition = "top-left" | "top-center" | "top-right" | "ri
  * sides) and ignores this.
  */
 export type EunomiaToastSlide = "vertical" | "horizontal";
+declare const EunomiaToast_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A self-dismissing notification anchored to a screen corner or edge,
  * reporting something that just happened without requiring the user's
@@ -65,8 +66,8 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=true] - Shows a close button. Always shown when severity is critical, so an error toast is never left with no way to dismiss it
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {number} [duration=5000] - Milliseconds before the toast auto-dismisses. Zero, or a critical severity regardless of this value, disables auto-dismiss entirely, requiring a manual close
  * @prop {boolean} [open=true] - Whether the toast is currently shown. Set it to false upfront, or hide it right after inserting, to insert a toast that's already closed
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast
@@ -90,7 +91,7 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @cssprop [--toast-focus-outline-color] - Sets the focus outline color of the close button
  * @element eun-toast
  */
-export declare class EunomiaToast extends LitElement {
+export declare class EunomiaToast extends EunomiaToast_base {
     /**
      * Styles to import to the component.
      *
@@ -152,9 +153,9 @@ export declare class EunomiaToast extends LitElement {
     closeable: boolean;
     /**
      * Accessible label of the close button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Milliseconds before the toast auto-dismisses. `0` disables auto-dismiss
      * entirely, same as `severity="critical"` regardless of this value.
@@ -425,3 +426,4 @@ declare global {
         [EunomiaToastTagName]: EunomiaToast;
     }
 }
+export {};

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

@@ -13,6 +13,7 @@ import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { popToast, pushToast } from "../../../utils/toast-stack.utils.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { toastStyles } from "./toast.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the toast component.
  */
@@ -64,8 +65,8 @@ const EXIT_FALLBACK_MS = 600;
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=true] - Shows a close button. Always shown when severity is critical, so an error toast is never left with no way to dismiss it
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @prop {number} [duration=5000] - Milliseconds before the toast auto-dismisses. Zero, or a critical severity regardless of this value, disables auto-dismiss entirely, requiring a manual close
  * @prop {boolean} [open=true] - Whether the toast is currently shown. Set it to false upfront, or hide it right after inserting, to insert a toast that's already closed
  * @cssprop [--toast-z-index] - Sets the stacking order of the toast
@@ -89,7 +90,7 @@ const EXIT_FALLBACK_MS = 600;
  * @cssprop [--toast-focus-outline-color] - Sets the focus outline color of the close button
  * @element eun-toast
  */
-let EunomiaToast = class EunomiaToast extends LitElement {
+let EunomiaToast = class EunomiaToast extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -113,11 +114,6 @@ let EunomiaToast = class EunomiaToast extends LitElement {
          * @default true
          */
         this.closeable = true;
-        /**
-         * Accessible label of the close button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Milliseconds before the toast auto-dismisses. `0` disables auto-dismiss
          * entirely, same as `severity="critical"` regardless of this value.
@@ -503,7 +499,7 @@ let EunomiaToast = class EunomiaToast extends LitElement {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${this.handleCloseClick}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -553,10 +549,10 @@ __decorate([
     property({ reflect: true })
 ], EunomiaToast.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToast.prototype, "appearance", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToast.prototype, "position", void 0);
 __decorate([
     property({ reflect: true })
@@ -577,8 +573,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToast.prototype, "closeable", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaToast.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaToast.prototype, "closeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], EunomiaToast.prototype, "duration", void 0);

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

@@ -81,7 +81,7 @@ const base = css `
     --_stackSign: 1;
     --_enterY: -24px;
   }
-  :host([position="top-right"]) {
+  :host(:is([position="top-right"], :not([position]))) {
     top: var(--_gapEdge);
     right: var(--_gapEdge);
     --_stackSign: 1;
@@ -126,7 +126,7 @@ const base = css `
     --_enterX: -24px;
     --_enterY: 0px;
   }
-  :host([position="top-right"][slide="horizontal"]),
+  :host(:is([position="top-right"], :not([position]))[slide="horizontal"]),
   :host([position="bottom-right"][slide="horizontal"]) {
     --_enterX: 24px;
     --_enterY: 0px;
@@ -198,8 +198,14 @@ const base = css `
       var(--toast-border-color, var(--_frame, transparent));
     padding: var(
       --toast-padding,
-      var(--toast-padding-block, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
-        var(--toast-padding-inline, max(0px, calc(var(--eun-space-m, 16px) - var(--_bw))))
+      var(
+          --toast-padding-block,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+        var(
+          --toast-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
     );
     border-radius: var(--toast-border-radius, var(--eun-border-radius-m, 8px));
     box-shadow: var(
@@ -221,7 +227,7 @@ const base = css `
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #toast {
+  :host(:is([appearance="default"], :not([appearance]))) #toast {
     background: linear-gradient(
       to right,
       var(--toast-border-color, var(--_borderColor)) 4px,
@@ -311,7 +317,10 @@ const base = css `
     padding-right: calc(
       var(
           --toast-padding,
-          var(--toast-padding-inline, max(0px, calc(var(--eun-space-s, 8px) - var(--_bw))))
+          var(
+            --toast-padding-inline,
+            max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+          )
         ) +
         var(--eun-space-l, 32px)
     );

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

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

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

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

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

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

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

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

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

@@ -74,8 +74,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 +190,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 +198,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 +330,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 +339,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 })
@@ -372,8 +372,8 @@ __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/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.