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

package/dist/components/form/shared-styles/listbox.styles.js

@@ -18,6 +18,7 @@ import { css } from "lit";
  *
  * Custom css variables:
  * [--field-listbox-max-height=260px] - Set a custom maximum height for the dropdown panel, past which it scrolls
+ * [--field-listbox-border-radius] - Set a custom corner radius for the dropdown panel, independent of --field-border-radius
  * [--field-listbox-transition-duration=200ms] - Set a custom duration for the dropdown panel's open/close animation (played in JS — see each consumer's own `playListboxOpenAnimation`/`playListboxCloseAnimation`), disabled entirely by the `no-animation` attribute (`eun-select` only) or `prefers-reduced-motion: reduce`
  * [--field-match-color] - Set a custom color for the matched search substring, highlighted with `<mark>`
  * [--field-match-background] - Set a custom background for the matched search substring, none by default
@@ -43,7 +44,10 @@ const listbox = css `
     color: var(--_textColor);
     background: var(--eun-surface-color, #ffffff);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
-    border-radius: var(--_borderRadius);
+    border-radius: var(
+      --field-listbox-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
     box-shadow: var(
       --eun-shadow-m,
       0 10px 15px -3px rgba(0, 0, 0, 0.1),

package/dist/components/form/textarea/textarea.d.ts

@@ -90,6 +90,7 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-shadow] - Sets a box shadow on the field, none by default
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-textarea

package/dist/components/form/textarea/textarea.js

@@ -541,6 +541,7 @@ const EunomiaTextareaMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabel
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-shadow] - Sets a box shadow on the field, none by default
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-textarea
@@ -1771,7 +1772,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             <eun-button
               class="confirm"
               size="s"
-              appearance="default"
+              appearance="soft"
               rounded
               type="button"
               @click=${this.confirmEdit}

package/dist/components/form/textarea/textarea.styles.js

@@ -1,6 +1,9 @@
 import { css } from "lit";
 import { fieldStyles } from "../shared-styles/field.styles.js";
 const textarea = css `
+  :host {
+    --_defaultLineHeight: normal;
+  }
   #field {
     resize: vertical;
     min-height: 6rem;

package/dist/components/form/time-picker/time-picker.d.ts

@@ -5,6 +5,8 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -19,7 +21,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,
@@ -40,6 +42,8 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * under a labeled group.
  *
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -99,6 +103,7 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-time-picker

package/dist/components/form/time-picker/time-picker.js

@@ -12,6 +12,8 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -37,7 +39,7 @@ export const EunomiaTimePickerTagName = "eun-time-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))))));
 /**
  * A time field entered across segmented numeric hour and minute inputs,
  * plus an AM/PM toggle segment at a 12-hour format, with a trailing clock
@@ -57,6 +59,8 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * under a labeled group.
  *
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -116,6 +120,7 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
  * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-time-picker
@@ -951,7 +956,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
           ?disabled=${this.disabled}
           @click=${this.handleTriggerClick}
         >
-          <eun-icon name="access_time" size="16"></eun-icon>
+          <eun-icon name="access_time"></eun-icon>
         </button>
       </div>
     `;

package/dist/components/form/time-picker/time-picker.styles.js

@@ -18,15 +18,15 @@ const timePicker = css `
     display: flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
-    width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
-    padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
-      var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    padding: var(--_paddingBlock) calc(var(--_defaultPaddingInline) / 2)
+      var(--_paddingBlock) var(--_defaultPaddingInline);
     outline: 1px solid transparent;
-    box-sizing: border-box;
+    box-sizing: content-box;
+    height: var(--_lineHeight);
     transition:
       border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
@@ -81,9 +81,10 @@ const timePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     overflow: visible;
@@ -109,6 +110,7 @@ const timePicker = css `
     padding-inline: 2px;
   }
   #clock-trigger {
+    --icon-size: min(16px, var(--_lineHeight));
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/components/layout/animate/animate.js

@@ -8,6 +8,7 @@ import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
 import { mediaBelow } from "../../../breakpoints.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the animate component.
  */
@@ -209,7 +210,7 @@ __decorate([
     property({ type: Number, attribute: "mobile-delay" })
 ], EunomiaAnimate.prototype, "mobileDelay", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaAnimate.prototype, "once", void 0);
 __decorate([
     property({ type: Number })

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

@@ -170,8 +170,7 @@ export declare class EunomiaCarousel extends EunomiaCarousel_base {
      * Fades the viewport's edges to hint there's more to scroll — hidden
      * automatically on whichever side is already at its scroll bound (never
      * shown on the left at the very start, or the right at the very end).
-     * On by default ; set the *property* to `false` to turn it off (see the
-     * Examples tab for the boolean-attribute caveat that applies here too).
+     * On by default ; `edge-fade="false"` turns it off.
      * @default true
      */
     edgeFade: boolean;

package/dist/components/navigation/carousel/carousel.js

@@ -11,6 +11,7 @@ import { debounce } from "../../../utils/time.utils.js";
 import { SlideChangeEvent } from "../../../events/slidechange.event.js";
 import { carouselStyles } from "./carousel.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the carousel component.
  */
@@ -154,8 +155,7 @@ let EunomiaCarousel = class EunomiaCarousel extends LocalizableMixin(LitElement)
          * Fades the viewport's edges to hint there's more to scroll — hidden
          * automatically on whichever side is already at its scroll bound (never
          * shown on the left at the very start, or the right at the very end).
-         * On by default ; set the *property* to `false` to turn it off (see the
-         * Examples tab for the boolean-attribute caveat that applies here too).
+         * On by default ; `edge-fade="false"` turns it off.
          * @default true
          */
         this.edgeFade = true;
@@ -943,7 +943,11 @@ __decorate([
     property({ type: Number, attribute: "visible-slides" })
 ], EunomiaCarousel.prototype, "visibleSlides", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: "full-slides" })
+    property({
+        converter: defaultTrueConverter,
+        reflect: true,
+        attribute: "full-slides",
+    })
 ], EunomiaCarousel.prototype, "fullSlides", void 0);
 __decorate([
     property({ type: Number, attribute: "scroll-step" })
@@ -952,7 +956,11 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: "center-snap" })
 ], EunomiaCarousel.prototype, "centerSnap", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true, attribute: "edge-fade" })
+    property({
+        converter: defaultTrueConverter,
+        reflect: true,
+        attribute: "edge-fade",
+    })
 ], EunomiaCarousel.prototype, "edgeFade", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -964,10 +972,10 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-arrows" })
+    property({ converter: defaultTrueConverter, attribute: "show-arrows" })
 ], EunomiaCarousel.prototype, "showArrows", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "show-dots" })
+    property({ converter: defaultTrueConverter, attribute: "show-dots" })
 ], EunomiaCarousel.prototype, "showDots", void 0);
 __decorate([
     property({ attribute: "previous-label" })

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

@@ -130,8 +130,8 @@ const base = css `
       transparent
     );
   }
-  :host(:not([edge-fade])) #viewport::before,
-  :host(:not([edge-fade])) #viewport::after {
+  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::before,
+  :host(:is(:not([edge-fade]), [edge-fade="false"])) #viewport::after {
     content: none;
   }
 
@@ -184,7 +184,7 @@ const base = css `
     transition: transform var(--eun-duration-m, 200ms)
       var(--eun-easing-default, ease);
   }
-  :host([full-slides]) ::slotted(:not([slot])) {
+  :host([full-slides]:not([full-slides="false"])) ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(
@@ -196,7 +196,8 @@ const base = css `
       )
     );
   }
-  :host(:not([full-slides])) ::slotted(:not([slot])) {
+  :host(:is(:not([full-slides]), [full-slides="false"]))
+    ::slotted(:not([slot])) {
     --_slideBasis: max(
       var(--carousel-min-slide-width, 220px),
       calc(

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

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { EunomiaBreakpoint } from "../../../breakpoints.js";
 /**
  * Tag name of the sidebar component.
  */
@@ -16,6 +17,10 @@ export type EunomiaSidebarCollapseMode = "mini" | "hidden";
  * Where the built-in collapse/expand toggle button renders.
  */
 export type EunomiaSidebarTogglePlacement = "edge" | "inline";
+/**
+ * The sidebar's color scheme.
+ */
+export type EunomiaSidebarTheme = "light" | "dark";
 declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A persistent, non-modal navigation panel that lays out beside page
@@ -44,7 +49,10 @@ declare const EunomiaSidebar_base: import("../../../utils/constructor.type.js").
  * @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
@@ -54,20 +62,23 @@ 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
+ * @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
  */
@@ -79,7 +90,7 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * @internal
      * @readonly
      */
-    static readonly styles: import("lit").CSSResult;
+    static readonly styles: import("lit").CSSResult[];
     /**
      * Which edge of the layout the sidebar is pinned against — decides which
      * edge the border, toggle button, and resize handle render on : always
@@ -87,6 +98,20 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * @default start
      */
     position: EunomiaSidebarPosition;
+    /**
+     * Hides the sidebar below this breakpoint (`display: none`), for a layout
+     * where another navigation takes over on small screens, such as
+     * `eun-toolbar`'s mobile panel, which switches at `tablet` by default.
+     * A plain `@media` switch in the stylesheet, mirrored in
+     * `sidebar-ssr.css`, so it applies from first paint.
+     */
+    hideBelow?: EunomiaBreakpoint;
+    /**
+     * The sidebar's color scheme : `dark` uses the inverse surface, the same
+     * one `eun-toolbar`'s own `theme="dark"` does.
+     * @default light
+     */
+    theme: EunomiaSidebarTheme;
     /**
      * Optional heading text, rendered as the `header` slot's fallback
      * content, and used as the accessible name (there's no dialog to
@@ -98,7 +123,9 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * 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
      */
     collapsible: boolean;
@@ -137,7 +164,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.
+     * controls the discrete toggle button. The attribute value `"false"`
+     * turns it off too (see {@link defaultTrueConverter}).
      * @default true
      */
     resizable: boolean;
@@ -171,8 +199,7 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
     private dragStartWidth;
     /**
      * 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
      */
     private lastRawWidth;
@@ -185,13 +212,6 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * @internal
      */
     private dragStartCollapsed;
-    /**
-     * Whether `draggedHidden` was set right before the current drag started
-     * — compared against the final state at release for the same reason
-     * `dragStartCollapsed` is.
-     * @internal
-     */
-    private dragStartHidden;
     /**
      * Whether `pointermove` actually fired at least once since the current
      * `pointerdown` — a plain click on the resize handle (no movement)
@@ -206,18 +226,18 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      */
     private dragging;
     /**
-     * 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
+     */
+    private resizeHandleArmed;
+    /**
+     * The pending timer arming {@link resizeHandleArmed}, if any.
      * @internal
      */
-    private draggedHidden;
+    private resizeHandleArmTimer?;
     /**
      * The width, in px, applied by the current (or most recent) drag/keyboard
      * resize — `undefined` until the panel has been manually resized at
@@ -257,6 +277,11 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * @param changed the changed properties.
      */
     protected updated(changed: PropertyValues): void;
+    /**
+     * Lifecycle hook called when the element is disconnected from the DOM.
+     * Clears a pending resize handle arming timer.
+     */
+    disconnectedCallback(): void;
     /**
      * Collapses the sidebar.
      */
@@ -277,6 +302,13 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * @private
      */
     private setCollapsed;
+    /**
+     * 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
+     */
+    private forgetResizedWidth;
     /**
      * Reads a length custom property off the host's computed style, parsed
      * as a px number.
@@ -319,16 +351,16 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * `--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
      */
     private applyWidth;
@@ -336,9 +368,10 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      * 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
@@ -347,21 +380,35 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
      */
     private settleCollapsedState;
     /**
-     * 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
      */
     private settleWidth;
+    /**
+     * Arms the resize handle once the pointer has rested on the border for
+     * `--sidebar-resize-handle-delay` (300ms by default).
+     * @private
+     */
+    private readonly handleResizePointerEnter;
+    /**
+     * Disarms the resize handle as soon as the pointer leaves the border.
+     * @private
+     */
+    private readonly handleResizePointerLeave;
+    /**
+     * Clears {@link resizeHandleArmed} and its pending timer, if any.
+     * @private
+     */
+    private disarmResizeHandle;
     /**
      * Starts a drag-resize : captures the pointer on the handle itself (so
      * subsequent `pointermove`/`pointerup` keep firing there even once the
@@ -374,10 +421,10 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
     /**
      * 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
@@ -385,8 +432,7 @@ export declare class EunomiaSidebar extends EunomiaSidebar_base {
     private readonly handleResizePointerMove;
     /**
      * 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