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

package/dist/components/navigation/pagination/pagination.d.ts

@@ -3,6 +3,7 @@ import { LitElement, TemplateResult } from "lit";
  * Tag name of the pagination component.
  */
 export declare const EunomiaPaginationTagName = "eun-pagination";
+declare const EunomiaPagination_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A set of page numbers letting someone jump between the pages of a
  * longer list, such as a search results page or a data table, with First,
@@ -38,16 +39,16 @@ export declare const EunomiaPaginationTagName = "eun-pagination";
  * @attr {string} [page-size-options='[]'] - The selectable page sizes, as a JSON array such as [10,25,50]. Setting this renders a page-size selector alongside the page controls. Left empty, the default, no selector is rendered at all
  * @prop {string} [pageSizeLabel='Items per page'] - The label for the page-size selector
  * @attr {string} [page-size-label='Items per page'] - The label for the page-size selector
- * @prop {string} [ariaLabelPrevious='Previous page'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous page'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next page'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next page'] - The accessible label of the next control
- * @prop {string} [ariaLabelFirst='First page'] - The accessible label of the first control
- * @attr {string} [aria-label-first='First page'] - The accessible label of the first control
- * @prop {string} [ariaLabelLast='Last page'] - The accessible label of the last control
- * @attr {string} [aria-label-last='Last page'] - The accessible label of the last control
- * @prop {string} [ariaLabelPage='Page'] - The accessible label prefix applied to every page number control, such as Page 3
- * @attr {string} [aria-label-page='Page'] - The accessible label prefix applied to every page number control, such as Page 3
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @prop {string} [firstLabel] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @attr {string} [first-label] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @prop {string} [lastLabel] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @attr {string} [last-label] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @prop {string} [pageLabel] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
+ * @attr {string} [page-label] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
  * @attr {string} [aria-label='Pagination'] - The accessible label for the navigation landmark
  * @fires {PageChangeEvent} eunpagechange - Fired with the requested page whenever a control is activated. Page is never updated internally
  * @fires {PageSizeChangeEvent} eunpagesizechange - Fired with the chosen value whenever the page-size selector changes. PageSize is never updated internally
@@ -68,7 +69,7 @@ export declare const EunomiaPaginationTagName = "eun-pagination";
  * @cssprop [--pagination-transition-duration] - Sets the duration of the hover color and background transition
  * @element eun-pagination
  */
-export declare class EunomiaPagination extends LitElement {
+export declare class EunomiaPagination extends EunomiaPagination_base {
     /**
      * Styles to import to the component.
      *
@@ -142,30 +143,30 @@ export declare class EunomiaPagination extends LitElement {
     pageSizeLabel: string;
     /**
      * Accessible label of the Previous control.
-     * @default Previous page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /**
      * Accessible label of the Next control.
-     * @default Next page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /**
      * Accessible label of the First control.
-     * @default First page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelFirst: string;
+    firstLabel?: string;
     /**
      * Accessible label of the Last control.
-     * @default Last page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelLast: string;
+    lastLabel?: string;
     /**
      * Accessible label prefix applied to every page number control (e.g.
      * "Page 3").
-     * @default Page
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelPage: string;
+    pageLabel?: string;
     /**
      * Builds the list of entries rendered between the first/previous and
      * next/last controls : the boundary pages, the current page's siblings,
@@ -244,3 +245,4 @@ declare global {
         [EunomiaPaginationTagName]: EunomiaPagination;
     }
 }
+export {};

package/dist/components/navigation/pagination/pagination.js

@@ -10,6 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { PageChangeEvent } from "../../../events/pagechange.event.js";
 import { PageSizeChangeEvent } from "../../../events/pagesizechange.event.js";
 import { paginationStyles } from "./pagination.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the pagination component.
  */
@@ -49,16 +50,16 @@ export const EunomiaPaginationTagName = "eun-pagination";
  * @attr {string} [page-size-options='[]'] - The selectable page sizes, as a JSON array such as [10,25,50]. Setting this renders a page-size selector alongside the page controls. Left empty, the default, no selector is rendered at all
  * @prop {string} [pageSizeLabel='Items per page'] - The label for the page-size selector
  * @attr {string} [page-size-label='Items per page'] - The label for the page-size selector
- * @prop {string} [ariaLabelPrevious='Previous page'] - The accessible label of the previous control
- * @attr {string} [aria-label-previous='Previous page'] - The accessible label of the previous control
- * @prop {string} [ariaLabelNext='Next page'] - The accessible label of the next control
- * @attr {string} [aria-label-next='Next page'] - The accessible label of the next control
- * @prop {string} [ariaLabelFirst='First page'] - The accessible label of the first control
- * @attr {string} [aria-label-first='First page'] - The accessible label of the first control
- * @prop {string} [ariaLabelLast='Last page'] - The accessible label of the last control
- * @attr {string} [aria-label-last='Last page'] - The accessible label of the last control
- * @prop {string} [ariaLabelPage='Page'] - The accessible label prefix applied to every page number control, such as Page 3
- * @attr {string} [aria-label-page='Page'] - The accessible label prefix applied to every page number control, such as Page 3
+ * @prop {string} [previousLabel] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @attr {string} [previous-label] - The accessible label of the previous control. Defaults to the localized string for the current locale (English: "Previous page")
+ * @prop {string} [nextLabel] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @attr {string} [next-label] - The accessible label of the next control. Defaults to the localized string for the current locale (English: "Next page")
+ * @prop {string} [firstLabel] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @attr {string} [first-label] - The accessible label of the first control. Defaults to the localized string for the current locale (English: "First page")
+ * @prop {string} [lastLabel] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @attr {string} [last-label] - The accessible label of the last control. Defaults to the localized string for the current locale (English: "Last page")
+ * @prop {string} [pageLabel] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
+ * @attr {string} [page-label] - The accessible label prefix applied to every page number control, such as Page 3. Defaults to the localized string for the current locale (English: "Page")
  * @attr {string} [aria-label='Pagination'] - The accessible label for the navigation landmark
  * @fires {PageChangeEvent} eunpagechange - Fired with the requested page whenever a control is activated. Page is never updated internally
  * @fires {PageSizeChangeEvent} eunpagesizechange - Fired with the chosen value whenever the page-size selector changes. PageSize is never updated internally
@@ -79,7 +80,7 @@ export const EunomiaPaginationTagName = "eun-pagination";
  * @cssprop [--pagination-transition-duration] - Sets the duration of the hover color and background transition
  * @element eun-pagination
  */
-let EunomiaPagination = class EunomiaPagination extends LitElement {
+let EunomiaPagination = class EunomiaPagination extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -139,32 +140,6 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
          * @default Items per page
          */
         this.pageSizeLabel = "Items per page";
-        /**
-         * Accessible label of the Previous control.
-         * @default Previous page
-         */
-        this.ariaLabelPrevious = "Previous page";
-        /**
-         * Accessible label of the Next control.
-         * @default Next page
-         */
-        this.ariaLabelNext = "Next page";
-        /**
-         * Accessible label of the First control.
-         * @default First page
-         */
-        this.ariaLabelFirst = "First page";
-        /**
-         * Accessible label of the Last control.
-         * @default Last page
-         */
-        this.ariaLabelLast = "Last page";
-        /**
-         * Accessible label prefix applied to every page number control (e.g.
-         * "Page 3").
-         * @default Page
-         */
-        this.ariaLabelPage = "Page";
     }
     /**
      * Builds the list of entries rendered between the first/previous and
@@ -319,7 +294,8 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
           <span
             class="page current"
             aria-current="page"
-            aria-label="${this.ariaLabelPage} ${item}"
+            aria-label="${this.pageLabel ??
+                this.dictionary.pagination.page} ${item}"
             >${item}</span
           >
         </li>
@@ -330,7 +306,8 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
         <button
           type="button"
           class="control page"
-          aria-label="${this.ariaLabelPage} ${item}"
+          aria-label="${this.pageLabel ??
+            this.dictionary.pagination.page} ${item}"
           ?disabled=${this.disabled}
           @click=${() => this.requestPage(item)}
         >
@@ -347,17 +324,17 @@ let EunomiaPagination = class EunomiaPagination extends LitElement {
         <ul id="list" role="list">
           ${this.hideFirstLast
             ? nothing
-            : this.renderControl(1, this.ariaLabelFirst, "first_page", this.page <= 1, "start")}
+            : this.renderControl(1, this.firstLabel ?? this.dictionary.pagination.first, "first_page", this.page <= 1, "start")}
           ${this.hidePrevNext
             ? nothing
-            : this.renderControl(this.page - 1, this.ariaLabelPrevious, "chevron_left", this.page <= 1, "start")}
+            : this.renderControl(this.page - 1, this.previousLabel ?? this.dictionary.pagination.previous, "chevron_left", this.page <= 1, "start")}
           ${this.getPageItems().map((item) => this.renderItem(item))}
           ${this.hidePrevNext
             ? nothing
-            : this.renderControl(this.page + 1, this.ariaLabelNext, "chevron_right", this.page >= this.totalPages, "end")}
+            : this.renderControl(this.page + 1, this.nextLabel ?? this.dictionary.pagination.next, "chevron_right", this.page >= this.totalPages, "end")}
           ${this.hideFirstLast
             ? nothing
-            : this.renderControl(this.totalPages, this.ariaLabelLast, "last_page", this.page >= this.totalPages, "end")}
+            : this.renderControl(this.totalPages, this.lastLabel ?? this.dictionary.pagination.last, "last_page", this.page >= this.totalPages, "end")}
         </ul>
       </nav>
     `;
@@ -406,20 +383,20 @@ __decorate([
     property({ attribute: "page-size-label" })
 ], EunomiaPagination.prototype, "pageSizeLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaPagination.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaPagination.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaPagination.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaPagination.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-first" })
-], EunomiaPagination.prototype, "ariaLabelFirst", void 0);
+    property({ attribute: "first-label" })
+], EunomiaPagination.prototype, "firstLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-last" })
-], EunomiaPagination.prototype, "ariaLabelLast", void 0);
+    property({ attribute: "last-label" })
+], EunomiaPagination.prototype, "lastLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-page" })
-], EunomiaPagination.prototype, "ariaLabelPage", void 0);
+    property({ attribute: "page-label" })
+], EunomiaPagination.prototype, "pageLabel", void 0);
 EunomiaPagination = __decorate([
     customElement(EunomiaPaginationTagName)
 ], EunomiaPagination);

package/dist/components/navigation/sidebar/sidebar.d.ts

@@ -16,6 +16,7 @@ export type EunomiaSidebarCollapseMode = "mini" | "hidden";
  * Where the built-in collapse/expand toggle button renders.
  */
 export type EunomiaSidebarTogglePlacement = "edge" | "inline";
+declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A persistent, non-modal navigation panel that lays out beside page
  * content, sticky by default, so dropping it into a full-height flex
@@ -49,13 +50,13 @@ export type EunomiaSidebarTogglePlacement = "edge" | "inline";
  * @prop {'mini' | 'hidden'} [collapseMode='mini'] - The shape the collapsed state takes
  * @attr {'mini' | 'hidden'} [collapse-mode='mini'] - The shape the collapsed state takes
  * @prop {boolean} [collapsed=false] - Whether the sidebar is currently collapsed
- * @prop {string} ariaLabelExpand - The accessible label of the toggle button while collapsed
- * @attr {string} [aria-label-expand='Expand sidebar'] - The accessible label of the toggle button while collapsed
- * @prop {string} ariaLabelCollapse - The accessible label of the toggle button while expanded
- * @attr {string} [aria-label-collapse='Collapse sidebar'] - The accessible label of the toggle button while expanded
+ * @prop {string} [expandLabel] - The accessible label of the toggle button while collapsed. Defaults to the localized string for the current locale (English: "Expand sidebar")
+ * @attr {string} [expand-label] - The accessible label of the toggle button while collapsed. Defaults to the localized string for the current locale (English: "Expand sidebar")
+ * @prop {string} [collapseLabel] - The accessible label of the toggle button while expanded. Defaults to the localized string for the current locale (English: "Collapse sidebar")
+ * @attr {string} [collapse-label] - The accessible label of the toggle button while expanded. Defaults to the localized string for the current locale (English: "Collapse sidebar")
  * @prop {boolean} [resizable=true] - Whether the border can be dragged, or, once focused, adjusted with arrow keys, to resize the panel
- * @prop {string} ariaLabelResize - The accessible label of the drag-to-resize border
- * @attr {string} [aria-label-resize='Resize sidebar'] - The accessible label of the drag-to-resize border
+ * @prop {string} [resizeLabel] - The accessible label of the drag-to-resize border. Defaults to the localized string for the current locale (English: "Resize sidebar")
+ * @attr {string} [resize-label] - The accessible label of the drag-to-resize border. Defaults to the localized string for the current locale (English: "Resize sidebar")
  * @fires {ChangeEvent} eunchange - Fired whenever collapsed changes, including as a result of dragging or keyboard-resizing past the collapse threshold. Dragging the border all the way to a full hide is reachable regardless of collapseMode, though keyboard resizing never goes past the mini floor
  * @cssprop [--sidebar-width] - Sets the expanded width of the sidebar, also the floor of the drag-resize range and, once resized, holds the user's chosen width
  * @cssprop [--sidebar-mini-width] - Sets the width of the mini collapsed state, also the floor of the drag-resize range
@@ -70,7 +71,7 @@ export type EunomiaSidebarTogglePlacement = "edge" | "inline";
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar
  */
-export declare class EunomiaSidebar extends LitElement {
+export declare class EunomiaSidebar extends EunomiaSidebar_base {
     /**
      * Styles to import to the component.
      *
@@ -124,14 +125,14 @@ export declare class EunomiaSidebar extends LitElement {
     collapsed: boolean;
     /**
      * Accessible label of the toggle button while collapsed (offering to expand it).
-     * @default Expand sidebar
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelExpand: string;
+    expandLabel?: string;
     /**
      * Accessible label of the toggle button while expanded (offering to collapse it).
-     * @default Collapse sidebar
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelCollapse: string;
+    collapseLabel?: string;
     /**
      * Whether the border can be dragged (or, once focused, adjusted with the
      * arrow keys) to resize the panel between `--sidebar-mini-width` and
@@ -142,9 +143,9 @@ export declare class EunomiaSidebar extends LitElement {
     resizable: boolean;
     /**
      * Accessible label of the drag-to-resize border.
-     * @default Resize sidebar
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelResize: string;
+    resizeLabel?: string;
     /**
      * The drag-to-resize border.
      * @internal
@@ -491,3 +492,4 @@ declare global {
         [EunomiaSidebarTagName]: EunomiaSidebar;
     }
 }
+export {};

package/dist/components/navigation/sidebar/sidebar.js

@@ -9,6 +9,7 @@ import { html, LitElement, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { sidebarStyles } from "./sidebar.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the sidebar component.
  */
@@ -46,13 +47,13 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @prop {'mini' | 'hidden'} [collapseMode='mini'] - The shape the collapsed state takes
  * @attr {'mini' | 'hidden'} [collapse-mode='mini'] - The shape the collapsed state takes
  * @prop {boolean} [collapsed=false] - Whether the sidebar is currently collapsed
- * @prop {string} ariaLabelExpand - The accessible label of the toggle button while collapsed
- * @attr {string} [aria-label-expand='Expand sidebar'] - The accessible label of the toggle button while collapsed
- * @prop {string} ariaLabelCollapse - The accessible label of the toggle button while expanded
- * @attr {string} [aria-label-collapse='Collapse sidebar'] - The accessible label of the toggle button while expanded
+ * @prop {string} [expandLabel] - The accessible label of the toggle button while collapsed. Defaults to the localized string for the current locale (English: "Expand sidebar")
+ * @attr {string} [expand-label] - The accessible label of the toggle button while collapsed. Defaults to the localized string for the current locale (English: "Expand sidebar")
+ * @prop {string} [collapseLabel] - The accessible label of the toggle button while expanded. Defaults to the localized string for the current locale (English: "Collapse sidebar")
+ * @attr {string} [collapse-label] - The accessible label of the toggle button while expanded. Defaults to the localized string for the current locale (English: "Collapse sidebar")
  * @prop {boolean} [resizable=true] - Whether the border can be dragged, or, once focused, adjusted with arrow keys, to resize the panel
- * @prop {string} ariaLabelResize - The accessible label of the drag-to-resize border
- * @attr {string} [aria-label-resize='Resize sidebar'] - The accessible label of the drag-to-resize border
+ * @prop {string} [resizeLabel] - The accessible label of the drag-to-resize border. Defaults to the localized string for the current locale (English: "Resize sidebar")
+ * @attr {string} [resize-label] - The accessible label of the drag-to-resize border. Defaults to the localized string for the current locale (English: "Resize sidebar")
  * @fires {ChangeEvent} eunchange - Fired whenever collapsed changes, including as a result of dragging or keyboard-resizing past the collapse threshold. Dragging the border all the way to a full hide is reachable regardless of collapseMode, though keyboard resizing never goes past the mini floor
  * @cssprop [--sidebar-width] - Sets the expanded width of the sidebar, also the floor of the drag-resize range and, once resized, holds the user's chosen width
  * @cssprop [--sidebar-mini-width] - Sets the width of the mini collapsed state, also the floor of the drag-resize range
@@ -67,7 +68,7 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar
  */
-let EunomiaSidebar = class EunomiaSidebar extends LitElement {
+let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -107,16 +108,6 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
          * @default false
          */
         this.collapsed = false;
-        /**
-         * Accessible label of the toggle button while collapsed (offering to expand it).
-         * @default Expand sidebar
-         */
-        this.ariaLabelExpand = "Expand sidebar";
-        /**
-         * Accessible label of the toggle button while expanded (offering to collapse it).
-         * @default Collapse sidebar
-         */
-        this.ariaLabelCollapse = "Collapse sidebar";
         /**
          * Whether the border can be dragged (or, once focused, adjusted with the
          * arrow keys) to resize the panel between `--sidebar-mini-width` and
@@ -125,11 +116,6 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
          * @default true
          */
         this.resizable = true;
-        /**
-         * Accessible label of the drag-to-resize border.
-         * @default Resize sidebar
-         */
-        this.ariaLabelResize = "Resize sidebar";
         /**
          * The panel width, in px, right before the current drag-resize started.
          * @internal
@@ -588,7 +574,9 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
      * @private
      */
     collapseToggleLabel() {
-        return this.collapsed ? this.ariaLabelExpand : this.ariaLabelCollapse;
+        return this.collapsed
+            ? (this.expandLabel ?? this.dictionary.sidebar.expand)
+            : (this.collapseLabel ?? this.dictionary.sidebar.collapse);
     }
     /**
      * Renders the toggle button floating on the border, vertically centered
@@ -643,7 +631,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
         id="resize-handle"
         role="separator"
         aria-orientation="vertical"
-        aria-label=${this.ariaLabelResize}
+        aria-label=${this.resizeLabel ?? this.dictionary.sidebar.resize}
         aria-valuenow=${Math.round(this.currentWidthPx())}
         aria-valuemin=${Math.round(this.miniWidthPx())}
         aria-valuemax=${Math.round(this.maxWidthPx())}
@@ -699,7 +687,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
  */
 EunomiaSidebar.styles = sidebarStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSidebar.prototype, "position", void 0);
 __decorate([
     property()
@@ -708,26 +696,26 @@ __decorate([
     property({ type: Boolean })
 ], EunomiaSidebar.prototype, "collapsible", void 0);
 __decorate([
-    property({ reflect: true, attribute: "toggle-placement" })
+    property({ reflect: true, attribute: "toggle-placement", useDefault: true })
 ], EunomiaSidebar.prototype, "togglePlacement", void 0);
 __decorate([
-    property({ reflect: true, attribute: "collapse-mode" })
+    property({ reflect: true, attribute: "collapse-mode", useDefault: true })
 ], EunomiaSidebar.prototype, "collapseMode", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaSidebar.prototype, "collapsed", void 0);
 __decorate([
-    property({ attribute: "aria-label-expand" })
-], EunomiaSidebar.prototype, "ariaLabelExpand", void 0);
+    property({ attribute: "expand-label" })
+], EunomiaSidebar.prototype, "expandLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-collapse" })
-], EunomiaSidebar.prototype, "ariaLabelCollapse", void 0);
+    property({ attribute: "collapse-label" })
+], EunomiaSidebar.prototype, "collapseLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], EunomiaSidebar.prototype, "resizable", void 0);
 __decorate([
-    property({ attribute: "aria-label-resize" })
-], EunomiaSidebar.prototype, "ariaLabelResize", void 0);
+    property({ attribute: "resize-label" })
+], EunomiaSidebar.prototype, "resizeLabel", void 0);
 __decorate([
     query("#resize-handle")
 ], EunomiaSidebar.prototype, "resizeHandleEl", void 0);

package/dist/components/navigation/sidebar/sidebar.styles.js

@@ -56,7 +56,7 @@ const base = css `
     border-inline-start: var(--eun-border-width-s, 1px) solid
       var(--_borderColor);
   }
-  :host([collapsed][collapse-mode="mini"]) {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode]))) {
     --_width: var(--_miniWidth);
   }
   :host([collapsed][collapse-mode="hidden"]) {
@@ -195,10 +195,12 @@ const base = css `
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  :host([collapsed][collapse-mode="mini"]) #collapse-toggle.inline {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode])))
+    #collapse-toggle.inline {
     justify-content: center;
   }
-  :host([collapsed][collapse-mode="mini"]) #collapse-toggle-label {
+  :host([collapsed]:is([collapse-mode="mini"], :not([collapse-mode])))
+    #collapse-toggle-label {
     display: none;
   }
 

package/dist/components/navigation/stepper/step.js

@@ -140,13 +140,14 @@ let EunomiaStep = class EunomiaStep extends LitElement {
         type="button"
         class=${controlClasses}
         @click=${this.handleClick}
-        >${indicator}${content}</button
-      >`;
+      >
+        ${indicator}${content}
+      </button>`;
         }
         else {
-            control = html `<button type="button" class=${controlClasses} disabled
-        >${indicator}${content}</button
-      >`;
+            control = html `<button type="button" class=${controlClasses} disabled>
+        ${indicator}${content}
+      </button>`;
         }
         return html `${control}<span class="connector" aria-hidden="true"></span>`;
     }
@@ -163,10 +164,10 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaStep.prototype, "disabled", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "state", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "status", void 0);
 __decorate([
     property({ type: Boolean })
@@ -175,7 +176,7 @@ __decorate([
     property({ type: Number })
 ], EunomiaStep.prototype, "index", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStep.prototype, "orientation", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })

package/dist/components/navigation/stepper/stepper.js

@@ -218,8 +218,15 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
     syncSlottedSteps() {
         this.slottedSteps.forEach((step, index) => {
             step.index = index;
-            step.orientation = this.orientation;
-            step.status = this.statusOf(index, this.activeStep, step.state);
+            // Only assigned when they differ: assigning a step's default again
+            // would reflect it.
+            if (step.orientation !== this.orientation) {
+                step.orientation = this.orientation;
+            }
+            const status = this.statusOf(index, this.activeStep, step.state);
+            if (step.status !== status) {
+                step.status = status;
+            }
             const isCurrent = index === this.activeStep;
             step.reachable =
                 !isCurrent &&
@@ -508,7 +515,7 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
  */
 EunomiaStepper.styles = [stepperStyles];
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "steps", void 0);
 __decorate([
     property({ type: Number, attribute: "active-step" })
@@ -517,10 +524,10 @@ __decorate([
     property({ type: Number, attribute: "active-substep" })
 ], EunomiaStepper.prototype, "activeSubstep", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "orientation", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "variant", void 0);
 __decorate([
     property({ reflect: true, converter: linearConverter })

package/dist/components/navigation/tabs/tab-group/tab-group.js

@@ -710,13 +710,13 @@ EunomiaTabGroup.styles = tabGroupStyle;
  */
 EunomiaTabGroup.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "align", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaTabGroup.prototype, "full", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/navigation/tabs/tab-group/tab-group.styles.js

@@ -206,13 +206,13 @@ const base = css `
     animation: var(--_animationTime) ease-in fade-in;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-left) {
     --_animationTime: var(--tab-panel-animation, 500ms);
     animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-left;
   }
 
-  :host([animation="slide"])
+  :host(:is([animation="slide"], :not([animation])))
     slot:not([name])::slotted(eun-tab-panel.slide-right) {
     --_animationTime: var(--tab-panel-animation, 500ms);
     animation: var(--_animationTime) var(--eun-easing-out, ease-out) slide-right;

package/dist/components/navigation/toolbar/toolbar.d.ts

@@ -15,7 +15,7 @@ export type EunomiaToolbarPanelDirection = "top" | "bottom" | "left" | "right";
  * The two color schemes the toolbar itself can render in.
  */
 export type EunomiaToolbarTheme = "light" | "dark";
-declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaToolbar_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 sticky top page toolbar with start, center, and end layout slots, and
  * a burger button that opens a slide-in panel below a mobile breakpoint.
@@ -72,12 +72,12 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {string} panel-size - A custom open size for the mobile panel
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
  * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
- * @prop {string} [ariaLabelMenuOpen='Open menu'] - The accessible label of the burger button while the panel is closed
- * @attr {string} [aria-label-menu-open='Open menu'] - The accessible label of the burger button while the panel is closed
- * @prop {string} [ariaLabelMenuClose='Close menu'] - The accessible label of the burger button while the panel is open
- * @attr {string} [aria-label-menu-close='Close menu'] - The accessible label of the burger button while the panel is open
- * @prop {string} [ariaLabelMenu='Menu'] - The accessible name of the mobile panel itself
- * @attr {string} [aria-label-menu='Menu'] - The accessible name of the mobile panel itself
+ * @prop {string} [menuOpenLabel] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
+ * @attr {string} [menu-open-label] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
+ * @prop {string} [menuCloseLabel] - The accessible label of the burger button while the panel is open. Defaults to the localized string for the current locale (English: "Close menu")
+ * @attr {string} [menu-close-label] - The accessible label of the burger button while the panel is open. Defaults to the localized string for the current locale (English: "Close menu")
+ * @prop {string} [menuLabel] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
+ * @attr {string} [menu-label] - The accessible name of the mobile panel itself. Defaults to the localized string for the current locale (English: "Menu")
  * @attr {string} [aria-label='Main navigation'] - The accessible name of the toolbar's navigation landmark
  * @prop {boolean} [collapseOnScroll=false] - Enables the scroll-triggered collapse mode
  * @attr {boolean} [collapse-on-scroll=false] - Enables the scroll-triggered collapse mode
@@ -182,19 +182,19 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
     closeOnBackdrop: boolean;
     /**
      * Accessible label of the burger button while the panel is closed.
-     * @default Open menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenuOpen: string;
+    menuOpenLabel?: string;
     /**
      * Accessible label of the burger button while the panel is open.
-     * @default Close menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenuClose: string;
+    menuCloseLabel?: string;
     /**
      * Accessible name of the mobile panel itself.
-     * @default Menu
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelMenu: string;
+    menuLabel?: string;
     /**
      * Enables the scroll-triggered collapse mode.
      * @default false