@ixfx/components 0.8.1 → 0.8.3

package/bundle/index.js

@@ -3,8 +3,8 @@ import { customElement, eventOptions, property, query, queryAssignedElements, st
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Fzf } from "fzf";
-import { Colour } from "@ixfx/visual";
 import { createCommandRegistry } from "@clinth/ui-commands";
+import { Colour } from "@ixfx/visual";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
@@ -730,6 +730,7 @@ var TickledController = class TickledController {
 		this.host = host;
 		this.config = config;
 		this._inputMode = config.initialInputMode ?? `mouse`;
+		this.hoverDisabled = config.hoverDisabled ?? (() => false);
 		host.addController(this);
 	}
 	hostConnected() {
@@ -798,6 +799,7 @@ var TickledController = class TickledController {
 	* Switches to mouse mode and tickles the item.
 	*/
 	handlePointerEnter(id) {
+		if (this.hoverDisabled()) return;
 		if (!TickledController._mouseMovedSinceKeyboard) return;
 		const item = this.config.getItems().find((item) => item.id === id);
 		if (item && item.enabled === false) return;
@@ -815,6 +817,7 @@ var TickledController = class TickledController {
 	* @param _e The pointer event (not used, but kept for API compatibility)
 	*/
 	handlePointerLeave(_e) {
+		if (this.hoverDisabled()) return;
 		if (TickledController._mouseMovedSinceKeyboard) this.clearTickled();
 	}
 	/**
@@ -1287,6 +1290,22 @@ const _themeFallbacksCss = i$3`
     inherits: true;
     initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);
   }
+  @property --deboss-3 {
+    syntax: '*';
+    inherits: true;
+    initial-value:
+      inset 1px 1px 1px 1px color-mix(in oklch, oklch(8% 0.02 240) 60%, transparent),
+      inset -1px -1px 1px 1px color-mix(in oklch, oklch(15% 0.02 240) 50%, transparent),
+      -2px -2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);
+  }
+  @property --emboss-3 {
+    syntax: '*';
+    inherits: true;
+    initial-value:
+      inset 1px 1px 1px 1px color-mix(in oklch, oklch(22% 0.02 240) 30%, transparent),
+      inset -1px -1px 1px 1px color-mix(in oklch, oklch(12% 0.02 240) 20%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);
+  }
   @property --item-bg {
     syntax: '<color>';
     inherits: true;
@@ -3893,488 +3912,1605 @@ __decorate([state()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
 __decorate([state()], AcTokenElement.prototype, "_isOpen", void 0);
 AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
 //#endregion
-//#region src/icons/defaults.ts
-/**
-* Chevron pointing down. Used for split-button dropdown toggle.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>`;
-/**
-* Caret pointing right. Used for tree-basic expand indicator as a CSS mask.
-* fill="black" is correct for CSS mask-image use (shape only, color comes from background-color).
-*/
-const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10 7l6 5-6 5V7z"/></svg>`;
-/**
-* Checkmark. Useful for menu-check-item or confirmation states.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
-/**
-* Close / X icon. Useful for dialogs, notifications, dismissible elements.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
-/**
-* Plus / add icon. Pairs with `close` for add/remove actions.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_ADD = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
-/**
-* Error / warning icon. Useful for error notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_ERROR = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`;
-/**
-* Info icon. Useful for info notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_INFO = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;
-/**
-* Warning icon. Useful for warning notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`;
-/**
-* Chevron pointing right. Used for split-button switcher toggle.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
-/**
-* Folder with up arrow. Angled line style for navigating up one level.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
-/**
-* Folder. Useful for file explorers and sidebars.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
-/**
-* Document / file page. Useful for file lists and document tabs.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FILE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>`;
-/**
-* Magnifying glass. Useful for search panels and inputs.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
-function registerDefaults() {
-	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
-	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
-	registerIcon(`caret-right`, ICON_CARET_RIGHT);
-	registerIcon(`check`, ICON_CHECK);
-	registerIcon(`close`, ICON_CLOSE);
-	registerIcon(`file`, ICON_FILE);
-	registerIcon(`folder`, ICON_FOLDER);
-	registerIcon(`search`, ICON_SEARCH);
-	registerIcon(`add`, ICON_ADD);
-	registerIcon(`error`, ICON_ERROR);
-	registerIcon(`folder-up`, ICON_FOLDER_UP);
-	registerIcon(`info`, ICON_INFO);
-	registerIcon(`warning`, ICON_WARNING);
-}
-//#endregion
-//#region src/icons/index.ts
-registerDefaults();
-//#endregion
-//#region src/styles/prominence.ts
+//#region src/styles/handle.ts
 /**
-* Shared CSS variable defaults for prominence-based interaction feedback.
+* Shared drag / resize **handle** styling.
 *
-* Defines the `--prominence-*` variables on `:host`. Include this if you
-* are building custom prominence selectors; otherwise use `prominenceStyles`
-* or `prominenceSubStyles` which include these variables automatically.
-*/
-const prominenceVars = i$3`
-  :host {
-    --prominence-idle-opacity: 0.6;
-    --prominence-idle-saturate: 0.4;
-    --prominence-tickled-opacity: 0.85;
-    --prominence-tickled-saturate: 0.8;
-    --prominence-disabled-opacity: 0.3;
-    --prominence-disabled-saturate: 0.1;
-  }
-`;
-/**
-* Host-based prominence interaction feedback.
+* A handle is the grab affordance for moving or resizing an object. Apply the
+* `.ixfx-handle` class to a small decorative element inside your drag / resize
+* hit-zone and choose a look with two independent attributes:
 *
-* Applies CSS `filter` to **the whole component host** to convey state:
-* - **Disabled** (`[disabled]` / `:disabled`): heavily muted
-* - **Idle** (default): reduced opacity + desaturated
-* - **Tickled** (`:hover` / `:focus-within`): elevated opacity + saturation
-* - **Active** (`:active` / `[dragging]`): full vibrancy (filter removed)
+* - `data-handle` — texture: `flat` (default) · `dotted` · `dimpled` · `grated`
+* - `data-shape`  — topology: `horizontal` (default) · `vertical` · `spot`
 *
-* Defaults are defined on `:host` and can be overridden per-instance.
+* - **flat** — a solid rounded capsule (bar) or dot (`spot`), filled with
+*   `--ixfx-handle-color`.
+* - **dotted** — marks in the [Lucide *grip*](https://lucide.dev/icons/grip)
+*   arrangement: three in a row (`horizontal`), three in a column (`vertical`) or a
+*   3×3 block (`spot`). Tinted by `--ixfx-handle-color`. Each mark's corner
+*   rounding is `--ixfx-handle-radius` (→ the theme `--radius-l`), so a flat,
+*   squared-off theme renders them as **squares** instead of circles.
+* - **dimpled** — that same layout, but each bar mark is pressed in: a lighter
+*   copy peeking out above-left and a darker copy below-right of the base mark.
+* - **grated** — fine 45° knurling: each ridge is a lit edge, the base colour,
+*   then a shaded edge. `spot` is the same hatch on a square crop.
+*
+* `dotted` / `dimpled` / `grated` are texture only — no plate, box or border; the
+* gaps are transparent so the surface behind shows through. The base colour is
+* `--ixfx-handle-color` (a theme token); the deboss edges default to that colour
+* lightened / darkened.
+*
+* The handle is `pointer-events: none` — bind pointer handlers to the surrounding
+* hit-zone. It reaches its "active" look (`--ixfx-handle-opacity-active`, and for
+* `flat` / `dotted` the `--ixfx-handle-color-active` tint) when its immediate
+* parent (the hit-zone) is `:hover` / `:focus-visible` / `[data-active]`, or when
+* the handle itself is. Set `[data-active]` on the hit-zone yourself while a drag
+* is live so the handle stays lit after the pointer leaves it.
 *
-* Usage:
 * ```ts
-* import { prominenceStyles } from '../styles/prominence.js';
+* import { handleStyles } from '../styles/handle.js';
 *
-* class MyComponent extends LitElement {
-*   static styles = [prominenceStyles, css`...`];
-* }
+* static styles = [themeFallbacks, handleStyles, css`...`];
 * ```
+* ```html
+* <div class="hit-zone" @pointerdown=${this.#onDown}>
+*   <span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
+* </div>
+* ```
+*
+* ## CSS variables (defaults shown; override on the element or any ancestor)
+* - `--ixfx-handle-color`          `var(--surface-muted-text)` — `flat` / `dotted` fill
+* - `--ixfx-handle-color-active`   `var(--accent)`             — `flat` / `dotted` hover / focus
+* - `--ixfx-handle-thickness`      `6px`  — cross-axis size of a bar
+* - `--ixfx-handle-length`         `44px` — long-axis size of a bar (`100%` to fill)
+* - `--ixfx-handle-spot-size`      `14px` — width = height of a `spot`
+* - `--ixfx-handle-radius`         `var(--radius-l)` — `flat` capsule / dotted & dimpled mark rounding
+* - `--ixfx-handle-opacity`        `0.55` — rest opacity
+* - `--ixfx-handle-opacity-active` `1`
+* - `--ixfx-handle-dot-size`       `3px`  — mark size (dotted / dimpled)
+* - `--ixfx-handle-dot-gap`        `length/4` (bar) · `spot/3` — mark centre-to-centre step
+* - `--ixfx-handle-tile`           `5px`  — knurl period (grated)
+* - `--ixfx-handle-highlight`      `color-mix(currentColor 35%, #fff)` — lit deboss edge
+* - `--ixfx-handle-shadow`         `color-mix(currentColor 60%, #000)` — shaded deboss edge
 */
-const prominenceStyles = i$3`
-  ${prominenceVars}
-
-  :host {
-    filter:
-      opacity(var(--prominence-idle-opacity))
-      saturate(var(--prominence-idle-saturate));
-    transition: filter var(--transition, 0.15s ease-out);
-  }
-
-  :host(:hover),
-  :host(:focus-within) {
-    filter:
-      opacity(var(--prominence-tickled-opacity))
-      saturate(var(--prominence-tickled-saturate));
-  }
-
-  :host(:active),
-  :host([dragging]) {
-    filter: none;
-  }
+const handleStyles = i$3`
+  .ixfx-handle {
+    /* Bridge: public --ixfx-handle-* (element or ancestor) → internal alias → fallback. */
+    --_handle-color: var(--ixfx-handle-color, var(--surface-3-text));
+    --_handle-color-active: var(--ixfx-handle-color-active, var(--surface-3-text));
+    --_handle-thickness: var(--ixfx-handle-thickness, 6px);
+    --_handle-length: var(--ixfx-handle-length, 44px);
+    --_handle-spot: var(--ixfx-handle-spot-size, 14px);
+    --_handle-radius: var(--ixfx-handle-radius, var(--radius-l));
+    --_handle-opacity: var(--ixfx-handle-opacity, 0.55);
+    --_handle-opacity-active: var(--ixfx-handle-opacity-active, 1);
+    --_handle-dot: var(--ixfx-handle-dot-size, 3px);
+    --_handle-tile: var(--ixfx-handle-tile, 5px);
+    /* Centre-to-centre step of the dotted / dimpled marks (a length). Defaults to
+       a share of the long axis; a bar shows ~3 marks. */
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-length) / 4));
+    /* How far a dimpled mark's highlight / shadow copy is offset. */
+    --_dimple-off: calc(var(--_handle-dot) * 0.15);
+    /* The mark colour lightened / darkened for the two deboss edges. */
+    --_handle-hi: var(--ixfx-handle-highlight, color-mix(in oklch, var(--surface-4) 50%, var(--_handle-color)));
+    --_handle-lo: var(--ixfx-handle-shadow, color-mix(in oklch, var(--surface-2) 40%, var(--_handle-color)));
 
-  /* Disabled comes last to override tickled/active selectors of equal specificity */
-  :host([disabled]),
-  :host(:disabled) {
-    filter:
-      opacity(var(--prominence-disabled-opacity))
-      saturate(var(--prominence-disabled-saturate));
+    box-sizing: border-box;
+    display: inline-block;
+    flex: none;
+    width: var(--_handle-length);
+    height: var(--_handle-thickness);
+    color: var(--_handle-color);
+    opacity: var(--_handle-opacity);
     pointer-events: none;
-  }
-`;
-i$3`
-  ${prominenceVars}
-
-  .prominence {
-    filter:
-      opacity(var(--prominence-idle-opacity))
-      saturate(var(--prominence-idle-saturate));
-    transition: filter var(--transition, 0.15s ease-out);
-  }
-
-  .prominence:hover,
-  .prominence:focus-within {
-    filter:
-      opacity(var(--prominence-tickled-opacity))
-      saturate(var(--prominence-tickled-saturate));
+    transition:
+      color var(--transition, 0.15s ease-out),
+      opacity var(--transition, 0.15s ease-out);
   }
 
-  .prominence:active,
-  .prominence.dragging {
-    filter: none;
+  .ixfx-handle[data-shape='vertical'] {
+    width: var(--_handle-thickness);
+    height: var(--_handle-length);
   }
 
-  .prominence[disabled],
-  .prominence:disabled {
-    filter:
-      opacity(var(--prominence-disabled-opacity))
-      saturate(var(--prominence-disabled-saturate));
-    pointer-events: none;
-  }
-`;
-//#endregion
-//#region src/button/button-styles.ts
-const buttonStyles = i$3`
-  :host {
-    display: inline-flex;
-    max-width: 100%;
-    vertical-align: middle;
-    user-select: none;
-    -webkit-user-select: none;
+  .ixfx-handle[data-shape='spot'] {
+    width: var(--_handle-spot);
+    height: var(--_handle-spot);
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-spot) / 3));
   }
 
-  :host([hidden]) {
-    display: none;
+  .ixfx-handle:hover,
+  .ixfx-handle:focus-visible,
+  .ixfx-handle[data-active],
+  :hover > .ixfx-handle,
+  :focus-visible > .ixfx-handle,
+  [data-active] > .ixfx-handle {
+    color: var(--_handle-color-active);
+    opacity: var(--_handle-opacity-active);
   }
 
-  button {
-    cursor: pointer;
-    appearance: none;
-    background: var(--surface-4, #ccc);
-    color: var(--surface-3-text, #000);
-    border: var(--border, 1px solid #999);
-    outline: var(--ixfx-button-outline, none);
-    border-radius: var(--radius-xl, 8px);
-    corner-shape: superellipse(1);
-    padding: var(--ixfx-button-padding-block, var(--space-m, 8px)) var(--ixfx-button-padding-inline, var(--space-l, 12px));
-    font-family: var(--font-family, inherit);
-    font-size: var(--text-m, 14px);
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5em;
-    width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    box-shadow: 
-      var(--ixfx-button-shade, none),
-      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
-      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
-    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);
+  /* ── flat: solid capsule / dot ────────────────────────────────────────── */
+  .ixfx-handle[data-handle='flat'] {
+    background: currentColor;
+    border-radius: var(--_handle-radius);
   }
-
-  button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .ixfx-handle[data-handle='flat'][data-shape='spot'] {
+    border-radius: 50%;
   }
 
-  button:hover:not(:disabled) {
-    background: color-mix(in oklch, var(--surface-4) 80%, transparent);
-    border-color: var(--accent, #666);
-    box-shadow: 
-      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), 
-      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),
-      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);
+  /* ── dotted / dimpled: 3 marks in a row / column (or 3×3 for spot), drawn as
+        one ::before mark whose border-radius follows the theme — round normally,
+        square in a flat / squared-off theme (--radius-l: 0). box-shadow paints
+        the rest of the marks. ─────────────────────────────────────────────── */
+  .ixfx-handle[data-handle='dotted'],
+  .ixfx-handle[data-handle='dimpled'] {
+    position: relative;
   }
-
-  button:active:not(:disabled) {
-    background: var(--surface-2, #aaa);
-    transform: translateY(1px);
-    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);
+  .ixfx-handle[data-handle='dotted']::before,
+  .ixfx-handle[data-handle='dimpled']::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--_handle-dot);
+    height: var(--_handle-dot);
+    transform: translate(-50%, -50%);
+    border-radius: var(--_handle-radius);
+    background: currentColor;
   }
 
-  .button-icon {
-    display: var(--ixfx-button-hide-icon, inline-flex);
-    align-items: center;
-    flex-shrink: 0;
+  /* dotted — the two other marks are plain copies along the axis. */
+  .ixfx-handle[data-handle='dotted']::before {
+    box-shadow:
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      var(--_handle-gap) 0 0 0 currentColor;
   }
-
-  .button-label {
-    white-space: nowrap;
+  .ixfx-handle[data-handle='dotted'][data-shape='vertical']::before {
+    box-shadow:
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      0 var(--_handle-gap) 0 0 currentColor;
   }
-
-  :host([has-icon]) .button-label {
-    display: var(--ixfx-button-hide-label, inline);
+  .ixfx-handle[data-handle='dotted'][data-shape='spot']::before,
+  .ixfx-handle[data-handle='dimpled'][data-shape='spot']::before {
+    box-shadow:
+      calc(-1 * var(--_handle-gap)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      var(--_handle-gap) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      var(--_handle-gap) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) var(--_handle-gap) 0 0 currentColor,
+      0 var(--_handle-gap) 0 0 currentColor,
+      var(--_handle-gap) var(--_handle-gap) 0 0 currentColor;
   }
 
-  :host([hide-label]) .button-label {
-    display: none;
+  /* dimpled — each bar mark also gets a lighter copy up-left and a darker copy
+     down-right (spot stays plain — the 3D is imperceptible at that size). */
+  .ixfx-handle[data-handle='dimpled']:not([data-shape='spot'])::before {
+    box-shadow:
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) - var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      var(--_handle-gap) 0 0 0 currentColor,
+      calc(var(--_handle-gap) - var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo);
   }
-
-  :host([hide-icon]) .button-icon {
-    display: none;
+  .ixfx-handle[data-handle='dimpled'][data-shape='vertical']::before {
+    box-shadow:
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) var(--_dimple-off) 0 0 var(--_handle-lo),
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) - var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 var(--_handle-gap) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(var(--_handle-gap) - var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo);
   }
 
-  :host([subtle]) button {
-    background: color-mix(in oklch, var(--surface-4, #ccc) 40%, transparent);
+  /* ── grated: fine 45° knurling — each ridge is a lit edge, the base colour,
+        then a shaded edge. Same hatch at every shape (spot is a square crop). ── */
+  .ixfx-handle[data-handle='grated'] {
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--_handle-hi) 0 0.9px,
+      currentColor 0.9px 1.6px,
+      var(--_handle-lo) 1.6px 2.5px,
+      transparent 2.5px var(--_handle-tile)
+    );
   }
 
-  :host([subtle]) button:hover:not(:disabled),
-  :host([subtle]) button:focus-visible:not(:disabled) {
-    background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);
+  @media (prefers-reduced-motion: reduce) {
+    .ixfx-handle {
+      transition: none;
+    }
   }
 `;
 //#endregion
-//#region src/button/button.ts
-let ButtonElement = class ButtonElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.disabled = false;
-		this.hideIcon = false;
-		this.hideLabel = false;
-		this.hasIcon = false;
-		this.subtle = false;
-	}
-	_renderIcon() {
-		if (this.hideIcon || !this.icon) return A;
-		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
-		if (!hasIcon(this.icon)) return A;
-		return b`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
-	}
-	render() {
-		this.hasIcon = !this.hideIcon && !!this.icon;
-		const label = this.hideLabel ? A : b`<span class="button-label"><slot></slot></span>`;
-		return b`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
-	}
-	static {
-		this.styles = [prominenceStyles, buttonStyles];
-	}
-};
-__decorate([property({ type: Boolean })], ButtonElement.prototype, "disabled", void 0);
-__decorate([property({ type: String })], ButtonElement.prototype, "icon", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `hide-icon`,
-	reflect: true
-})], ButtonElement.prototype, "hideIcon", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `hide-label`,
-	reflect: true
-})], ButtonElement.prototype, "hideLabel", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `has-icon`,
-	reflect: true
-})], ButtonElement.prototype, "hasIcon", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], ButtonElement.prototype, "subtle", void 0);
-ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
-//#endregion
-//#region src/button/radio-group.ts
-let RadioGroup = class RadioGroup extends i {
+//#region src/titlebar/titlebar.ts
+let TitlebarElement = class TitlebarElement extends i {
 	constructor(..._args) {
 		super(..._args);
-		this.value = ``;
-		this.orientation = `horizontal`;
-		this.items = [];
-		this.name = ``;
-		this.mode = `compact`;
-		this.checked = false;
-		this.valueOff = ``;
+		this.title = ``;
 		this.iconName = ``;
-		this.iconNameOff = ``;
-		this.hideLabels = false;
-		this._computedItems = [];
-		this._icons = /* @__PURE__ */ new Map();
-	}
-	get _isSingleToggle() {
-		return this._computedItems.length === 0 && Boolean(this.textContent?.trim());
-	}
-	get _singleToggleIconName() {
-		if (!this.iconName && !this.iconNameOff) return null;
-		return this.checked ? this.iconName : this.iconNameOff || this.iconName;
-	}
-	firstUpdated() {
-		this.#updateComputedItems();
-	}
-	updated(changedProperties) {
-		if (changedProperties.has(`checked`)) {
-			const input = this.shadowRoot?.querySelector(`.radio-toggle-input`);
-			if (input && input.checked !== this.checked) {
-				input.checked = this.checked;
-				const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
-				this.dispatchEvent(new CustomEvent(`change`, {
-					detail: {
-						checked: this.checked,
-						value: newValue
-					},
-					bubbles: true,
-					composed: true
-				}));
-			}
-		}
-		if (changedProperties.has(`value`) && !this._isSingleToggle) {
-			const inputs = this.shadowRoot?.querySelectorAll(`.radio-input`);
-			if (inputs) {
-				for (const input of inputs) if (input.checked !== (input.value === this.value)) input.checked = input.value === this.value;
-			}
-		}
-	}
-	#updateComputedItems() {
-		const options = this.querySelectorAll(`option`);
-		const icons = /* @__PURE__ */ new Map();
-		if (options.length > 0) {
-			this._computedItems = Array.from(options, (el) => {
-				const tempDiv = document.createElement(`div`);
-				tempDiv.innerHTML = el.innerHTML;
-				const iconEl = tempDiv.querySelector(`svg`);
-				if (iconEl) icons.set(el.getAttribute(`value`) || ``, iconEl.outerHTML);
-				return {
-					value: el.getAttribute(`value`) || ``,
-					label: el.textContent?.trim() || ``,
-					disabled: el.hasAttribute(`disabled`),
-					iconName: el.getAttribute(`icon-name`) || void 0,
-					iconNameOff: el.getAttribute(`icon-name-off`) || void 0
-				};
-			});
-			this._icons = icons;
-		} else this._computedItems = [...this.items];
+		this.orientation = `horizontal`;
+		this.variant = `titlebar`;
+		this.closable = false;
+		this.collapsible = false;
+		this.collapsed = false;
+		this.toggleInteraction = `implicit`;
 	}
-	#handleRadioChange(e) {
-		e.stopImmediatePropagation();
-		const input = e.target;
-		this.value = input.value;
-		this.dispatchEvent(new CustomEvent(`change`, {
-			detail: {
-				checked: true,
-				value: input.value
-			},
+	_onToggleClick() {
+		if (!this.collapsible) return;
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(new CustomEvent(`toggle`, {
+			detail: { collapsed: this.collapsed },
 			bubbles: true,
 			composed: true
 		}));
 	}
-	#handleToggleChange(e) {
-		e.stopImmediatePropagation();
-		const input = e.target;
-		this.checked = input.checked;
-		const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
-		this.dispatchEvent(new CustomEvent(`change`, {
-			detail: {
-				checked: this.checked,
-				value: newValue
-			},
+	_onCloseClick() {
+		this.dispatchEvent(new CustomEvent(`close`, {
 			bubbles: true,
 			composed: true
 		}));
 	}
-	#renderIcon(item) {
-		const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
-		if (iconName) return b`<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
-		const iconHtml = this._icons.get(item.value);
-		if (!iconHtml) return null;
-		return b`<span class="radio-icon">${unsafeHTML(iconHtml)}</span>`;
+	_getCaretIcon() {
+		return `chevron-down`;
 	}
 	render() {
-		if (this._isSingleToggle) {
-			const iconName = this._singleToggleIconName;
-			const iconPart = iconName || this.hideLabels ? b`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
-			const labelPart = !this.hideLabels ? b`<span class="radio-label" data-text="${this.textContent?.trim()}">${this.textContent?.trim()}</span>` : null;
-			return b`
-        <label class="radio-item ${this.checked ? `selected` : ``}">
-          <input
-            type="checkbox"
-            class="radio-toggle-input"
-            ?checked=${this.checked}
-            @change=${this.#handleToggleChange}
-          />
-          ${iconPart}
-          ${labelPart}
-        </label>
-      `;
-		}
+		const caretIcon = this._getCaretIcon();
+		const isVertical = this.orientation === `vertical`;
+		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
+		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
+		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
 		return b`
-      <slot @slotchange=${this.#updateComputedItems} style="display: none;"></slot>
-      <div class="radio-group ${this.orientation} ${this.mode}" role="radiogroup" aria-label=${this.name}>
-        ${this._computedItems.map((item) => {
-			const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
-			const iconPart = iconName || this.hideLabels ? b`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
-			const labelPart = !this.hideLabels ? b`<span class="radio-label" data-text="${item.label}">${item.label}</span>` : null;
-			return b`
-            <label class="radio-item ${item.value === this.value ? `selected` : ``}" ?disabled=${item.disabled}>
-              <input
-                type="radio"
-                class="radio-input"
-                name=${this.name}
-                value=${item.value}
-                ?disabled=${item.disabled}
-                ?checked=${item.value === this.value}
-                @change=${this.#handleRadioChange}
-              />
-              ${iconPart}
-              ${labelPart}
-            </label>
-          `;
-		})}
+      <div
+        class="bar"
+        role="toolbar"
+        @click=${implicitToggle ? this._onToggleClick : A}
+      >
+        ${treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
+        <div class="title-text-wrapper">
+          ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
+          <span class="title-text">${this.title}</span>
+        </div>
+
+        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
+          <slot name="toolbar"></slot>
+          ${this.closable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close panel"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+          ${!treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
+        </div>
       </div>
     `;
 	}
 	static {
-		this.styles = [
-			themeFallbacks,
-			prominenceStyles,
-			i$3`
+		this.styles = [themeFallbacks, i$3`
     :host {
-      display: inline-flex;
-      min-width: min-content;
+      --titlebar-background: var(--surface-4);
+
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .bar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--space-s) var(--space-m);
+      background: var(--titlebar-background);
+      color: var(--surface-3-text);
+      min-height: 2em;
+      height: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    :host([orientation="vertical"]) .bar {
+      flex-direction: row;
+      min-width: 2em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    .caret-btn,
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: var(--space-xs);
+      margin: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--radius-s);
+      transition: background var(--transition);
+      opacity: var(--prominence-idle-opacity);
+    }
+
+    .caret-btn:hover,
+    .close-btn:hover {
+      background: var(--surface-5);
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    .caret-btn:focus-visible,
+    .close-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }
+
+    ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      transition: transform var(--transition);
+    }
+
+    .title-icon {
+      flex-shrink: 0;
+    }
+
+    .title-text {
+      flex: 1;
+      padding-left: 1ch;
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      white-space: nowrap;
+      overflow: hidden;
+      align-self: center;
+      text-overflow: ellipsis;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([collapsible][toggle-interaction="implicit"]) .bar {
+      cursor: pointer;
+    }
+
+    :host([orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      padding-left: 0;
+      padding-bottom: 1ch;
+      text-orientation: mixed;
+      transform: rotate(180deg);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      margin-left: auto;
+    }
+
+    :host([orientation="vertical"]) .toolbar {
+      flex-direction: column;
+      margin-left: 0;
+      margin-top: auto;
+      writing-mode: horizontal-tb;
+    }
+
+    slot[name="toolbar"] {
+      display: contents;
+    }
+
+    ::slotted(slot[name="toolbar"]) {
+      display: contents;
+    }
+
+    .title-text-wrapper {
+      display: flex;
+      padding: 0 var(--space-s);
+    }
+
+    /* === Midline variant === */
+
+    :host([variant="midline"]) .bar {
+      background: transparent;
+      padding: var(--space-xs) var(--space-m);
+      min-height: unset;
+      position: relative;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .bar {
+      padding: var(--space-m) var(--space-xs);
+      min-width: unset;
+    }
+
+    :host([variant="midline"]) .title-text-wrapper {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      background: var(--surface-3);
+    }
+
+    :host([variant="midline"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0 0.5ch 0 0.5ch;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="midline"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="midline"]) .caret-btn {
+      position: relative;
+      z-index: 1;
+      background: var(--surface-3);
+      opacity: 1;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .title-text {
+      transform: rotate(180deg);
+      padding: 0.5ch 0 0.5ch 0ch;
+    }
+
+    :host([variant="midline"]) .toolbar {
+      position: relative;
+      z-index: 2;
+      background: var(--surface-3);
+      margin-left: 0;
+    }
+
+    :host([variant="midline"][orientation="horizontal"]) .toolbar {
+      margin-left: auto;
+    }
+
+    /* Debossed line runs from after title-text to before toolbar */
+    :host([variant="midline"]) .bar::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      transform: translateY(-50%);
+      background: var(--surface-2);
+      box-shadow:
+        0 -1px 0 var(--surface-5),
+        0 1px 0 var(--surface-1);
+      z-index: 0;
+    }
+
+    /* For vertical midline, line runs vertically */
+    :host([variant="midline"][orientation="vertical"]) .bar::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      right: unset;
+      width: 1px;
+      height: 100%;
+      transform: translateX(-50%);
+      box-shadow:
+        -1px 0 0 var(--surface-5),
+        1px 0 0 var(--surface-1);
+    }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], TitlebarElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], TitlebarElement.prototype, "iconName", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`,
+	reflect: true
+})], TitlebarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `variant`,
+	reflect: true
+})], TitlebarElement.prototype, "variant", void 0);
+__decorate([property({ type: Boolean })], TitlebarElement.prototype, "closable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsed", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], TitlebarElement.prototype, "toggleInteraction", void 0);
+TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarElement);
+//#endregion
+//#region src/bottom-drawer/bottom-drawer.ts
+/** Builds the command id for a named drawer's command, e.g. `inspector.expand`. */
+function bottomDrawerCommandId(name, command) {
+	return `${name.trim()}.${command}`;
+}
+function clampRange(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+let BottomDrawerElement = class BottomDrawerElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.height = 320;
+		this.minHeight = 160;
+		this.dismissThreshold = 96;
+		this.maxHeightRatio = .85;
+		this.label = `Drawer`;
+		this.iconName = ``;
+		this.closable = true;
+		this.collapsible = true;
+		this.maintainHandle = false;
+		this.name = ``;
+		this.#dragStartY = 0;
+		this.#dragStartHeight = 0;
+		this.#collapsedDragging = false;
+		this.#commandName = ``;
+		this.#commandIds = [];
+		this.#onResizeStart = (event) => {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const edge = event.currentTarget;
+			edge.setPointerCapture(event.pointerId);
+			if (!this.open) {
+				this.#collapsedDragging = false;
+				this.#dragStartY = event.clientY;
+				this.#dragStartHeight = this.dismissThreshold;
+				edge.addEventListener(`pointermove`, this.#onTabPointerMove);
+				edge.addEventListener(`pointerup`, this.#onTabPointerUp, { once: true });
+				edge.addEventListener(`pointercancel`, this.#onTabPointerUp, { once: true });
+				return;
+			}
+			this.#dragStartY = event.clientY;
+			this.#dragStartHeight = this.#displayHeight();
+			this._dragHeight = this.#dragStartHeight;
+			this.toggleAttribute(`resizing`, true);
+			edge.addEventListener(`pointermove`, this.#onResizeMove);
+			edge.addEventListener(`pointerup`, this.#onResizeEnd, { once: true });
+			edge.addEventListener(`pointercancel`, this.#onResizeEnd, { once: true });
+		};
+		this.#onResizeMove = (event) => {
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onResizeEnd = (event) => {
+			const edge = event.currentTarget;
+			edge.removeEventListener(`pointermove`, this.#onResizeMove);
+			edge.removeEventListener(`pointerup`, this.#onResizeEnd);
+			edge.removeEventListener(`pointercancel`, this.#onResizeEnd);
+			if (edge.hasPointerCapture(event.pointerId)) edge.releasePointerCapture(event.pointerId);
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onResizeKeyDown = (event) => {
+			if (!this.open) {
+				if (event.key === `ArrowUp` || event.key === `Enter` || event.key === ` ` || event.key === `Home` || event.key === `End`) {
+					event.preventDefault();
+					this.show();
+				}
+				return;
+			}
+			const delta = event.shiftKey ? 64 : 16;
+			if (event.key === `ArrowUp`) {
+				event.preventDefault();
+				this.#setHeight(this.height + delta);
+			} else if (event.key === `ArrowDown`) {
+				event.preventDefault();
+				if (this.height - delta < this.dismissThreshold) this.close();
+				else this.#setHeight(this.height - delta);
+			} else if (event.key === `Home`) {
+				event.preventDefault();
+				this.#setHeight(this.minHeight);
+			} else if (event.key === `End`) {
+				event.preventDefault();
+				this.#setHeight(this.#maxHeight());
+			}
+		};
+		this.#onTabPointerMove = (event) => {
+			const delta = this.#dragStartY - event.clientY;
+			if (!this.#collapsedDragging) {
+				if (delta < 4) return;
+				this.#collapsedDragging = true;
+				this.show();
+				this.toggleAttribute(`resizing`, true);
+			}
+			this._dragHeight = clampRange(this.#dragStartHeight + this.#dragStartY - event.clientY, 0, this.#maxHeight());
+		};
+		this.#onTabPointerUp = (event) => {
+			const target = event.currentTarget;
+			target.removeEventListener(`pointermove`, this.#onTabPointerMove);
+			target.removeEventListener(`pointerup`, this.#onTabPointerUp);
+			target.removeEventListener(`pointercancel`, this.#onTabPointerUp);
+			if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+			if (!this.#collapsedDragging) {
+				this.show();
+				return;
+			}
+			this.#collapsedDragging = false;
+			this.toggleAttribute(`resizing`, false);
+			const height = this._dragHeight ?? this.height;
+			this._dragHeight = void 0;
+			if (height < this.dismissThreshold) {
+				this.close();
+				return;
+			}
+			this.#setHeight(height);
+		};
+		this.#onDrawerKeyDown = (event) => {
+			if (event.key !== `Escape`) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.close();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
+    :host {
+      --bottom-drawer-background: color-mix(in srgb, var(--surface-2) 84%, transparent);
+      --bottom-drawer-border: 1px solid color-mix(in srgb, var(--surface-2-text) 14%, transparent);
+      --bottom-drawer-radius: var(--radius-l);
+      --bottom-drawer-blur: 18px;
+      --bottom-drawer-shadow: var(--shadow-l);
+      --bottom-drawer-collapsed-width: 96px;
+
+      display: block;
+      position: relative;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .content {
+      position: absolute;
+      inset: 0;
+      min-width: 0;
+      min-height: 0;
+    }
+    .content ::slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+    .drawer {
+      --m: 0;
+      position: absolute;
+      z-index: 2;
+      right: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      bottom: 0;
+      left: calc(var(--m) * (50% - var(--bottom-drawer-collapsed-width) / 2));
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      height: var(--bottom-drawer-height);
+      max-height: 100%;
+      min-height: 0;
+      color: var(--surface-2-text);
+      background: var(--bottom-drawer-background);
+      border: var(--bottom-drawer-border);
+      border-bottom: 0;
+      border-radius: var(--bottom-drawer-radius) var(--bottom-drawer-radius) 0 0;
+      box-shadow: var(--bottom-drawer-shadow);
+      backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      -webkit-backdrop-filter: blur(var(--bottom-drawer-blur)) saturate(1.15);
+      opacity: 0;
+      transform: translateY(100%);
+      visibility: hidden;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition),
+        visibility 0s linear 0.16s;
+      will-change: transform, opacity;
+    }
+    :host([open]) .drawer {
+      opacity: var(--bottom-drawer-opacity, 1);
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([resizing]) {
+      cursor: ns-resize;
+      user-select: none;
+    }
+    :host([resizing]) .drawer {
+      transition: none;
+    }
+    .resize-edge {
+      position: absolute;
+      z-index: 1;
+      top: -5px;
+      right: 0;
+      left: 0;
+      height: 11px;
+      cursor: ns-resize;
+      touch-action: none;
+      outline: none;
+    }
+    .resize-edge .ixfx-handle {
+      position: absolute;
+      top: 7px;
+      left: 50%;
+      transform: translateX(-50%);
+      --ixfx-handle-length: 44px;
+      --ixfx-handle-thickness: 3px;
+      --ixfx-handle-radius: 999px;
+    }
+    /* Inner content fades as the drawer morphs into its collapsed tab. */
+    ixfx-titlebar,
+    .body {
+      opacity: calc(1 - var(--m, 0));
+      transition: opacity var(--transition);
+    }
+    :host([resizing]) ixfx-titlebar,
+    :host([resizing]) .body {
+      transition: none;
+    }
+    /* Collapsed tab: docked to the bottom edge, narrowed to handle width. */
+    :host([maintain-handle]:not([open])) .drawer {
+      --m: 1;
+      height: 20px;
+      opacity: 1;
+      transform: translateY(0);
+      visibility: visible;
+      transition:
+        transform var(--transition),
+        opacity var(--transition),
+        left var(--transition),
+        right var(--transition),
+        height var(--transition);
+    }
+    :host([maintain-handle]:not([open])) ixfx-titlebar,
+    :host([maintain-handle]:not([open])) .body {
+      display: none;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge {
+      top: 0;
+      height: 100%;
+    }
+    :host([maintain-handle]:not([open])) .resize-edge .ixfx-handle {
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    ixfx-titlebar {
+      flex: none;
+      --titlebar-background: var(--bottom-drawer-title-background, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--surface-2-text) 10%, transparent);
+    }
+    .body {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+    .body ::slotted(*) {
+      box-sizing: border-box;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .drawer,
+      ixfx-titlebar,
+      .body {
+        transition-duration: 0s;
+      }
+    }
+  `
+		];
+	}
+	#dragStartY;
+	#dragStartHeight;
+	#collapsedDragging;
+	#ownedRegistry;
+	#commandTarget;
+	#commandName;
+	#commandIds;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#syncCommands();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#teardownCommands();
+		if (this.#ownedRegistry !== void 0) {
+			if (this.registry === this.#ownedRegistry) this.registry = void 0;
+			this.#ownedRegistry = void 0;
+		}
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`name`) || changed.has(`registry`)) this.#syncCommands();
+	}
+	show() {
+		this.open = true;
+	}
+	close() {
+		if (!this.open) return;
+		this.open = false;
+		this.dispatchEvent(new CustomEvent(`drawer-close`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	toggle() {
+		if (this.open) this.close();
+		else this.show();
+	}
+	#syncCommands() {
+		const name = this.name.trim();
+		const target = this.registry ?? this.#ownedRegistry;
+		if (name !== `` && this.isConnected && target !== void 0 && this.#commandTarget === target && this.#commandName === name) return;
+		this.#teardownCommands();
+		if (name === `` || !this.isConnected) return;
+		const resolved = this.registry ?? (this.#ownedRegistry ??= createCommandRegistry());
+		if (this.#ownedRegistry !== void 0 && resolved !== this.#ownedRegistry) this.#ownedRegistry = void 0;
+		if (this.registry === void 0) this.registry = resolved;
+		const registered = [];
+		const commands = [
+			{
+				command: `expand`,
+				label: `Expand ${this.label}`,
+				description: `Open the ${this.label} drawer`,
+				execute: () => this.show()
+			},
+			{
+				command: `collapse`,
+				label: `Collapse ${this.label}`,
+				description: `Close the ${this.label} drawer`,
+				execute: () => this.close()
+			},
+			{
+				command: `toggle`,
+				label: `Toggle ${this.label}`,
+				description: `Open the ${this.label} drawer if closed, close it if open`,
+				execute: () => this.toggle()
+			}
+		];
+		for (const { command, label, description, execute } of commands) {
+			const id = bottomDrawerCommandId(name, command);
+			if (resolved.has(id)) continue;
+			resolved.register({
+				id,
+				label,
+				description,
+				execute
+			});
+			registered.push(id);
+		}
+		this.#commandTarget = resolved;
+		this.#commandName = name;
+		this.#commandIds = registered;
+	}
+	#teardownCommands() {
+		if (this.#commandTarget !== void 0) {
+			for (const id of this.#commandIds) this.#commandTarget.unregister(id);
+			this.#commandTarget = void 0;
+			this.#commandName = ``;
+			this.#commandIds = [];
+		}
+	}
+	_onTitlebarToggle(event) {
+		event.stopPropagation();
+		if (event.detail.collapsed) this.close();
+		else this.open = true;
+	}
+	_onTitlebarClose(event) {
+		event.stopPropagation();
+		this.close();
+	}
+	render() {
+		const raw = this.#displayHeight();
+		const max = this.#maxHeight();
+		const morph = this.#morphProgress(raw);
+		const height = this.open ? raw * (1 - morph) + 20 * morph : 20;
+		const opacity = this.maintainHandle && this.open ? 1 : this.#dragOpacity(raw);
+		return b`
+      <div class="content"><slot></slot></div>
+      <section
+        class="drawer"
+        style=${`--bottom-drawer-height: ${height}px; --bottom-drawer-opacity: ${opacity}; --m: ${morph}`}
+        role="region"
+        aria-label=${this.label}
+        @keydown=${this.#onDrawerKeyDown}
+      >
+        <div
+          class="resize-edge"
+          role="separator"
+          tabindex="0"
+          aria-label=${`${this.open ? `Resize` : `Expand`} ${this.label}`}
+          aria-orientation="horizontal"
+          aria-valuemin=${this.minHeight}
+          aria-valuemax=${max}
+          aria-valuenow=${Math.round(raw)}
+          @pointerdown=${this.#onResizeStart}
+          @keydown=${this.#onResizeKeyDown}
+        ><span class="ixfx-handle" data-handle="dimpled" data-shape="horizontal" part="handle"></span></div>
+        <ixfx-titlebar
+          .title=${this.label}
+          .iconName=${this.iconName}
+          .closable=${this.closable}
+          .collapsible=${this.collapsible}
+          .collapsed=${!this.open}
+          ?inert=${!this.open}
+          @toggle=${this._onTitlebarToggle}
+          @close=${this._onTitlebarClose}
+        >
+          <slot name="toolbar" slot="toolbar"></slot>
+        </ixfx-titlebar>
+        <div class="body" ?inert=${!this.open}><slot name="drawer"></slot></div>
+      </section>
+    `;
+	}
+	#maxHeight() {
+		const availableHeight = this.clientHeight || this.height;
+		return Math.max(this.minHeight, availableHeight * clampRange(this.maxHeightRatio, 0, 1));
+	}
+	#displayHeight() {
+		return clampRange(this._dragHeight ?? this.height, 0, this.#maxHeight());
+	}
+	#dragOpacity(height) {
+		if (this._dragHeight === void 0 || height >= this.minHeight) return 1;
+		const fadeRange = this.minHeight - this.dismissThreshold;
+		if (fadeRange <= 0) return height >= this.dismissThreshold ? 1 : 0;
+		return clampRange((height - this.dismissThreshold) / fadeRange, 0, 1);
+	}
+	#morphProgress(raw) {
+		if (!this.open) return this.maintainHandle ? 1 : 0;
+		if (this._dragHeight === void 0 || !this.maintainHandle) return 0;
+		const range = this.minHeight - this.dismissThreshold;
+		if (range <= 0) return raw < this.dismissThreshold ? 1 : 0;
+		return clampRange((this.minHeight - raw) / range, 0, 1);
+	}
+	#setHeight(height) {
+		this.height = clampRange(height, this.minHeight, this.#maxHeight());
+		this.dispatchEvent(new CustomEvent(`drawer-resize`, {
+			detail: { height: this.height },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onResizeStart;
+	#onResizeMove;
+	#onResizeEnd;
+	#onResizeKeyDown;
+	#onTabPointerMove;
+	#onTabPointerUp;
+	#onDrawerKeyDown;
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], BottomDrawerElement.prototype, "open", void 0);
+__decorate([property({ type: Number })], BottomDrawerElement.prototype, "height", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-height`
+})], BottomDrawerElement.prototype, "minHeight", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `dismiss-threshold`
+})], BottomDrawerElement.prototype, "dismissThreshold", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-height-ratio`
+})], BottomDrawerElement.prototype, "maxHeightRatio", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], BottomDrawerElement.prototype, "iconName", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "closable", void 0);
+__decorate([property({ type: Boolean })], BottomDrawerElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `maintain-handle`,
+	reflect: true
+})], BottomDrawerElement.prototype, "maintainHandle", void 0);
+__decorate([property({ type: String })], BottomDrawerElement.prototype, "name", void 0);
+__decorate([property({ attribute: false })], BottomDrawerElement.prototype, "registry", void 0);
+__decorate([state()], BottomDrawerElement.prototype, "_dragHeight", void 0);
+BottomDrawerElement = __decorate([safeCustomElement(`ixfx-bottom-drawer`)], BottomDrawerElement);
+//#endregion
+//#region src/icons/defaults.ts
+/**
+* Chevron pointing down. Used for split-button dropdown toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>`;
+/**
+* Caret pointing right. Used for tree-basic expand indicator as a CSS mask.
+* fill="black" is correct for CSS mask-image use (shape only, color comes from background-color).
+*/
+const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10 7l6 5-6 5V7z"/></svg>`;
+/**
+* Checkmark. Useful for menu-check-item or confirmation states.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
+/**
+* Close / X icon. Useful for dialogs, notifications, dismissible elements.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+/**
+* Plus / add icon. Pairs with `close` for add/remove actions.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_ADD = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
+/**
+* Error / warning icon. Useful for error notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_ERROR = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`;
+/**
+* Info icon. Useful for info notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_INFO = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;
+/**
+* Warning icon. Useful for warning notifications.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`;
+/**
+* Chevron pointing right. Used for split-button switcher toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+/**
+* Folder with up arrow. Angled line style for navigating up one level.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
+/**
+* Folder. Useful for file explorers and sidebars.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
+/**
+* Document / file page. Useful for file lists and document tabs.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FILE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>`;
+/**
+* Magnifying glass. Useful for search panels and inputs.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
+function registerDefaults() {
+	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
+	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
+	registerIcon(`caret-right`, ICON_CARET_RIGHT);
+	registerIcon(`check`, ICON_CHECK);
+	registerIcon(`close`, ICON_CLOSE);
+	registerIcon(`file`, ICON_FILE);
+	registerIcon(`folder`, ICON_FOLDER);
+	registerIcon(`search`, ICON_SEARCH);
+	registerIcon(`add`, ICON_ADD);
+	registerIcon(`error`, ICON_ERROR);
+	registerIcon(`folder-up`, ICON_FOLDER_UP);
+	registerIcon(`info`, ICON_INFO);
+	registerIcon(`warning`, ICON_WARNING);
+}
+//#endregion
+//#region src/icons/index.ts
+registerDefaults();
+//#endregion
+//#region src/styles/prominence.ts
+/**
+* Shared CSS variable defaults for prominence-based interaction feedback.
+*
+* Defines the `--prominence-*` variables on `:host`. Include this if you
+* are building custom prominence selectors; otherwise use `prominenceStyles`
+* or `prominenceSubStyles` which include these variables automatically.
+*/
+const prominenceVars = i$3`
+  :host {
+    --prominence-idle-opacity: 0.6;
+    --prominence-idle-saturate: 0.4;
+    --prominence-tickled-opacity: 0.85;
+    --prominence-tickled-saturate: 0.8;
+    --prominence-disabled-opacity: 0.3;
+    --prominence-disabled-saturate: 0.1;
+  }
+`;
+/**
+* Host-based prominence interaction feedback.
+*
+* Applies CSS `filter` to **the whole component host** to convey state:
+* - **Disabled** (`[disabled]` / `:disabled`): heavily muted
+* - **Idle** (default): reduced opacity + desaturated
+* - **Tickled** (`:hover` / `:focus-within`): elevated opacity + saturation
+* - **Active** (`:active` / `[dragging]`): full vibrancy (filter removed)
+*
+* Defaults are defined on `:host` and can be overridden per-instance.
+*
+* Usage:
+* ```ts
+* import { prominenceStyles } from '../styles/prominence.js';
+*
+* class MyComponent extends LitElement {
+*   static styles = [prominenceStyles, css`...`];
+* }
+* ```
+*/
+const prominenceStyles = i$3`
+  ${prominenceVars}
+
+  :host {
+    filter:
+      opacity(var(--prominence-idle-opacity))
+      saturate(var(--prominence-idle-saturate));
+    transition: filter var(--transition, 0.15s ease-out);
+  }
+
+  :host(:hover),
+  :host(:focus-within) {
+    filter:
+      opacity(var(--prominence-tickled-opacity))
+      saturate(var(--prominence-tickled-saturate));
+  }
+
+  :host(:active),
+  :host([dragging]) {
+    filter: none;
+  }
+
+  /* Disabled comes last to override tickled/active selectors of equal specificity */
+  :host([disabled]),
+  :host(:disabled) {
+    filter:
+      opacity(var(--prominence-disabled-opacity))
+      saturate(var(--prominence-disabled-saturate));
+    pointer-events: none;
+  }
+`;
+i$3`
+  ${prominenceVars}
+
+  .prominence {
+    filter:
+      opacity(var(--prominence-idle-opacity))
+      saturate(var(--prominence-idle-saturate));
+    transition: filter var(--transition, 0.15s ease-out);
+  }
+
+  .prominence:hover,
+  .prominence:focus-within {
+    filter:
+      opacity(var(--prominence-tickled-opacity))
+      saturate(var(--prominence-tickled-saturate));
+  }
+
+  .prominence:active,
+  .prominence.dragging {
+    filter: none;
+  }
+
+  .prominence[disabled],
+  .prominence:disabled {
+    filter:
+      opacity(var(--prominence-disabled-opacity))
+      saturate(var(--prominence-disabled-saturate));
+    pointer-events: none;
+  }
+`;
+//#endregion
+//#region src/button/button-styles.ts
+const buttonStyles = i$3`
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  button {
+    cursor: pointer;
+    appearance: none;
+    background: var(--surface-4, #ccc);
+    color: var(--surface-3-text, #000);
+    border: var(--border, 1px solid #999);
+    outline: var(--ixfx-button-outline, none);
+    border-radius: var(--radius-xl, 8px);
+    corner-shape: superellipse(1);
+    padding: var(--ixfx-button-padding-block, var(--space-m, 8px)) var(--ixfx-button-padding-inline, var(--space-l, 12px));
+    font-family: var(--font-family, inherit);
+    font-size: var(--text-m, 14px);
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    box-shadow: 
+      var(--ixfx-button-shade, none),
+      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  button:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--surface-4) 80%, transparent);
+    border-color: var(--accent, #666);
+    box-shadow: 
+      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), 
+      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);
+  }
+
+  button:active:not(:disabled) {
+    background: var(--surface-2, #aaa);
+    transform: translateY(1px);
+    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);
+  }
+
+  .button-icon {
+    display: var(--ixfx-button-hide-icon, inline-flex);
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .button-label {
+    white-space: nowrap;
+  }
+
+  :host([has-icon]) .button-label {
+    display: var(--ixfx-button-hide-label, inline);
+  }
+
+  :host([hide-label]) .button-label {
+    display: none;
+  }
+
+  :host([hide-icon]) .button-icon {
+    display: none;
+  }
+
+  :host([subtle]) button {
+    background: color-mix(in oklch, var(--surface-4, #ccc) 40%, transparent);
+  }
+
+  :host([subtle]) button:hover:not(:disabled),
+  :host([subtle]) button:focus-visible:not(:disabled) {
+    background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);
+  }
+`;
+//#endregion
+//#region src/button/button.ts
+let ButtonElement = class ButtonElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.hideIcon = false;
+		this.hideLabel = false;
+		this.hasIcon = false;
+		this.subtle = false;
+	}
+	_renderIcon() {
+		if (this.hideIcon || !this.icon) return A;
+		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
+		if (!hasIcon(this.icon)) return A;
+		return b`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
+	}
+	render() {
+		this.hasIcon = !this.hideIcon && !!this.icon;
+		const label = this.hideLabel ? A : b`<span class="button-label"><slot></slot></span>`;
+		return b`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
+	}
+	static {
+		this.styles = [prominenceStyles, buttonStyles];
+	}
+};
+__decorate([property({ type: Boolean })], ButtonElement.prototype, "disabled", void 0);
+__decorate([property({ type: String })], ButtonElement.prototype, "icon", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-icon`,
+	reflect: true
+})], ButtonElement.prototype, "hideIcon", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-label`,
+	reflect: true
+})], ButtonElement.prototype, "hideLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `has-icon`,
+	reflect: true
+})], ButtonElement.prototype, "hasIcon", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "subtle", void 0);
+ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
+//#endregion
+//#region src/button/radio-group.ts
+let RadioGroup = class RadioGroup extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.value = ``;
+		this.orientation = `horizontal`;
+		this.items = [];
+		this.name = ``;
+		this.mode = `compact`;
+		this.checked = false;
+		this.valueOff = ``;
+		this.iconName = ``;
+		this.iconNameOff = ``;
+		this.hideLabels = false;
+		this._computedItems = [];
+		this._icons = /* @__PURE__ */ new Map();
+	}
+	get _isSingleToggle() {
+		return this._computedItems.length === 0 && Boolean(this.textContent?.trim());
+	}
+	get _singleToggleIconName() {
+		if (!this.iconName && !this.iconNameOff) return null;
+		return this.checked ? this.iconName : this.iconNameOff || this.iconName;
+	}
+	firstUpdated() {
+		this.#updateComputedItems();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`checked`)) {
+			const input = this.shadowRoot?.querySelector(`.radio-toggle-input`);
+			if (input && input.checked !== this.checked) {
+				input.checked = this.checked;
+				const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
+				this.dispatchEvent(new CustomEvent(`change`, {
+					detail: {
+						checked: this.checked,
+						value: newValue
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		}
+		if (changedProperties.has(`value`) && !this._isSingleToggle) {
+			const inputs = this.shadowRoot?.querySelectorAll(`.radio-input`);
+			if (inputs) {
+				for (const input of inputs) if (input.checked !== (input.value === this.value)) input.checked = input.value === this.value;
+			}
+		}
+	}
+	#updateComputedItems() {
+		const options = this.querySelectorAll(`option`);
+		const icons = /* @__PURE__ */ new Map();
+		if (options.length > 0) {
+			this._computedItems = Array.from(options, (el) => {
+				const tempDiv = document.createElement(`div`);
+				tempDiv.innerHTML = el.innerHTML;
+				const iconEl = tempDiv.querySelector(`svg`);
+				if (iconEl) icons.set(el.getAttribute(`value`) || ``, iconEl.outerHTML);
+				return {
+					value: el.getAttribute(`value`) || ``,
+					label: el.textContent?.trim() || ``,
+					disabled: el.hasAttribute(`disabled`),
+					iconName: el.getAttribute(`icon-name`) || void 0,
+					iconNameOff: el.getAttribute(`icon-name-off`) || void 0
+				};
+			});
+			this._icons = icons;
+		} else this._computedItems = [...this.items];
+	}
+	#handleRadioChange(e) {
+		e.stopImmediatePropagation();
+		const input = e.target;
+		this.value = input.value;
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				checked: true,
+				value: input.value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleToggleChange(e) {
+		e.stopImmediatePropagation();
+		const input = e.target;
+		this.checked = input.checked;
+		const newValue = this.checked ? this.value || `on` : this.valueOff || void 0;
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				checked: this.checked,
+				value: newValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#renderIcon(item) {
+		const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
+		if (iconName) return b`<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
+		const iconHtml = this._icons.get(item.value);
+		if (!iconHtml) return null;
+		return b`<span class="radio-icon">${unsafeHTML(iconHtml)}</span>`;
+	}
+	render() {
+		if (this._isSingleToggle) {
+			const iconName = this._singleToggleIconName;
+			const iconPart = iconName || this.hideLabels ? b`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
+			const labelPart = !this.hideLabels ? b`<span class="radio-label" data-text="${this.textContent?.trim()}">${this.textContent?.trim()}</span>` : null;
+			return b`
+        <label class="radio-item ${this.checked ? `selected` : ``}">
+          <input
+            type="checkbox"
+            class="radio-toggle-input"
+            ?checked=${this.checked}
+            @change=${this.#handleToggleChange}
+          />
+          ${iconPart}
+          ${labelPart}
+        </label>
+      `;
+		}
+		return b`
+      <slot @slotchange=${this.#updateComputedItems} style="display: none;"></slot>
+      <div class="radio-group ${this.orientation} ${this.mode}" role="radiogroup" aria-label=${this.name}>
+        ${this._computedItems.map((item) => {
+			const iconName = item.value === this.value ? item.iconName || null : item.iconNameOff || item.iconName || null;
+			const iconPart = iconName || this.hideLabels ? b`<ixfx-icon class="radio-icon" name="${iconName || `check`}"></ixfx-icon>` : null;
+			const labelPart = !this.hideLabels ? b`<span class="radio-label" data-text="${item.label}">${item.label}</span>` : null;
+			return b`
+            <label class="radio-item ${item.value === this.value ? `selected` : ``}" ?disabled=${item.disabled}>
+              <input
+                type="radio"
+                class="radio-input"
+                name=${this.name}
+                value=${item.value}
+                ?disabled=${item.disabled}
+                ?checked=${item.value === this.value}
+                @change=${this.#handleRadioChange}
+              />
+              ${iconPart}
+              ${labelPart}
+            </label>
+          `;
+		})}
+      </div>
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			i$3`
+    :host {
+      display: inline-flex;
+      min-width: min-content;
       box-sizing: border-box;
       /* Default to looking like a cohesive control group */
       background: var(--surface-4, transparent);
@@ -4559,6 +5695,306 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/list-drag-select-controller.ts
+const DEFAULT_POINTER_TYPES = [`mouse`, `pen`];
+const DEFAULT_THRESHOLD = 4;
+/** Pointer distance (px) from an edge that triggers auto-scroll. */
+const EDGE_ZONE = 28;
+/** Max auto-scroll speed in px per frame. */
+const MAX_SCROLL_SPEED = 16;
+/**
+* Shared pointer-drag (marquee / rubber-band) selection for list components.
+*
+* Owns all pointer plumbing and rectangle state; knows nothing about DOM
+* geometry or the selection model — those are host callbacks. Mirrors the
+* `TickledController` attach pattern (`new ListDragSelectController(this, …)`).
+*
+* Behaviour: `pointerdown` on the surface records a start point; once the
+* pointer moves past `threshold`, the surface captures the pointer and every
+* move recomputes the rect, hit-tests, and calls `onPreview`. On release the
+* final set is delivered once via `onCommit`. A press that never crosses the
+* threshold does nothing (the normal `@click` path runs).
+*/
+var ListDragSelectController = class {
+	#host;
+	#config;
+	#boundSurface;
+	#pointerId;
+	#startClientX = 0;
+	#startClientY = 0;
+	#startX = 0;
+	#startY = 0;
+	#currentClientX = 0;
+	#currentClientY = 0;
+	#lastModifiers = {
+		shiftKey: false,
+		ctrlKey: false,
+		metaKey: false
+	};
+	#dragging = false;
+	#suppressClick = false;
+	/** Selection as it was when the drag started — the combine baseline. */
+	#base = /* @__PURE__ */ new Set();
+	/** Combine mode of the most recent preview (drives the commit flag). */
+	#lastMode = `replace`;
+	#preview = /* @__PURE__ */ new Set();
+	#raf = 0;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	/** `true` while a drag is in progress or its trailing click is still pending. */
+	get isDragging() {
+		return this.#dragging || this.#suppressClick;
+	}
+	/** `true` once the press has crossed the threshold and a rect is live. */
+	get isActive() {
+		return this.#dragging;
+	}
+	hostConnected() {
+		this.#bindSurface();
+		window.addEventListener(`pointermove`, this.#onPointerMove);
+		window.addEventListener(`pointerup`, this.#onPointerUp);
+		window.addEventListener(`pointercancel`, this.#onPointerCancel);
+	}
+	hostDisconnected() {
+		this.#unbindSurface();
+		window.removeEventListener(`pointermove`, this.#onPointerMove);
+		window.removeEventListener(`pointerup`, this.#onPointerUp);
+		window.removeEventListener(`pointercancel`, this.#onPointerCancel);
+		this.#stopAutoScroll();
+		this.#reset();
+	}
+	/** Re-bind when the surface element appears/changes (e.g. first render). */
+	hostUpdated() {
+		if ((this.#safeSurface() ?? this.#host) !== this.#boundSurface) this.#bindSurface();
+	}
+	#safeSurface() {
+		try {
+			return this.#config.getSurface();
+		} catch {
+			return;
+		}
+	}
+	#bindSurface() {
+		const next = this.#safeSurface() ?? this.#host;
+		if (next === this.#boundSurface) return;
+		this.#unbindSurface();
+		this.#boundSurface = next;
+		next.addEventListener(`pointerdown`, this.#onPointerDown);
+	}
+	#unbindSurface() {
+		this.#boundSurface?.removeEventListener(`pointerdown`, this.#onPointerDown);
+		this.#boundSurface = void 0;
+	}
+	#enabledTypes() {
+		return this.#config.pointerTypes ?? DEFAULT_POINTER_TYPES;
+	}
+	#threshold() {
+		return this.#config.threshold ?? DEFAULT_THRESHOLD;
+	}
+	#onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (!this.#enabledTypes().includes(event.pointerType)) return;
+		let enabled = false;
+		try {
+			enabled = this.#config.isEnabled();
+		} catch {
+			return;
+		}
+		if (!enabled) return;
+		const target = event.target;
+		if (target instanceof Element && typeof target.closest === `function`) {
+			if (target.closest(`input,button,a,select,textarea,[contenteditable]`)) return;
+		}
+		if (this.#config.shouldStart) try {
+			if (!this.#config.shouldStart(event)) return;
+		} catch {
+			return;
+		}
+		const box = (this.#safeSurface() ?? this.#host).getBoundingClientRect();
+		this.#pointerId = event.pointerId;
+		this.#startClientX = event.clientX;
+		this.#startClientY = event.clientY;
+		this.#currentClientX = event.clientX;
+		this.#currentClientY = event.clientY;
+		this.#startX = Math.min(Math.max(event.clientX - box.left, 0), Math.max(0, box.width));
+		this.#startY = Math.min(Math.max(event.clientY - box.top, 0), Math.max(0, box.height));
+		this.#dragging = false;
+		this.#suppressClick = false;
+		this.#base = /* @__PURE__ */ new Set();
+		this.#lastMode = `replace`;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+	};
+	/** Combine mode for the current modifiers: Shift adds, Cmd/Ctrl inverts. */
+	#modeFor(modifiers) {
+		if (modifiers.metaKey || modifiers.ctrlKey) return `invert`;
+		if (modifiers.shiftKey) return `add`;
+		return `replace`;
+	}
+	#onPointerMove = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#currentClientX = event.clientX;
+		this.#currentClientY = event.clientY;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		const moved = Math.hypot(event.clientX - this.#startClientX, event.clientY - this.#startClientY);
+		if (!this.#dragging) {
+			if (moved < this.#threshold()) return;
+			this.#dragging = true;
+			try {
+				this.#base = new Set(this.#config.getBaseSelection());
+			} catch {
+				this.#base = /* @__PURE__ */ new Set();
+			}
+			const surface = this.#safeSurface() ?? this.#host;
+			try {
+				if (typeof surface.setPointerCapture === `function`) surface.setPointerCapture(event.pointerId);
+			} catch {}
+		}
+		try {
+			event.preventDefault?.();
+		} catch {}
+		this.#updatePreview();
+		this.#kickAutoScroll();
+	};
+	#surfaceBox() {
+		const surface = this.#safeSurface() ?? this.#host;
+		try {
+			return surface.getBoundingClientRect();
+		} catch {
+			return;
+		}
+	}
+	#currentRect() {
+		const box = this.#surfaceBox();
+		if (!box) return void 0;
+		const cx = Math.min(Math.max(this.#currentClientX - box.left, 0), Math.max(0, box.width));
+		const cy = Math.min(Math.max(this.#currentClientY - box.top, 0), Math.max(0, box.height));
+		return {
+			x: Math.min(this.#startX, cx),
+			y: Math.min(this.#startY, cy),
+			width: Math.abs(cx - this.#startX),
+			height: Math.abs(cy - this.#startY)
+		};
+	}
+	#updatePreview() {
+		const rect = this.#currentRect();
+		if (!rect) return;
+		let hit = [];
+		try {
+			hit = this.#config.hitTest(rect);
+		} catch {
+			hit = [];
+		}
+		const mode = this.#modeFor(this.#lastModifiers);
+		this.#lastMode = mode;
+		const hitSet = new Set(hit);
+		let preview;
+		if (mode === `add`) preview = /* @__PURE__ */ new Set([...this.#base, ...hitSet]);
+		else if (mode === `invert`) {
+			const toggled = new Set(this.#base);
+			for (const item of hitSet) if (toggled.has(item)) toggled.delete(item);
+			else toggled.add(item);
+			preview = toggled;
+		} else preview = hitSet;
+		this.#preview = preview;
+		try {
+			this.#config.onPreview(preview, rect);
+		} catch {}
+	}
+	#onPointerUp = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#lastModifiers = {
+			shiftKey: event.shiftKey,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey
+		};
+		const wasDragging = this.#dragging;
+		const surface = this.#safeSurface() ?? this.#host;
+		try {
+			if (typeof surface.hasPointerCapture === `function` && typeof surface.releasePointerCapture === `function` && surface.hasPointerCapture(event.pointerId)) surface.releasePointerCapture(event.pointerId);
+		} catch {}
+		this.#stopAutoScroll();
+		this.#pointerId = void 0;
+		if (!wasDragging) {
+			this.#reset();
+			return;
+		}
+		this.#dragging = false;
+		const final = this.#preview;
+		try {
+			this.#config.onCommit(final, { additive: this.#lastMode !== `replace` });
+		} catch {}
+		try {
+			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
+		} catch {}
+		this.#preview = /* @__PURE__ */ new Set();
+		this.#suppressClick = true;
+		window.setTimeout(() => {
+			this.#suppressClick = false;
+		}, 0);
+	};
+	#onPointerCancel = (event) => {
+		if (this.#pointerId === void 0 || event.pointerId !== this.#pointerId) return;
+		this.#stopAutoScroll();
+		this.#pointerId = void 0;
+		this.#dragging = false;
+		this.#preview = /* @__PURE__ */ new Set();
+		try {
+			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
+		} catch {}
+		this.#suppressClick = false;
+	};
+	#kickAutoScroll() {
+		if (!this.#config.autoScroll || this.#raf !== 0) return;
+		this.#raf = requestAnimationFrame(this.#autoScrollTick);
+	}
+	#autoScrollTick = () => {
+		this.#raf = 0;
+		if (!this.#dragging || this.#pointerId === void 0) return;
+		const box = this.#surfaceBox();
+		if (!box) return;
+		const px = this.#currentClientX - box.left;
+		const py = this.#currentClientY - box.top;
+		let dx = 0;
+		let dy = 0;
+		if (px < EDGE_ZONE) dx = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, px) / EDGE_ZONE));
+		else if (px > box.width - EDGE_ZONE) dx = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.width - px) / EDGE_ZONE));
+		if (py < EDGE_ZONE) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, py) / EDGE_ZONE));
+		else if (py > box.height - EDGE_ZONE) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, box.height - py) / EDGE_ZONE));
+		if (dx === 0 && dy === 0) return;
+		const autoScroll = this.#config.autoScroll;
+		if (!autoScroll) return;
+		try {
+			autoScroll(dx, dy);
+		} catch {}
+		this.#updatePreview();
+		this.#raf = requestAnimationFrame(this.#autoScrollTick);
+	};
+	#stopAutoScroll() {
+		if (this.#raf !== 0) {
+			cancelAnimationFrame(this.#raf);
+			this.#raf = 0;
+		}
+	}
+	#reset() {
+		this.#dragging = false;
+		this.#suppressClick = false;
+		this.#base = /* @__PURE__ */ new Set();
+		this.#lastMode = `replace`;
+		this.#preview = /* @__PURE__ */ new Set();
+	}
+};
+//#endregion
 //#region src/interaction/list-item-animation.ts
 /**
 * Shared insertion / removal animation for the list & tree components.
@@ -4797,6 +6233,31 @@ var ListSelectionController = class {
 		this.#anchor = [...next].at(-1);
 		this.#apply(next);
 	}
+	/**
+	* Whether a drag / marquee gesture may build a selection in the current
+	* modes: `selectionMode="multiple"`, or a multi interaction mode
+	* (`checked` / `sticky` / `vscode`) outside `selectionMode="none"`.
+	* Stricter than `canSelectMultiple()` — `single` + `standard` does not
+	* qualify (a drag there would be a surprising multi-select).
+	*/
+	canDragSelect() {
+		return this.#config.getModes().selectionMode !== `none` && this.#effectiveMulti();
+	}
+	/**
+	* Replace the selection with `items` from a drag / marquee gesture. Like
+	* `selectMany` but gated on `canDragSelect()` instead of throwing, and a
+	* no-op in single/none modes. Non-selectable items are dropped; the anchor
+	* moves to the last item. Fires `onChange` once. An empty result clears a
+	* non-empty selection (e.g. a Cmd-drag that toggles everything off) but is
+	* a no-op when nothing is selected.
+	*/
+	applyDragSelection(items) {
+		if (!this.canDragSelect()) return;
+		const next = new Set([...items].filter((t) => this.#config.isSelectable(t)));
+		if (next.size === 0 && this.#selected.size === 0) return;
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
 	/** Remove a single item from the selection. */
 	deselect(item) {
 		if (!this.#selected.has(item)) return;
@@ -11889,6 +13350,7 @@ let DataGridElement = class DataGridElement extends i {
 	static {
 		this.styles = [
 			themeFallbacks,
+			handleStyles,
 			tickledStyles,
 			tickledItemStyles,
 			listItemFadeKeyframes,
@@ -11932,7 +13394,8 @@ let DataGridElement = class DataGridElement extends i {
     .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .sort-icon { font-size: 10px; opacity: 0.7; }
     .resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
-    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; }
+    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; display: inline-flex; align-items: center; }
+    .reorder-handle .ixfx-handle { --ixfx-handle-spot-size: 14px; --ixfx-handle-dot-size: 3px; }
     .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
     .viewport { flex: 1; overflow: auto; position: relative; }
     .spacer { position: relative; }
@@ -12838,7 +14301,7 @@ let DataGridElement = class DataGridElement extends i {
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? b`<span class="reorder-handle" draggable="false"
                   @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
-                >⠿</span>` : A}
+                ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="reorder-handle"></span></span>` : A}
                 <span class="header-label">${col.label}</span>
                 ${this.sortState?.key === col.key ? b`<span class="sort-icon">${this.sortState.direction === `asc` ? `▲` : `▼`}</span>` : A}
                 ${col.resizable !== false ? b`<span class="resize-handle" @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
@@ -13426,7 +14889,28 @@ let DetailListElement = class DetailListElement extends i {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap
+			itemWrap: this.itemWrap,
+			hoverDisabled: () => this.#dragSelect.isDragging
+		});
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.renderRoot.querySelector(`.container`),
+			isEnabled: () => this.selection.canDragSelect() && this._getVisibleItems().length > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueeRect = rect;
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-marquee`, preview.has(el));
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-marquee`);
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, _dy) => {
+				if (this._listEl) this._listEl.scrollLeft += dx;
+			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR$3,
@@ -13503,6 +14987,7 @@ let DetailListElement = class DetailListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#dragSelect.isDragging) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this.focus();
@@ -13529,6 +15014,30 @@ let DetailListElement = class DetailListElement extends i {
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
+	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
+	#marqueeRect;
+	#dragSelect;
+	/** Collect visible items whose surface-relative box intersects `rect`. */
+	#marqueeHitTest(rect) {
+		const surface = this.renderRoot.querySelector(`.container`);
+		if (!surface) return [];
+		const box = surface.getBoundingClientRect();
+		const rx0 = rect.x;
+		const ry0 = rect.y;
+		const rx1 = rect.x + rect.width;
+		const ry1 = rect.y + rect.height;
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const r = el.getBoundingClientRect();
+			const left = r.left - box.left;
+			const top = r.top - box.top;
+			if (left <= rx1 && left + r.width >= rx0 && top <= ry1 && top + r.height >= ry0) out.push(el);
+		}
+		return out;
+	}
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	/** Command registry carrying this list's `list.search.*` commands. */
@@ -14301,6 +15810,22 @@ let DetailListElement = class DetailListElement extends i {
       outline-offset: -2px;
     }
 
+    /* Drag-select (marquee) rectangle + covered-row preview.
+       Style hooks: part="marquee", --detail-list-marquee-border,
+       --detail-list-marquee-fill. */
+    .marquee {
+      position: absolute;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid var(--detail-list-marquee-border, var(--accent));
+      background: var(--detail-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+    }
+
+    ::slotted([data-marquee]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+    }
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -14341,6 +15866,7 @@ let DetailListElement = class DetailListElement extends i {
         <ul part="list" class="scroll-fade-x">
           <slot></slot>
         </ul>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
         <div class="loading" part="loading" ?hidden=${!loading}>
           ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : A}
         </div>
@@ -15994,16 +17520,20 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         style="cursor: ${cursor}; grid-column: ${gridColumn}; grid-row: ${gridRow};"
         @pointerdown=${(e) => this._onGutterPointerDown(e, groupId, index)}
       >
-        <div class="grab-handle">
-          <span class="dot"></span>
-          <span class="dot"></span>
-          <span class="dot"></span>
-        </div>
+        <span
+          class="ixfx-handle"
+          part="grip"
+          data-handle="dimpled"
+          data-shape=${isRow ? `vertical` : `horizontal`}
+        ></span>
       </div>
     `;
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
       :host {
         display: block;
         width: 100%;
@@ -16014,10 +17544,10 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         --split-gutter-active-color: var(--accent);
         --split-collapsed-size: 0px;
         --split-snap: 24px;
-        --split-grab-color: var(--border-subtle-color);
-        --split-grab-dot-size: 3px;
-        --split-grab-size: 16px;
-        --split-grab-thickness: 8px;
+
+        /* Gutter grip — shared handle primitive (docs/infra-handle.md). */
+        --ixfx-handle-length: 16px;
+        --ixfx-handle-thickness: 8px;
       }
 
       * {
@@ -16079,31 +17609,15 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
         user-select: none;
       }
 
-      .grab-handle .dot {
-        width: var(--split-grab-dot-size);
-        height: var(--split-grab-dot-size);
-        border-radius: 50%;
-        background: var(--split-grab-color);
-      }
-
-      :host([direction="row"]) .grab-handle {
-        flex-direction: column;
-        gap: var(--split-grab-dot-size);
-      }
-
-      :host([direction="column"]) .grab-handle {
-        flex-direction: row;
-        gap: var(--split-grab-dot-size);
-      }
-
-      :host([data-dragging]) .grab-handle {
+      :host([data-dragging]) .gutter .ixfx-handle {
         display: none;
       }
 
-      :host(:not([data-dragging])) .gutter:hover .grab-handle {
-        display: flex;
+      :host(:not([data-dragging])) .gutter:hover .ixfx-handle {
+        display: none;
       }
-    `];
+    `
+		];
 	}
 };
 __decorate([property({
@@ -16817,636 +18331,238 @@ let TabListItemElement = class TabListItemElement extends i {
 	/**
 	* Mirror the default-slot text into `.label[data-label]` for the `::after`
 	* width sizer. Slotted toolbar content is excluded.
-	*/
-	_syncLabelSizer() {
-		const slot = this.shadowRoot?.querySelector(`slot:not([name])`);
-		const label = this.shadowRoot?.querySelector(`.label`);
-		if (slot === null || slot === void 0 || label === null || label === void 0) return;
-		const text = slot.assignedNodes().filter((node) => !(node instanceof HTMLElement && node.hasAttribute(`slot`))).map((node) => node.textContent ?? ``).join(``);
-		if (text) label.setAttribute(`data-label`, text);
-		else label.removeAttribute(`data-label`);
-	}
-	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
-	}
-	firstUpdated() {
-		this._updateToolbarContent();
-		this._syncLabelSizer();
-	}
-	render() {
-		const showLabel = !this.hideLabels || !this.iconName;
-		const hasActions = this.closeable || this._hasToolbarContent;
-		return b`
-      <div>
-        ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
-        ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
-        ${hasActions ? b`
-        <div class="actions">
-          <div class="toolbar"><slot name="toolbar"></slot></div>
-          ${this.closeable ? b`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close tab"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : A}
-        </div>
-        ` : A}
-      </div>
-    `;
-	}
-	_onCloseClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-		this.remove();
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			prominenceStyles,
-			i$3`
-      :host {
-        --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
-        --selected-tab-icon-color: var(--ixfx-selected-tab-icon-color, var(--accent));
-        --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
-        --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
-        --selected-tab-text-decoration: var(--ixfx-selected-tab-text-decoration, none);
-        --selected-tab-text-decoration-color: var(--ixfx-selected-tab-text-decoration-color, var(--accent));
-        --selected-tab-text-decoration-thickness: var(--ixfx-selected-tab-text-decoration-thickness, 0px);
-        --selected-tab-text-decoration-offset: var(--ixfx-selected-tab-text-decoration-offset, 2px);
-        --selected-background: var(--ixfx-tab-selected-background, var(--surface-5));
-        --tab-padding: var(--ixfx-tab-padding, var(--space-s));
-        display: inline-flex;
-        min-width: 0;
-        user-select: none;
-        box-sizing: border-box;
-        font-size: var(--text-m);
-        color: inherit;
-        /* No explicit height: items stretch (align-self: stretch via the
-           list's flex container) so every tab in a strip shares one height
-           even when toolbars give some items taller content. */
-      }
-
-      :host > div {
-        display: flex;
-        align-items: center;
-        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
-        min-width: 0;
-        width: 100%;
-        font-weight: 500;
-        border: var(--selected-tab-border-width) solid transparent;
-        gap: var(--space-s);
-        transition: background var(--transition, 0.15s);
-      }
-
-      /* Hover ("tickle") background. When --ixfx-tab-hover-background is
-         unset each state keeps its resting background, so existing
-         consumers see no change. */
-      :host(:hover:not([selected])) > div {
-        background: var(--ixfx-tab-hover-background, transparent);
-      }
-
-      :host([selected]:hover) > div {
-        background: var(--ixfx-tab-hover-background, var(--selected-background));
-      }
-
-      :host([selected]) > div {
-        color: var(--selected-tab-color);
-        border-top-color: var(--indicator-color-top, transparent);
-        border-bottom-color: var(--indicator-color-bottom, transparent);
-        border-left-color: var(--indicator-color-left, transparent);
-        border-right-color: var(--indicator-color-right, transparent);
-        background: var(--selected-background);
-        font-weight: var(--selected-tab-weight);
-        border-radius:var(--radius-m);
-      }
-
-      :host([selected]) .label {
-        text-decoration: var(--selected-tab-text-decoration);
-        text-decoration-color: var(--selected-tab-text-decoration-color);
-        text-decoration-thickness: var(--selected-tab-text-decoration-thickness);
-        text-decoration-offset: var(--selected-tab-text-decoration-offset);
-      }
-
-      .label {
-        overflow: var(--allow-overflow, hidden);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        min-width: 0;
-        flex: 1 1 auto;
-      }
-
-      /* Width sizer: an invisible copy of the label, always set at the
-         selected weight, so activating a tab (bold) never shifts the strip.
-         Text is mirrored from the default slot via the data-label attribute
-         (see _syncLabelSizer). */
-      .label::after {
-        content: attr(data-label);
-        display: block;
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-        font-weight: var(--selected-tab-weight);
-      }
-
-      ixfx-icon {
-        flex-shrink: 0;
-      }
-
-      /* Leading icon (direct child — not close/toolbar icons) picks up the
-         accent when selected, so icon-only tabs read as active. */
-      :host([selected]) > div > ixfx-icon {
-        color: var(--selected-tab-icon-color);
-      }
-
-      .actions {
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        margin-left: auto;
-        flex-shrink: 0;
-      }
-
-      .toolbar {
-        /* Always laid out (display: flex) so the tab's width doesn't shift when
-           the toolbar appears on selection. visibility: hidden keeps the
-           toolbar from receiving pointer events or painting, while preserving
-           the space its contents take up. */
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-        visibility: hidden;
-      }
-
-      :host([selected]) .toolbar {
-        visibility: visible;
-      }
-
-      slot[name="toolbar"] {
-        display: contents;
-      }
-
-      /* Slotted buttons inherit these through the shadow boundary; keeps a
-         toolbar button from inflating the strip height. */
-      .toolbar ::slotted(ixfx-button) {
-        --ixfx-button-padding-block: var(--space-xs);
-      }
-
-      .close-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        padding: var(--space-xs);
-        cursor: pointer;
-        color: inherit;
-        border-radius: var(--radius-s);
-        opacity: var(--prominence-idle-opacity);
-        transition: opacity var(--transition), background var(--transition);
-      }
-
-      .close-btn:hover {
-        background: var(--surface-5);
-        opacity: var(--prominence-tickled-opacity);
-      }
-
-      .close-btn:focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: 1px;
-      }
-
-      :host([selected]) .close-btn,
-      :host(:hover) .close-btn {
-        opacity: var(--prominence-tickled-opacity);
-      }
-    `
-		];
-	}
-};
-__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `hide-labels`
-})], TabListItemElement.prototype, "hideLabels", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], TabListItemElement.prototype, "iconName", void 0);
-__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
-__decorate([property({
-	type: String,
-	attribute: `command-active`
-})], TabListItemElement.prototype, "commandActive", void 0);
-__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
-__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
-__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
-TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
-//#endregion
-//#region src/titlebar/titlebar.ts
-let TitlebarElement = class TitlebarElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.title = ``;
-		this.iconName = ``;
-		this.orientation = `horizontal`;
-		this.variant = `titlebar`;
-		this.closable = false;
-		this.collapsible = false;
-		this.collapsed = false;
-		this.toggleInteraction = `implicit`;
-	}
-	_onToggleClick() {
-		if (!this.collapsible) return;
-		this.collapsed = !this.collapsed;
-		this.dispatchEvent(new CustomEvent(`toggle`, {
-			detail: { collapsed: this.collapsed },
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_onCloseClick() {
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-	}
-	_getCaretIcon() {
-		return `chevron-down`;
-	}
-	render() {
-		const caretIcon = this._getCaretIcon();
-		const isVertical = this.orientation === `vertical`;
-		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
-		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
-		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
-		const treeVariant = this.variant === `tree`;
-		return b`
-      <div
-        class="bar"
-        role="toolbar"
-        @click=${implicitToggle ? this._onToggleClick : A}
-      >
-        ${treeVariant && showCaret ? b`
-          <button
-            class="caret-btn"
-            type="button"
-            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
-            @click=${this._onToggleClick}
-          >
-            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
-          </button>
-          ` : A}
-        <div class="title-text-wrapper">
-          ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
-          <span class="title-text">${this.title}</span>
-        </div>
-
-        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
-          <slot name="toolbar"></slot>
-          ${this.closable ? b`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close panel"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : A}
-          ${!treeVariant && showCaret ? b`
-          <button
-            class="caret-btn"
-            type="button"
-            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
-            @click=${this._onToggleClick}
-          >
-            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
-          </button>
-          ` : A}
-        </div>
-      </div>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    :host {
-      display: block;
-      box-sizing: border-box;
-    }
-
-    .bar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--space-s) var(--space-m);
-      background: var(--surface-4);
-      color: var(--surface-3-text);
-      min-height: 2em;
-      height: 100%;
-      flex-shrink: 0;
-      box-sizing: border-box;
-    }
-
-    :host([orientation="vertical"]) .bar {
-      flex-direction: row;
-      min-width: 2em;
-      writing-mode: vertical-rl;
-      text-orientation: mixed;
-    }
-
-    .caret-btn,
-    .close-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      margin: 0;
-      cursor: pointer;
-      color: inherit;
-      border-radius: var(--radius-s);
-      transition: background var(--transition);
-      opacity: var(--prominence-idle-opacity);
-    }
-
-    .caret-btn:hover,
-    .close-btn:hover {
-      background: var(--surface-5);
-      opacity: var(--prominence-tickled-opacity);
-    }
-
-    .caret-btn:focus-visible,
-    .close-btn:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 1px;
-    }
-
-    ixfx-icon {
-      width: 1.25em;
-      height: 1.25em;
-      transition: transform var(--transition);
-    }
-
-    .title-icon {
-      flex-shrink: 0;
-    }
-
-    .title-text {
-      flex: 1;
-      padding-left: 1ch;
-      font-family: var(--font-family);
-      font-size: var(--text-m);
-      font-weight: var(--font-weight-bold, 600);
-      white-space: nowrap;
-      overflow: hidden;
-      align-self: center;
-      text-overflow: ellipsis;
-      user-select: none;
-      -webkit-user-select: none;
-    }
-
-    :host([collapsible][toggle-interaction="implicit"]) .bar {
-      cursor: pointer;
-    }
-
-    :host([orientation="vertical"]) .title-text {
-      writing-mode: vertical-rl;
-      padding-left: 0;
-      padding-bottom: 1ch;
-      text-orientation: mixed;
-      transform: rotate(180deg);
-    }
-
-    .toolbar {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-      margin-left: auto;
-    }
-
-    :host([orientation="vertical"]) .toolbar {
-      flex-direction: column;
-      margin-left: 0;
-      margin-top: auto;
-      writing-mode: horizontal-tb;
-    }
-
-    slot[name="toolbar"] {
-      display: contents;
-    }
-
-    ::slotted(slot[name="toolbar"]) {
-      display: contents;
-    }
-
-    .title-text-wrapper {
-      display: flex;
-      padding: 0 var(--space-s);
-    }
-
-    /* === Midline variant === */
-
-    :host([variant="midline"]) .bar {
-      background: transparent;
-      padding: var(--space-xs) var(--space-m);
-      min-height: unset;
-      position: relative;
-    }
-
-    :host([variant="midline"][orientation="vertical"]) .bar {
-      padding: var(--space-m) var(--space-xs);
-      min-width: unset;
-    }
-
-    :host([variant="midline"]) .title-text-wrapper {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      gap: var(--space-s);
-      background: var(--surface-3);
-    }
-
-    :host([variant="midline"]) .title-text {
-      font-weight: normal;
-      color: var(--surface-3-text);
-      padding: 0 0.5ch 0 0.5ch;
-      background: transparent;
-      box-shadow: none;
-      flex: unset;
-      width: auto;
-      white-space: nowrap;
-    }
+	*/
+	_syncLabelSizer() {
+		const slot = this.shadowRoot?.querySelector(`slot:not([name])`);
+		const label = this.shadowRoot?.querySelector(`.label`);
+		if (slot === null || slot === void 0 || label === null || label === void 0) return;
+		const text = slot.assignedNodes().filter((node) => !(node instanceof HTMLElement && node.hasAttribute(`slot`))).map((node) => node.textContent ?? ``).join(``);
+		if (text) label.setAttribute(`data-label`, text);
+		else label.removeAttribute(`data-label`);
+	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+		this._syncLabelSizer();
+	}
+	render() {
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
+		return b`
+      <div>
+        ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
+        ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${hasActions ? b`
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+        </div>
+        ` : A}
+      </div>
+    `;
+	}
+	_onCloseClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			i$3`
+      :host {
+        --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
+        --selected-tab-icon-color: var(--ixfx-selected-tab-icon-color, var(--accent));
+        --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
+        --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
+        --selected-tab-text-decoration: var(--ixfx-selected-tab-text-decoration, none);
+        --selected-tab-text-decoration-color: var(--ixfx-selected-tab-text-decoration-color, var(--accent));
+        --selected-tab-text-decoration-thickness: var(--ixfx-selected-tab-text-decoration-thickness, 0px);
+        --selected-tab-text-decoration-offset: var(--ixfx-selected-tab-text-decoration-offset, 2px);
+        --selected-background: var(--ixfx-tab-selected-background, var(--surface-5));
+        --tab-padding: var(--ixfx-tab-padding, var(--space-s));
+        display: inline-flex;
+        min-width: 0;
+        user-select: none;
+        box-sizing: border-box;
+        font-size: var(--text-m);
+        color: inherit;
+        /* No explicit height: items stretch (align-self: stretch via the
+           list's flex container) so every tab in a strip shares one height
+           even when toolbars give some items taller content. */
+      }
 
-    :host([variant="midline"]) .title-icon {
-      background: transparent;
-      flex-shrink: 0;
-    }
+      :host > div {
+        display: flex;
+        align-items: center;
+        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
+        min-width: 0;
+        width: 100%;
+        font-weight: 500;
+        border: var(--selected-tab-border-width) solid transparent;
+        gap: var(--space-s);
+        transition: background var(--transition, 0.15s);
+      }
 
-    :host([variant="midline"]) .caret-btn {
-      position: relative;
-      z-index: 1;
-      background: var(--surface-3);
-      opacity: 1;
-    }
+      /* Hover ("tickle") background. When --ixfx-tab-hover-background is
+         unset each state keeps its resting background, so existing
+         consumers see no change. */
+      :host(:hover:not([selected])) > div {
+        background: var(--ixfx-tab-hover-background, transparent);
+      }
 
-    :host([variant="midline"][orientation="vertical"]) .title-text {
-      transform: rotate(180deg);
-      padding: 0.5ch 0 0.5ch 0ch;
-    }
+      :host([selected]:hover) > div {
+        background: var(--ixfx-tab-hover-background, var(--selected-background));
+      }
 
-    :host([variant="midline"]) .toolbar {
-      position: relative;
-      z-index: 2;
-      background: var(--surface-3);
-      margin-left: 0;
-    }
+      :host([selected]) > div {
+        color: var(--selected-tab-color);
+        border-top-color: var(--indicator-color-top, transparent);
+        border-bottom-color: var(--indicator-color-bottom, transparent);
+        border-left-color: var(--indicator-color-left, transparent);
+        border-right-color: var(--indicator-color-right, transparent);
+        background: var(--selected-background);
+        font-weight: var(--selected-tab-weight);
+        border-radius:var(--radius-m);
+      }
 
-    :host([variant="midline"][orientation="horizontal"]) .toolbar {
-      margin-left: auto;
-    }
+      :host([selected]) .label {
+        text-decoration: var(--selected-tab-text-decoration);
+        text-decoration-color: var(--selected-tab-text-decoration-color);
+        text-decoration-thickness: var(--selected-tab-text-decoration-thickness);
+        text-decoration-offset: var(--selected-tab-text-decoration-offset);
+      }
 
-    /* Debossed line runs from after title-text to before toolbar */
-    :host([variant="midline"]) .bar::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      right: 0;
-      height: 1px;
-      transform: translateY(-50%);
-      background: var(--surface-2);
-      box-shadow:
-        0 -1px 0 var(--surface-5),
-        0 1px 0 var(--surface-1);
-      z-index: 0;
-    }
+      .label {
+        overflow: var(--allow-overflow, hidden);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
 
-    /* For vertical midline, line runs vertically */
-    :host([variant="midline"][orientation="vertical"]) .bar::after {
-      top: 0;
-      bottom: 0;
-      left: 50%;
-      right: unset;
-      width: 1px;
-      height: 100%;
-      transform: translateX(-50%);
-      box-shadow:
-        -1px 0 0 var(--surface-5),
-        1px 0 0 var(--surface-1);
-    }
+      /* Width sizer: an invisible copy of the label, always set at the
+         selected weight, so activating a tab (bold) never shifts the strip.
+         Text is mirrored from the default slot via the data-label attribute
+         (see _syncLabelSizer). */
+      .label::after {
+        content: attr(data-label);
+        display: block;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+        font-weight: var(--selected-tab-weight);
+      }
 
-    /* === Tree variant: VS Code explorer / Outline style === */
-    :host([variant="tree"]) .bar {
-      background: transparent;
-      padding: 0 var(--space-xs);
-      min-height: unset;
-      gap: var(--space-xs);
-    }
+      ixfx-icon {
+        flex-shrink: 0;
+      }
 
-    :host([variant="tree"][orientation="vertical"]) .bar {
-      padding: var(--space-xs) 0;
-      flex-direction: column;
-      min-width: unset;
-      writing-mode: horizontal-tb;
-    }
+      /* Leading icon (direct child — not close/toolbar icons) picks up the
+         accent when selected, so icon-only tabs read as active. */
+      :host([selected]) > div > ixfx-icon {
+        color: var(--selected-tab-icon-color);
+      }
 
-    :host([variant="tree"]) .title-text-wrapper {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-xs);
-      padding: 0;
-      background: transparent;
-    }
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-left: auto;
+        flex-shrink: 0;
+      }
 
-    :host([variant="tree"]) .title-icon {
-      background: transparent;
-      flex-shrink: 0;
-    }
+      .toolbar {
+        /* Always laid out (display: flex) so the tab's width doesn't shift when
+           the toolbar appears on selection. visibility: hidden keeps the
+           toolbar from receiving pointer events or painting, while preserving
+           the space its contents take up. */
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        visibility: hidden;
+      }
 
-    :host([variant="tree"]) .title-text {
-      font-weight: normal;
-      color: var(--surface-3-text);
-      padding: 0;
-      background: transparent;
-      box-shadow: none;
-      flex: unset;
-      width: auto;
-      white-space: nowrap;
-    }
+      :host([selected]) .toolbar {
+        visibility: visible;
+      }
 
-    :host([variant="tree"][orientation="vertical"]) .title-text {
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
-      padding: 0;
-    }
+      slot[name="toolbar"] {
+        display: contents;
+      }
 
-    :host([variant="tree"]) .caret-btn {
-      background: transparent;
-      opacity: var(--prominence-idle-opacity);
-      padding: 0;
-    }
+      /* Slotted buttons inherit these through the shadow boundary; keeps a
+         toolbar button from inflating the strip height. */
+      .toolbar ::slotted(ixfx-button) {
+        --ixfx-button-padding-block: var(--space-xs);
+      }
 
-    :host([variant="tree"]) .caret-btn:hover {
-      background: transparent;
-      opacity: var(--prominence-tickled-opacity);
-    }
+      .close-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--space-xs);
+        cursor: pointer;
+        color: inherit;
+        border-radius: var(--radius-s);
+        opacity: var(--prominence-idle-opacity);
+        transition: opacity var(--transition), background var(--transition);
+      }
 
-    :host([variant="tree"]) .toolbar {
-      margin-left: auto;
-    }
+      .close-btn:hover {
+        background: var(--surface-5);
+        opacity: var(--prominence-tickled-opacity);
+      }
 
-    :host([variant="tree"][orientation="vertical"]) .toolbar {
-      flex-direction: row;
-      margin-left: 0;
-      margin-top: auto;
-    }
+      .close-btn:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
 
-    :host([variant="tree"]) ixfx-icon {
-      width: 1em;
-      height: 1em;
-    }
-  `];
+      :host([selected]) .close-btn,
+      :host(:hover) .close-btn {
+        opacity: var(--prominence-tickled-opacity);
+      }
+    `
+		];
 	}
 };
-__decorate([property({ type: String })], TitlebarElement.prototype, "title", void 0);
-__decorate([property({
-	type: String,
-	attribute: `icon-name`
-})], TitlebarElement.prototype, "iconName", void 0);
-__decorate([property({
-	type: String,
-	attribute: `orientation`,
-	reflect: true
-})], TitlebarElement.prototype, "orientation", void 0);
-__decorate([property({
-	type: String,
-	attribute: `variant`,
-	reflect: true
-})], TitlebarElement.prototype, "variant", void 0);
-__decorate([property({ type: Boolean })], TitlebarElement.prototype, "closable", void 0);
+__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
 __decorate([property({
 	type: Boolean,
-	reflect: true
-})], TitlebarElement.prototype, "collapsible", void 0);
+	attribute: `hide-labels`
+})], TabListItemElement.prototype, "hideLabels", void 0);
 __decorate([property({
-	type: Boolean,
-	reflect: true
-})], TitlebarElement.prototype, "collapsed", void 0);
+	type: String,
+	attribute: `icon-name`
+})], TabListItemElement.prototype, "iconName", void 0);
+__decorate([property({ type: String })], TabListItemElement.prototype, "description", void 0);
 __decorate([property({
 	type: String,
-	attribute: `toggle-interaction`
-})], TitlebarElement.prototype, "toggleInteraction", void 0);
-TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarElement);
+	attribute: `command-active`
+})], TabListItemElement.prototype, "commandActive", void 0);
+__decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
+__decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
@@ -18687,7 +19803,7 @@ let DockHostElement = class DockHostElement extends i {
           role="separator"
           aria-label="Resize adjacent panels"
           @pointerdown=${(e) => this._onJunctionPointerDown(e, junction)}
-        ></div>
+        ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="junction-handle"></span></div>
       `)}
       </div>
       <slot @slotchange=${this._onPoolSlotChange}></slot>
@@ -18781,7 +19897,10 @@ let DockHostElement = class DockHostElement extends i {
 		};
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
       :host {
         display: block;
         width: 100%;
@@ -18909,26 +20028,23 @@ let DockHostElement = class DockHostElement extends i {
         border-radius: 50%;
         cursor: nwse-resize;
         pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-      .junction-handle::after {
-        content: '';
-        position: absolute;
-        inset: 4px;
-        border-radius: 50%;
-        background: var(--dock-junction-color, var(--accent));
-        opacity: 0;
-        transition: opacity var(--transition);
-      }
-
-      .junction-handle:hover::after {
-        opacity: 0.9;
+      .junction-handle .ixfx-handle {
+        --ixfx-handle-spot-size: 12px;
+        --ixfx-handle-dot-size: 3px;
+        --ixfx-handle-opacity: 0;
+        --ixfx-handle-opacity-active: 0.9;
       }
 
       slot:not([name]) {
         display: none;
       }
-    `];
+    `
+		];
 	}
 };
 __decorate([property({
@@ -20398,6 +21514,233 @@ var DataGridListSource = class {
 	}
 };
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const END_DWELL = 2e3;
+const RESET_DURATION = 400;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this.mode = `hover`;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._loopTimer = 0;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering || this._loopAtEnd) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+			if (this._loopActive && this.mode === `loop` && !this.disabled && overflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+			if (!overflowing && this._loopAtEnd) {
+				this._loopAtEnd = false;
+				this.requestUpdate();
+			}
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+		if (this.mode === `loop`) this.startLoop();
+	}
+	updated(changed) {
+		if (changed.has(`mode`)) {
+			if (this.mode === `loop`) this.startLoop();
+			else this.stopLoop();
+		}
+		if (changed.has(`disabled`) && this.disabled) this.stopLoop();
+		this._measure();
+	}
+	/**
+	* Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
+	*/
+	get looping() {
+		return this._loopActive;
+	}
+	/**
+	* Begin looping: pan to the end, dwell there for 2 seconds, reset to the
+	* start and pan again, repeating until `stopLoop()` is called. A no-op when
+	* `disabled`, when there is nothing to reveal, or under reduced-motion.
+	*/
+	startLoop() {
+		if (this.disabled || this._prefersReducedMotion()) return;
+		this._loopActive = true;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+		if (this._isOverflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+	}
+	/**
+	* Stop a loop started with `startLoop()` and snap back to the rest position.
+	*/
+	stopLoop() {
+		if (!this._loopActive && !this._loopAtEnd && this._loopTimer === 0) return;
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+	}
+	_prefersReducedMotion() {
+		return globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches ?? false;
+	}
+	_panDuration() {
+		return Math.max(1.5, (this._overflow + END_PADDING) / SPEED);
+	}
+	_clearLoopTimer() {
+		if (this._loopTimer !== 0) {
+			clearTimeout(this._loopTimer);
+			this._loopTimer = 0;
+		}
+	}
+	_scheduleLoopPan(delay) {
+		this._clearLoopTimer();
+		this._loopTimer = window.setTimeout(() => {
+			this._loopTimer = 0;
+			if (!this._loopActive || this.disabled || !this._isOverflowing) return;
+			this._loopAtEnd = true;
+			this.requestUpdate();
+			const dwell = this._panDuration() * 1e3 + END_DWELL;
+			this._loopTimer = window.setTimeout(() => {
+				this._loopTimer = 0;
+				if (!this._loopActive) return;
+				this._loopAtEnd = false;
+				this.requestUpdate();
+				this._scheduleLoopPan(700);
+			}, dwell);
+		}, delay);
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._loopActive && this.mode === `loop`) {
+			if (this._loopAtEnd) return [
+				`transform: translateX(${hoverX}px)`,
+				`transition: transform ${duration}s ${PAN_EASING}`,
+				`overflow: visible`,
+				`text-overflow: clip`
+			].join(`; `);
+			return [
+				`transform: translateX(${restX}px)`,
+				`transition: transform ${RESET_DURATION}ms ${PAN_EASING}`,
+				revealEnd ? `` : `overflow: visible; text-overflow: clip`
+			].filter(Boolean).join(`; `);
+		}
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return b`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	attribute: `mode`,
+	reflect: true
+})], PanTextElement.prototype, "mode", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopActive", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopAtEnd", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -20483,6 +21826,7 @@ let GridListElement = class GridListElement extends i {
 		super(..._args);
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
+		this.disableHoverTickle = false;
 		this.itemSize = 160;
 		this.gap = 8;
 		this.orientation = `grid`;
@@ -20492,6 +21836,7 @@ let GridListElement = class GridListElement extends i {
 		this.captionBackdrop = `scrim`;
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -20528,10 +21873,56 @@ let GridListElement = class GridListElement extends i {
 				enabled: this.#source.isSelectable(i)
 			})),
 			onTickle: (k) => {
+				this.#stopActiveCaptionPan();
 				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.#itemWrap
+			itemWrap: this.#itemWrap,
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+		});
+		this.#marqueePreview = /* @__PURE__ */ new Set();
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.#postDragSuppressTimer = 0;
+		this.#activeCaptionPan = null;
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.#viewportRef.value,
+			isEnabled: () => this.selection.canDragSelect() && this.#source.count > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueePreview = preview;
+				this.#marqueeRect = rect;
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				this.#marqueePreview = /* @__PURE__ */ new Set();
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, dy) => {
+				const vp = this.#viewportRef.value;
+				if (!vp) return;
+				if (dx !== 0) {
+					vp.scrollLeft += dx;
+					this._scrollLeft = vp.scrollLeft;
+				}
+				if (dy !== 0) {
+					vp.scrollTop += dy;
+					this._scrollTop = vp.scrollTop;
+				}
+			},
+			shouldStart: (event) => {
+				if (!this.itemsDraggable) return true;
+				const cell = event.composedPath()[0]?.closest?.(`.cell`);
+				if (!cell) return true;
+				const key = cell.dataset.key;
+				if (!key) return true;
+				const index = this.#source.indexOfKey(key);
+				if (index < 0) return true;
+				return !this.#source.isSelectable(index);
+			}
 		});
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
@@ -20544,6 +21935,32 @@ let GridListElement = class GridListElement extends i {
 				this.#emitViewportChange();
 			});
 		};
+		this.#onDragStart = (e, key) => {
+			if (!this.itemsDraggable) return;
+			const index = this.#source.indexOfKey(key);
+			if (index < 0 || !this.#source.isSelectable(index)) return;
+			if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
+			const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
+			const detail = {
+				key,
+				index: this.#source.indexOfKey(key),
+				item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
+				selectedKeys
+			};
+			if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
+				e.preventDefault();
+				return;
+			}
+			this.#nativeDragging = true;
+			this.#dragOriginKey = key;
+			this.toggleAttribute(`data-native-dragging`, true);
+			const count = selectedKeys.length;
+			this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+		};
+		this.#onDragEnd = () => {
+			this.#clearNativeDragState();
+			this.#startPostDragSuppressTimer();
+		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -20613,6 +22030,7 @@ let GridListElement = class GridListElement extends i {
 					break;
 				}
 				case `Escape`:
+					if (this.#nativeDragging) this.#clearNativeDragState();
 					this.selection.clear();
 					break;
 				default: return;
@@ -20680,7 +22098,18 @@ let GridListElement = class GridListElement extends i {
         border-radius: var(--grid-list-radius);
       }
 
-      /* The square that holds the slotted content. */
+      /* The square that holds the slotted content — the "image well". Its
+         background is a set of consumer-settable variables so a Finder-style
+         look is possible: on selection the caption takes the accent colouring
+         while the well takes a tint of the surface colour. Each variable is
+         unset by default, so the fallback (today's look) applies until a
+         consumer opts in.
+           --grid-list-thumb-bg                    idle well background
+           --grid-list-thumb-bg-tickled            under the cursor
+           --grid-list-thumb-bg-selected           when the cell is selected
+           --grid-list-thumb-bg-selected-tickled   selected + under the cursor
+           --grid-list-thumb-selection-wash        colour of the box-mode wash (default: --accent)
+           --grid-list-thumb-selection-wash-opacity strength of that wash (default: 0.18; set 0 to drop it) */
       .thumb {
         position: relative;
         flex: 1;
@@ -20690,7 +22119,7 @@ let GridListElement = class GridListElement extends i {
         box-sizing: border-box;
         overflow: hidden;
         border-radius: 0;
-        background: transparent;
+        background: var(--grid-list-thumb-bg, transparent);
         border: 1px solid transparent;
         transition: background var(--transition), border-color var(--transition);
       }
@@ -20703,6 +22132,7 @@ let GridListElement = class GridListElement extends i {
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        draggable: false;
       }
       .thumb ::slotted(*:empty)::after {
         content: "Empty";
@@ -20714,19 +22144,27 @@ let GridListElement = class GridListElement extends i {
       }
 
       /* Selection / cursor wash — sits over the slotted content so it reads
-         on photos and arbitrary DOM alike. */
+         on photos and arbitrary DOM alike. Set
+         --grid-list-thumb-selection-wash-opacity: 0 to drop it in favour of a
+         --grid-list-thumb-bg-selected tint. */
       .thumb::after {
         content: "";
         position: absolute;
         inset: 0;
         pointer-events: none;
         border-radius: inherit;
-        background: var(--accent);
+        background: var(--grid-list-thumb-selection-wash, var(--accent));
         opacity: 0;
         transition: opacity var(--transition, 0.1s ease-out);
       }
       .cell.selected .thumb::after {
-        opacity: 0.18;
+        opacity: var(--grid-list-thumb-selection-wash-opacity, 0.18);
+      }
+      :host(:not([caption-style="separate"])) .cell.selected .thumb {
+        background: var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, transparent));
+      }
+      :host(:not([caption-style="separate"])) .cell.selected.tickled .thumb {
+        background: var(--grid-list-thumb-bg-selected-tickled, var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, transparent)));
       }
 
       /* ---- Caption (base) ---- */
@@ -20744,6 +22182,18 @@ let GridListElement = class GridListElement extends i {
       }
       :host([caption-align="left"]) .caption { text-align: left; }
       :host([caption-align="right"]) .caption { text-align: right; }
+      /* Tickled captions swap their plain label for an ixfx-pan-text in loop
+         mode so a truncated label scrolls instead of staying an ellipsis. The
+         pan fills the caption band (flex in 'separate', block otherwise) and
+         inherits its alignment. */
+      .caption ixfx-pan-text {
+        display: block;
+        flex: 1;
+        min-width: 0;
+        max-width: 100%;
+        font: inherit;
+        color: inherit;
+      }
 
       /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
              single selection outline ---- */
@@ -20753,8 +22203,8 @@ let GridListElement = class GridListElement extends i {
         overflow: hidden;
         transition: background var(--transition), border-color var(--transition);
       }
-      :host(:not([caption-style="separate"])) .cell:hover,
-      :host(:not([caption-style="separate"])) .cell.tickled {
+      :host(:not([caption-style="separate"])) .cell.tickled,
+      :host(:not([caption-style="separate"]):not([disable-hover-tickle])) .cell:hover {
         background: var(--item-bg-tickled);
         border: var(--item-border-tickled);
       }
@@ -20821,12 +22271,12 @@ let GridListElement = class GridListElement extends i {
       :host([caption-style="separate"]) .thumb {
         flex: none;
         border-radius: var(--grid-list-radius);
-        background: var(--grid-list-item-bg);
+        background: var(--grid-list-thumb-bg, var(--grid-list-item-bg));
         border: 1px solid transparent;
       }
-      :host([caption-style="separate"]) .cell:hover .thumb,
-      :host([caption-style="separate"]) .cell.tickled .thumb {
-        background: var(--item-bg-tickled);
+      :host([caption-style="separate"]) .cell.tickled .thumb,
+      :host([caption-style="separate"]:not([disable-hover-tickle])) .cell:hover .thumb {
+        background: var(--grid-list-thumb-bg-tickled, var(--item-bg-tickled));
         border: var(--item-border-tickled);
       }
       :host([caption-style="separate"]) .caption {
@@ -20839,14 +22289,17 @@ let GridListElement = class GridListElement extends i {
       }
       :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
       :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      /* Inset the selection ring (negative offset) so it is never clipped by the
+         scroll viewport's overflow when the cell sits against an edge. */
       :host([caption-style="separate"]) .cell.selected .thumb {
+        background: var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, var(--grid-list-item-bg)));
         outline: 2px solid var(--accent);
-        outline-offset: 2px;
+        outline-offset: -2px;
       }
       :host([caption-style="separate"]) .cell.selected.tickled .thumb {
-        background: var(--item-bg-selected-tickled);
+        background: var(--grid-list-thumb-bg-selected-tickled, var(--item-bg-selected-tickled));
         outline: 2px dashed var(--surface-3);
-        outline-offset: 2px;
+        outline-offset: -2px;
       }
       :host([caption-style="separate"]) .cell.selected .caption {
         background: var(--accent);
@@ -20884,6 +22337,26 @@ let GridListElement = class GridListElement extends i {
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
         .cell.entering { animation: none; }
       }
+
+      /* Drag-select (marquee) rectangle + covered-cell preview. The preview
+         reuses the selection wash so covered cells read as "about to be
+         selected". Style hooks: part="marquee", --grid-list-marquee-border,
+         --grid-list-marquee-fill. */
+      .marquee {
+        position: absolute;
+        pointer-events: none;
+        z-index: 5;
+        border: 1px solid var(--grid-list-marquee-border, var(--accent));
+        background: var(--grid-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+      }
+      .cell.marquee .thumb::after {
+        opacity: var(--grid-list-thumb-selection-wash-opacity, 0.18);
+      }
+
+      /* Native item drag origin cell. */
+      .cell.dragging-origin {
+        opacity: 0.6;
+      }
     `
 		];
 	}
@@ -20916,6 +22389,62 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#sourceElement;
 	#source;
+	/** Live drag-select preview: covered keys + the surface-relative rect. */
+	#marqueePreview;
+	#marqueeRect;
+	/** Native item drag state: true while a drag is active. */
+	#nativeDragging;
+	/** Key of the cell that originated the native drag. */
+	#dragOriginKey;
+	/** Timer handle for post-drag click suppression. */
+	#postDragSuppressTimer;
+	/**
+	* The single caption pan-text currently scrolling. At most one caption is
+	* a pan-text in loop mode at a time — when tickle moves, the old one is
+	* stopped before the new one starts (see `#activateTickledPan`).
+	*/
+	#activeCaptionPan;
+	#dragSelect;
+	/**
+	* Map a surface-relative (viewport-visible) rect to covered item keys using
+	* the same `computeGridWindow` geometry the renderer uses — pure arithmetic,
+	* so virtualized off-screen items are covered without DOM measurement.
+	*/
+	#marqueeHitTest(rect) {
+		const count = this.#source.count;
+		if (count === 0) return [];
+		const horizontal = this.orientation === `row`;
+		const win = computeGridWindow(count, this.itemSize, this.#rowHeight(), this.gap, Math.max(1, this._viewportWidth), Math.max(1, this._viewportHeight), horizontal ? this._scrollLeft : this._scrollTop, this.orientation, 0);
+		const out = [];
+		if (horizontal) {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const lo = Math.max(0, Math.floor(x0 / win.colStride));
+			const hi = Math.min(count - 1, Math.floor(x1 / win.colStride));
+			for (let i = lo; i <= hi; i++) out.push(i);
+		} else {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const y0 = rect.y + this._scrollTop;
+			const y1 = y0 + rect.height;
+			const colLo = Math.max(0, Math.floor(x0 / win.colStride));
+			const colHi = Math.min(win.cols - 1, Math.floor(x1 / win.colStride));
+			const rowLo = Math.max(0, Math.floor(y0 / win.rowStride));
+			const rowHi = Math.floor(y1 / win.rowStride);
+			for (let row = rowLo; row <= rowHi; row++) for (let col = colLo; col <= colHi; col++) {
+				const index = row * win.cols + col;
+				if (index >= 0 && index < count) out.push(index);
+			}
+		}
+		const keys = [];
+		for (const index of out) {
+			const key = this.#source.keyAt(index);
+			if (!key || isSyntheticKey(key)) continue;
+			if (!this.#source.isSelectable(index)) continue;
+			keys.push(key);
+		}
+		return keys;
+	}
 	#searchMode;
 	#searchFilterKeys;
 	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
@@ -20988,6 +22517,7 @@ let GridListElement = class GridListElement extends i {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#stopActiveCaptionPan();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -21000,6 +22530,7 @@ let GridListElement = class GridListElement extends i {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
+		if (this.#nativeDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -21187,6 +22718,7 @@ let GridListElement = class GridListElement extends i {
 			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
 		}
 		this.#applyZoomAnchor();
+		this.#activateTickledPan();
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
 	#applyZoomAnchor() {
@@ -21517,15 +23049,19 @@ let GridListElement = class GridListElement extends i {
 			element
 		});
 	}
-	_dispatch(name, detail) {
-		this.dispatchEvent(new CustomEvent(name, {
+	_dispatch(name, detail, cancelable = false) {
+		return this.dispatchEvent(new CustomEvent(name, {
 			detail,
 			bubbles: true,
-			composed: true
+			composed: true,
+			cancelable
 		}));
 	}
 	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
 	#selectedSnapshot;
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	render() {
 		const win = this.#currentWindow();
 		this.#selectedSnapshot = this.selection.selectedKeys;
@@ -21542,6 +23078,7 @@ let GridListElement = class GridListElement extends i {
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
         </div>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
       </div>
       ${this.search?.renderField()}
     `;
@@ -21553,7 +23090,10 @@ let GridListElement = class GridListElement extends i {
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
@@ -21564,24 +23104,69 @@ let GridListElement = class GridListElement extends i {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return b`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @dragstart=${(e) => this.#onDragStart(e, key)}
+        @dragend=${() => this.#onDragEnd()}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
+	/**
+	* A tickled cell swaps its plain label for an `ixfx-pan-text` in loop mode
+	* so a truncated label scrolls instead of staying an ellipsis. Unticked
+	* cells keep the cheap plain-text caption.
+	*/
+	#renderCaption(caption, captionCss, tickled) {
+		if (tickled) return b`<div class="caption" part="caption" style=${captionCss} title=${caption}><ixfx-pan-text mode="loop">${caption}</ixfx-pan-text></div>`;
+		return b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>`;
+	}
+	/** Stop the active caption pan, if any, and forget it. */
+	#stopActiveCaptionPan() {
+		const active = this.#activeCaptionPan;
+		this.#activeCaptionPan = null;
+		try {
+			active?.stopLoop?.();
+		} catch {}
+	}
+	/**
+	* Enforce a single scrolling caption: the tickled cell's pan-text loops,
+	* every other pan-text is stopped. The pan-text also auto-starts when
+	* `mode="loop"` is set; this covers the case where the element was already
+	* connected before overflow was measured.
+	*/
+	#activateTickledPan() {
+		const tickledCell = this.renderRoot.querySelector(`.cell[data-tickled]`);
+		const pans = [...this.renderRoot.querySelectorAll(`ixfx-pan-text[mode="loop"]`)];
+		const current = tickledCell?.querySelector(`ixfx-pan-text[mode="loop"]`) ?? null;
+		for (const pan of pans) if (pan !== current) try {
+			pan.stopLoop?.();
+		} catch {}
+		const active = this.#activeCaptionPan;
+		if (active && active !== current) try {
+			active.stopLoop?.();
+		} catch {}
+		if (!current) {
+			this.#activeCaptionPan = null;
+			return;
+		}
+		this.#activeCaptionPan = current;
+		current.startLoop?.();
+	}
 	#renderElementCells(win) {
 		const slice = this.#items.slice(win.startIndex, win.endIndex);
 		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
@@ -21589,8 +23174,11 @@ let GridListElement = class GridListElement extends i {
 	#renderCell(el, index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#captionFor(el);
@@ -21602,23 +23190,27 @@ let GridListElement = class GridListElement extends i {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return b`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @dragstart=${(e) => this.#onDragStart(e, key)}
+        @dragend=${() => this.#onDragEnd()}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
         </div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
@@ -21630,9 +23222,24 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	#onCellClick(e, key) {
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	#onDragStart;
+	#onDragEnd;
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
+	#clearNativeDragState() {
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.removeAttribute(`aria-label`);
+	}
 	#onCellActivate(key) {
 		if (this.interactionMode !== `manual`) this.selection.replace(key);
 		this.#emitItemEvent(`list-activate`, key);
@@ -21646,6 +23253,11 @@ __decorate([property({
 	type: String,
 	attribute: `interaction-mode`
 })], GridListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-hover-tickle`,
+	reflect: true
+})], GridListElement.prototype, "disableHoverTickle", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `item-size`
@@ -21685,6 +23297,11 @@ __decorate([property({
 })], GridListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], GridListElement.prototype, "itemsDraggable", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -23571,7 +25188,29 @@ let VerticalListElement = class VerticalListElement extends i {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap
+			itemWrap: this.itemWrap,
+			hoverDisabled: () => this.#dragSelect.isDragging
+		});
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.renderRoot.querySelector(`.container`),
+			isEnabled: () => this.selection.canDragSelect() && this._getVisibleItems().length > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueeRect = rect;
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-marquee`, preview.has(el));
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-marquee`);
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (_dx, dy) => {
+				const list = this.renderRoot.querySelector(`ul`);
+				if (list) list.scrollTop += dy;
+			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR,
@@ -23632,6 +25271,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#dragSelect.isDragging) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this._dispatch(`list-item-click`, { item });
@@ -23648,6 +25288,30 @@ let VerticalListElement = class VerticalListElement extends i {
 	#itemObserver;
 	/** Items that have already played (or been skipped for) their enter animation. */
 	#animatedItems;
+	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
+	#marqueeRect;
+	#dragSelect;
+	/** Collect visible items whose surface-relative box intersects `rect`. */
+	#marqueeHitTest(rect) {
+		const surface = this.renderRoot.querySelector(`.container`);
+		if (!surface) return [];
+		const box = surface.getBoundingClientRect();
+		const rx0 = rect.x;
+		const ry0 = rect.y;
+		const rx1 = rect.x + rect.width;
+		const ry1 = rect.y + rect.height;
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const r = el.getBoundingClientRect();
+			const left = r.left - box.left;
+			const top = r.top - box.top;
+			if (left <= rx1 && left + r.width >= rx0 && top <= ry1 && top + r.height >= ry0) out.push(el);
+		}
+		return out;
+	}
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	/** Command registry carrying this list's `list.search.*` commands. */
@@ -24118,6 +25782,22 @@ let VerticalListElement = class VerticalListElement extends i {
       outline-offset: -2px;
     }
 
+    /* Drag-select (marquee) rectangle + covered-row preview.
+       Style hooks: part="marquee", --vertical-list-marquee-border,
+       --vertical-list-marquee-fill. */
+    .marquee {
+      position: absolute;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid var(--vertical-list-marquee-border, var(--accent));
+      background: var(--vertical-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+    }
+
+    ::slotted([data-marquee]) {
+      background: var(--item-bg-selected);
+      color: var(--item-text-selected);
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -24139,6 +25819,7 @@ let VerticalListElement = class VerticalListElement extends i {
         <ul part="list">
           <slot></slot>
         </ul>
+        ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
         ${this.search.renderField()}
       </div>
     `;
@@ -30832,136 +32513,6 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
-//#region src/pan-text/pan-text.ts
-const SPEED = 45;
-const END_PADDING = 4;
-const START_DELAY = 300;
-const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
-let PanTextElement = class PanTextElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.direction = `end`;
-		this.disabled = false;
-		this._isOverflowing = false;
-		this._isHovering = false;
-		this._overflow = 0;
-		this._resizeObserver = null;
-		this._onMouseEnter = () => {
-			this._isHovering = true;
-		};
-		this._onMouseLeave = () => {
-			this._isHovering = false;
-		};
-		this._measure = () => {
-			if (this._isHovering) return;
-			const el = this._textEl;
-			if (!el) return;
-			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
-			const overflowing = this._overflow > 0;
-			this.classList.toggle(`is-overflowing`, overflowing);
-			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(() => this._measure());
-		this.addEventListener(`mouseenter`, this._onMouseEnter);
-		this.addEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = null;
-		this.removeEventListener(`mouseenter`, this._onMouseEnter);
-		this.removeEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	firstUpdated() {
-		this._measure();
-		this._resizeObserver?.observe(this);
-		document.fonts?.ready.then(() => this._measure());
-	}
-	updated() {
-		this._measure();
-	}
-	_textStyle() {
-		if (!this._isOverflowing) return ``;
-		const distance = this._overflow + END_PADDING;
-		const duration = Math.max(1.5, distance / SPEED);
-		const revealEnd = this.direction === `end`;
-		const restX = revealEnd ? 0 : -distance;
-		const hoverX = revealEnd ? -distance : 0;
-		if (this._isHovering) return [
-			`transform: translateX(${hoverX}px)`,
-			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
-			`overflow: visible`,
-			`text-overflow: clip`
-		].join(`; `);
-		return [
-			`transform: translateX(${restX}px)`,
-			`transition: transform 400ms ${PAN_EASING}`,
-			revealEnd ? `` : `overflow: visible; text-overflow: clip`
-		].filter(Boolean).join(`; `);
-	}
-	render() {
-		const textClasses = {
-			"is-overflowing": this._isOverflowing,
-			"is-hovering": this._isHovering
-		};
-		return b`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    /* Renders like plain inline text: no colours, border, padding or margin
-       of its own — it only adds the clipping needed to pan on hover. */
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 100%;
-      box-sizing: border-box;
-      font: inherit;
-      color: inherit;
-    }
-
-    :host([disabled]) {
-      opacity: var(--disabled-opacity, 0.5);
-      pointer-events: none;
-    }
-
-    .text {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      will-change: transform;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .text {
-        transition: none !important;
-        transform: none !important;
-      }
-    }
-  `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `direction`
-})], PanTextElement.prototype, "direction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `disabled`
-})], PanTextElement.prototype, "disabled", void 0);
-__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
-__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
-__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
-PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
-//#endregion
 //#region src/panel/panel-group.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
 const DRAG_THRESHOLD_PX = 5;
@@ -32115,6 +33666,7 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#onPointerMove = (e) => {
 			if (this.interactionMode === `select` && this._isDragging) {
 				const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+				if (index === this._selectionEnd) return;
 				this._selectionEnd = index;
 				const start = Math.min(this._selectionStart, this._selectionEnd);
 				const end = Math.max(this._selectionStart, this._selectionEnd);
@@ -32126,6 +33678,7 @@ let PlotHistogram = class PlotHistogram extends i {
 					this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
 				}
 				this.requestUpdate();
+				this.#emitSelectionChange(false);
 				return;
 			}
 			if (this.interactionMode === `select`) return;
@@ -32141,6 +33694,7 @@ let PlotHistogram = class PlotHistogram extends i {
 					this._isDragging = false;
 					this._selectionOverlayText = null;
 					this.requestUpdate();
+					this.#emitSelectionChange(true);
 				}
 				return;
 			}
@@ -32160,9 +33714,13 @@ let PlotHistogram = class PlotHistogram extends i {
 			this.setColoredRange(startBar.valueMin, endBar.valueMax);
 			this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
 			this.requestUpdate();
+			this.#emitSelectionChange(false);
 		};
 		this.#onPointerUp = () => {
-			if (this.interactionMode === `select`) this._isDragging = false;
+			if (this.interactionMode === `select` && this._isDragging) {
+				this._isDragging = false;
+				this.#emitSelectionChange(true);
+			}
 		};
 	}
 	#series;
@@ -32211,11 +33769,14 @@ let PlotHistogram = class PlotHistogram extends i {
 			this.setColoredRange(startBar.valueMin, endBar.valueMax);
 		}
 		this.requestUpdate();
+		this.#emitSelectionChange(true);
 	}
 	clearSelection() {
+		const had = this._selectionStart !== null || this._selectionEnd !== null;
 		this._selectionStart = null;
 		this._selectionEnd = null;
 		this.requestUpdate();
+		if (had) this.#emitSelectionChange(true);
 	}
 	getSelectedRange() {
 		if (this._selectionStart === null || this._selectionEnd === null) return {
@@ -32300,6 +33861,21 @@ let PlotHistogram = class PlotHistogram extends i {
 			composed: true
 		}));
 	}
+	/**
+	* Fire `plot-selection-change` with the current bar-range selection (indices +
+	* data span). `committed` is `false` mid-drag, `true` on release / programmatic
+	* change.
+	*/
+	#emitSelectionChange(committed) {
+		this.dispatchEvent(new CustomEvent(`plot-selection-change`, {
+			detail: {
+				...this.getSelectedRange(),
+				committed
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	/** Bucket layout + counts, shared by render() and pointer hit-testing. */
 	#computeGeometry() {
 		const { values, range } = this.#series;
@@ -32387,7 +33963,7 @@ let PlotHistogram = class PlotHistogram extends i {
 	}
 	/** Gets bucket index from position, clamping to valid range (0 to bucketCount-1). */
 	#bucketIndexFromPosition(clientX, clientY) {
-		const { w, h, isHorizontal, padding, dataMin, dataSpan, bucketCount, availableMain } = this.#computeGeometry();
+		const { isHorizontal, padding, bucketCount, availableMain } = this.#computeGeometry();
 		const rect = this.getBoundingClientRect();
 		const x = clientX - rect.left;
 		const y = clientY - rect.top;
@@ -38173,7 +39749,10 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
 		};
 	}
 	static {
-		this.styles = i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
     :host {
       display: flex;
       align-items: center;
@@ -38200,13 +39779,13 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
     .handle {
       display: none;
       cursor: grab;
-      padding: 0 4px;
-      opacity: 0.5;
-      font-size: 0.65rem;
+      margin: 0 4px;
+      --ixfx-handle-spot-size: 12px;
+      --ixfx-handle-dot-size: 3px;
     }
 
     :host([reorderable]) .handle {
-      display: block;
+      display: inline-block;
     }
 
     .label {
@@ -38215,7 +39794,8 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
       text-overflow: ellipsis;
       padding: 0 8px;
     }
-  `;
+  `
+		];
 	}
 	#dragging;
 	#startScreenY;
@@ -38240,7 +39820,7 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i {
 	}
 	render() {
 		return b`
-      <span class="handle">\u2630</span>
+      <span class="handle ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
       <span class="label">${this.label}</span>
     `;
 	}
@@ -40117,29 +41697,29 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? b`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
       <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
-        ${this.showGrabHandle ? b`
-          <div class="grab-handle">
-            <span class="dot"></span>
-            <span class="dot"></span>
-            <span class="dot"></span>
-          </div>
-        ` : ``}
+        ${this.showGrabHandle ? b`<span
+              class="ixfx-handle"
+              part="grip"
+              data-handle="dimpled"
+              data-shape=${this.layout === `horizontal` ? `horizontal` : `vertical`}
+            ></span>` : ``}
       </div>
       <slot style=${sizeB} name="b"></slot>
     </div>`;
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
   :host {
       --handle-size: 2px;
       --handle-colour: transparent;
       --handle-hover-colour: var(--surface-6);
       --handle-active-colour: var(--accent);
-      --handle-bg: var(--handle-colour);
-      --handle-grab-colour: var(--border-subtle-color);
-      --handle-grab-dot-size: 3px;
-      --handle-grab-size: 16px;
-      --handle-grab-thickness: 8px;
+      /* Grip — shared handle primitive (docs/infra-handle.md). */
+      --ixfx-handle-length: 16px;
+      --ixfx-handle-thickness: 8px;
 
       display: block;
       box-sizing: border-box;
@@ -40182,40 +41762,14 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
       to { background-color: var(--handle-hover-colour); }
     }
 
-    .grab-handle {
+    .split-bar .ixfx-handle {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--handle-grab-dot-size);
-      background: var(--handle-bg);
-      border-radius: var(--radius-s);
-    }
-
-    .grab-handle .dot {
-      width: var(--handle-grab-dot-size);
-      height: var(--handle-grab-dot-size);
-      border-radius: 50%;
-      background: var(--handle-grab-colour);
-      flex-shrink: 0;
-    }
-
-    :host([layout="vertical"]) .grab-handle {
-      flex-direction: column;
-      width: var(--handle-grab-thickness);
-      height: var(--handle-grab-size);
-    }
-
-    :host([layout="horizontal"]) .grab-handle {
-      flex-direction: row;
-      width: var(--handle-grab-size);
-      height: var(--handle-grab-thickness);
     }
 
-    #zone.user-resizing .grab-handle {
+    #zone.user-resizing .ixfx-handle {
       display: none;
     }
     #zone.user-resizing {
@@ -40268,7 +41822,8 @@ let TwoSplitLayoutElement = class TwoSplitLayoutElement extends i {
     :host([data-collapsed-b]) slot[name="b"] {
       display: none;
     }
-  `];
+  `
+		];
 	}
 };
 __decorate([property({ type: String })], TwoSplitLayoutElement.prototype, "layout", void 0);
@@ -40820,6 +42375,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map