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

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

@@ -10,6 +10,8 @@ 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";
+import { cssTimeToMs } from "../../../utils/motion.utils.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the sidebar component.
  */
@@ -41,7 +43,10 @@ export const EunomiaSidebarTagName = "eun-sidebar";
  * @slot footer - Optional footer content, such as a user menu, fixed below the scrollable body. Omitted entirely when nothing is slotted
  * @prop {'start' | 'end'} [position='start'] - Which edge of the layout the sidebar is pinned against
  * @prop {string} heading - An optional heading, rendered as the header slot's fallback content, and used as the accessible name when set
- * @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 to rely on resizable alone
+ * @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 {'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
@@ -51,20 +56,23 @@ 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
+ * @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 {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
+ * @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
  * @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
  * @cssprop [--sidebar-max-width] - Sets the ceiling of the drag-resize range
- * @cssprop [--sidebar-background] - Sets the background color of the sidebar
+ * @cssprop [--sidebar-background] - Sets the background color of the sidebar. Use an opaque color, or transparent to show the background behind the 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-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-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
  */
@@ -78,12 +86,20 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          * @default start
          */
         this.position = "start";
+        /**
+         * The sidebar's color scheme : `dark` uses the inverse surface, the same
+         * one `eun-toolbar`'s own `theme="dark"` does.
+         * @default light
+         */
+        this.theme = "light";
         /**
          * 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.
+         * `resizable` (dragging the border past the mini floor) alone. The
+         * attribute value `"false"` turns it off too (see {@link
+         * defaultTrueConverter}).
          * @default true
          */
         this.collapsible = true;
@@ -112,7 +128,8 @@ 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.
+         * controls the discrete toggle button. The attribute value `"false"`
+         * turns it off too (see {@link defaultTrueConverter}).
          * @default true
          */
         this.resizable = true;
@@ -123,8 +140,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
         this.dragStartWidth = 0;
         /**
          * The last *unclamped* width computed during a drag, used on release to
-         * decide whether the drag went far enough past the mini floor to snap
-         * into a full `collapse-mode="hidden"` collapse.
+         * decide whether the drag went below the mini floor and collapses.
          * @internal
          */
         this.lastRawWidth = 0;
@@ -137,13 +153,6 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          * @internal
          */
         this.dragStartCollapsed = false;
-        /**
-         * Whether `draggedHidden` was set right before the current drag started
-         * — compared against the final state at release for the same reason
-         * `dragStartCollapsed` is.
-         * @internal
-         */
-        this.dragStartHidden = false;
         /**
          * Whether `pointermove` actually fired at least once since the current
          * `pointerdown` — a plain click on the resize handle (no movement)
@@ -158,18 +167,13 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          */
         this.dragging = false;
         /**
-         * Whether a drag has forced the panel fully hidden (width `0`, border
-         * transparent) regardless of `collapse-mode` — `collapse-mode="mini"`'s
-         * own collapsed state normally floors at `--sidebar-mini-width`, but a
-         * drag that goes well past that floor toward zero can still reach a full
-         * hide, matching what `collapse-mode="hidden"` already looks like.
-         * Reflected so CSS can force `--_width`/`border-color` to win over
-         * collapse-mode's own (otherwise fixed) collapsed-state rule. Cleared by
-         * any discrete collapse()/expand()/toggleCollapse() (button or API),
-         * which always takes precedence over a lingering drag state.
+         * Whether the resize handle shows its highlight and resize cursor : set
+         * once the pointer has rested on the border for
+         * `--sidebar-resize-handle-delay`, or right away on `pointerdown`, so
+         * merely crossing the border on the way to the content doesn't flash it.
          * @internal
          */
-        this.draggedHidden = false;
+        this.resizeHandleArmed = false;
         /**
          * Whether focus was inside the sidebar right before a `willUpdate` that's
          * about to fully collapse it (`collapse-mode="hidden"`). Captured
@@ -181,6 +185,30 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
          * @internal
          */
         this.focusWasInsideBeforeHiddenCollapse = false;
+        /**
+         * Arms the resize handle once the pointer has rested on the border for
+         * `--sidebar-resize-handle-delay` (300ms by default).
+         * @private
+         */
+        this.handleResizePointerEnter = () => {
+            this.disarmResizeHandle();
+            const delay = cssTimeToMs(getComputedStyle(this).getPropertyValue("--sidebar-resize-handle-delay")) ?? 100;
+            if (delay === 0) {
+                this.resizeHandleArmed = true;
+                return;
+            }
+            this.resizeHandleArmTimer = setTimeout(() => {
+                this.resizeHandleArmTimer = undefined;
+                this.resizeHandleArmed = true;
+            }, delay);
+        };
+        /**
+         * Disarms the resize handle as soon as the pointer leaves the border.
+         * @private
+         */
+        this.handleResizePointerLeave = () => {
+            this.disarmResizeHandle();
+        };
         /**
          * Starts a drag-resize : captures the pointer on the handle itself (so
          * subsequent `pointermove`/`pointerup` keep firing there even once the
@@ -193,6 +221,11 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
             if (event.pointerType === "mouse" && event.button !== 0) {
                 return;
             }
+            if (this.resizeHandleArmTimer !== undefined) {
+                clearTimeout(this.resizeHandleArmTimer);
+                this.resizeHandleArmTimer = undefined;
+            }
+            this.resizeHandleArmed = true;
             try {
                 this.resizeHandleEl?.setPointerCapture(event.pointerId);
             }
@@ -200,17 +233,16 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
             this.dragStartX = event.clientX;
             this.dragStartWidth = this.currentWidthPx();
             this.dragStartCollapsed = this.collapsed;
-            this.dragStartHidden = this.draggedHidden;
             this.lastRawWidth = this.dragStartWidth;
             this.dragMoved = false;
         };
         /**
          * Tracks an in-progress drag-resize, applying the live width as the
          * pointer moves. Direction is flipped for `position="end"`, where
-         * dragging left (toward the panel) grows it. Tracks all the way down to
-         * `0` (not just the mini floor) so the panel visually approaches a full
-         * hide as the drag continues — `handleResizePointerUp` decides whether
-         * it actually settles there.
+         * dragging left (toward the panel) grows it. Under `collapse-mode="mini"`
+         * the panel stops at the mini floor, the narrowest it can ever be ; under
+         * `hidden` it tracks all the way down to `0`, previewing the full hide —
+         * `handleResizePointerUp` decides whether it actually collapses.
          *
          * @param event the pointermove event.
          * @private
@@ -224,12 +256,11 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
             const delta = event.clientX - this.dragStartX;
             const signedDelta = this.position === "start" ? delta : -delta;
             this.lastRawWidth = this.dragStartWidth + signedDelta;
-            this.applyWidth(this.lastRawWidth, 0);
+            this.applyWidth(this.lastRawWidth, this.collapseMode === "hidden" ? 0 : this.miniWidthPx());
         };
         /**
          * Ends a drag-resize : a plain click (no movement) is a no-op ; see
-         * `settleWidth` for how the final width resolves into `collapsed`/
-         * `draggedHidden`.
+         * `settleWidth` for how the final width resolves into `collapsed`.
          *
          * @param event the pointerup/pointercancel event.
          * @private
@@ -250,7 +281,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
             if (!this.dragMoved) {
                 return;
             }
-            this.settleWidth(this.lastRawWidth, this.dragStartCollapsed, this.dragStartHidden);
+            this.settleWidth(this.lastRawWidth, this.dragStartCollapsed);
         };
         /**
          * Keyboard resizing, per the WAI-ARIA window splitter pattern :
@@ -326,6 +357,14 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
             this.collapseToggleEl?.focus();
         }
     }
+    /**
+     * Lifecycle hook called when the element is disconnected from the DOM.
+     * Clears a pending resize handle arming timer.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disarmResizeHandle();
+    }
     /**
      * Collapses the sidebar.
      */
@@ -352,20 +391,22 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
      * @private
      */
     setCollapsed(collapsed) {
-        const changing = this.collapsed !== collapsed;
-        const clearingDraggedHidden = this.draggedHidden;
-        if (!changing && !clearingDraggedHidden) {
+        if (this.collapsed === collapsed) {
             return;
         }
         this.collapsed = collapsed;
-        if (clearingDraggedHidden) {
-            this.draggedHidden = false;
-            this.style.removeProperty("border-color");
-            this.style.removeProperty("--sidebar-width");
-            this.liveWidthPx = undefined;
-        }
         this.dispatchEvent(new ChangeEvent());
     }
+    /**
+     * Drops the width a drag or keyboard resize applied, so the next expand
+     * returns to `--sidebar-width` instead of the narrow width the resize
+     * collapsed from.
+     * @private
+     */
+    forgetResizedWidth() {
+        this.style.removeProperty("--sidebar-width");
+        this.liveWidthPx = undefined;
+    }
     /**
      * Reads a length custom property off the host's computed style, parsed
      * as a px number.
@@ -411,8 +452,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
      * @private
      */
     currentWidthPx() {
-        if (this.draggedHidden ||
-            (this.collapsed && this.collapseMode === "hidden")) {
+        if (this.collapsed && this.collapseMode === "hidden") {
             return 0;
         }
         if (this.collapsed && this.collapseMode === "mini") {
@@ -425,23 +465,21 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
      * `--sidebar-width` override, so a drag tracks the pointer immediately
      * rather than waiting on Lit's render cycle) and reactively (via
      * `liveWidthPx`, so `#resize-handle`'s `aria-valuenow` stays in sync).
-     * Also clears `collapsed`/`draggedHidden` without dispatching : while
-     * either reflects, its CSS rule sets `--_width` directly and would
-     * otherwise ignore every live update below — `settleWidth`/
-     * `settleCollapsedState` restore the correct final truth (and their one
-     * authoritative `eunchange`) once the interaction ends.
+     * Also clears `collapsed` without dispatching : while it reflects, its
+     * CSS rule sets `--_width` directly and would otherwise ignore every live
+     * update below — `settleWidth`/`settleCollapsedState` restore the correct
+     * final truth (and their one authoritative `eunchange`) once the
+     * interaction ends.
      *
      * @param px the requested width, in px.
-     * @param floor the minimum to clamp to — the mini width by default
-     * (used by keyboard resizing, which never fully hides the panel), or
-     * `0` during a live drag so it can visually approach a full hide.
+     * @param floor the minimum to clamp to — the mini width by default, or
+     * `0` during a `collapse-mode="hidden"` drag so it can visually approach
+     * a full hide.
      * @private
      */
     applyWidth(px, floor = this.miniWidthPx()) {
         const clamped = Math.min(Math.max(px, floor), this.maxWidthPx());
         this.collapsed = false;
-        this.draggedHidden = false;
-        this.style.removeProperty("border-color");
         this.style.setProperty("--sidebar-width", `${clamped}px`);
         this.liveWidthPx = clamped;
     }
@@ -449,9 +487,10 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
      * Reconciles `collapsed` once a *keyboard* resize ends, comparing the
      * interaction's start and end states so exactly one `eunchange` fires
      * for a genuine transition — and none at all for a resize that never
-     * crossed the mini floor. Never settles into `draggedHidden` : keyboard
-     * resizing intentionally can't fully hide the panel (see
-     * `handleResizeKeydown`).
+     * crossed the mini floor. Only `collapse-mode="mini"` collapses here :
+     * under `hidden`, collapsing would hide the panel entirely, which stays
+     * the toggle button's job (see `handleResizeKeydown`). A collapse forgets
+     * the resized width, so the next expand returns to `--sidebar-width`.
      *
      * @param widthPx the final width the interaction landed on.
      * @param wasCollapsed whether the sidebar was collapsed when the
@@ -459,48 +498,55 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
      * @private
      */
     settleCollapsedState(widthPx, wasCollapsed) {
-        const collapsed = widthPx <= this.miniWidthPx();
+        const collapsed = this.collapseMode === "mini" && widthPx <= this.miniWidthPx();
+        if (collapsed) {
+            this.forgetResizedWidth();
+        }
         this.collapsed = collapsed;
         if (collapsed !== wasCollapsed) {
             this.dispatchEvent(new ChangeEvent());
         }
     }
     /**
-     * Reconciles both `collapsed` and `draggedHidden` once a *drag* resize
-     * ends. Three outcomes, based on where the (unclamped) drag landed :
-     * above the mini floor, free width ; below it but not by much, a
-     * magnetic snap up to exactly the mini width ; well below it, a full
-     * hide (`draggedHidden`) regardless of `collapse-mode` — dragging is a
-     * deliberate enough gesture that reaching zero should always be
-     * reachable, unlike keyboard stepping. Fires exactly one `eunchange` iff
-     * either flag actually changed from where the interaction started.
+     * Reconciles `collapsed` once a *drag* resize ends : a drag that lands
+     * below the mini floor collapses into whichever shape `collapse-mode`
+     * sets (the icon rail for `mini`, a full hide for `hidden`), and forgets
+     * the dragged width so the next expand returns to `--sidebar-width`.
+     * Anywhere else keeps the dragged width, clamped to the resize range.
+     * Fires exactly one `eunchange` iff `collapsed` actually changed from
+     * where the interaction started.
      *
      * @param rawWidth the final unclamped width the drag landed on.
      * @param wasCollapsed whether `collapsed` was set when the drag started.
-     * @param wasHidden whether `draggedHidden` was set when the drag started.
      * @private
      */
-    settleWidth(rawWidth, wasCollapsed, wasHidden) {
+    settleWidth(rawWidth, wasCollapsed) {
         const miniWidth = this.miniWidthPx();
-        const hidden = rawWidth < miniWidth / 2;
-        const collapsed = hidden || rawWidth < miniWidth;
-        const settled = hidden
-            ? 0
-            : Math.min(Math.max(rawWidth, miniWidth), this.maxWidthPx());
-        this.style.setProperty("--sidebar-width", `${settled}px`);
-        if (hidden) {
-            this.style.setProperty("border-color", "transparent");
+        const collapsed = rawWidth < miniWidth;
+        if (collapsed) {
+            this.forgetResizedWidth();
         }
         else {
-            this.style.removeProperty("border-color");
+            const settled = Math.min(rawWidth, this.maxWidthPx());
+            this.style.setProperty("--sidebar-width", `${settled}px`);
+            this.liveWidthPx = settled;
         }
-        this.liveWidthPx = settled;
         this.collapsed = collapsed;
-        this.draggedHidden = hidden;
-        if (collapsed !== wasCollapsed || hidden !== wasHidden) {
+        if (collapsed !== wasCollapsed) {
             this.dispatchEvent(new ChangeEvent());
         }
     }
+    /**
+     * Clears {@link resizeHandleArmed} and its pending timer, if any.
+     * @private
+     */
+    disarmResizeHandle() {
+        if (this.resizeHandleArmTimer !== undefined) {
+            clearTimeout(this.resizeHandleArmTimer);
+            this.resizeHandleArmTimer = undefined;
+        }
+        this.resizeHandleArmed = false;
+    }
     /**
      * The icon for the collapse/expand toggle button : always points toward
      * whichever action it currently performs — inward (toward the panel)
@@ -629,6 +675,7 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
         return html `
       <div
         id="resize-handle"
+        class=${ifDefined(this.resizeHandleArmed ? "armed" : undefined)}
         role="separator"
         aria-orientation="vertical"
         aria-label=${this.resizeLabel ?? this.dictionary.sidebar.resize}
@@ -636,6 +683,8 @@ let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
         aria-valuemin=${Math.round(this.miniWidthPx())}
         aria-valuemax=${Math.round(this.maxWidthPx())}
         tabindex="0"
+        @pointerenter=${this.handleResizePointerEnter}
+        @pointerleave=${this.handleResizePointerLeave}
         @pointerdown=${this.handleResizePointerDown}
         @pointermove=${this.handleResizePointerMove}
         @pointerup=${this.handleResizePointerUp}
@@ -689,11 +738,17 @@ EunomiaSidebar.styles = sidebarStyles;
 __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaSidebar.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true, attribute: "hide-below" })
+], EunomiaSidebar.prototype, "hideBelow", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], EunomiaSidebar.prototype, "theme", void 0);
 __decorate([
     property()
 ], EunomiaSidebar.prototype, "heading", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaSidebar.prototype, "collapsible", void 0);
 __decorate([
     property({ reflect: true, attribute: "toggle-placement", useDefault: true })
@@ -711,7 +766,7 @@ __decorate([
     property({ attribute: "collapse-label" })
 ], EunomiaSidebar.prototype, "collapseLabel", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaSidebar.prototype, "resizable", void 0);
 __decorate([
     property({ attribute: "resize-label" })
@@ -726,8 +781,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaSidebar.prototype, "dragging", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: "dragged-hidden" })
-], EunomiaSidebar.prototype, "draggedHidden", void 0);
+    state()
+], EunomiaSidebar.prototype, "resizeHandleArmed", void 0);
 __decorate([
     state()
 ], EunomiaSidebar.prototype, "liveWidthPx", void 0);

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

@@ -1 +1 @@
-export declare const sidebarStyles: import("lit").CSSResult;
+export declare const sidebarStyles: import("lit").CSSResult[];

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

@@ -1,4 +1,5 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { EUNOMIA_BREAKPOINTS, mediaBelow, } from "../../../breakpoints.js";
 /**
  * Base style for the sidebar component.
  *
@@ -6,13 +7,16 @@ import { css } from "lit";
  * [--sidebar-width] - Set a custom expanded width to the sidebar ; also the floor of the drag-resize range and, once resized, holds the user's chosen width
  * [--sidebar-mini-width] - Set a custom width for the collapse-mode="mini" state ; also the floor of the drag-resize range
  * [--sidebar-max-width] - Set a custom ceiling for the drag-resize range
- * [--sidebar-background] - Set a custom background color to the sidebar
- * [--sidebar-color] - Set a custom text color to the sidebar (pair with --sidebar-background for contrast)
+ * [--sidebar-background] - Set a custom background color to the sidebar, for both themes. Use an opaque color : the sidebar always paints its own background, so a translucent one adds up with whatever is painted behind it. Use transparent to show the background behind the sidebar instead
+ * [--sidebar-color] - Set a custom text color to the sidebar, for both themes (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-toggle-color] - Set a custom color to the toggle button
+ * [--sidebar-toggle-background-hover] - Set a custom background color to the toggle button on hover
+ * [--sidebar-resize-handle-delay] - Set how long the pointer must rest on the border before the resize handle shows (default 300ms, 0 to show it right away)
  * [--sidebar-transition-duration] - Set a custom duration for the collapse/resize transition
  */
 const base = css `
@@ -25,6 +29,14 @@ const base = css `
       --sidebar-border-color,
       var(--eun-border-color, #dee0e7)
     );
+    --_toggleColor: var(
+      --sidebar-toggle-color,
+      var(--eun-text-secondary, #484e61)
+    );
+    --_toggleBackgroundHover: var(
+      --sidebar-toggle-background-hover,
+      var(--eun-content-hover, #edeff0)
+    );
     --_paddingBlock: var(
       --sidebar-padding,
       var(--sidebar-padding-block, var(--eun-space-m, 16px))
@@ -51,6 +63,25 @@ const base = css `
   :host([dragging]) {
     transition: none;
   }
+  :host([theme="dark"]) {
+    --_background: var(
+      --sidebar-background,
+      var(--eun-surface-inverse, #0b1620)
+    );
+    --_color: var(--sidebar-color, var(--eun-text-on-inverse, #f5f7fa));
+    --_borderColor: var(
+      --sidebar-border-color,
+      color-mix(in srgb, var(--_color) 16%, transparent)
+    );
+    --_toggleColor: var(
+      --sidebar-toggle-color,
+      color-mix(in srgb, var(--_color) 75%, transparent)
+    );
+    --_toggleBackgroundHover: var(
+      --sidebar-toggle-background-hover,
+      color-mix(in srgb, var(--_color) 12%, transparent)
+    );
+  }
   :host([position="end"]) {
     border-inline-end: none;
     border-inline-start: var(--eun-border-width-s, 1px) solid
@@ -63,10 +94,6 @@ const base = css `
     --_width: 0px;
     border-color: transparent;
   }
-  :host([dragged-hidden]) {
-    --_width: 0px !important;
-    border-color: transparent !important;
-  }
 
   #surface {
     box-sizing: border-box;
@@ -118,20 +145,20 @@ const base = css `
     inset-inline-end: -4px;
     z-index: 0;
     width: 8px;
-    cursor: ew-resize;
     touch-action: none;
     background: transparent;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
   }
   :host([position="end"]) #resize-handle {
     inset-inline-end: auto;
     inset-inline-start: -4px;
   }
-  #resize-handle:hover,
+  #resize-handle.armed,
   #resize-handle:focus-visible {
+    cursor: ew-resize;
     background: var(--eun-color-primary-500, #3d6fff);
     opacity: 0.35;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #resize-handle:focus-visible {
     outline: none;
@@ -155,17 +182,25 @@ const base = css `
     background: var(--_background);
     border: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: var(--eun-border-radius-xl, 999px);
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--_toggleColor);
     cursor: pointer;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
+    outline: 2px solid transparent;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   :host([position="end"]) #collapse-toggle:not(.inline) {
     inset-inline-end: auto;
     inset-inline-start: -14px;
   }
   #collapse-toggle:not(.inline):hover {
-    background: var(--eun-content-hover, #edeff0);
+    background:
+      linear-gradient(
+        var(--_toggleBackgroundHover),
+        var(--_toggleBackgroundHover)
+      ),
+      var(--_background);
   }
 
   #collapse-toggle.inline {
@@ -179,16 +214,19 @@ const base = css `
     border-top: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     border-radius: 0;
     background: transparent;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--_toggleColor);
     font: inherit;
     font-size: var(--eun-font-size-s, 14px);
     text-align: start;
     cursor: pointer;
-    transition: background-color var(--eun-duration-s, 150ms)
-      var(--eun-easing-default, ease);
+    outline: 2px solid transparent;
+    transition:
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   #collapse-toggle.inline:hover {
-    background: var(--eun-content-hover, #edeff0);
+    background: var(--_toggleBackgroundHover);
   }
   #collapse-toggle-label {
     overflow: hidden;
@@ -205,9 +243,16 @@ const base = css `
   }
 
   #collapse-toggle:focus-visible {
-    outline: 2px solid var(--eun-color-primary-500, #3d6fff);
+    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);
+    border-start-start-radius: var(--eun-border-radius-m, 8px);
+    border-start-end-radius: var(--eun-border-radius-m, 8px);
+    background: var(--_toggleBackgroundHover);
+  }
 
   @media (prefers-reduced-motion: reduce) {
     :host {
@@ -215,4 +260,7 @@ const base = css `
     }
   }
 `;
-export const sidebarStyles = base;
+const hideBelow = unsafeCSS(Object.keys(EUNOMIA_BREAKPOINTS)
+    .map((name) => `@media ${mediaBelow(name)} { :host([hide-below="${name}"]) { display: none; } }`)
+    .join("\n"));
+export const sidebarStyles = [base, hideBelow];

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

@@ -98,7 +98,6 @@ export type EunomiaStepperVariant = "numbered" | "progress";
  * @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
- * @attr {'true' | 'false'} [linear='true'] - Unlike most boolean attributes here, the literal string false genuinely means false, needed since linear is the one that defaults to true
  * @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='Progress'] - The accessible label for the navigation landmark. Numbered display only
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -176,8 +175,7 @@ export declare class EunomiaStepper extends LitElement {
     /**
      * Restricts direct navigation to steps before {@link activeStep} ; set
      * to `false` (either as the JS property, or the literal `linear="false"`
-     * attribute — see {@link linearConverter} for why that works here,
-     * unlike most other boolean attributes) to allow jumping to any
+     * attribute — see {@link defaultTrueConverter}) to allow jumping to any
      * non-`disabled` step in any order.
      * @default true
      */