@eunomia/elements 1.0.0-beta.5 → 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/pagination/pagination.styles.js

@@ -79,9 +79,14 @@ export const paginationStyles = css `
     outline-offset: 2px;
     user-select: none;
     transition:
-      background var(--pagination-transition-duration, 0.2s) ease-out,
-      outline var(--pagination-transition-duration, 0.2s) ease-out,
-      color var(--pagination-transition-duration, 0.2s) ease-out;
+      background
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      outline
+        var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out),
+      color var(--pagination-transition-duration, var(--eun-duration-m, 200ms))
+        var(--eun-easing-out, ease-out);
   }
   button.control {
     cursor: pointer;

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
@@ -64,11 +65,13 @@ export type EunomiaSidebarTogglePlacement = "edge" | "inline";
  * @cssprop [--sidebar-color] - Sets the text color of the sidebar
  * @cssprop [--sidebar-border-color] - Sets the color of the sidebar's side border
  * @cssprop [--sidebar-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--sidebar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * @cssprop [--sidebar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @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.
      *
@@ -122,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
@@ -140,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
@@ -489,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
@@ -61,11 +62,13 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @cssprop [--sidebar-color] - Sets the text color of the sidebar
  * @cssprop [--sidebar-border-color] - Sets the color of the sidebar's side border
  * @cssprop [--sidebar-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--sidebar-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * @cssprop [--sidebar-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @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);
         /**
@@ -105,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
@@ -123,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
@@ -586,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
@@ -641,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())}
@@ -697,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()
@@ -706,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

@@ -10,6 +10,8 @@ import { css } from "lit";
  * [--sidebar-color] - Set a custom text color to the sidebar (pair with --sidebar-background for contrast)
  * [--sidebar-border-color] - Set a custom color to the sidebar's side border
  * [--sidebar-padding] - Set a custom padding to the header/body/footer
+ * [--sidebar-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --sidebar-padding is set
+ * [--sidebar-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --sidebar-padding is set
  * [--sidebar-gap] - Set a custom gap inside the header/footer rows
  * [--sidebar-transition-duration] - Set a custom duration for the collapse/resize transition
  */
@@ -23,9 +25,19 @@ const base = css `
       --sidebar-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_padding: var(--sidebar-padding, var(--eun-space-m, 16px));
+    --_paddingBlock: var(
+      --sidebar-padding,
+      var(--sidebar-padding-block, var(--eun-space-m, 16px))
+    );
+    --_paddingInline: var(
+      --sidebar-padding,
+      var(--sidebar-padding-inline, var(--eun-space-m, 16px))
+    );
     --_gap: var(--sidebar-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--sidebar-transition-duration, 0.25s);
+    --_transitionDuration: var(
+      --sidebar-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     display: flex;
     position: sticky;
     top: 0;
@@ -33,7 +45,7 @@ const base = css `
     height: 100%;
     box-sizing: border-box;
     width: var(--_width);
-    transition: width var(--_transitionDuration) ease;
+    transition: width var(--_transitionDuration) var(--eun-easing-default, ease);
     border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
   :host([dragging]) {
@@ -41,9 +53,10 @@ const base = css `
   }
   :host([position="end"]) {
     border-inline-end: none;
-    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    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"]) {
@@ -76,7 +89,7 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_padding) var(--_padding) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline) 0;
   }
   #heading {
     margin: 0;
@@ -88,7 +101,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_padding);
+    padding: var(--_gap) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -96,7 +109,7 @@ const base = css `
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    padding: var(--_padding);
+    padding: var(--_paddingBlock) var(--_paddingInline);
   }
 
   #resize-handle {
@@ -108,7 +121,8 @@ const base = css `
     cursor: ew-resize;
     touch-action: none;
     background: transparent;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #resize-handle {
     inset-inline-end: auto;
@@ -143,7 +157,8 @@ const base = css `
     border-radius: var(--eun-border-radius-xl, 999px);
     color: var(--eun-text-secondary, #484e61);
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #collapse-toggle:not(.inline) {
     inset-inline-end: auto;
@@ -159,7 +174,7 @@ const base = css `
     align-items: center;
     gap: var(--eun-space-s, 8px);
     width: 100%;
-    padding: var(--eun-space-s, 8px) var(--_padding);
+    padding: var(--eun-space-s, 8px) var(--_paddingInline);
     border: none;
     border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
@@ -169,7 +184,8 @@ const base = css `
     font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #collapse-toggle.inline:hover {
     background: var(--eun-content-hover, #edeff0);
@@ -179,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" })