@ixfx/components 0.10.1 → 0.10.3

package/dist/handle-DAXs7kbJ.js

@@ -0,0 +1,656 @@
+import { css } from "lit";
+//#region src/styles/handle.ts
+/**
+* Shared drag / resize **handle** styling.
+*
+* A handle is the grab affordance for moving or resizing an object. Apply the
+* `.ixfx-handle` class to a small decorative element inside your drag / resize
+* hit-zone and choose a look with two independent attributes:
+*
+* - `data-handle` — texture: `flat` (default) · `dotted` · `dimpled` · `grated`
+* - `data-shape`  — topology: `horizontal` (default) · `vertical` · `spot`
+*
+* - **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: 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.
+*
+* `dotted` / `dimpled` / `grated` are texture only — no plate, box or border; the
+* gaps are transparent so the surface behind shows through. The base colour is
+* `--ixfx-handle-color` (a theme token); the deboss edges default to that colour
+* lightened / darkened.
+*
+* The handle is `pointer-events: none` — bind pointer handlers to the surrounding
+* hit-zone. It reaches its "active" look (`--ixfx-handle-opacity-active`, and for
+* `flat` / `dotted` the `--ixfx-handle-color-active` tint) when its immediate
+* parent (the hit-zone) is `:hover` / `:focus-visible` / `[data-active]`, or when
+* the handle itself is. Set `[data-active]` on the hit-zone yourself while a drag
+* is live so the handle stays lit after the pointer leaves it.
+*
+* ```ts
+* import { handleStyles } from '../styles/handle.js';
+*
+* static styles = [themeFallbacks, handleStyles, css`...`];
+* ```
+* ```html
+* <div class="hit-zone" @pointerdown=${this.#onDown}>
+*   <span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="handle"></span>
+* </div>
+* ```
+*
+* ## CSS variables (defaults shown; override on the element or any ancestor)
+* - `--ixfx-handle-color`          `var(--surface-muted-text)` — `flat` / `dotted` fill
+* - `--ixfx-handle-color-active`   `var(--accent)`             — `flat` / `dotted` hover / focus
+* - `--ixfx-handle-thickness`      `6px`  — cross-axis size of a bar (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 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
+*/
+const handleStyles = css`
+  .ixfx-handle {
+    /* Bridge: public --ixfx-handle-* (element or ancestor) → internal alias → fallback. */
+    --_handle-color: var(--ixfx-handle-color, var(--surface-3-text));
+    --_handle-color-active: var(--ixfx-handle-color-active, var(--surface-3-text));
+    --_handle-thickness: var(--ixfx-handle-thickness, 6px);
+    --_handle-length: var(--ixfx-handle-length, 44px);
+    --_handle-spot: var(--ixfx-handle-spot-size, 14px);
+    --_handle-radius: var(--ixfx-handle-radius, var(--radius-l));
+    --_handle-opacity: var(--ixfx-handle-opacity, 0.55);
+    --_handle-opacity-active: var(--ixfx-handle-opacity-active, 1);
+    --_handle-dot: var(--ixfx-handle-dot-size, 3px);
+    --_handle-tile: var(--ixfx-handle-tile, 5px);
+    /* Centre-to-centre step of the dotted / dimpled marks (a length). Defaults to
+       a share of the long axis; a bar shows ~3 marks. */
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-length) / 4));
+    /* 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. */
+    --_handle-hi: var(--ixfx-handle-highlight, color-mix(in oklch, var(--surface-4) 50%, var(--_handle-color)));
+    --_handle-lo: var(--ixfx-handle-shadow, color-mix(in oklch, var(--surface-2) 40%, var(--_handle-color)));
+
+    box-sizing: border-box;
+    display: inline-block;
+    flex: none;
+    width: var(--_handle-length);
+    height: var(--_handle-thickness);
+    color: var(--_handle-color);
+    opacity: var(--_handle-opacity);
+    pointer-events: none;
+    transition:
+      color var(--transition, 0.15s ease-out),
+      opacity var(--transition, 0.15s ease-out);
+  }
+
+  .ixfx-handle[data-shape='vertical'] {
+    width: var(--_handle-thickness);
+    height: var(--_handle-length);
+  }
+
+  .ixfx-handle[data-shape='spot'] {
+    width: var(--_handle-spot);
+    height: var(--_handle-spot);
+    --_handle-gap: var(--ixfx-handle-dot-gap, calc(var(--_handle-spot) / 3));
+  }
+
+  .ixfx-handle:hover,
+  .ixfx-handle:focus-visible,
+  .ixfx-handle[data-active],
+  :hover > .ixfx-handle,
+  :focus-visible > .ixfx-handle,
+  [data-active] > .ixfx-handle {
+    color: var(--_handle-color-active);
+    opacity: var(--_handle-opacity-active);
+  }
+
+  /* ── flat: solid capsule / dot ────────────────────────────────────────── */
+  .ixfx-handle[data-handle='flat'] {
+    background: currentColor;
+    border-radius: var(--_handle-radius);
+  }
+  .ixfx-handle[data-handle='flat'][data-shape='spot'] {
+    border-radius: 50%;
+  }
+
+  /* ── 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: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--_handle-dot);
+    height: var(--_handle-dot);
+    transform: translate(-50%, -50%);
+    border-radius: var(--_handle-radius);
+    background: currentColor;
+  }
+
+  /* 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,
+      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 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 {
+    box-shadow:
+      calc(-1 * var(--_handle-gap)) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      0 calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      var(--_handle-gap) calc(-1 * var(--_handle-gap)) 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) 0 0 0 currentColor,
+      var(--_handle-gap) 0 0 0 currentColor,
+      calc(-1 * var(--_handle-gap)) var(--_handle-gap) 0 0 currentColor,
+      0 var(--_handle-gap) 0 0 currentColor,
+      var(--_handle-gap) var(--_handle-gap) 0 0 currentColor;
+  }
+
+  /* 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) + -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),
+      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) + -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 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,
+        then a shaded edge. Same hatch at every shape (spot is a square crop). ── */
+  .ixfx-handle[data-handle='grated'] {
+    background-image: repeating-linear-gradient(
+      45deg,
+      var(--_handle-hi) 0 0.9px,
+      currentColor 0.9px 1.6px,
+      var(--_handle-lo) 1.6px 2.5px,
+      transparent 2.5px var(--_handle-tile)
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ixfx-handle {
+      transition: none;
+    }
+  }
+`;
+//#endregion
+export { handleStyles as t };
+
+//# sourceMappingURL=handle-DAXs7kbJ.js.map