@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/navigation/nav-menu/nav-menu.styles.js

@@ -0,0 +1,352 @@
+import { css, unsafeCSS } from "lit";
+import { linkBlockRule } from "../../action/link/link.styles.js";
+/**
+ * Base style for the nav-menu component.
+ *
+ * The trigger takes the colors of an eun-link, so it sits among the other
+ * links of a navigation without any setup, and its own theme="dark"
+ * follows eun-link's. The panel is a manual popover in the top layer,
+ * anchored to the trigger by AnchorPositionMixin, and animated in CSS with
+ * @starting-style and allow-discrete transitions. Its position comes from
+ * the mixin's --_anchorTop/--_anchorLeft/--_anchorWidth on the fallback
+ * path, and from the @supports (anchor-name) block below on the native
+ * one, which only applies once the mixin actually linked the panel
+ * natively (data-native-anchor).
+ *
+ * The links are styled from here through ::slotted : an eun-link gets its
+ * --link-* custom properties, which its own styles still override, plus
+ * eun-link's own block layout so it fills its row without the block
+ * attribute, and a plain anchor gets the same row look directly.
+ */
+const base = css `
+  :host {
+    --_duration: var(
+      --nav-menu-transition-duration,
+      var(--eun-duration-xl, 300ms)
+    );
+    --_easing: var(--eun-easing-out, ease-out);
+    --_triggerColor: var(
+      --nav-menu-trigger-color,
+      var(--eun-text-color, #071621)
+    );
+    --_triggerColorHover: var(
+      --nav-menu-trigger-color-hover,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    --_triggerColorCurrent: var(
+      --nav-menu-trigger-color-current,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    --_focusOutline: var(
+      --nav-menu-focus-outline-color,
+      var(--eun-color-primary-700, #3662e0)
+    );
+    --_panelBackground: var(
+      --nav-menu-panel-background,
+      var(--eun-surface-color, #ffffff)
+    );
+    --_panelBorderColor: var(
+      --nav-menu-panel-border-color,
+      var(--eun-border-color, #dee0e7)
+    );
+    --_linkColor: var(--nav-menu-link-color, var(--eun-text-color, #071621));
+    --_linkColorHover: var(
+      --nav-menu-link-color-hover,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    --_linkColorCurrent: var(
+      --nav-menu-link-color-current,
+      var(--eun-color-primary-500, #3d6fff)
+    );
+    --_linkBackgroundHover: var(
+      --nav-menu-link-background-hover,
+      var(--eun-content-hover, #edeff0)
+    );
+    display: inline-flex;
+    vertical-align: middle;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+  }
+  :host([theme="dark"]) {
+    --_triggerColor: var(
+      --nav-menu-trigger-color,
+      var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+    );
+    --_triggerColorHover: var(
+      --nav-menu-trigger-color-hover,
+      var(--eun-text-on-inverse, #ffffff)
+    );
+    --_triggerColorCurrent: var(
+      --nav-menu-trigger-color-current,
+      color-mix(in srgb, var(--eun-color-primary-500, #3d6fff) 55%, #ffffff)
+    );
+    --_focusOutline: var(
+      --nav-menu-focus-outline-color,
+      var(--eun-text-on-inverse, #ffffff)
+    );
+    --_panelBackground: var(
+      --nav-menu-panel-background,
+      var(--eun-surface-inverse, #0b1620)
+    );
+    --_panelBorderColor: var(
+      --nav-menu-panel-border-color,
+      rgba(255, 255, 255, 0.12)
+    );
+    --_linkColor: var(
+      --nav-menu-link-color,
+      var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+    );
+    --_linkColorHover: var(
+      --nav-menu-link-color-hover,
+      var(--eun-text-on-inverse, #ffffff)
+    );
+    --_linkColorCurrent: var(
+      --nav-menu-link-color-current,
+      color-mix(in srgb, var(--eun-color-primary-500, #3d6fff) 55%, #ffffff)
+    );
+    --_linkBackgroundHover: var(
+      --nav-menu-link-background-hover,
+      rgba(255, 255, 255, 0.08)
+    );
+  }
+
+  #trigger {
+    --icon-color: currentColor;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nav-menu-trigger-gap, var(--eun-space-xs, 4px));
+    margin: 0;
+    padding: var(
+      --nav-menu-trigger-padding,
+      var(--nav-menu-trigger-padding-block, var(--eun-space-xs, 4px))
+        var(--nav-menu-trigger-padding-inline, var(--eun-space-xs, 4px))
+    );
+    border: none;
+    border-radius: var(
+      --nav-menu-trigger-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
+    background: var(--nav-menu-trigger-background, transparent);
+    box-shadow: var(--nav-menu-trigger-shadow, none);
+    color: var(--_triggerColor);
+    font: inherit;
+    font-size: var(--nav-menu-trigger-font-size, inherit);
+    font-weight: var(--nav-menu-trigger-font-weight, inherit);
+    line-height: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    transition:
+      color var(--_duration) var(--_easing),
+      background-color var(--_duration) var(--_easing),
+      box-shadow var(--_duration) var(--_easing),
+      outline-color var(--_duration) var(--_easing);
+  }
+  #trigger.current {
+    color: var(--_triggerColorCurrent);
+  }
+  #trigger:hover,
+  #trigger:focus-visible,
+  :host([open]) #trigger {
+    color: var(--_triggerColorHover);
+    background: var(
+      --nav-menu-trigger-background-hover,
+      var(--nav-menu-trigger-background, transparent)
+    );
+    box-shadow: var(
+      --nav-menu-trigger-shadow-hover,
+      var(--nav-menu-trigger-shadow, none)
+    );
+  }
+  #trigger:focus-visible {
+    outline-color: var(--_focusOutline);
+  }
+
+  .icon,
+  slot[name="icon"]::slotted(*),
+  slot[name="chevron"]::slotted(*) {
+    --icon-size: var(--nav-menu-icon-size, 1.25em);
+    flex-shrink: 0;
+  }
+  slot[name="icon"] {
+    display: inline-flex;
+  }
+  slot[name="icon"].hidden {
+    display: none;
+  }
+  #chevron {
+    display: inline-flex;
+    transition: transform var(--_duration) var(--_easing);
+  }
+  :host([open]) #chevron {
+    transform: rotate(var(--nav-menu-chevron-rotation, 180deg));
+  }
+
+  #panel {
+    --_offset: var(--nav-menu-offset, var(--eun-space-xs, 4px));
+    --_shift: calc(-1 * var(--eun-space-xs, 4px));
+    scroll-margin-top: var(--_offset);
+    position: fixed;
+    inset: auto;
+    top: var(--_anchorTop, 0);
+    left: var(--_anchorLeft, 0);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nav-menu-panel-gap, 0);
+    min-width: max(
+      var(--_anchorWidth, 0px),
+      var(--nav-menu-panel-min-width, 200px)
+    );
+    max-height: var(--nav-menu-panel-max-height, 70vh);
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--nav-menu-panel-padding, var(--eun-space-xs, 4px));
+    list-style: none;
+    font-family: var(--eun-font-family, "Mulish", sans-serif);
+    font-size: var(--eun-font-size-s, 14px);
+    color: var(--_linkColor);
+    background: var(--_panelBackground);
+    border: var(--eun-border-width-s, 1px) solid var(--_panelBorderColor);
+    border-radius: var(
+      --nav-menu-panel-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
+    box-shadow: var(
+      --nav-menu-panel-shadow,
+      var(
+        --eun-shadow-m,
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05)
+      )
+    );
+    opacity: 0;
+    translate: 0 var(--_shift);
+    transition:
+      opacity var(--_duration) var(--_easing),
+      translate var(--_duration) var(--_easing),
+      display var(--_duration) allow-discrete,
+      overlay var(--_duration) allow-discrete;
+  }
+  #panel[data-placement="top"] {
+    --_shift: var(--eun-space-xs, 4px);
+  }
+  #panel:not(:popover-open) {
+    display: none;
+  }
+  #panel:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
+  @starting-style {
+    #panel:popover-open {
+      opacity: 0;
+      translate: 0 var(--_shift);
+    }
+  }
+  #panel li {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  ${linkBlockRule(unsafeCSS("#panel ::slotted(eun-link)"))}
+
+  #panel ::slotted(eun-link) {
+    --link-color: var(--_linkColor);
+    --link-color-hover: var(--_linkColorHover);
+    --link-color-focus: var(--_linkColorHover);
+    --link-color-visited: var(--_linkColor);
+    --link-color-visited-hover: var(--_linkColorHover);
+    --link-color-current: var(--_linkColorCurrent);
+    --link-focus-outline-color: var(--_focusOutline);
+    --link-text-decoration: none;
+    --link-background-hover: var(--_linkBackgroundHover);
+    --link-background-focus: var(--_linkBackgroundHover);
+    --link-padding: var(
+      --nav-menu-link-padding,
+      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+    );
+    --link-border-radius: var(
+      --nav-menu-link-border-radius,
+      var(--eun-border-radius-s, 4px)
+    );
+  }
+
+  #panel ::slotted(a) {
+    display: block;
+    padding: var(
+      --nav-menu-link-padding,
+      var(--eun-space-s, 8px) var(--eun-space-m, 16px)
+    );
+    border-radius: var(
+      --nav-menu-link-border-radius,
+      var(--eun-border-radius-s, 4px)
+    );
+    color: var(--_linkColor);
+    text-decoration: none;
+    white-space: nowrap;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    transition:
+      color var(--_duration) var(--_easing),
+      background-color var(--_duration) var(--_easing),
+      outline-color var(--_duration) var(--_easing);
+  }
+  #panel ::slotted(a:hover),
+  #panel ::slotted(a:focus-visible) {
+    color: var(--_linkColorHover);
+    background: var(--_linkBackgroundHover);
+  }
+  #panel ::slotted(a:focus-visible) {
+    outline-color: var(--_focusOutline);
+  }
+  #panel ::slotted(a[aria-current="page"]) {
+    color: var(--_linkColorCurrent);
+  }
+
+  @supports (anchor-name: --a) {
+    #panel[data-native-anchor] {
+      top: auto;
+      left: auto;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      margin-block-start: var(--_offset);
+      min-width: max(
+        anchor-size(width),
+        var(--nav-menu-panel-min-width, 200px)
+      );
+    }
+    :host([placement="bottom"]) #panel[data-native-anchor] {
+      position-area: block-end;
+    }
+    :host([placement="bottom-end"]) #panel[data-native-anchor] {
+      position-area: block-end span-inline-start;
+    }
+    :host([placement^="top"]) #panel[data-native-anchor] {
+      margin-block: 0 var(--_offset);
+    }
+    :host([placement="top-start"]) #panel[data-native-anchor] {
+      position-area: block-start span-inline-end;
+    }
+    :host([placement="top"]) #panel[data-native-anchor] {
+      position-area: block-start;
+    }
+    :host([placement="top-end"]) #panel[data-native-anchor] {
+      position-area: block-start span-inline-start;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #trigger,
+    #chevron,
+    #panel,
+    #panel ::slotted(a) {
+      transition: none;
+    }
+  }
+`;
+export const navMenuStyles = base;

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

@@ -342,5 +342,8 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaPaginationTagName]: EunomiaPagination;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaPaginationTagName]: "page-size-options";
+    }
 }
 export {};

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

@@ -86,7 +86,7 @@ const base = css `
       var(--eun-border-radius-m, 8px)
     );
     background: transparent;
-    color: var(--pagination-item-color, var(--eun-text-secondary, #484e61));
+    color: var(--pagination-item-color, var(--eun-text-secondary, #666e8a));
     outline: 2px solid transparent;
     outline-offset: 2px;
     user-select: none;
@@ -149,7 +149,7 @@ const base = css `
     cursor: default;
   }
   span.ellipsis {
-    color: var(--pagination-ellipsis-color, var(--eun-text-secondary, #484e61));
+    color: var(--pagination-ellipsis-color, var(--eun-text-secondary, #666e8a));
     cursor: default;
     user-select: none;
   }

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

@@ -52,7 +52,7 @@ declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").
  * @prop {'mobile' | 'tablet' | 'laptop' | 'desktop'} hideBelow - Hides the sidebar below this breakpoint, for a layout where another navigation takes over on small screens, such as the toolbar's mobile panel. Also applies before the component loads when sidebar-ssr.css is linked
  * @attr {'mobile' | 'tablet' | 'laptop' | 'desktop'} hide-below - Hides the sidebar below this breakpoint
  * @prop {'light' | 'dark'} [theme='light'] - The sidebar's color scheme. Dark uses the inverse surface, for a sidebar on a dark background
- * @prop {boolean} [collapsible=true] - Whether the built-in toggle button renders at all. The collapse, expand, and toggle methods still work regardless, for driving collapse from elsewhere, such as a page header menu button. Set to false, or the attribute to "false", to rely on resizable alone
+ * @prop {boolean} [collapsible=false] - Whether the built-in toggle button renders at all. The collapse, expand, and toggle methods still work regardless, for driving collapse from elsewhere, such as a page header menu button. Leave it off to rely on resizable alone
  * @prop {'edge' | 'inline'} [togglePlacement='edge'] - Where the built-in toggle button renders: edge floats on the border, and inline sits inside the panel, pinned below the body and footer
  * @attr {'edge' | 'inline'} [toggle-placement='edge'] - Where the built-in toggle button renders: edge floats on the border, and inline sits inside the panel, pinned below the body and footer
  * @prop {'mini' | 'hidden'} [collapseMode='mini'] - The shape the collapsed state takes
@@ -62,7 +62,7 @@ declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").
  * @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. Set to false, or the attribute to "false", to turn it off
+ * @prop {boolean} [resizable=false] - Whether the border can be dragged, or, once focused, adjusted with arrow keys, to resize the panel
  * @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 below the mini width. A collapse reached this way takes the shape set by collapseMode, and expanding again returns to --sidebar-width
@@ -78,6 +78,7 @@ declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--sidebar-toggle-color] - Sets the color of the toggle button
  * @cssprop [--sidebar-toggle-background-hover] - Sets the background color of the toggle button on hover
+ * @cssprop [--sidebar-focus-outline-color] - Sets the keyboard focus color of the toggle button's outline and of the resize handle
  * @cssprop [--sidebar-resize-handle-delay] - Sets how long the pointer must rest on the border before the resize handle shows. Set to 0 to show it right away
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar
@@ -122,11 +123,9 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * Whether the built-in toggle button renders at all (see `togglePlacement`
      * for where) ; `collapse()`/`expand()`/`toggleCollapse()` work regardless,
      * for driving collapse from elsewhere (e.g. a page header menu button) —
-     * set this to `false` to drop the built-in button entirely and rely on
-     * `resizable` (dragging the border past the mini floor) alone. The
-     * attribute value `"false"` turns it off too (see {@link
-     * defaultTrueConverter}).
-     * @default true
+     * leave it off to rely on `resizable` (dragging the border past the mini
+     * floor) alone.
+     * @default false
      */
     collapsible: boolean;
     /**
@@ -164,9 +163,8 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * Whether the border can be dragged (or, once focused, adjusted with the
      * arrow keys) to resize the panel between `--sidebar-mini-width` and
      * `--sidebar-max-width`. Independent of `collapsible`, which only
-     * controls the discrete toggle button. The attribute value `"false"`
-     * turns it off too (see {@link defaultTrueConverter}).
-     * @default true
+     * controls the discrete toggle button.
+     * @default false
      */
     resizable: boolean;
     /**

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

@@ -11,7 +11,6 @@ import { ChangeEvent } from "../../../events/change.event.js";
 import { sidebarStyles } from "./sidebar.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { cssTimeToMs } from "../../../utils/motion.utils.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the sidebar component.
  */
@@ -46,7 +45,7 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @prop {'mobile' | 'tablet' | 'laptop' | 'desktop'} hideBelow - Hides the sidebar below this breakpoint, for a layout where another navigation takes over on small screens, such as the toolbar's mobile panel. Also applies before the component loads when sidebar-ssr.css is linked
  * @attr {'mobile' | 'tablet' | 'laptop' | 'desktop'} hide-below - Hides the sidebar below this breakpoint
  * @prop {'light' | 'dark'} [theme='light'] - The sidebar's color scheme. Dark uses the inverse surface, for a sidebar on a dark background
- * @prop {boolean} [collapsible=true] - Whether the built-in toggle button renders at all. The collapse, expand, and toggle methods still work regardless, for driving collapse from elsewhere, such as a page header menu button. Set to false, or the attribute to "false", to rely on resizable alone
+ * @prop {boolean} [collapsible=false] - Whether the built-in toggle button renders at all. The collapse, expand, and toggle methods still work regardless, for driving collapse from elsewhere, such as a page header menu button. Leave it off to rely on resizable alone
  * @prop {'edge' | 'inline'} [togglePlacement='edge'] - Where the built-in toggle button renders: edge floats on the border, and inline sits inside the panel, pinned below the body and footer
  * @attr {'edge' | 'inline'} [toggle-placement='edge'] - Where the built-in toggle button renders: edge floats on the border, and inline sits inside the panel, pinned below the body and footer
  * @prop {'mini' | 'hidden'} [collapseMode='mini'] - The shape the collapsed state takes
@@ -56,7 +55,7 @@ export const EunomiaSidebarTagName = "eun-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. Set to false, or the attribute to "false", to turn it off
+ * @prop {boolean} [resizable=false] - Whether the border can be dragged, or, once focused, adjusted with arrow keys, to resize the panel
  * @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 below the mini width. A collapse reached this way takes the shape set by collapseMode, and expanding again returns to --sidebar-width
@@ -72,6 +71,7 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @cssprop [--sidebar-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--sidebar-toggle-color] - Sets the color of the toggle button
  * @cssprop [--sidebar-toggle-background-hover] - Sets the background color of the toggle button on hover
+ * @cssprop [--sidebar-focus-outline-color] - Sets the keyboard focus color of the toggle button's outline and of the resize handle
  * @cssprop [--sidebar-resize-handle-delay] - Sets how long the pointer must rest on the border before the resize handle shows. Set to 0 to show it right away
  * @cssprop [--sidebar-transition-duration] - Sets the duration of the collapse and resize transition
  * @element eun-sidebar
@@ -96,13 +96,11 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          * Whether the built-in toggle button renders at all (see `togglePlacement`
          * for where) ; `collapse()`/`expand()`/`toggleCollapse()` work regardless,
          * for driving collapse from elsewhere (e.g. a page header menu button) —
-         * set this to `false` to drop the built-in button entirely and rely on
-         * `resizable` (dragging the border past the mini floor) alone. The
-         * attribute value `"false"` turns it off too (see {@link
-         * defaultTrueConverter}).
-         * @default true
+         * leave it off to rely on `resizable` (dragging the border past the mini
+         * floor) alone.
+         * @default false
          */
-        this.collapsible = true;
+        this.collapsible = false;
         /**
          * Where the built-in toggle button renders : `edge` floats on the
          * border, vertically centered — `inline` sits inside the panel instead,
@@ -128,11 +126,10 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          * Whether the border can be dragged (or, once focused, adjusted with the
          * arrow keys) to resize the panel between `--sidebar-mini-width` and
          * `--sidebar-max-width`. Independent of `collapsible`, which only
-         * controls the discrete toggle button. The attribute value `"false"`
-         * turns it off too (see {@link defaultTrueConverter}).
-         * @default true
+         * controls the discrete toggle button.
+         * @default false
          */
-        this.resizable = true;
+        this.resizable = false;
         /**
          * The panel width, in px, right before the current drag-resize started.
          * @internal
@@ -748,7 +745,7 @@ __decorate([
     property()
 ], EunomiaSidebar.prototype, "heading", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter })
+    property({ type: Boolean })
 ], EunomiaSidebar.prototype, "collapsible", void 0);
 __decorate([
     property({ reflect: true, attribute: "toggle-placement", useDefault: true })
@@ -766,7 +763,7 @@ __decorate([
     property({ attribute: "collapse-label" })
 ], EunomiaSidebar.prototype, "collapseLabel", void 0);
 __decorate([
-    property({ converter: defaultTrueConverter })
+    property({ type: Boolean })
 ], EunomiaSidebar.prototype, "resizable", void 0);
 __decorate([
     property({ attribute: "resize-label" })

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

@@ -31,7 +31,7 @@ const base = css `
     );
     --_toggleColor: var(
       --sidebar-toggle-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_toggleBackgroundHover: var(
       --sidebar-toggle-background-hover,
@@ -155,7 +155,10 @@ const base = css `
   #resize-handle.armed,
   #resize-handle:focus-visible {
     cursor: ew-resize;
-    background: var(--eun-color-primary-500, #3d6fff);
+    background: var(
+      --sidebar-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     opacity: 0.35;
     transition: background-color var(--eun-duration-s, 150ms)
       var(--eun-easing-default, ease);
@@ -243,12 +246,18 @@ const base = css `
   }
 
   #collapse-toggle:focus-visible {
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --sidebar-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     outline-offset: 1px;
   }
   #collapse-toggle.inline:focus-visible {
     outline-offset: -2px;
-    outline-color: var(--eun-color-primary-500, #3d6fff);
+    outline-color: var(
+      --sidebar-focus-outline-color,
+      var(--eun-color-primary-500, #3d6fff)
+    );
     border-start-start-radius: var(--eun-border-radius-m, 8px);
     border-start-end-radius: var(--eun-border-radius-m, 8px);
     background: var(--_toggleBackgroundHover);

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

@@ -106,7 +106,7 @@ export const stepStyles = css `
       --stepper-indicator-background,
       var(--eun-content-hover, #edeff0)
     );
-    color: var(--stepper-indicator-color, var(--eun-text-secondary, #484e61));
+    color: var(--stepper-indicator-color, var(--eun-text-secondary, #666e8a));
     font-size: var(
       --stepper-indicator-font-size,
       var(--eun-font-size-xs, 12px)
@@ -185,7 +185,7 @@ export const stepStyles = css `
       --stepper-description-font-size,
       var(--eun-font-size-xs, 12px)
     );
-    color: var(--stepper-description-color, var(--eun-text-secondary, #484e61));
+    color: var(--stepper-description-color, var(--eun-text-secondary, #666e8a));
   }
   .description[hidden] {
     display: none;

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

@@ -80,11 +80,11 @@ declare const EunomiaStepper_base: import("../../../utils/constructor.type.js").
  *
  * Whether, and how far, someone can jump between steps by activating them
  * directly is controlled by linear and each step's own disabled setting.
- * With the default linear, only steps before activeStep are reachable:
- * revisiting a past step is always allowed, while skipping ahead of the
- * current one is not, since that's exactly the case where something isn't
- * filled in yet. Set linear to false to make every non-disabled step
- * freely reachable in any order. Disabled on the stepper itself disables
+ * By default every non-disabled step is freely reachable in any order.
+ * With linear, only steps before activeStep are reachable: revisiting a
+ * past step is always allowed, while skipping ahead of the current one is
+ * not, since that's exactly the case where something isn't filled in
+ * yet. Disabled on the stepper itself disables
  * every step's control the same way an individual step's own disabled
  * does, leaving a read-only progress summary with no navigation at all,
  * the current step still rendered as non-interactive text either way.
@@ -94,11 +94,11 @@ declare const EunomiaStepper_base: import("../../../utils/constructor.type.js").
  * @attr {string} [steps='[]'] - The process's steps, as a JSON array
  * @prop {number} [activeStep=0] - The zero-based index of the current step
  * @attr {number} [active-step=0] - The zero-based index of the current step
- * @prop {number} [activeSubstep] - The zero-based index, into the active step's substeps, of the current substep. Meaningless when that step has no substeps
- * @attr {number} [active-substep] - The zero-based index, into the active step's substeps, of the current substep. Meaningless when that step has no substeps
+ * @prop {number} [activeSubstep] - The zero-based index, into the active step's substeps, of the current substep, bounded to the last one. Meaningless when that step has no substeps
+ * @attr {number} [active-substep] - The zero-based index, into the active step's substeps, of the current substep, bounded to the last one. Meaningless when that step has no substeps
  * @prop {'horizontal' | 'vertical'} [orientation='horizontal'] - The numbered display's layout direction. Has no effect on the progress variant
  * @prop {'numbered' | 'progress'} [variant='numbered'] - Which of the two displays to render
- * @prop {boolean} [linear=true] - Restricts direct navigation to steps before activeStep. Set to false to allow jumping to any non-disabled step in any order
+ * @prop {boolean} [linear=false] - Restricts direct navigation to steps before activeStep. Left off, any non-disabled step can be reached in any order
  * @prop {boolean} [disabled=false] - Disables every step's control, leaving a read-only progress summary with no navigation at all, the same way an individual step's own disabled does
  * @attr {string} [aria-label] - The accessible label for the navigation landmark. Numbered display only. Defaults to the localized string for the current locale (English: "Progress")
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -174,11 +174,9 @@ export declare class EunomiaStepper extends EunomiaStepper_base {
      */
     variant: EunomiaStepperVariant;
     /**
-     * Restricts direct navigation to steps before {@link activeStep} ; set
-     * to `false` (either as the JS property, or the literal `linear="false"`
-     * attribute — see {@link defaultTrueConverter}) to allow jumping to any
-     * non-`disabled` step in any order.
-     * @default true
+     * Restricts direct navigation to steps before {@link activeStep}. Left
+     * off, any non-`disabled` step can be reached in any order.
+     * @default false
      */
     linear: boolean;
     /**
@@ -271,6 +269,16 @@ export declare class EunomiaStepper extends EunomiaStepper_base {
      * @private
      */
     private renderIndicatorContent;
+    /**
+     * {@link activeSubstep}, bounded to the active step's `substeps` : an
+     * index past the last substep reads as the last one, a negative one as
+     * the first, and an unset or non-numeric one as none.
+     *
+     * @param substeps the active step's `substeps`.
+     * @returns the bounded index, or `undefined`.
+     * @private
+     */
+    private currentSubstepIndex;
     /**
      * Renders the current step's substep-progress ring : purely decorative
      * (`aria-hidden`, see {@link renderStep} for the accessible text
@@ -352,5 +360,8 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaStepperTagName]: EunomiaStepper;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaStepperTagName]: "steps";
+    }
 }
 export {};