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

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

@@ -9,6 +9,9 @@ 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";
+import { cssTimeToMs } from "../../../utils/motion.utils.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the sidebar component.
  */
@@ -40,34 +43,40 @@ 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
  * @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 {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
- * @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
+ * @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. 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 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
  */
-let EunomiaSidebar = class EunomiaSidebar extends LitElement {
+let EunomiaSidebar = class EunomiaSidebar extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -77,12 +86,20 @@ let EunomiaSidebar = class EunomiaSidebar extends 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;
@@ -107,29 +124,15 @@ 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
          * `--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;
-        /**
-         * 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
@@ -137,8 +140,7 @@ let EunomiaSidebar = class EunomiaSidebar extends 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;
@@ -151,13 +153,6 @@ let EunomiaSidebar = class EunomiaSidebar extends 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)
@@ -172,18 +167,13 @@ let EunomiaSidebar = class EunomiaSidebar extends 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
@@ -195,6 +185,30 @@ let EunomiaSidebar = class EunomiaSidebar extends 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
@@ -207,6 +221,11 @@ let EunomiaSidebar = class EunomiaSidebar extends 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);
             }
@@ -214,17 +233,16 @@ let EunomiaSidebar = class EunomiaSidebar extends 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
@@ -238,12 +256,11 @@ let EunomiaSidebar = class EunomiaSidebar extends 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
@@ -264,7 +281,7 @@ let EunomiaSidebar = class EunomiaSidebar extends 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 :
@@ -340,6 +357,14 @@ let EunomiaSidebar = class EunomiaSidebar extends 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.
      */
@@ -366,20 +391,22 @@ let EunomiaSidebar = class EunomiaSidebar extends 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.
@@ -425,8 +452,7 @@ let EunomiaSidebar = class EunomiaSidebar extends 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") {
@@ -439,23 +465,21 @@ let EunomiaSidebar = class EunomiaSidebar extends 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;
     }
@@ -463,9 +487,10 @@ let EunomiaSidebar = class EunomiaSidebar extends 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
@@ -473,48 +498,55 @@ let EunomiaSidebar = class EunomiaSidebar extends 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)
@@ -588,7 +620,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,13 +675,16 @@ let EunomiaSidebar = class EunomiaSidebar extends LitElement {
         return html `
       <div
         id="resize-handle"
+        class=${ifDefined(this.resizeHandleArmed ? "armed" : undefined)}
         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())}
         tabindex="0"
+        @pointerenter=${this.handleResizePointerEnter}
+        @pointerleave=${this.handleResizePointerLeave}
         @pointerdown=${this.handleResizePointerDown}
         @pointermove=${this.handleResizePointerMove}
         @pointerup=${this.handleResizePointerUp}
@@ -699,35 +736,41 @@ 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({ 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" })
+    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 })
+    property({ converter: defaultTrueConverter })
 ], 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);
@@ -738,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[];