@ixfx/components 0.10.0 → 0.10.2

package/bundle/index.js

@@ -1545,6 +1545,15 @@ let IxfxIconElement = class IxfxIconElement extends i {
 			if (this.rotate?.length > 0) this.style.setProperty(`--rotate`, this.rotate);
 			else this.style.removeProperty(`--rotate`);
 		}
+		if (changed.has(`size`)) {
+			if (this.size !== void 0) {
+				this.style.width = `${this.size}px`;
+				this.style.height = `${this.size}px`;
+			} else {
+				this.style.removeProperty(`width`);
+				this.style.removeProperty(`height`);
+			}
+		}
 	}
 	static {
 		this.styles = [themeFallbacks, i$3`
@@ -3019,10 +3028,10 @@ var ListSearchController = class {
           />
           ${hasQuery ? b`<span class="list-search-count">${this.#matches.length === 0 ? `0` : this.#matchIndex + 1} / ${this.#matches.length}</span>` : A}
           ${this.#mode === `navigate` && this.#matches.length > 1 ? b`
-                <button class="list-search-icon-btn" title="Previous match (↑)" @click=${() => this.prevMatch()}>‹</button>
-                <button class="list-search-icon-btn" title="Next match (↓)" @click=${() => this.nextMatch()}>›</button>
+                <button class="list-search-icon-btn" title="Previous match (↑)" @click=${() => this.prevMatch()}><ixfx-icon name="chevron-left" size="14"></ixfx-icon></button>
+                <button class="list-search-icon-btn" title="Next match (↓)" @click=${() => this.nextMatch()}><ixfx-icon name="chevron-right" size="14"></ixfx-icon></button>
               ` : A}
-          <button class="list-search-icon-btn" title="Close (Esc)" @click=${() => this.close()}>✕</button>
+          <button class="list-search-icon-btn" title="Close (Esc)" @click=${() => this.close()}><ixfx-icon name="close" size="14"></ixfx-icon></button>
         </div>
         ${others.length > 0 || showSelectMatches ? b`
               <div class="list-search-switch">
@@ -3926,11 +3935,20 @@ AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement
 * - **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
+*   arrangement: one or more marks along the long axis (`horizontal`: a row,
+*   `vertical`: a column), repeated in one or more rows/columns across the
+*   bar's cross axis (or a 3×3 block for `spot`, unaffected by the row/column
+*   / mark-count behaviour below). 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. For `horizontal` / `vertical`, `--ixfx-handle-length`
+*   decides how many marks (1-7) fit along the long axis — spaced by
+*   `--ixfx-handle-dot-gap` — the same way `--ixfx-handle-thickness` decides
+*   how many rows (or columns) of marks (1-7) fit across the cross axis —
+*   spaced by `--ixfx-handle-dot-pitch`. Both the bar's rendered length and
+*   its thickness snap to the nearest whole multiple of the relevant spacing
+*   so marks never clip at the edges.
+* - **dimpled** — that same layout, but each 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.
@@ -3961,14 +3979,26 @@ AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement
 * ## 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-thickness`      `6px`  — cross-axis size of a bar (dotted /
+*   dimpled `horizontal` / `vertical` bars snap this to the nearest whole multiple
+*   of `--ixfx-handle-dot-pitch` so their mark rows / columns fit exactly)
+* - `--ixfx-handle-length`         `44px` — long-axis size of a bar (`100%` to
+*   fill). For dotted / dimpled `horizontal` / `vertical` bars this also decides
+*   how many marks (1-7) fit along the long axis — spaced by
+*   `--ixfx-handle-dot-gap` — the same way `--ixfx-handle-thickness` decides row /
+*   column count across the cross axis, and the bar's rendered length likewise
+*   snaps to the nearest whole multiple of `--ixfx-handle-dot-gap` so marks
+*   never clip at the edges.
 * - `--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-dot-gap`        `length/4` (bar) · `spot/3` — mark centre-to-centre
+*   step along the long axis (dotted / dimpled `horizontal` / `vertical` bars fit up
+*   to 7 marks, driven by `--ixfx-handle-length`; `spot` is a fixed 3×3 block)
+* - `--ixfx-handle-dot-pitch`      `dot-size * 2` — row/column centre-to-centre step across
+*   the cross axis (dotted / dimpled `horizontal` / `vertical` only; up to 7 rows/columns)
 * - `--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
@@ -3989,6 +4019,28 @@ const handleStyles = i$3`
     /* 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));
+    /* Centre-to-centre step between rows (horizontal) / columns (vertical) of
+       marks across the bar's cross axis. */
+    --_handle-pitch: var(--ixfx-handle-dot-pitch, calc(var(--_handle-dot) * 2));
+    /* How many whole pitch-steps fit across the thickness, rounded to the
+       nearest step and clamped to 1-7 rows/columns. */
+    --_handle-rows: clamp(1, round(nearest, calc(var(--_handle-thickness) / var(--_handle-pitch)), 1), 7);
+    /* An even row/column count has no centre step, so the whole grid (the
+       ::before mark and its box-shadow copies, spaced at whole --_handle-pitch
+       steps from it) is nudged by half a pitch to stay centred and symmetric. */
+    --_handle-row-shift: calc((1 - mod(var(--_handle-rows), 2)) * var(--_handle-pitch) / 2);
+    /* The bar's cross-axis size snapped to exactly --_handle-rows steps of
+       --_handle-pitch, so mark rows/columns fit without clipping. */
+    --_handle-thickness-snapped: calc(var(--_handle-rows) * var(--_handle-pitch));
+    /* How many whole gap-steps fit across the long axis, rounded to the
+       nearest step and clamped to 1-7 marks. */
+    --_handle-cols: clamp(1, round(nearest, calc(var(--_handle-length) / var(--_handle-gap)), 1), 7);
+    /* An even mark count has no centre step, so the whole grid is nudged by
+       half a gap along the long axis to stay centred and symmetric. */
+    --_handle-col-shift: calc((1 - mod(var(--_handle-cols), 2)) * var(--_handle-gap) / 2);
+    /* The bar's long-axis size snapped to exactly --_handle-cols steps of
+       --_handle-gap, so marks fit without clipping. */
+    --_handle-length-snapped: calc(var(--_handle-cols) * var(--_handle-gap));
     /* 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. */
@@ -4038,14 +4090,32 @@ const handleStyles = i$3`
     border-radius: 50%;
   }
 
-  /* ── 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. ─────────────────────────────────────────────── */
+  /* ── dotted / dimpled: 3 marks in a row / column (or 3×3 for spot), repeated
+        in --_handle-rows rows/columns across the cross axis for horizontal /
+        vertical, 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. The extra
+        rows/columns beyond --_handle-rows are still emitted (a fixed 7-row
+        grid, CSS can't loop) but land outside the snapped, overflow: hidden
+        bar, so they're clipped cleanly rather than shown or partially cut. ── */
   .ixfx-handle[data-handle='dotted'],
   .ixfx-handle[data-handle='dimpled'] {
     position: relative;
   }
+  .ixfx-handle[data-handle='dotted']:not([data-shape='spot']),
+  .ixfx-handle[data-handle='dimpled']:not([data-shape='spot']) {
+    overflow: hidden;
+  }
+  .ixfx-handle[data-handle='dotted']:not([data-shape='vertical']):not([data-shape='spot']),
+  .ixfx-handle[data-handle='dimpled']:not([data-shape='vertical']):not([data-shape='spot']) {
+    width: var(--_handle-length-snapped);
+    height: var(--_handle-thickness-snapped);
+  }
+  .ixfx-handle[data-handle='dotted'][data-shape='vertical'],
+  .ixfx-handle[data-handle='dimpled'][data-shape='vertical'] {
+    width: var(--_handle-thickness-snapped);
+    height: var(--_handle-length-snapped);
+  }
   .ixfx-handle[data-handle='dotted']::before,
   .ixfx-handle[data-handle='dimpled']::before {
     content: '';
@@ -4059,16 +4129,112 @@ const handleStyles = i$3`
     background: currentColor;
   }
 
-  /* dotted — the two other marks are plain copies along the axis. */
-  .ixfx-handle[data-handle='dotted']::before {
+  /* dotted — the other marks are plain copies: 2 more along the long axis,
+     repeated across up to 7 rows/columns on the cross axis (clipped to
+     --_handle-rows by the snapped, overflow: hidden bar — see above). */
+  .ixfx-handle[data-handle='dotted']:not([data-shape='vertical']):not([data-shape='spot'])::before {
+    transform: translate(calc(-50% + var(--_handle-col-shift)), calc(-50% + var(--_handle-row-shift)));
     box-shadow:
+      calc(-3 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) 0 0 0 currentColor,
       calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
-      var(--_handle-gap) 0 0 0 currentColor;
+      calc(var(--_handle-gap)) 0 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      0 calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor;
   }
   .ixfx-handle[data-handle='dotted'][data-shape='vertical']::before {
+    transform: translate(calc(-50% + var(--_handle-row-shift)), calc(-50% + var(--_handle-col-shift)));
     box-shadow:
+      calc(-3 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(-2 * var(--_handle-gap)) 0 0 currentColor,
       0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
-      0 var(--_handle-gap) 0 0 currentColor;
+      0 calc(var(--_handle-gap)) 0 0 currentColor,
+      0 calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor;
   }
   .ixfx-handle[data-handle='dotted'][data-shape='spot']::before,
   .ixfx-handle[data-handle='dimpled'][data-shape='spot']::before {
@@ -4083,29 +4249,309 @@ const handleStyles = i$3`
       var(--_handle-gap) var(--_handle-gap) 0 0 currentColor;
   }
 
-  /* 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 {
+  /* dimpled — each mark also gets a lighter copy up-left and a darker copy
+     down-right, repeated across up to 7 rows/columns on the cross axis
+     (clipped to --_handle-rows — see above). Spot stays plain — the 3D is
+     imperceptible at that size. */
+  .ixfx-handle[data-handle='dimpled']:not([data-shape='vertical']):not([data-shape='spot'])::before {
+    transform: translate(calc(-50% + var(--_handle-col-shift)), calc(-50% + var(--_handle-row-shift)));
     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(-3 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(-3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(-2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(-1 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + 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) + -1 * 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);
+      calc(var(--_handle-gap)) 0 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * 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),
+      calc(2 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) 0 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(2 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(2 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-gap)) calc(3 * var(--_handle-pitch)) 0 0 currentColor,
+      calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-gap) + var(--_dimple-off)) calc(3 * var(--_handle-pitch) + var(--_dimple-off)) 0 0 var(--_handle-lo);
   }
   .ixfx-handle[data-handle='dimpled'][data-shape='vertical']::before {
+    transform: translate(calc(-50% + var(--_handle-row-shift)), calc(-50% + var(--_handle-col-shift)));
     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(-3 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-3 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-3 * var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-2 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-2 * var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(-1 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(-1 * var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(-2 * var(--_handle-gap) + 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),
+      calc(-1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * 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);
+      0 calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      0 calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      var(--_dimple-off) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(2 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(2 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(2 * var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(-3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(-2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(-1 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) 0 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(-1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) var(--_dimple-off) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(2 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(2 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(2 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo),
+      calc(3 * var(--_handle-pitch)) calc(3 * var(--_handle-gap)) 0 0 currentColor,
+      calc(3 * var(--_handle-pitch) + -1 * var(--_dimple-off)) calc(3 * var(--_handle-gap) + -1 * var(--_dimple-off)) 0 0 var(--_handle-hi),
+      calc(3 * var(--_handle-pitch) + var(--_dimple-off)) calc(3 * var(--_handle-gap) + var(--_dimple-off)) 0 0 var(--_handle-lo);
   }
 
   /* ── grated: fine 45° knurling — each ridge is a lit edge, the base colour,
@@ -5021,71 +5467,41 @@ __decorate([state()], BottomDrawerElement.prototype, "_dragHeight", void 0);
 BottomDrawerElement = __decorate([safeCustomElement(`ixfx-bottom-drawer`)], BottomDrawerElement);
 //#endregion
 //#region src/icons/defaults.ts
+/** Chevron pointing down (Lucide `chevron-down`). Used for split-button dropdown toggle. */
+const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>`;
 /**
-* 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.
+* Chevron pointing right (Lucide `chevron-right`). Used for tree-basic expand
+* indicator as a CSS mask — shape only, color comes from background-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>`;
+const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6"/></svg>`;
+/** Checkmark (Lucide `check`). Useful for menu-check-item or confirmation states. */
+const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** Close / X icon (Lucide `x`). Useful for dialogs, notifications, dismissible elements. */
+const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+/** Plus / add icon (Lucide `plus`). Pairs with `close` for add/remove actions. */
+const ICON_ADD = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`;
+/** Error icon (Lucide `circle-alert`). Useful for error notifications. */
+const ICON_ERROR = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>`;
+/** Info icon (Lucide `info`). Useful for info notifications. */
+const ICON_INFO = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`;
+/** Warning icon (Lucide `triangle-alert`). Useful for warning notifications. */
+const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`;
+/** Chevron pointing right (Lucide `chevron-right`). Used for split-button switcher toggle. */
+const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>`;
+/** Folder with up arrow (Lucide `folder-up`). Angled line style for navigating up one level. */
+const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>`;
+/** Folder (Lucide `folder`). Useful for file explorers and sidebars. */
+const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>`;
+/** Document / file page (Lucide `file`). Useful for file lists and document tabs. */
+const ICON_FILE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>`;
+/** Magnifying glass (Lucide `search`). Useful for search panels and inputs. */
+const ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`;
+/** Chevron pointing up (Lucide `chevron-up`). Sort/collapse direction indicators. */
+const ICON_CHEVRON_UP = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg>`;
+/** Chevron pointing left (Lucide `chevron-left`). Previous/back affordances. */
+const ICON_CHEVRON_LEFT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>`;
+/** Vertical ellipsis (Lucide `ellipsis-vertical`). Default glyph for an unlabelled menu trigger. */
+const ICON_ELLIPSIS_VERTICAL = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>`;
 function registerDefaults() {
 	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
 	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
@@ -5100,6 +5516,9 @@ function registerDefaults() {
 	registerIcon(`folder-up`, ICON_FOLDER_UP);
 	registerIcon(`info`, ICON_INFO);
 	registerIcon(`warning`, ICON_WARNING);
+	registerIcon(`chevron-up`, ICON_CHEVRON_UP);
+	registerIcon(`chevron-left`, ICON_CHEVRON_LEFT);
+	registerIcon(`ellipsis-vertical`, ICON_ELLIPSIS_VERTICAL);
 }
 //#endregion
 //#region src/icons/index.ts
@@ -5707,14 +6126,12 @@ function fontOf(style) {
 	} catch {}
 	return `12px system-ui, sans-serif`;
 }
-/** Caption for a drag entry — element labels win, then string items, then common object fields, then the key. */
+/** Caption for a drag entry — explicit element labels win, then data values, then generic element text, then the key. */
 function captionForEntry(entry) {
 	const el = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
 	if (el) {
 		const labelled = el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.querySelector(`.cell`)?.textContent?.trim();
 		if (labelled) return labelled.slice(0, 80);
-		const text = el.textContent?.trim();
-		if (text) return text.slice(0, 80);
 	}
 	const item = entry.item;
 	if (typeof item === `string` && item.length > 0) return item.slice(0, 80);
@@ -5730,6 +6147,10 @@ function captionForEntry(entry) {
 			if (typeof value === `string` && value.length > 0) return value.slice(0, 80);
 		}
 	}
+	if (el) {
+		const text = el.textContent?.trim();
+		if (text) return text.slice(0, 80);
+	}
 	return entry.key;
 }
 function glyphFor(caption) {
@@ -7373,7 +7794,7 @@ let MenuTrigger = class MenuTrigger extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.mode = `trigger`;
-		this.label = `⋮`;
+		this.label = ``;
 		this.iconName = ``;
 		this.placement = `bottom-start`;
 		this.tabStop = true;
@@ -7660,7 +8081,7 @@ let MenuTrigger = class MenuTrigger extends i {
         @click=${this._handleTriggerClick}
         @contextmenu=${this._handleContextMenu}
       >
-        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.iconName ? b`<ixfx-icon name=${this.iconName}></ixfx-icon>` : this.label}</button>` : null}
+        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.iconName ? b`<ixfx-icon name=${this.iconName}></ixfx-icon>` : this.label || b`<ixfx-icon name="ellipsis-vertical"></ixfx-icon>`}</button>` : null}
         <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
       </div>
       <div
@@ -10202,8 +10623,21 @@ var TreeDataModel = class {
 * Apply the returned `.scroll-fade-x` / `.scroll-fade-y` class to
 * whichever element actually has `overflow` scrolling on that axis.
 *
+* NOTE: apply only one axis class per element. Each class sets
+* `mask-image`, so putting both on the same element makes the second
+* overwrite the first. An element that scrolls on both axes at once (e.g.
+* a grid viewport with `overflow: auto`) should use the vertical fade on
+* the viewport itself and handle the horizontal axis separately (e.g. a
+* synced header strip with its own `scroll-fade-x`).
+*
 * CSS variables:
 * - `--scroll-fade-width` (default `30px`): how far the fade extends from each edge.
+* - `--scroll-fade-strength` (default `1`): how completely content fades out
+*   at the edge, `0`–`1`. `1` fades to fully transparent (current behaviour);
+*   `0` disables the fade entirely. Dense layouts (e.g. a data grid) typically
+*   want something like `0.7`–`0.8` so the edge row stays partly readable.
+*   Deliberately *not* `@property`-registered, so it inherits normally and a
+*   consumer override on the host reaches the shadow-DOM scroller.
 *
 * ```ts
 * import { scrollFadeStyles } from '../styles/scroll-fade.js';
@@ -10246,9 +10680,9 @@ function scrollFadeStyles(axis) {
       animation: ${r$2(keyframesName)};
       animation-timeline: ${r$2(timeline)};
       mask-image: linear-gradient(${r$2(gradientDirection)},
-        transparent,
+        rgb(0 0 0 / calc(1 - var(--scroll-fade-strength, 1))),
         black var(${r$2(start)}, 0px) calc(100% - var(${r$2(end)}, 0px)),
-        transparent
+        rgb(0 0 0 / calc(1 - var(--scroll-fade-strength, 1)))
       );
     }
   `;
@@ -13321,7 +13755,8 @@ let MenuCheckItem = class MenuCheckItem extends i {
     .check {
       width: 1em;
       margin-left: var(--space-xs);
-      font-size: var(--text-m);
+      display: inline-flex;
+      align-items: center;
       color: var(--accent);
     }
 
@@ -13364,7 +13799,7 @@ let MenuCheckItem = class MenuCheckItem extends i {
         role="menuitemcheckbox"
         aria-checked="${this.checked}"
       >
-        <span class="check">${this.checked ? `✓` : ``}</span>
+        <span class="check">${this.checked ? b`<ixfx-icon name="check" size="14"></ixfx-icon>` : ``}</span>
         <span class="icon-slot">${resolvedIcon ? b`<ixfx-icon name="${resolvedIcon}"></ixfx-icon>` : null}</span>
         <span class="label">${this._resolvedLabel()}</span>
         ${shortcut ? b`<span class="shortcut">${shortcut}</span>` : null}
@@ -14487,6 +14922,8 @@ let DataGridElement = class DataGridElement extends i {
 			tickledItemStyles,
 			listItemFadeKeyframes,
 			listSearchStyles,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
 			i$3`
     :host {
       --data-grid-row-height: 28px;
@@ -14503,6 +14940,11 @@ let DataGridElement = class DataGridElement extends i {
          autoSizeColumn(). Read back in JS (_columnResizeAnimationMs) to know
          when the animation has finished, so keep it a plain time value. */
       --data-grid-column-resize-duration: 180ms;
+      /* Dense 28px rows read badly under the global 30px full-strength fade,
+         so default to a shorter, shallower edge hint. Consumers can override
+         --scroll-fade-width / --scroll-fade-strength per instance. */
+      --scroll-fade-width: 20px;
+      --scroll-fade-strength: 0.8;
       position: relative;
       display: block;
       overflow: hidden;
@@ -14522,6 +14964,9 @@ let DataGridElement = class DataGridElement extends i {
     }
     .header-scroll {
       display: flex; flex: 1; overflow: hidden;
+      /* Horizontal edge fade comes from the shared .scroll-fade-x class
+         (see ../styles/scroll-fade.ts). Its scrollLeft is synced from the
+         viewport in _onScroll, which drives its own scroll-timeline. */
     }
     .header-cell {
       display: flex; align-items: center; gap: var(--space-xs);
@@ -14540,7 +14985,7 @@ let DataGridElement = class DataGridElement extends i {
       .header-cell.width-animating, .cell.width-animating { transition: none; }
     }
     .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .sort-icon { font-size: 10px; opacity: 0.7; }
+    .sort-icon { display: inline-flex; align-items: center; opacity: 0.7; }
     .resize-handle {
       position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1;
       display: flex; align-items: stretch; justify-content: center;
@@ -14551,10 +14996,16 @@ let DataGridElement = class DataGridElement extends i {
     }
     .resize-handle:hover::before { background: var(--split-gutter-hover-color, var(--surface-6)); }
     .resize-handle[data-active]::before { background: var(--split-gutter-active-color, var(--accent)); }
-    .reorder-handle { cursor: grab; opacity: 0.5; display: inline-flex; align-items: center; }
+    .reorder-handle { cursor: grab; opacity: 0; display: inline-flex; align-items: center; transition: opacity var(--transition, 0.15s ease-out); }
+    .header-cell:hover .reorder-handle, .header-cell:focus-within .reorder-handle, .header-cell[drag-source] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
     .reorder-handle .ixfx-handle { --ixfx-handle-length: 14px; --ixfx-handle-thickness: var(--data-grid-reorder-handle-width, 10px); --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; }
+    /* Vertical edge fade from the shared .scroll-fade-y class
+       (see ../styles/scroll-fade.ts). The mask lives on the viewport —
+       below the header bar — so the top fade never covers the column
+       headers. Reach/strength tune via --scroll-fade-width /
+       --scroll-fade-strength (defaults set on :host above). */
     .spacer { position: relative; }
     .row.item {
       position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
@@ -15596,7 +16047,7 @@ let DataGridElement = class DataGridElement extends i {
 		return b`
       <div class="grid">
         <div class="header-bar">
-          <div class="header-scroll">
+          <div class="header-scroll scroll-fade-x">
             ${showCheckbox ? b`<div class="header-cell checkbox-col"></div>` : A}
             ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => b`
               <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
@@ -15606,7 +16057,7 @@ let DataGridElement = class DataGridElement extends i {
                   @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
                 ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" 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}
+                ${this.sortState?.key === col.key ? b`<span class="sort-icon"><ixfx-icon name=${this.sortState.direction === `asc` ? `chevron-up` : `chevron-down`} size="12"></ixfx-icon></span>` : A}
                 ${col.resizable !== false ? b`<span class="resize-handle" ?data-active=${this._resizingColKey === col.key} @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
 			e.preventDefault();
 			e.stopPropagation();
@@ -15663,14 +16114,14 @@ let DataGridElement = class DataGridElement extends i {
             </ixfx-menu-container>
           </ixfx-menu-trigger>`}
         </div>
-        <div class="viewport" @scroll=${this._onScroll}>
+        <div class="viewport scroll-fade-y" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
             ${repeat(visibleFlat, (f) => f.key, (entry, i) => {
 			const absIdx = startRow + i;
 			if (entry.type === `group`) {
 				const gKey = entry.key.replace(/^__group__/, ``);
 				const collapsed = this._collapsedGroups.has(gKey);
-				return b`<div class="group-row ${collapsed ? `collapsed` : ``}" style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret">▼</span><span>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
+				return b`<div class="group-row ${collapsed ? `collapsed` : ``}" style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
 			}
 			const row = entry.row;
 			const absIdx2 = entry.idx;
@@ -23331,6 +23782,16 @@ let GridListElement = class GridListElement extends i {
 			});
 			this.#scheduleSnap();
 		};
+		this.#onWheel = (e) => {
+			if (this.orientation !== `row`) return;
+			if (e.ctrlKey || e.metaKey) return;
+			if (e.deltaY === 0) return;
+			const vp = this.#viewportRef.value ?? e.currentTarget;
+			if (!vp) return;
+			if (vp.scrollWidth <= vp.clientWidth + 1) return;
+			vp.scrollLeft += e.deltaX + e.deltaY;
+			e.preventDefault();
+		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -23784,6 +24245,10 @@ let GridListElement = class GridListElement extends i {
 	#postDragSuppressTimer;
 	#nativeDrag;
 	/** Origin rule + display-ordered entry resolution for native drag-out (both modes). */
+	#renderedCellForKey(key) {
+		const selector = `.cell[data-key="${CSS.escape(key)}"]`;
+		return this.renderRoot.querySelector(selector) ?? void 0;
+	}
 	#prepareNativeDrag(originKey) {
 		const index = this.#source.indexOfKey(originKey);
 		if (index < 0 || !this.#source.isSelectable(index)) return void 0;
@@ -23794,14 +24259,15 @@ let GridListElement = class GridListElement extends i {
 			const entryIndex = this.#source.indexOfKey(key);
 			if (entryIndex < 0) continue;
 			const data = this.#source.resolveKeyToData(key);
-			const element = this.#source.resolveKeyToElement(key);
-			const item = data ?? element;
+			const sourceElement = this.#source.resolveKeyToElement(key);
+			const renderedElement = sourceElement ?? (this.#source instanceof DataGridListSource ? this.#renderedCellForKey(key) : void 0);
+			const item = data ?? sourceElement;
 			if (item === void 0) continue;
 			selected.push({
 				key,
 				index: entryIndex,
 				item,
-				...element ? { element } : {}
+				...renderedElement ? { element: renderedElement } : {}
 			});
 		}
 		const origin = selected.find((entry) => entry.key === originKey);
@@ -24508,6 +24974,7 @@ let GridListElement = class GridListElement extends i {
         ${ref(this.#viewportRef)}
         data-input-mode=${this.tickled.inputMode}
         @scroll=${this.#onScroll}
+        @wheel=${this.#onWheel}
       >
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
@@ -24645,6 +25112,17 @@ let GridListElement = class GridListElement extends i {
     `;
 	}
 	#onScroll;
+	/**
+	* Translate vertical wheel deltas into horizontal scroll when the list runs
+	* in `row` orientation. Without this the default browser behaviour needs
+	* Shift+wheel or a physical horizontal wheel — neither of which most users
+	* reach for on a single-row strip.
+	*
+	* Only kicks in for a plain vertical wheel over a viewport that can actually
+	* scroll horizontally; native horizontal deltas (trackpad, Shift+wheel) are
+	* left to the browser when there is no vertical component.
+	*/
+	#onWheel;
 	#cancelScrollRaf() {
 		if (this.#scrollRaf !== 0) {
 			cancelAnimationFrame(this.#scrollRaf);
@@ -25547,6 +26025,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.itemDnd = `none`;
 		this.dndExpandHoverMs = 500;
 		this.reorderable = true;
+		this.stickyHeaders = true;
 		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
 		this.tickled = new TickledController(this, {
@@ -25579,6 +26058,18 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#onContainerScroll = () => {
 			this.#rowsCache = void 0;
 		};
+		this.#onStickyScroll = () => {
+			if (this.#stickyRaf !== 0) return;
+			this.#stickyRaf = requestAnimationFrame(() => {
+				this.#stickyRaf = 0;
+				this.#updateStickyHeaders();
+			});
+		};
+		this._stickyKeys = [];
+		this.#stickyEntries = /* @__PURE__ */ new Map();
+		this.#stickyDirty = true;
+		this.#stickyRaf = 0;
+		this.#stickyScrollBound = false;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
 			const nodes = this.#getAllNodes();
@@ -25682,7 +26173,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		};
 		this.#onDblClick = (e) => {
-			const li = e.target.closest(`li`);
+			const li = e.target.closest(`ul.tree-list li`);
 			if (!li) return;
 			const key = li.dataset.key;
 			if (!key) return;
@@ -25744,6 +26235,157 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	/** Per-drag cache of measured rows; invalidated on scroll / update. */
 	#rowsCache;
 	#onContainerScroll;
+	/** Bind the sticky scroll listener once the container exists; unbind on opt-out. */
+	#syncStickyScroll() {
+		const container = this.#container();
+		if (this.stickyHeaders && container) {
+			if (!this.#stickyScrollBound || this.#stickyScrollContainer !== container) {
+				this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+				container.addEventListener(`scroll`, this.#onStickyScroll, { passive: true });
+				this.#stickyScrollContainer = container;
+				this.#stickyScrollBound = true;
+			}
+		} else if (this.#stickyScrollBound) {
+			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+			this.#stickyScrollContainer = void 0;
+			this.#stickyScrollBound = false;
+		}
+	}
+	#onStickyScroll;
+	/** Real (non-sticky) row element for `key`, or `null`. */
+	#stickyRowEl(key) {
+		return this.renderRoot.querySelector(`ul.tree-list li[data-key="${CSS.escape(key)}"]`);
+	}
+	/**
+	* Recompute which ancestors stick to the top: the ancestors of the first
+	* row whose bottom clears the container top, minus any ancestor that is
+	* itself still visible below the overlay. Synchronous — reads current
+	* geometry, renders nothing, expands nothing.
+	*/
+	#updateStickyHeaders() {
+		this.#stickyDirty = false;
+		const empty = /* @__PURE__ */ new Map();
+		if (!this.stickyHeaders || !this.root) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const container = this.#container();
+		if (!container) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const nodes = this.#getAllNodes();
+		if (nodes.length === 0) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const parent = /* @__PURE__ */ new Map();
+		const walk = (n) => {
+			for (const child of n.children ?? []) {
+				parent.set(child.item.key, n.item.key);
+				walk(child);
+			}
+		};
+		walk(this.root);
+		const containerTop = container.getBoundingClientRect().top;
+		const visibleThreshold = containerTop + (this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0);
+		let topKey;
+		for (const { node } of nodes) {
+			const li = this.#stickyRowEl(node.item.key);
+			if (!li || li.classList.contains(`leaving`)) continue;
+			if (li.getBoundingClientRect().bottom > containerTop) {
+				topKey = node.item.key;
+				break;
+			}
+		}
+		if (topKey === void 0) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const rootKey = this.root.item.key;
+		const chain = [];
+		let cursor = parent.get(topKey);
+		while (cursor !== void 0 && cursor !== rootKey) {
+			chain.unshift(cursor);
+			cursor = parent.get(cursor);
+		}
+		const byKey = new Map(nodes.map((entry) => [entry.node.item.key, entry]));
+		const entries = /* @__PURE__ */ new Map();
+		const stuck = [];
+		for (const key of chain) {
+			const li = this.#stickyRowEl(key);
+			if (!li || li.getBoundingClientRect().bottom > visibleThreshold) continue;
+			const entry = byKey.get(key);
+			if (!entry) continue;
+			stuck.push(key);
+			entries.set(key, entry);
+		}
+		this.#setStickyKeys(stuck, entries);
+	}
+	#setStickyKeys(keys, entries) {
+		const prev = this._stickyKeys;
+		if (prev.length === keys.length && prev.every((key, i) => key === keys[i])) return;
+		this.#stickyEntries = entries;
+		this._stickyKeys = keys;
+	}
+	#renderStickyHeaders() {
+		if (!this.stickyHeaders || this._stickyKeys.length === 0) return A;
+		return b`
+      <div class="sticky-headers" part="sticky-headers">
+        ${this._stickyKeys.map((key) => {
+			const entry = this.#stickyEntries.get(key);
+			if (!entry) return A;
+			return this.#renderStickyHeader(entry.node, entry.depth);
+		})}
+      </div>
+    `;
+	}
+	#renderStickyHeader(node, depth) {
+		const selected = this._isSelected(node);
+		const isBranch = node.item.isLeaf !== true;
+		return b`
+      <div
+        class="item ${isBranch ? `branch` : `leaf`} sticky-header${selected ? ` selected` : ``}"
+        part="sticky-header"
+        role="button"
+        tabindex="0"
+        aria-label="Go to ${node.item.label}"
+        data-key=${node.item.key}
+        style=${`--depth: ${depth}`}
+        @click=${(e) => this.#onStickyClick(e, node)}
+        @keydown=${(e) => {
+			if (e.key === `Enter` || e.key === ` `) {
+				e.preventDefault();
+				this.#activateSticky(node);
+			}
+		}}
+      >${this.renderNodeContent(node, depth)}</div>
+    `;
+	}
+	#onStickyClick(event, node) {
+		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging) return;
+		if (node.item.isLeaf !== true && event.target instanceof Element && event.target.closest(`.tree-caret`)) {
+			const depth = this.#stickyEntries.get(node.item.key)?.depth ?? 0;
+			this.#toggleExpand(node, depth);
+			this.#stickyDirty = true;
+			this.requestUpdate();
+			return;
+		}
+		this.#activateSticky(node);
+	}
+	#activateSticky(node) {
+		if (this.#canSelect(node)) this.select(node);
+		this.#scrollKeyIntoView(node.item.key);
+		this.#stickyDirty = true;
+		this.requestUpdate();
+	}
+	/** Visible `{ node, depth }` entries for `_stickyKeys` — depths drive the indent. */
+	#stickyEntries;
+	/** Set when expansion / data / filter changes may have altered the sticky set. Consumed in `updated()`. */
+	#stickyDirty;
+	#stickyRaf;
+	#stickyScrollContainer;
+	#stickyScrollBound;
 	get nativeDrag() {
 		return this.#nativeDrag;
 	}
@@ -25767,6 +26409,8 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	willUpdate(changedProps) {
 		super.willUpdate(changedProps);
 		this.#diffVisibleNodes();
+		if (changedProps.has(`root`) || changedProps.has(`model`) || changedProps.has(`filterPredicate`) || changedProps.has(`stickyHeaders`)) this.#stickyDirty = true;
+		if (this.#stickyDirty) this.#updateStickyHeaders();
 	}
 	#diffVisibleNodes() {
 		const nodes = this.root ? this.#getAllNodes() : [];
@@ -25866,6 +26510,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	}
 	updated(changedProps) {
 		this.#rowsCache = void 0;
+		this.#syncStickyScroll();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
 			this._expandedKeys.clear();
@@ -25889,6 +26534,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 					} else if (event.type === `invalidate`) {
 						if (this._expandedKeys.has(event.key)) {
 							this._expandedKeys.delete(event.key);
+							this.#stickyDirty = true;
 							this.requestUpdate();
 						}
 					}
@@ -25931,7 +26577,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			isEnabled: () => this.itemDnd !== `none` && this.#anyRowDraggable(),
 			resolveEventToKey: (target) => {
 				if (!(target instanceof Element)) return void 0;
-				return target.closest(`li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
+				return target.closest(`ul.tree-list li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
 			},
 			prepareSelection: (originKey) => {
 				const allNodes = this.#getAllNodes();
@@ -25946,7 +26592,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 					key: n.node.item.key,
 					index: i,
 					item: n.node,
-					element: this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(n.node.item.key)}"]`) ?? void 0
+					element: this.shadowRoot?.querySelector(`ul.tree-list li[data-key="${CSS.escape(n.node.item.key)}"]`) ?? void 0
 				}));
 				const origin = selected.find((e) => e.key === originKey) ?? {
 					key: originKey,
@@ -26101,7 +26747,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		if (this.#rowsCache) return this.#rowsCache;
 		const rows = [];
 		for (const { node, depth } of this.#getAllNodes()) {
-			const li = this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(node.item.key)}"]`);
+			const li = this.shadowRoot?.querySelector(`ul.tree-list li[data-key="${CSS.escape(node.item.key)}"]`);
 			if (li) rows.push({
 				key: node.item.key,
 				node,
@@ -26223,6 +26869,15 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			this.#postDragSuppressTimer = void 0;
 		}
 		this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+		if (this.#stickyScrollBound) {
+			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+			this.#stickyScrollContainer = void 0;
+			this.#stickyScrollBound = false;
+		}
+		if (this.#stickyRaf !== 0) {
+			cancelAnimationFrame(this.#stickyRaf);
+			this.#stickyRaf = 0;
+		}
 		treeDragUnregister(this.#dragSourceId);
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
@@ -26311,6 +26966,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 			currentNode = found;
 		}
+		this.#stickyDirty = true;
 		this.requestUpdate();
 		this.#scrollKeyIntoView(keys.at(-1));
 		return true;
@@ -26331,6 +26987,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			this._expandedKeys.add(path[i]);
 		}
 		this.tickled.setTickled(key);
+		this.#stickyDirty = true;
 		this.requestUpdate();
 		this.updateComplete.then(() => this.#scrollKeyIntoView(key));
 		return true;
@@ -26566,7 +27223,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.requestUpdate();
 	}
 	#toggleExpand(node, depth) {
-		if (this._expandedKeys.has(node.item.key)) {
+		const isExpanded = this._expandedKeys.has(node.item.key);
+		this.#stickyDirty = true;
+		if (isExpanded) {
 			this._expandedKeys.delete(node.item.key);
 			this.dispatchEvent(new CustomEvent(`collapse`, {
 				detail: {
@@ -26659,6 +27318,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			node.children = children;
 			this.#applyExclusivity(node.item.key);
 			this._expandedKeys.add(node.item.key);
+			this.#stickyDirty = true;
 			this.#pendingNode = void 0;
 			this.#pendingController = void 0;
 			this.dispatchEvent(new CustomEvent(`expand`, {
@@ -26699,14 +27359,16 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	}
 	#scrollKeyIntoView(key) {
 		requestAnimationFrame(() => {
-			const el = this.shadowRoot?.querySelector(`[data-key="${CSS.escape(key)}"]`);
-			if (!el) return;
+			const container = this.#container();
+			const el = this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(key)}"]`);
+			if (!el || !container) return;
 			const elRect = el.getBoundingClientRect();
-			const hostRect = this.getBoundingClientRect();
-			const relativeTop = elRect.top - hostRect.top;
+			const containerRect = container.getBoundingClientRect();
+			const relativeTop = elRect.top - containerRect.top;
 			const relativeBottom = relativeTop + elRect.height;
-			if (relativeTop < 0) this.scrollTop += relativeTop;
-			else if (relativeBottom > this.clientHeight) this.scrollTop += relativeBottom - this.clientHeight;
+			const overlayHeight = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
+			if (relativeTop < overlayHeight) container.scrollTop += relativeTop - overlayHeight;
+			else if (relativeBottom > container.clientHeight) container.scrollTop += relativeBottom - container.clientHeight;
 		});
 	}
 	#abortPending() {
@@ -26795,7 +27457,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#scrollTickledIntoView() {
 		const tickledKey = this.tickled.tickledId;
 		if (tickledKey === void 0) return;
-		(this.shadowRoot?.querySelector(`[data-key="${tickledKey}"]`))?.scrollIntoView({
+		(this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(tickledKey)}"]`))?.scrollIntoView({
 			block: `nearest`,
 			behavior: `smooth`
 		});
@@ -26815,6 +27477,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
         @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
         tabindex="0"
       >
+        ${this.#renderStickyHeaders()}
         ${this.root ? this.#renderNodes(nodes) : A}
       </div>
       ${this.search.renderField()}
@@ -26913,6 +27576,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
       --tree-drop-nub-size: 5px;
       --tree-drop-into-outline: 2px solid var(--accent);
       --tree-drop-into-bg: color-mix(in srgb, var(--accent) 14%, transparent);
+      --tree-sticky-bg: var(--tree-bg);
+      --tree-sticky-border: var(--border, transparent);
+      --tree-sticky-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 
       position: relative;
       display: block;
@@ -26939,6 +27605,28 @@ let TreeBaseElement = class TreeBaseElement extends i {
       padding: var(--space-xs);
     }
 
+    /* VS Code-style sticky headers: ancestors of the top-visible row, pinned
+       to the top of the scroll container. Rows reuse the item class for
+       identical metrics; the overlay itself is opaque so rows slide under it. */
+    .sticky-headers {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      background: var(--tree-sticky-bg);
+      border-bottom: 1px solid var(--tree-sticky-border);
+      box-shadow: var(--tree-sticky-shadow);
+    }
+
+    .sticky-header {
+      margin: 0;
+      border-radius: 0;
+    }
+
+    .sticky-header:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -2px;
+    }
+
     .item {
       position: relative; /* anchor for the .drop-line before/after indicator */
       display: flex;
@@ -27112,6 +27800,14 @@ __decorate([property({
 		toAttribute: (value) => value ? null : `false`
 	}
 })], TreeBaseElement.prototype, "reorderable", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `sticky-headers`,
+	converter: {
+		fromAttribute: (value) => value !== `false`,
+		toAttribute: (value) => value ? null : `false`
+	}
+})], TreeBaseElement.prototype, "stickyHeaders", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewSource", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrag", void 0);
@@ -27120,6 +27816,7 @@ __decorate([property({ attribute: false })], TreeBaseElement.prototype, "parseEx
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "applyInternalDrop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
+__decorate([state()], TreeBaseElement.prototype, "_stickyKeys", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-list.ts
@@ -36152,6 +36849,973 @@ var MillerTreeController = class {
 	}
 };
 //#endregion
+//#region src/multicol-list/types.ts
+const ALL_KEY = `__all__`;
+//#endregion
+//#region src/multicol-list/column.ts
+/** Sorts by label, honouring direction. 'All' lives outside the list, so it is not special-cased. */
+function sortItems(items, direction) {
+	const dir = direction === `desc` ? -1 : 1;
+	return [...items].sort((a, b) => dir * a.label.localeCompare(b.label, void 0, {
+		sensitivity: `base`,
+		numeric: true
+	}));
+}
+/**
+* Nearest-gap math for header drag-reorder (per data-grid's `_beginHeaderDrag`).
+*
+* `offsets` is a prefix-sum of column widths (length = count + 1). `x` is the
+* pointer position in content space (already adjusted for scroll). Returns the
+* final insertion index once the source column is removed (`insert`), plus the
+* un-normalised gap offset for the drop caret (`caretOffset`).
+*/
+function computeDropGap(offsets, x, count, from) {
+	if (count === 0) return {
+		insert: 0,
+		caretOffset: 0
+	};
+	let bestDist = Number.MAX_SAFE_INTEGER;
+	let caretGap = from;
+	for (let i = 0; i < count; i++) {
+		if (i === from) continue;
+		const left = offsets[i];
+		const right = offsets[i + 1] ?? offsets[offsets.length - 1];
+		const mid = (left + right) / 2;
+		const dist = Math.abs(x - (x < mid ? left : right));
+		if (dist < bestDist) {
+			bestDist = dist;
+			caretGap = x < mid ? i : i + 1;
+		}
+	}
+	const insert = caretGap > from ? caretGap - 1 : caretGap;
+	return {
+		insert: Math.max(0, Math.min(count - 1, insert)),
+		caretOffset: offsets[caretGap] ?? offsets[offsets.length - 1]
+	};
+}
+var MulticolColumnController = class {
+	#category;
+	#categoryDefaults;
+	#selectionMode;
+	#dataProvider;
+	#onSelectionChange;
+	#onRequestData;
+	#abortController = void 0;
+	#host;
+	#allRow;
+	#listerEl;
+	#selectedValues = [];
+	#allSelected = true;
+	#lastItems = [];
+	#syncingSelection = false;
+	#state;
+	constructor(options) {
+		this.id = options.id;
+		this.#category = options.category;
+		this.#categoryDefaults = options.categoryDefaults;
+		this.#selectionMode = options.selectionMode;
+		this.#dataProvider = options.dataProvider;
+		this.#onSelectionChange = options.onSelectionChange;
+		this.#onRequestData = options.onRequestData;
+		this.#state = {
+			id: options.id,
+			categoryKey: options.category.key,
+			sort: options.categoryDefaults?.sort ?? `asc`,
+			grouped: options.categoryDefaults?.grouped ?? false,
+			width: 220
+		};
+	}
+	get state() {
+		return this.getState();
+	}
+	/** Always derived from the live category so a swap is visible everywhere. */
+	get categoryKey() {
+		return this.#category.key;
+	}
+	getState() {
+		return { ...this.#state };
+	}
+	updateState(partial) {
+		const sortChanged = partial.sort !== void 0 && partial.sort !== this.#state.sort;
+		const groupedChanged = partial.grouped !== void 0 && partial.grouped !== this.#state.grouped;
+		this.#state = {
+			...this.#state,
+			...partial
+		};
+		if (sortChanged) this.#repush();
+		if (groupedChanged) this.#syncGrouping();
+	}
+	setWidth(width) {
+		this.#state = {
+			...this.#state,
+			width: Math.max(80, Math.min(480, Math.round(width)))
+		};
+	}
+	setSort(sort) {
+		if (sort === this.#state.sort) return;
+		this.#state = {
+			...this.#state,
+			sort
+		};
+		this.#repush();
+	}
+	setGrouped(grouped) {
+		if (grouped === this.#state.grouped) return;
+		this.#state = {
+			...this.#state,
+			grouped
+		};
+		this.#syncGrouping();
+	}
+	setSelectionMode(mode) {
+		if (mode === this.#selectionMode) return;
+		this.#selectionMode = mode;
+		for (const sub of this.#subComponents()) sub.selectionMode = mode;
+	}
+	setCategory(category) {
+		this.#category = category;
+		this.#categoryDefaults = category.defaults;
+		this.#state = {
+			...this.#state,
+			categoryKey: category.key,
+			sort: category.defaults?.sort ?? `asc`,
+			grouped: category.defaults?.grouped ?? false
+		};
+		this.clearSelection();
+		this.#syncGrouping();
+	}
+	get listerHost() {
+		return this.#host;
+	}
+	get isMounted() {
+		return this.#host !== void 0;
+	}
+	setDataProvider(provider) {
+		this.#dataProvider = provider;
+	}
+	mount(host) {
+		if (this.#host) return;
+		this.#host = host;
+		const allRow = document.createElement(`div`);
+		allRow.className = `all-row`;
+		allRow.dataset.key = ALL_KEY;
+		allRow.setAttribute(`role`, `button`);
+		allRow.setAttribute(`tabindex`, `0`);
+		const allLabel = document.createElement(`span`);
+		allLabel.className = `all-label`;
+		allRow.appendChild(allLabel);
+		const applyAll = () => {
+			if (this.#allSelected) return;
+			this.#setAllSelection();
+		};
+		allRow.addEventListener(`click`, applyAll);
+		allRow.addEventListener(`keydown`, (e) => {
+			if (e.key === `Enter` || e.key === ` `) {
+				e.preventDefault();
+				applyAll();
+			}
+		});
+		this.#allRow = allRow;
+		const lister = document.createElement(`ixfx-grouped-item-lister`);
+		lister.crossGroupSelection = true;
+		lister.factory = () => createVerticalListAdapter(renderItem, {
+			selectionMode: this.#selectionMode,
+			interactionMode: `standard`
+		});
+		lister.addEventListener(`select`, this.#handleSelect);
+		this.#listerEl = lister;
+		this.#syncGrouping();
+		this.#syncAllRow();
+		host.append(allRow, lister);
+		if (this.#lastItems.length > 0) {
+			this.#pushItems();
+			this.#restoreAfterSync();
+		}
+	}
+	unmount() {
+		this.#abortPending();
+		this.#allRow?.remove();
+		this.#listerEl?.remove();
+		this.#allRow = void 0;
+		this.#listerEl = void 0;
+		this.#host = void 0;
+	}
+	requestData(query) {
+		if (!this.#dataProvider) return;
+		this.#abortPending();
+		const controller = new AbortController();
+		this.#abortController = controller;
+		const { signal } = controller;
+		this.#onRequestData(this.id, query, signal);
+		Promise.resolve().then(async () => {
+			const items = await collectDataResult(this.#dataProvider(query, signal), signal);
+			if (signal.aborted) return;
+			this.#applyItems(items);
+		}).catch(() => {});
+	}
+	#applyItems(items) {
+		this.#lastItems = items;
+		const valid = this.#selectedValues.filter((v) => items.some((i) => i.key === v));
+		const changed = valid.length !== this.#selectedValues.length;
+		this.#selectedValues = valid;
+		if (valid.length === 0) this.#allSelected = true;
+		if (!this.#listerEl) {
+			if (changed) this.#onSelectionChange(this.id, valid);
+			return;
+		}
+		this.#pushItems();
+		this.#restoreAfterSync();
+		if (changed) this.#onSelectionChange(this.id, valid);
+	}
+	#pushItems() {
+		if (!this.#listerEl) return;
+		const sorted = sortItems(this.#lastItems, this.#state.sort);
+		this.#listerEl.provider = () => sorted;
+	}
+	#repush() {
+		if (!this.#listerEl || this.#lastItems.length === 0) return;
+		this.#pushItems();
+		this.#restoreAfterSync();
+	}
+	/** Grouping config from category defaults; grouping without groupBy is a no-op. */
+	#syncGrouping() {
+		if (!this.#listerEl) return;
+		const groupBy = this.#categoryDefaults?.groupBy;
+		this.#listerEl.groupBy = groupBy;
+		this.#listerEl.grouped = this.#state.grouped && groupBy !== void 0;
+		if (this.#lastItems.length > 0) this.#restoreAfterSync();
+	}
+	#subComponents() {
+		if (!this.#listerEl) return [];
+		return this.#listerEl.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`);
+	}
+	#handleSelect = () => {
+		if (this.#syncingSelection) return;
+		const values = [...this.#listerEl?.selectedItems ?? []].map((i) => i.key).filter((k) => k !== ALL_KEY);
+		if (values.length === this.#selectedValues.length && values.every((v) => this.#selectedValues.includes(v))) {
+			this.#syncAllRow();
+			return;
+		}
+		this.#selectedValues = values;
+		this.#allSelected = values.length === 0;
+		this.#syncAllRow();
+		this.#onSelectionChange(this.id, values);
+	};
+	#setAllSelection() {
+		const previous = this.#selectedValues;
+		this.#syncingSelection = true;
+		try {
+			this.#selectedValues = [];
+			this.#allSelected = true;
+			for (const sub of this.#subComponents()) sub.clearSelection();
+		} finally {
+			this.#syncingSelection = false;
+		}
+		this.#syncAllRow();
+		if (previous.length > 0) this.#onSelectionChange(this.id, []);
+	}
+	clearSelection() {
+		this.#setAllSelection();
+	}
+	get selectedValues() {
+		return this.#selectedValues;
+	}
+	#restoreAfterSync() {
+		if (!this.#listerEl) return;
+		this.#listerEl.updateComplete.then(() => {
+			if (!this.#listerEl || !this.#host) return;
+			this.#syncingSelection = true;
+			try {
+				const wanted = this.#selectedValues;
+				for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) list.selectKeys(wanted);
+				const selected = [...this.#listerEl.selectedItems].map((i) => i.key).filter((k) => k !== ALL_KEY);
+				this.#selectedValues = selected;
+				this.#allSelected = selected.length === 0;
+			} finally {
+				this.#syncingSelection = false;
+			}
+			this.#syncAllRow();
+		});
+	}
+	#syncAllRow() {
+		if (!this.#allRow) return;
+		const label = this.#categoryDefaults?.allLabel ?? `All`;
+		const labelEl = this.#allRow.querySelector(`.all-label`);
+		if (labelEl) labelEl.textContent = label;
+		this.#allRow.toggleAttribute(`data-selected`, this.#allSelected);
+	}
+	#abortPending() {
+		if (this.#abortController) {
+			this.#abortController.abort();
+			this.#abortController = void 0;
+		}
+	}
+};
+function renderItem(item) {
+	const li = document.createElement(`li`);
+	li.dataset.key = item.key;
+	const labelSpan = document.createElement(`span`);
+	labelSpan.className = `item-label`;
+	labelSpan.textContent = item.label;
+	li.appendChild(labelSpan);
+	if (item.count !== void 0) {
+		const countSpan = document.createElement(`span`);
+		countSpan.className = `count`;
+		countSpan.textContent = String(item.count);
+		li.appendChild(countSpan);
+	}
+	return li;
+}
+//#endregion
+//#region src/multicol-list/multicol-list.ts
+registerIcon(`menu`, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>`);
+const DEFAULT_COLUMN_WIDTH = 220;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_COLUMN_WIDTH = 480;
+const DRAG_THRESHOLD = 5;
+let MulticolListElement = class MulticolListElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.categories = [];
+		this.selectionMode = `multiple`;
+		this.minColumns = 1;
+		this.maxColumns = 5;
+		this._columns = [];
+		this._colOffsets = [0];
+		this._resizingColumnId = void 0;
+		this._draggingColumnId = void 0;
+		this._dropCaretX = void 0;
+		this._idCounter = 0;
+		this._autoSeeded = false;
+		this._drag = {
+			pointerId: -1,
+			from: -1,
+			startX: 0,
+			startY: 0,
+			active: false,
+			ghost: null,
+			insert: -1
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			i$3`
+      :host {
+        --multicol-list-bg: var(--surface-3);
+        --multicol-list-header-bg: var(--surface-2);
+        --multicol-list-header-text: var(--surface-3-text);
+        --multicol-list-border: var(--border);
+        --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
+        --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
+
+        display: block;
+        overflow: hidden;
+        background: var(--multicol-list-bg);
+        color: var(--surface-3-text);
+        font-family: var(--font-family);
+      }
+      #container {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+        height: 100%;
+      }
+      .column {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        border-right: var(--multicol-list-border);
+        min-width: var(--multicol-list-min-column-width);
+        max-width: var(--multicol-list-max-column-width);
+        background: var(--surface-3);
+      }
+      .column-header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        height: 32px;
+        background: var(--multicol-list-header-bg);
+        color: var(--multicol-list-header-text);
+        border-bottom: var(--border);
+        position: relative;
+        user-select: none;
+        min-width: var(--multicol-list-min-column-width);
+        box-sizing: border-box;
+      }
+      .column-header[data-dragging] {
+        opacity: 0.4;
+      }
+      .reorder-handle {
+        cursor: grab;
+        opacity: 0;
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding-left: var(--space-xs);
+        touch-action: none;
+        transition: opacity var(--transition, 0.15s ease-out);
+      }
+      .column-header:hover .reorder-handle, .column-header:focus-within .reorder-handle, .column-header[data-dragging] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
+      .reorder-handle:active {
+        cursor: grabbing;
+      }
+      .reorder-handle .ixfx-handle {
+        --ixfx-handle-length: 14px;
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-dot-size: 3px;
+      }
+      .column-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 var(--space-s);
+        font-size: var(--text-m);
+        font-weight: 600;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+        min-width: 0;
+      }
+      .column-label:hover {
+        text-decoration: underline;
+      }
+      .burger-btn {
+        flex-shrink: 0;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--surface-3-text);
+        opacity: 0;
+        transition: opacity var(--transition);
+        border-radius: var(--radius-s);
+      }
+      .column:hover .burger-btn,
+      .column-header:focus-within .burger-btn {
+        opacity: 1;
+      }
+      .burger-btn:hover {
+        background: var(--surface-4);
+      }
+      .resize-handle {
+        position: absolute;
+        right: -4px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: col-resize;
+        z-index: 1;
+        display: flex;
+        align-items: stretch;
+        justify-content: center;
+        touch-action: none;
+      }
+      .resize-handle::before {
+        content: '';
+        width: 2px;
+        margin: 2px 0;
+        border-radius: 1px;
+        background: transparent;
+        transition: background-color var(--transition);
+      }
+      .resize-handle:hover::before,
+      .resize-handle[data-active]::before {
+        background: var(--accent);
+      }
+      .lister-host {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+      }
+      .all-row {
+        display: flex;
+        align-items: center;
+        padding: var(--space-xs) var(--space-s);
+        cursor: pointer;
+        user-select: none;
+        min-height: 28px;
+        box-sizing: border-box;
+        outline: 1px solid transparent;
+        background: var(--surface-3);
+      }
+      .all-row:hover,
+      .all-row[data-selected] {
+        background: var(--surface-5);
+      }
+      .all-row[data-selected] {
+        outline-color: var(--accent);
+        font-weight: 600;
+      }
+      ixfx-grouped-item-lister {
+        display: block;
+      }
+      .drop-caret {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--accent);
+        border-radius: 1px;
+        pointer-events: none;
+        z-index: 10;
+      }
+      .item-label {
+        flex: 1;
+      }
+      .count {
+        opacity: 0.6;
+        margin-left: var(--space-s);
+        font-size: var(--text-s);
+      }
+    `
+		];
+	}
+	get columns() {
+		return this._columns.map((c) => c.getState());
+	}
+	setColumns(states) {
+		const existingMap = new Map(this._columns.map((c) => [c.id, c]));
+		const newColumns = [];
+		for (const colState of states) {
+			const existing = existingMap.get(colState.id);
+			if (existing) {
+				if (existing.categoryKey !== colState.categoryKey) {
+					const newCategory = this.categories.find((c) => c.key === colState.categoryKey);
+					if (newCategory) existing.setCategory(newCategory);
+				}
+				existing.updateState(colState);
+				newColumns.push(existing);
+				existingMap.delete(colState.id);
+				continue;
+			}
+			const category = this.categories.find((c) => c.key === colState.categoryKey);
+			if (!category) continue;
+			const controller = this.#createController(colState.id, category);
+			controller.updateState(colState);
+			newColumns.push(controller);
+		}
+		for (const col of existingMap.values()) col.unmount();
+		this._columns = newColumns;
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	addColumn(categoryKey, position) {
+		if (this.maxColumns > 0 && this._columns.length >= this.maxColumns) return;
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		const id = `col-${++this._idCounter}`;
+		const controller = this.#createController(id, category);
+		if (position !== void 0 && position >= 0 && position < this._columns.length) this._columns.splice(position, 0, controller);
+		else this._columns.push(controller);
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	removeColumn(columnId) {
+		if (this._columns.length <= this.minColumns) return;
+		const idx = this._columns.findIndex((c) => c.id === columnId);
+		if (idx < 0) return;
+		this._columns[idx].unmount();
+		this._columns.splice(idx, 1);
+		this._updateColOffsets();
+		this._emitColumnsChange(`remove`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	getSelection() {
+		return this._columns.map((c) => ({
+			columnId: c.id,
+			categoryKey: c.categoryKey,
+			values: c.selectedValues
+		}));
+	}
+	clearSelection() {
+		for (const col of this._columns) col.clearSelection();
+		this.requestUpdate();
+	}
+	render() {
+		return b`
+      <div id="container">
+        ${repeat(this._columns, (col) => col.id, (col, idx) => this._renderColumn(col, idx))}
+        ${this._dropCaretX !== void 0 ? b`<div class="drop-caret" style="left: ${this._dropCaretX}px"></div>` : A}
+      </div>
+    `;
+	}
+	updated(changedProperties) {
+		if (!this._autoSeeded && this._columns.length === 0 && this.categories.length > 0) {
+			this._autoSeeded = true;
+			this.addColumn(this.categories[0].key);
+		}
+		if (changedProperties.has(`selectionMode`)) for (const col of this._columns) col.setSelectionMode(this.selectionMode);
+		if (changedProperties.has(`dataProvider`)) for (const col of this._columns) col.setDataProvider(this.dataProvider);
+		for (const col of this._columns) if (!col.isMounted) {
+			const hostEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .lister-host`);
+			if (hostEl) col.mount(hostEl);
+		}
+		if (changedProperties.has(`categories`)) this._syncColumnsWithCategories();
+		if (changedProperties.has(`categories`) || changedProperties.has(`dataProvider`)) this._requeryAllColumns();
+		this._updateColOffsets();
+	}
+	_renderColumn(col, idx) {
+		const width = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		return b`
+      <div
+        class="column"
+        data-col-id="${col.id}"
+        style="width: ${width}px"
+      >
+        <div
+          class="column-header"
+          ?data-dragging=${this._draggingColumnId === col.id}
+          data-col-idx=${idx}
+        >
+          <span
+            class="reorder-handle"
+            data-tooltip="Drag to reorder"
+            @pointerdown=${(e) => this._onHeaderPointerDown(e, col, idx)}
+          ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>
+          <button
+            class="column-label"
+            data-tooltip="Change category"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openCategoryPicker(col, e.currentTarget);
+		}}
+          >${this._getCategoryLabel(col.categoryKey)}</button>
+          <button
+            class="burger-btn"
+            data-tooltip="Column options"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openBurgerMenu(col, e.currentTarget);
+		}}
+          >
+            <ixfx-icon name="menu" size="14"></ixfx-icon>
+          </button>
+          <span
+            class="resize-handle"
+            ?data-active=${this._resizingColumnId === col.id}
+            @pointerdown=${(e) => this._onResizePointerDown(e, col)}
+            @click=${(e) => e.stopPropagation()}
+          ></span>
+        </div>
+        <div class="lister-host"></div>
+      </div>
+    `;
+	}
+	_getCategoryLabel(key) {
+		return this.categories.find((c) => c.key === key)?.label ?? key;
+	}
+	#createController(id, category) {
+		return new MulticolColumnController({
+			id,
+			category,
+			categoryDefaults: category.defaults,
+			selectionMode: this.selectionMode,
+			dataProvider: this.dataProvider,
+			onSelectionChange: this._onColumnSelectionChange.bind(this),
+			onRequestData: this._onColumnRequestData.bind(this)
+		});
+	}
+	_onHeaderPointerDown(e, col, idx) {
+		e.stopPropagation();
+		this._drag = {
+			pointerId: e.pointerId,
+			from: idx,
+			startX: e.clientX,
+			startY: e.clientY,
+			active: false,
+			ghost: null,
+			insert: idx
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const dx = ev.clientX - this._drag.startX;
+			const dy = ev.clientY - this._drag.startY;
+			if (!this._drag.active) {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				this._drag.active = true;
+				this._draggingColumnId = col.id;
+				const headerEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .column-header`);
+				const content = document.createElement(`span`);
+				content.textContent = this._getCategoryLabel(col.categoryKey);
+				try {
+					if (headerEl) {
+						this._drag.ghost = createDragGhost({
+							anchor: headerEl,
+							content
+						});
+						this._drag.ghost.move(ev.clientX, ev.clientY);
+					}
+				} catch {}
+				try {
+					this._containerEl?.setPointerCapture(ev.pointerId);
+				} catch {}
+			}
+			this._drag.ghost?.move(ev.clientX, ev.clientY);
+			const containerEl = this._containerEl;
+			if (!containerEl) return;
+			const rect = containerEl.getBoundingClientRect();
+			const x = ev.clientX - rect.left + containerEl.scrollLeft;
+			const gap = computeDropGap(this._colOffsets, x, this._columns.length, this._drag.from);
+			this._drag.insert = gap.insert;
+			this._dropCaretX = gap.caretOffset;
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const wasActive = this._drag.active;
+			const from = this._drag.from;
+			const insert = this._drag.insert;
+			this._drag.ghost?.destroy();
+			this._drag.ghost = null;
+			this._draggingColumnId = void 0;
+			this._dropCaretX = void 0;
+			try {
+				this._containerEl?.releasePointerCapture(ev.pointerId);
+			} catch {}
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			if (wasActive && insert !== from) {
+				const [moved] = this._columns.splice(from, 1);
+				this._columns.splice(insert, 0, moved);
+				this._updateColOffsets();
+				this._emitColumnsChange(`reorder`);
+				this.requestUpdate();
+			}
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	_onResizePointerDown(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startW = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		this._resizingColumnId = col.id;
+		const applyWidth = (clientX) => {
+			const w = Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, startW + clientX - startX));
+			col.setWidth(w);
+			return w;
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== e.pointerId) return;
+			applyWidth(ev.clientX);
+			this._updateColOffsets();
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			applyWidth(ev.type === `pointercancel` ? startX : ev.clientX);
+			this._resizingColumnId = void 0;
+			this._updateColOffsets();
+			this._emitColumnsChange(`resize`);
+			this.requestUpdate();
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	/** Floats a dropdown menu trigger over `anchorEl` and opens it immediately. */
+	#openMenuAt(anchorEl, placement, buildMenu) {
+		const rect = anchorEl.getBoundingClientRect();
+		const trigger = document.createElement(`ixfx-menu-trigger`);
+		trigger.mode = `dropdown`;
+		trigger.tabStop = false;
+		trigger.placement = placement;
+		trigger.style.position = `fixed`;
+		trigger.style.left = `${rect.left}px`;
+		trigger.style.top = `${rect.bottom}px`;
+		const container = document.createElement(`ixfx-menu-container`);
+		container.setAttribute(`slot`, `menu`);
+		buildMenu(container);
+		trigger.appendChild(container);
+		trigger.addEventListener(`menu-trigger-close`, () => trigger.remove(), { once: true });
+		document.body.appendChild(trigger);
+		trigger.updateComplete.then(() => trigger.openMenu());
+	}
+	#categoryToNode(cat) {
+		return {
+			item: {
+				key: cat.key,
+				label: cat.label
+			},
+			children: cat.children && cat.children.length > 0 ? cat.children.map((c) => this.#categoryToNode(c)) : void 0
+		};
+	}
+	_openCategoryPicker(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-start`, (container) => {
+			const items = menuFromTreeToElements(this.categories.map((c) => this.#categoryToNode(c)), { onCommand: (detail) => {
+				if (detail.command === void 0) return;
+				this._changeColumnCategory(col, detail.command);
+			} });
+			for (const el of items) container.appendChild(el);
+			for (const item of container.querySelectorAll(`ixfx-menu-item`)) if (item.getAttribute(`command`) === col.categoryKey) item.setAttribute(`disabled`, ``);
+		});
+	}
+	#menuItem(label, command, onCommand, iconName) {
+		const el = document.createElement(`ixfx-menu-item`);
+		el.setAttribute(`command`, command);
+		el.setAttribute(`label`, label);
+		if (iconName) el.setAttribute(`icon-name`, iconName);
+		if (onCommand) el.addEventListener(`command`, () => onCommand());
+		return el;
+	}
+	_openBurgerMenu(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-end`, (container) => {
+			const removeItem = this.#menuItem(`Remove this column`, `remove`, () => this.removeColumn(col.id));
+			removeItem.toggleAttribute(`disabled`, this._columns.length <= this.minColumns);
+			container.appendChild(removeItem);
+			const separator = document.createElement(`ixfx-menu-separator`);
+			container.appendChild(separator);
+			const atMax = this.maxColumns > 0 && this._columns.length >= this.maxColumns;
+			const usedCats = new Set(this._columns.map((c) => c.categoryKey));
+			const unused = this.categories.filter((c) => !usedCats.has(c.key));
+			const canAdd = !atMax && unused.length > 0;
+			const addSub = document.createElement(`ixfx-menu-sub-trigger`);
+			addSub.setAttribute(`label`, `Add column`);
+			const addContainer = document.createElement(`ixfx-menu-container`);
+			addContainer.setAttribute(`slot`, `submenu`);
+			const idx = this._columns.findIndex((c) => c.id === col.id);
+			for (const [label, offset] of [[`Left`, -1], [`Right`, 1]]) {
+				const item = this.#menuItem(label, `add-${label.toLowerCase()}`, () => {
+					this.#insertColumn(unused[0].key, Math.max(0, idx + Math.max(0, offset)));
+				});
+				item.toggleAttribute(`disabled`, !canAdd);
+				addContainer.appendChild(item);
+			}
+			addSub.appendChild(addContainer);
+			container.appendChild(addSub);
+			const sortSub = document.createElement(`ixfx-menu-sub-trigger`);
+			sortSub.setAttribute(`label`, `Sort`);
+			const sortContainer = document.createElement(`ixfx-menu-container`);
+			sortContainer.setAttribute(`slot`, `submenu`);
+			sortContainer.appendChild(this.#menuItem(`Ascending`, `sort-asc`, () => {
+				col.setSort(`asc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `asc` ? `check` : void 0));
+			sortContainer.appendChild(this.#menuItem(`Descending`, `sort-desc`, () => {
+				col.setSort(`desc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `desc` ? `check` : void 0));
+			sortSub.appendChild(sortContainer);
+			container.appendChild(sortSub);
+			const grouped = col.getState().grouped;
+			container.appendChild(this.#menuItem(grouped ? `Ungroup` : `Group`, `toggle-group`, () => {
+				col.setGrouped(!grouped);
+				this._emitColumnsChange(`grouping`);
+				this.requestUpdate();
+			}, grouped ? `check` : void 0));
+		});
+	}
+	#insertColumn(categoryKey, position) {
+		this.addColumn(categoryKey, position);
+	}
+	_changeColumnCategory(col, categoryKey) {
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		col.setCategory(category);
+		this._emitColumnsChange(`category`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	_onColumnSelectionChange(columnId, _values) {
+		if (!this._columns.find((c) => c.id === columnId)) return;
+		for (const otherCol of this._columns) if (otherCol.id !== columnId) otherCol.requestData(this._buildQuery(otherCol));
+		const detail = {
+			columnId,
+			columns: this.getSelection()
+		};
+		this.dispatchEvent(new CustomEvent(`multicol-select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	_onColumnRequestData(_columnId, _query, _signal) {}
+	_buildQuery(col) {
+		const otherSelections = /* @__PURE__ */ new Map();
+		for (const c of this._columns) if (c.id !== col.id) otherSelections.set(c.id, c.selectedValues);
+		return {
+			columnId: col.id,
+			categoryKey: col.categoryKey,
+			otherSelections
+		};
+	}
+	_requeryAllColumns() {
+		for (const col of this._columns) col.requestData(this._buildQuery(col));
+	}
+	_syncColumnsWithCategories() {
+		let changed = false;
+		for (const col of this._columns) {
+			if (this.categories.some((c) => c.key === col.categoryKey)) continue;
+			if (this.categories.length === 0) continue;
+			col.setCategory(this.categories[0]);
+			changed = true;
+		}
+		if (changed) this._emitColumnsChange(`category`);
+	}
+	_updateColOffsets() {
+		const offsets = [0];
+		let sum = 0;
+		for (const col of this._columns) {
+			sum += col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+			offsets.push(sum);
+		}
+		if (!(offsets.length === this._colOffsets.length && offsets.every((v, i) => v === this._colOffsets[i]))) this._colOffsets = offsets;
+	}
+	_emitColumnsChange(reason) {
+		this.dispatchEvent(new CustomEvent(`multicol-columns-change`, {
+			detail: {
+				columns: this.columns,
+				reason
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], MulticolListElement.prototype, "selectionMode", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "minColumns", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "maxColumns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_columns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_colOffsets", void 0);
+__decorate([state()], MulticolListElement.prototype, "_resizingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
+__decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
+MulticolListElement = __decorate([customElement(`ixfx-multicol-list`)], MulticolListElement);
+//#endregion
 //#region src/notifier/notification-pill.ts
 let NotificationPillElement = class NotificationPillElement extends i {
 	constructor(..._args) {
@@ -45856,12 +47520,25 @@ function squarifyInto(items, box) {
 	}
 	return out;
 }
+/** Clamp a raw cascade offset fraction to a sane range. */
+function normaliseOffset(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? Math.min(raw, 1) : 0;
+}
 /**
 * Subdivide `box` among `weights` (same length as the child list) using
 * `method` at `relativeDepth`. Returns one absolute box per weight, in order.
 * Zero-share children get degenerate (zero-area) boxes at the box origin.
+* Degenerate (zero/negative-extent) containers also yield zero-area boxes
+* rather than `NaN` — this matters for cascaded layouts where deep insets
+* can consume the whole box.
 */
 function subdivide(box, weights, method, relativeDepth) {
+	if (box.width <= 0 || box.height <= 0) return weights.map(() => ({
+		x: box.x,
+		y: box.y,
+		width: 0,
+		height: 0
+	}));
 	const total = weights.reduce((a, b) => a + b, 0);
 	const shares = total > 0 ? weights.map((w) => w / total) : weights.map(() => 1 / weights.length);
 	const dice = method === `dice` || method === `slice-dice` && relativeDepth % 2 === 0;
@@ -45928,16 +47605,24 @@ function subdivide(box, weights, method, relativeDepth) {
 * @param options `valueAccessor` (default equal weights), `maxDepth` (nesting
 *   levels, default unlimited), `zoomKey` (visual root, default true root;
 *   unknown keys fall back to the true root), `tilingMethod` (default
-*   `'squarify'`).
+*   `'squarify'`), `presentation` (default `'nested'`) plus `cascadeOffsetX/Y`
+*   (per-level shift as a viewport fraction, cascaded only).
 */
 function computeTreemapLayout(root, options = {}) {
 	if (!root?.children?.length) return [];
-	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify` } = options;
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false, presentation = `nested`, cascadeOffsetX: rawOx, cascadeOffsetY: rawOy } = options;
 	if (maxDepth <= 0) return [];
+	const cascaded = presentation === `cascaded`;
+	const ox = cascaded ? normaliseOffset(rawOx) : 0;
+	const oy = cascaded ? normaliseOffset(rawOy) : 0;
+	const visibleChildren = (node) => {
+		const children = node.children ?? [];
+		return hideLeaves ? children.filter((n) => n.item.isLeaf !== true) : children;
+	};
 	const zoomNode = zoomKey === void 0 ? root : findTreemapNode(root, zoomKey) ?? root;
 	const zoomPath = findTreemapPath(root, zoomNode.item.key);
 	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
-	const siblings = zoomNode.children ?? [];
+	const siblings = visibleChildren(zoomNode);
 	if (siblings.length === 0) return [];
 	const rects = [];
 	const layoutLevel = (nodes, box, depth, relativeDepth, parentKey) => {
@@ -45946,7 +47631,7 @@ function computeTreemapLayout(root, options = {}) {
 		const setSize = nodes.length;
 		nodes.forEach((node, index) => {
 			const childBox = boxes[index];
-			const children = node.children ?? [];
+			const children = visibleChildren(node);
 			rects.push({
 				node,
 				depth,
@@ -45960,7 +47645,15 @@ function computeTreemapLayout(root, options = {}) {
 				setSize,
 				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
 			});
-			if (children.length > 0) layoutLevel(children, childBox, depth + 1, relativeDepth + 1, node.item.key);
+			if (children.length > 0) {
+				const contentBox = ox <= 0 && oy <= 0 ? childBox : {
+					x: childBox.x + ox,
+					y: childBox.y + oy,
+					width: Math.max(0, childBox.width - ox),
+					height: Math.max(0, childBox.height - oy)
+				};
+				layoutLevel(children, contentBox, depth + 1, relativeDepth + 1, node.item.key);
+			}
 		});
 	};
 	layoutLevel(siblings, {
@@ -45980,9 +47673,14 @@ let TreemapListElement = class TreemapListElement extends i {
 		this.selectionFilter = `all`;
 		this.interactionMode = `standard`;
 		this.tilingMethod = `squarify`;
+		this.presentation = `nested`;
+		this.cascadeOffset = 6;
 		this.maxDepth = 4;
+		this.hideLeaves = false;
 		this.minLabelArea = 1600;
+		this.minTileWidth = 24;
 		this.padding = 4;
+		this.minChildArea = 400;
 		this.valueAccessor = () => 1;
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
@@ -46016,6 +47714,7 @@ let TreemapListElement = class TreemapListElement extends i {
 		});
 		this.#pendingKeys = /* @__PURE__ */ new Set();
 		this.#aborters = /* @__PURE__ */ new Map();
+		this.#wheelCooldownUntil = 0;
 	}
 	get selectedNodes() {
 		return this._selectedNodes;
@@ -46032,17 +47731,43 @@ let TreemapListElement = class TreemapListElement extends i {
 	#ownedRegistry;
 	#unregisterSearchCommands;
 	#resizeObserver;
+	#pendingFlip;
+	/** `performance.now()` timestamp before which further Cmd+wheel zoom steps are ignored. */
+	#wheelCooldownUntil;
 	get #effectiveRoot() {
 		return this.model?.root ?? this.root;
 	}
 	#rects() {
+		return this.#rectsForZoom(this._zoomKey);
+	}
+	#rectsForZoom(zoomKey) {
 		return computeTreemapLayout(this.#effectiveRoot, {
 			valueAccessor: this.valueAccessor,
 			maxDepth: this.maxDepth,
-			zoomKey: this._zoomKey,
-			tilingMethod: this.tilingMethod
+			zoomKey,
+			tilingMethod: this.tilingMethod,
+			hideLeaves: this.hideLeaves,
+			presentation: this.presentation,
+			...this.#cascadeFractions()
 		});
 	}
+	/**
+	* Pixel `cascadeOffset` as viewport fractions for the current host size.
+	* Returns `{}` when nested, unmeasured, or non-positive — layout then falls
+	* back to classic nesting for that pass (the `ResizeObserver` re-renders
+	* once measured).
+	*/
+	#cascadeFractions() {
+		if (this.presentation !== `cascaded`) return {};
+		if (!Number.isFinite(this.cascadeOffset) || this.cascadeOffset <= 0) return {};
+		const w = this.clientWidth || 0;
+		const h = this.clientHeight || 0;
+		if (w <= 0 || h <= 0) return {};
+		return {
+			cascadeOffsetX: this.cascadeOffset / w,
+			cascadeOffsetY: this.cascadeOffset / h
+		};
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute(`data-input-mode`, `mouse`);
@@ -46116,8 +47841,14 @@ let TreemapListElement = class TreemapListElement extends i {
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
 		if (this._zoomKey !== void 0 && !findTreemapNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
 		this.#ensureVisibleChildren();
+		if (this.#pendingFlip) {
+			const flip = this.#pendingFlip;
+			this.#pendingFlip = void 0;
+			this.#applyFlip(flip);
+		}
 	}
 	#resetViewState() {
+		this.#pendingFlip = void 0;
 		this.#clearSelectionInternal();
 		this.tickled.clearTickled();
 		this._zoomKey = void 0;
@@ -46230,6 +47961,7 @@ let TreemapListElement = class TreemapListElement extends i {
 	*/
 	zoomTo(node) {
 		if (this._zoomKey === node.item.key) return;
+		this.#pendingFlip = this.#planFlip(node.item.key);
 		this._zoomKey = node.item.key;
 		this.tickled.clearTickled();
 		const depth = findTreemapPath(this.#effectiveRoot, node.item.key)?.length;
@@ -46258,6 +47990,7 @@ let TreemapListElement = class TreemapListElement extends i {
 	*/
 	zoomOut() {
 		if (this._zoomKey === void 0) return;
+		this.#pendingFlip = this.#planFlip(void 0);
 		const previous = this.focusedNode;
 		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
 		const absoluteDepth = path === void 0 ? -1 : path.length - 2;
@@ -46281,9 +48014,66 @@ let TreemapListElement = class TreemapListElement extends i {
 		}));
 		this.requestUpdate();
 	}
+	/**
+	* Work out (before `_zoomKey` changes) whether the upcoming zoom should
+	* animate, and how — see `FlipPlan`. Returns `undefined` to skip the
+	* animation: reduced-motion is requested, or the node needed to anchor it
+	* isn't in either the old or new layout's visible window.
+	*/
+	#planFlip(targetKey) {
+		if (typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches) return void 0;
+		if (targetKey !== void 0) {
+			const visible = this.#rects().find((r) => r.node.item.key === targetKey);
+			if (visible) return {
+				direction: `in`,
+				rect: {
+					x: visible.x,
+					y: visible.y,
+					width: visible.width,
+					height: visible.height
+				}
+			};
+		}
+		const fromKey = this._zoomKey;
+		if (fromKey === void 0) return void 0;
+		const landing = this.#rectsForZoom(targetKey).find((r) => r.node.item.key === fromKey);
+		if (!landing) return void 0;
+		return {
+			direction: `out`,
+			rect: {
+				x: landing.x,
+				y: landing.y,
+				width: landing.width,
+				height: landing.height
+			}
+		};
+	}
+	/** Apply a planned FLIP animation once the new layout has rendered — see `FlipPlan`. */
+	#applyFlip(flip) {
+		const inner = this.renderRoot.querySelector(`.viewport-inner`);
+		const viewport = this.renderRoot.querySelector(`.viewport`);
+		if (!(inner instanceof HTMLElement) || !(viewport instanceof HTMLElement)) return;
+		const vw = viewport.clientWidth;
+		const vh = viewport.clientHeight;
+		if (vw <= 0 || vh <= 0) return;
+		const { rect, direction } = flip;
+		const startTransform = direction === `in` ? `translate(${rect.x * vw}px, ${rect.y * vh}px) scale(${Math.max(rect.width, 1e-4)}, ${Math.max(rect.height, 1e-4)})` : (() => {
+			const sx = rect.width > 0 ? 1 / rect.width : 1;
+			const sy = rect.height > 0 ? 1 / rect.height : 1;
+			return `translate(${-rect.x * sx * vw}px, ${-rect.y * sy * vh}px) scale(${sx}, ${sy})`;
+		})();
+		inner.classList.remove(`flipping`);
+		inner.style.transform = startTransform;
+		inner.offsetWidth;
+		requestAnimationFrame(() => {
+			inner.classList.add(`flipping`);
+			inner.style.transform = `none`;
+		});
+		inner.addEventListener(`transitionend`, () => inner.classList.remove(`flipping`), { once: true });
+	}
 	#canZoom(node) {
 		if (node.item.isLeaf === true) return false;
-		if (node.children !== void 0) return node.children.length > 0;
+		if (node.children !== void 0) return this.hideLeaves ? node.children.some((n) => n.item.isLeaf !== true) : node.children.length > 0;
 		return this.model !== void 0 || this.loadChildren !== void 0;
 	}
 	/**
@@ -46510,6 +48300,39 @@ let TreemapListElement = class TreemapListElement extends i {
 			}
 		}
 	}
+	/**
+	* Cmd+wheel zooms: scrolling backward (deltaY < 0, towards the user) zooms
+	* into the tile under the pointer — the same as clicking it; scrolling
+	* forward (deltaY > 0, away from the user) zooms out one level at a time
+	* (see `#zoomOutOneStep`), not straight to the root. Plain wheel (no Cmd)
+	* is left alone for normal page scroll. A short cooldown after each step
+	* keeps a single trackpad gesture (which fires many small wheel events)
+	* from firing a cascade of zoom steps.
+	*/
+	#handleWheel(event) {
+		if (!event.metaKey || event.deltaY === 0) return;
+		event.preventDefault();
+		if (performance.now() < this.#wheelCooldownUntil) return;
+		if (event.deltaY > 0) {
+			if (this._zoomKey === void 0) return;
+			this.#wheelCooldownUntil = performance.now() + 260;
+			this.#zoomOutOneStep();
+			return;
+		}
+		const key = (event.target?.closest(`.tile`))?.getAttribute(`data-key`) ?? void 0;
+		if (key === void 0) return;
+		const rect = this.#rects().find((r) => r.node.item.key === key);
+		if (!rect || !this.#canZoom(rect.node)) return;
+		this.#wheelCooldownUntil = performance.now() + 260;
+		this.zoomTo(rect.node);
+	}
+	/** Zoom to the current zoom node's parent, or fully out when it's a direct child of the root. */
+	#zoomOutOneStep() {
+		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
+		const parent = path && path.length > 2 ? path[path.length - 2] : void 0;
+		if (parent) this.zoomTo(parent);
+		else this.zoomOut();
+	}
 	#renderBreadcrumb() {
 		const zoomNode = this.focusedNode;
 		if (zoomNode === void 0) return A;
@@ -46539,25 +48362,64 @@ let TreemapListElement = class TreemapListElement extends i {
 		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
 		else this.zoomTo(node);
 	}
-	#hideLabel(rect) {
+	/** On-screen size (px) of `rect`, or `undefined` before the host has been measured. */
+	#pixelSize(rect) {
 		const hostWidth = this.clientWidth || 0;
 		const hostHeight = this.clientHeight || 0;
-		if (hostWidth <= 0 || hostHeight <= 0) return false;
-		return rect.width * hostWidth * rect.height * hostHeight < this.minLabelArea;
+		if (hostWidth <= 0 || hostHeight <= 0) return void 0;
+		return {
+			width: rect.width * hostWidth,
+			height: rect.height * hostHeight
+		};
 	}
-	#renderTile(rect, positionStyle, children, byParent, nested) {
+	/** Hide when too small by area, or too narrow to fit any readable text even truncated. */
+	#hideLabel(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return false;
+		return size.width * size.height < this.minLabelArea || size.width < this.minTileWidth;
+	}
+	/** Whether `rect` is large enough on-screen for its own children to be subdivided and drawn. */
+	#canDescend(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return true;
+		const offset = this.presentation === `cascaded` && Number.isFinite(this.cascadeOffset) && this.cascadeOffset > 0 ? this.cascadeOffset : 0;
+		const w = size.width - offset;
+		const h = size.height - offset;
+		if (w <= 0 || h <= 0) return false;
+		return w * h >= this.minChildArea && w >= this.minTileWidth;
+	}
+	/** Slugify a category name into a CSS custom-property-safe token. */
+	#categorySlug(category) {
+		return category.replace(/[^\w-]/g, `-`);
+	}
+	/**
+	* Inline colour overrides for `node`'s category, or `undefined` for none.
+	* Set as real `background-color`/`color` (not custom properties) so they
+	* simply win over `.tile`'s CSS-variable-driven defaults by specificity —
+	* no risk of an unresolvable `var()` chain leaving the property invalid.
+	*/
+	#categoryStyle(node) {
+		const category = this.categoryAccessor?.(node.item);
+		if (!category) return void 0;
+		const slug = this.#categorySlug(category);
+		return `background-color:var(--treemap-category-${slug}-bg, var(--treemap-tile-bg));color:var(--treemap-category-${slug}-text, var(--treemap-tile-text));`;
+	}
+	#renderTileBox(rect, positionStyle, hasVisibleChildren, childrenContent) {
 		const { node } = rect;
 		const selected = this._selectedNodes.has(node);
 		const tickled = this.tickled.isTickled(node.item.key);
 		const filtered = !this.#matchesFilter(node, rect.depth);
 		const pending = this.#pendingKeys.has(node.item.key);
 		const hideLabel = this.#hideLabel(rect);
-		const showHeader = children.length > 0 && !hideLabel;
+		const showHeader = hasVisibleChildren && !hideLabel;
+		const category = this.categoryAccessor?.(node.item);
+		const categoryStyle = this.#categoryStyle(node);
 		return b`
       <div
-        class="item tile ${nested ? `nested` : ``} ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
+        class="item tile ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
         data-key=${node.item.key}
         data-depth=${rect.relativeDepth}
+        data-category=${category ?? A}
         role="treeitem"
         tabindex="-1"
         aria-level=${rect.depth + 1}
@@ -46567,7 +48429,7 @@ let TreemapListElement = class TreemapListElement extends i {
         aria-label=${node.item.label}
         title=${node.item.label}
         part="tile"
-        style=${positionStyle}
+        style=${categoryStyle ? `${positionStyle};${categoryStyle}` : positionStyle}
         @click=${(e) => {
 			e.stopPropagation();
 			this.#handleItemClick(rect, this.#rects().findIndex((r) => r.node.item.key === node.item.key), e);
@@ -46579,23 +48441,46 @@ let TreemapListElement = class TreemapListElement extends i {
         @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
       >
         ${showHeader ? b`<div class="tile-header" part="tile-header"><span class="treemap-label" part="label">${node.item.label}</span></div>` : b`<span class="treemap-label ${hideLabel ? `hide-label` : ``}" part="label">${node.item.label}</span>`}
-        ${children.length > 0 ? b`
-            <div class="tile-children" role="group">
-              ${repeat(children, (r) => r.node.item.key, (r) => this.#renderNestedTile(r, rect, byParent))}
-            </div>
-          ` : A}
+        ${childrenContent}
       </div>
     `;
 	}
+	/**
+	* Render `rect` plus (if it's large enough to descend into — see
+	* `#canDescend`) a `.tile-children` holding its own children, each
+	* positioned relative to `rect` itself and recursing the same way.
+	*
+	* Each level gets its own real `.tile-header` + `.tile-children` box, so a
+	* header reserves its own space via normal box-model layout (flex column:
+	* header, then the remaining space for children) at *every* level — not
+	* just the top one. That matters because layout rects are purely
+	* geometric (no allowance for header height), so a folder whose one child
+	* fills ~100% of its area gets a child rect nearly identical to its own;
+	* positioning that child against its direct parent (not some flattened
+	* shared ancestor) is what keeps the parent's header from being painted
+	* over by an opaque, near-identically-sized child box.
+	*/
+	#renderTile(rect, positionStyle, byParent) {
+		const children = rect.hasChildren && this.#canDescend(rect) ? byParent.get(rect.node.item.key) ?? [] : [];
+		const childrenContent = children.length > 0 ? b`
+        <div class="tile-children" role="group">
+          ${repeat(children, (r) => r.node.item.key, (r) => this.#renderNestedTile(r, rect, byParent))}
+        </div>
+      ` : A;
+		return this.#renderTileBox(rect, positionStyle, children.length > 0, childrenContent);
+	}
+	/** A child tile, positioned as a percentage of `parent`'s own box. */
 	#renderNestedTile(rect, parent, byParent) {
 		const relX = parent.width > 0 ? (rect.x - parent.x) / parent.width : 0;
 		const relY = parent.height > 0 ? (rect.y - parent.y) / parent.height : 0;
 		const relW = parent.width > 0 ? rect.width / parent.width : 0;
 		const relH = parent.height > 0 ? rect.height / parent.height : 0;
-		return this.#renderTile(rect, `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, true);
+		const style = `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
 	}
 	#renderTopTile(rect, byParent) {
-		return this.#renderTile(rect, `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, false);
+		const style = `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
 	}
 	render() {
 		const rects = this.#rects();
@@ -46613,15 +48498,19 @@ let TreemapListElement = class TreemapListElement extends i {
         class="treemap"
         role="tree"
         tabindex="0"
+        data-presentation=${this.presentation}
         data-input-mode=${this.tickled.inputMode}
         style=${`--treemap-padding:${this.padding}px`}
         @keydown=${(e) => this.#handleKeyDown(e)}
         @pointerleave=${() => this.tickled.clearTickled()}
+        @wheel=${(e) => this.#handleWheel(e)}
       >
         ${this.#renderBreadcrumb()}
         ${rects.length === 0 ? b`<div class="empty-state">No data</div>` : b`
             <div class="viewport" part="viewport">
-              ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              <div class="viewport-inner">
+                ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              </div>
             </div>
           `}
       </div>
@@ -46644,11 +48533,18 @@ let TreemapListElement = class TreemapListElement extends i {
         --treemap-tile-border: var(--border-subtle);
         --treemap-header-bg: rgb(0 0 0 / 0.12);
         --treemap-font-size: var(--text-s);
+        --treemap-zoom-duration: 220ms;
 
         display: block;
-        overflow: auto;
+        overflow: hidden;
       }
 
+      /* Per-category tile colours (set categoryAccessor to opt in): define
+         --treemap-category-SLUG-bg / -text at whatever scope suits (:host
+         here, or globally) for each category your accessor can return —
+         e.g. --treemap-category-urgent-bg: oklch(55% 0.18 25). A category
+         with no matching pair falls back to --treemap-tile-bg/-text. */
+
       .treemap {
         display: flex;
         flex-direction: column;
@@ -46677,18 +48573,44 @@ let TreemapListElement = class TreemapListElement extends i {
       .viewport {
         position: relative;
         width: 100%;
-        height: var(--treemap-height);
-        flex-shrink: 0;
+        /* flex-basis of --treemap-height (its size when nothing forces a
+           different one — the common case of an auto-height host) but
+           allowed to grow/shrink like any flex item, so it shares the
+           .treemap column's height with the breadcrumb instead of a plain
+           fixed height always claiming that full amount regardless of what
+           else needs space — which is what let the breadcrumb push the
+           host past its own height and scroll once a zoom made it appear. */
+        flex: 1 1 var(--treemap-height);
+        min-height: 0;
         overflow: hidden;
         border-radius: var(--radius-m);
       }
 
+      /* Transform target for the zoom-in/zoom-out FLIP animation (see
+         #planFlip/#applyFlip) — kept separate from .viewport so the
+         transform never fights that element's own sizing/overflow. */
+      .viewport-inner {
+        position: absolute;
+        inset: 0;
+        transform-origin: 0 0;
+      }
+
+      .viewport-inner.flipping {
+        transition: transform var(--treemap-zoom-duration, 220ms) ease-out;
+      }
+
       .tile {
         position: absolute;
         box-sizing: border-box;
         overflow: hidden;
         display: flex;
         flex-direction: column;
+        /* Override the shared .item class's align-items:center (built for
+           icon+label rows) — tiles need their flex children to stretch to
+           full width, or .tile-children collapses to its (empty) content
+           width and every nested tile collapses with it. */
+        align-items: stretch;
+        white-space: normal;
         background: var(--treemap-tile-bg);
         color: var(--treemap-tile-text);
         border: var(--treemap-tile-border);
@@ -46707,6 +48629,14 @@ let TreemapListElement = class TreemapListElement extends i {
         margin-top: 0;
       }
 
+      /* Cascaded presentation (Lü & Fogarty 2008): the geometric inset is
+         already in the layout rects — this adds the stack-of-cards depth
+         cue on top. Parent tiles read as cards sitting behind their
+         children. */
+      .treemap[data-presentation="cascaded"] .tile {
+        box-shadow: 2px 2px 0 rgb(0 0 0 / 0.25);
+      }
+
       .tile-header {
         flex-shrink: 0;
         padding: 1px var(--space-xs);
@@ -46777,16 +48707,37 @@ __decorate([property({
 	type: String,
 	attribute: `tiling-method`
 })], TreemapListElement.prototype, "tilingMethod", void 0);
+__decorate([property({
+	type: String,
+	attribute: `presentation`
+})], TreemapListElement.prototype, "presentation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `cascade-offset`
+})], TreemapListElement.prototype, "cascadeOffset", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `max-depth`
 })], TreemapListElement.prototype, "maxDepth", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-leaves`
+})], TreemapListElement.prototype, "hideLeaves", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `min-label-area`
 })], TreemapListElement.prototype, "minLabelArea", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-tile-width`
+})], TreemapListElement.prototype, "minTileWidth", void 0);
 __decorate([property({ type: Number })], TreemapListElement.prototype, "padding", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-child-area`
+})], TreemapListElement.prototype, "minChildArea", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "valueAccessor", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "categoryAccessor", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "selectedNode", void 0);
 __decorate([state()], TreemapListElement.prototype, "_selectedNodes", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "filterPredicate", void 0);
@@ -47916,6 +49867,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-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, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, 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, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, 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, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, 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, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map