@ixfx/components 0.6.0 → 0.6.1

package/dist/labelled-radial-input.d.ts

@@ -1,5 +1,5 @@
 import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
-import { i as MarkerStyle, l as ValueMode } from "./radial-input-DXMN55Nz.js";
+import { i as MarkerStyle, l as ValueMode } from "./radial-input-BhZeyyP-.js";
 import { CSSResultGroup, nothing } from "lit";
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
 declare class LabelledRadialInput extends LabelledInputBase {

package/dist/polar-pad.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { LitElement, PropertyValues, html } from "lit";
 //#region src/polar-pad/polar-pad.d.ts
 declare const PolarPad_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;

package/dist/{radial-input-DXMN55Nz.d.ts → radial-input-BhZeyyP-.d.ts}

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/radial-input/types.d.ts
 /**
@@ -68,4 +68,4 @@ declare global {
 }
 //#endregion
 export { RadialInputChangeDetail as a, RadialInputInputEvent as c, MarkerStyle as i, ValueMode as l, LaneData as n, RadialInputChangeEvent as o, LaneType as r, RadialInputInputDetail as s, RadialInputElement as t };
-//# sourceMappingURL=radial-input-DXMN55Nz.d.ts.map
+//# sourceMappingURL=radial-input-BhZeyyP-.d.ts.map

package/dist/{radial-input-DXMN55Nz.d.ts.map → radial-input-BhZeyyP-.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"radial-input-DXMN55Nz.d.ts","names":[],"sources":["../src/radial-input/types.ts","../src/radial-input/radial-input.ts"],"mappings":";;;;;;KAIY;KACA;KACA;UAEK;EACf;EACA;EACA,MAAM;EACN;EACA;;UAGe;EACf;EACA;;UAGe;EACf;EACA;EACA;;KAGU,wBAAwB,YAAY;KACpC,yBAAyB,YAAY;;;;cCepC,2BAA2B;;MAMlC;MAIA,OAAO;EAMX;EAGA;EAGA;EAGA;EAGA;EAIA,WAAW;EAIX;EAGA,aAAa;EAGb;EAIA;;EA+BA,QACE,aACA;IACE;IACA,OAAO;IACP;IACA;;EAcJ,aAAa,aAAa;EAQ1B,WAAW;EAKX,YAAY,oBAAoB;EAIhC,QAAQ,cAAc;EA+Mb,iBAAiB,WAAW,gBAAgB,OAAO;YA4PzC,WAAW,SAAS;EAa9B;YAgDU,QAAQ,SAAS;EA4B3B;EAQA;SAYO,sBAAM;;QAwHhB;YACI;IACR,qBAAqB"}
+{"version":3,"file":"radial-input-BhZeyyP-.d.ts","names":[],"sources":["../src/radial-input/types.ts","../src/radial-input/radial-input.ts"],"mappings":";;;;;;KAIY;KACA;KACA;UAEK;EACf;EACA;EACA,MAAM;EACN;EACA;;UAGe;EACf;EACA;;UAGe;EACf;EACA;EACA;;KAGU,wBAAwB,YAAY;KACpC,yBAAyB,YAAY;;;;cCepC,2BAA2B;;MAMlC;MAIA,OAAO;EAMX;EAGA;EAGA;EAGA;EAGA;EAIA,WAAW;EAIX;EAGA,aAAa;EAGb;EAIA;;EA+BA,QACE,aACA;IACE;IACA,OAAO;IACP;IACA;;EAcJ,aAAa,aAAa;EAQ1B,WAAW;EAKX,YAAY,oBAAoB;EAIhC,QAAQ,cAAc;EA+Mb,iBAAiB,WAAW,gBAAgB,OAAO;YA4PzC,WAAW,SAAS;EAa9B;YAgDU,QAAQ,SAAS;EA4B3B;EAQA;SAYO,sBAAM;;QAwHhB;YACI;IACR,qBAAqB"}

package/dist/radial-input.d.ts

@@ -1,2 +1,2 @@
-import { t as RadialInputElement } from "./radial-input-DXMN55Nz.js";
+import { t as RadialInputElement } from "./radial-input-BhZeyyP-.js";
 export { RadialInputElement };

package/dist/range-input.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { n as TooltipElement, r as TooltipOrientations } from "./tooltip-BlvBUQxx.js";
 import { CSSResultGroup, LitElement } from "lit";
 //#region src/range-input/range-input.d.ts

package/dist/range.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { r as TooltipOrientations } from "./tooltip-BlvBUQxx.js";
 import { LitElement } from "lit";
 //#region src/range/range.d.ts

package/dist/select-horiz.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { LitElement } from "lit";
 //#region src/select-horiz/select-horiz.d.ts
 type SelectHorizChangeDetail = {

package/dist/{slider-input-XppH3vcy.d.ts → slider-input-TidGhvXt.d.ts}

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/slider-input/types.d.ts
 /**
@@ -157,4 +157,4 @@ interface SliderInputElement {
 }
 //#endregion
 export { SliderValueMode as _, SliderInputChangeDetail as a, SliderInputInputDetail as c, SliderLaneType as d, SliderMarkerStyle as f, SliderValueDrag as g, SliderValueCFollow as h, SliderHandleKey as i, SliderInputInputEvent as l, SliderSingleStyle as m, SliderChangedField as n, SliderInputChangeEvent as o, SliderOrientation as p, SliderCrossover as r, SliderInputElementEventMap as s, SliderInputElement as t, SliderLaneData as u };
-//# sourceMappingURL=slider-input-XppH3vcy.d.ts.map
+//# sourceMappingURL=slider-input-TidGhvXt.d.ts.map

package/dist/{slider-input-XppH3vcy.d.ts.map → slider-input-TidGhvXt.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"slider-input-XppH3vcy.d.ts","names":[],"sources":["../src/slider-input/types.ts","../src/slider-input/slider-input.ts"],"mappings":";;;;;;KAIY;KACA;KACA;KACA;KACA;KACA;;;;;;;KAOA;KACA;KACA;;;;;;;UAQK;EACf;EACA,MAAM;;;;;EAKN;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;KAOU;;;;;;;;UASK;WACN;WACA;;WAEA;;WAEA;WACA;WACA;;WAEA;WACA;;WAEA,UAAU;;UAGJ;WACN;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,UAAU;;KAGT,wBAAwB,YAAY;KACpC,yBAAyB,YAAY;UAEhC;EACf,OAAO;EACP,QAAQ;;;;;cCdG,2BAA2B;;EAGtC;EAGA;;;;;;EAQA;EAGA;EAGA;EAGA;EAGA;EAGA,WAAW;EAGX,aAAa;EAGb,aAAa;EAGb,aAAa;;;;;;EAQb,cAAc;EAGd,WAAW;EAGX,WAAW;;;;;;;EASX,cAAc;EAGd;EAGA;;EAoFS;EAmET,QACE,aACA;IACE;IACA;IACA;IACA,OAAO;IACP;IACA;;EAgBJ,aAAa,aAAa;EAQ1B,aAAa,aAAa,kBAAkB;EAW5C,WAAW;EAKX,YAAY,oBAAoB;EAIhC,QAAQ,cAAc;EA8zBb,iBAAiB,WAAW,gBAAgB,OAAO;YAgWzC,WAAW,SAAS;EAsE9B;YAwJU,QAAQ,SAAS;EAkB3B;SAYO,sBAAM;;QA+IhB;YACI;IACR,qBAAqB;;;UAKR;EACf,oBAAoB,gBAAgB,4BAClC,MAAM,GACN,WAAW,MAAM,oBAAoB,OAAO,2BAA2B,aACvE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"slider-input-TidGhvXt.d.ts","names":[],"sources":["../src/slider-input/types.ts","../src/slider-input/slider-input.ts"],"mappings":";;;;;;KAIY;KACA;KACA;KACA;KACA;KACA;;;;;;;KAOA;KACA;KACA;;;;;;;UAQK;EACf;EACA,MAAM;;;;;EAKN;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;KAOU;;;;;;;;UASK;WACN;WACA;;WAEA;;WAEA;WACA;WACA;;WAEA;WACA;;WAEA,UAAU;;UAGJ;WACN;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA;WACA,UAAU;;KAGT,wBAAwB,YAAY;KACpC,yBAAyB,YAAY;UAEhC;EACf,OAAO;EACP,QAAQ;;;;;cCdG,2BAA2B;;EAGtC;EAGA;;;;;;EAQA;EAGA;EAGA;EAGA;EAGA;EAGA,WAAW;EAGX,aAAa;EAGb,aAAa;EAGb,aAAa;;;;;;EAQb,cAAc;EAGd,WAAW;EAGX,WAAW;;;;;;;EASX,cAAc;EAGd;EAGA;;EAoFS;EAmET,QACE,aACA;IACE;IACA;IACA;IACA,OAAO;IACP;IACA;;EAgBJ,aAAa,aAAa;EAQ1B,aAAa,aAAa,kBAAkB;EAW5C,WAAW;EAKX,YAAY,oBAAoB;EAIhC,QAAQ,cAAc;EA8zBb,iBAAiB,WAAW,gBAAgB,OAAO;YAgWzC,WAAW,SAAS;EAsE9B;YAwJU,QAAQ,SAAS;EAkB3B;SAYO,sBAAM;;QA+IhB;YACI;IACR,qBAAqB;;;UAKR;EACf,oBAAoB,gBAAgB,4BAClC,MAAM,GACN,WAAW,MAAM,oBAAoB,OAAO,2BAA2B,aACvE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/slider-input.d.ts

@@ -1,2 +1,2 @@
-import { t as SliderInputElement } from "./slider-input-XppH3vcy.js";
+import { t as SliderInputElement } from "./slider-input-TidGhvXt.js";
 export { SliderInputElement };

package/dist/swipe.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { CSSResultGroup, LitElement, html } from "lit";
 //#region src/swipe/swipe.d.ts
 type SwipeInputDetail = {

package/dist/wheel-nudge-BlSCe_hD.js.map

@@ -1 +1 @@
-{"version":3,"file":"wheel-nudge-BlSCe_hD.js","names":[],"sources":["../src/mixins/wheel-nudge.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\ntype Constructor<T = object> = new (...args: any[]) => T;\n\n/**\n * Direction of a wheel tick. `+1` for `deltaY < 0` (wheel up/away), `-1` for\n * `deltaY > 0` (wheel down/toward).\n */\nexport type WheelDirection = 1 | -1;\n\n/**\n * Abstract surface a consumer of {@link WheelNudgeMixin} must implement.\n *\n * `_applyWheelDelta` is called once per handled wheel tick. The consumer is\n * expected to reuse its existing arrow-key step math (typically a shared\n * `_stepByDelta(direction, effectiveStep)` private method) and call it here.\n *\n * `_shouldHandleWheel` may be overridden to restrict when the wheel acts\n * (e.g. editable-number rejects while the user is typing).\n */\nexport interface WheelNudgeConsumer {\n  _applyWheelDelta: (direction: WheelDirection, event: WheelEvent) => void;\n  _shouldHandleWheel: () => boolean;\n}\n\n/**\n * Internal: the surface a {@link WheelNudgeMixin}-decorated class exposes to\n * TypeScript — its own members plus the consumer contract.\n */\nexport type WheelNudgeConsumerType<TBase> = TBase & WheelNudgeConsumer;\ntype WheelNudgeMixinBase<T> = T extends Constructor<infer U> ? U : never;\ntype WheelNudgeMixinResult<T extends Constructor<LitElement>>\n  = Constructor<WheelNudgeConsumerType<WheelNudgeMixinBase<T>>> & T;\n\n/**\n * Mixin that adds mousewheel support with an optional `lighttouch` hover mode.\n *\n * Activation rule:\n *   - If the host's `disabled` property is truthy → ignore.\n *   - Otherwise, handle if EITHER:\n *       • `lighttouch` is true AND the pointer is currently over the host, OR\n *       • the host (or anything in its shadow tree) currently has focus.\n *\n * Direction convention: `deltaY < 0` (wheel up/away) → +1 step; `deltaY > 0` → -1 step.\n *\n * Consumers must implement `_applyWheelDelta(direction, event)` (see\n * {@link WheelNudgeConsumer}). The mixin calls `event.preventDefault()` only when\n * the activation rule accepts the event, so page scroll is suppressed during\n * interaction without blocking wheel events over empty space.\n *\n * Usage:\n *\n * ```ts\n * class MyInput extends WheelNudgeMixin(LitElement) {\n *   protected _applyWheelDelta(direction, event) {\n *     const step = resolveAxisStep(this.range, this.stops, this.step, event.shiftKey);\n *     this._stepByDelta(direction, step);\n *   }\n * }\n * ```\n */\nexport function WheelNudgeMixin<T extends Constructor<LitElement>>(superClass: T): WheelNudgeMixinResult<T> {\n  class WheelNudgeMixinClass extends superClass {\n    /**\n     * When true, the wheel adjusts the value simply when the pointer is hovering\n     * over the host (no focus required). When false (default), the host must\n     * have focus for the wheel to act.\n     */\n    @property({ type: Boolean, reflect: true })\n    lighttouch = false;\n\n    /**\n     * Imperative hover flag — not Lit-reactive (avoids update churn for what\n     * is purely an interaction-time predicate).\n     */\n    _isHovering = false;\n\n    override connectedCallback(): void {\n      super.connectedCallback();\n      this.addEventListener(`pointerenter`, this._onPointerEnter);\n      this.addEventListener(`pointerleave`, this._onPointerLeave);\n      this.addEventListener(`wheel`, this._onWheel, { passive: false });\n    }\n\n    override disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.removeEventListener(`pointerenter`, this._onPointerEnter);\n      this.removeEventListener(`pointerleave`, this._onPointerLeave);\n      this.removeEventListener(`wheel`, this._onWheel);\n      this._isHovering = false;\n    }\n\n    _onPointerEnter = (): void => {\n      this._isHovering = true;\n    };\n\n    _onPointerLeave = (): void => {\n      this._isHovering = false;\n    };\n\n    /**\n     * Override to restrict when wheel is handled (e.g. editable-number rejects\n     * while the user is typing). Default: respect `disabled`, then apply the\n     * focus-or-lighttouch rule described on the mixin.\n     */\n    _shouldHandleWheel(): boolean {\n      const anyThis = this as unknown as { disabled?: boolean };\n      if (anyThis.disabled)\n        return false;\n      if (this.lighttouch && this._isHovering)\n        return true;\n      if (this.matches?.(`:focus, :focus-within`))\n        return true;\n      const root = this.renderRoot;\n      if (root && (root as ShadowRoot).activeElement !== null)\n        return true;\n      return false;\n    }\n\n    _onWheel = (event: WheelEvent): void => {\n      if (!this._shouldHandleWheel())\n        return;\n      event.preventDefault();\n      // Some browsers (notably when the user holds Shift) send `deltaY=0`\n      // and route the scroll into `deltaX` instead. Use whichever axis\n      // actually moved so the direction sign matches the user's intent.\n      const delta = event.deltaY !== 0 ? event.deltaY : event.deltaX;\n      const direction: WheelDirection = delta < 0 ? 1 : -1;\n      (this as unknown as WheelNudgeConsumer)._applyWheelDelta(direction, event);\n    };\n  }\n  return WheelNudgeMixinClass as unknown as WheelNudgeMixinResult<T>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,gBAAmD,YAAyC;CAC1G,MAAM,6BAA6B,WAAW;;;GAO/B,KAAA,aAAA;GAMC,KAAA,cAAA;GAiBgB,KAAA,wBAAA;IAC5B,KAAK,cAAc;GACrB;GAE8B,KAAA,wBAAA;IAC5B,KAAK,cAAc;GACrB;GAqBY,KAAA,YAAA,UAA4B;IACtC,IAAI,CAAC,KAAK,mBAAmB,GAC3B;IACF,MAAM,eAAe;IAKrB,MAAM,aADQ,MAAM,WAAW,IAAI,MAAM,SAAS,MAAM,UACd,IAAI,IAAI;IAClD,KAAwC,iBAAiB,WAAW,KAAK;GAC3E;;EApDA,oBAAmC;GACjC,MAAM,kBAAkB;GACxB,KAAK,iBAAiB,gBAAgB,KAAK,eAAe;GAC1D,KAAK,iBAAiB,gBAAgB,KAAK,eAAe;GAC1D,KAAK,iBAAiB,SAAS,KAAK,UAAU,EAAE,SAAS,MAAM,CAAC;EAClE;EAEA,uBAAsC;GACpC,MAAM,qBAAqB;GAC3B,KAAK,oBAAoB,gBAAgB,KAAK,eAAe;GAC7D,KAAK,oBAAoB,gBAAgB,KAAK,eAAe;GAC7D,KAAK,oBAAoB,SAAS,KAAK,QAAQ;GAC/C,KAAK,cAAc;EACrB;;;;;;EAeA,qBAA8B;GAE5B,IAAI,KAAQ,UACV,OAAO;GACT,IAAI,KAAK,cAAc,KAAK,aAC1B,OAAO;GACT,IAAI,KAAK,UAAU,uBAAuB,GACxC,OAAO;GACT,MAAM,OAAO,KAAK;GAClB,IAAI,QAAS,KAAoB,kBAAkB,MACjD,OAAO;GACT,OAAO;EACT;CAaF;CA9DG,WAAA,CAAA,SAAS;EAAE,MAAM;EAAS,SAAS;CAAK,CAAC,CAAA,GAAA,qBAAA,WAAA,cAAA,KAAA,CAAA;CA+D5C,OAAO;AACT"}
+{"version":3,"file":"wheel-nudge-BlSCe_hD.js","names":[],"sources":["../src/mixins/wheel-nudge.ts"],"sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\ntype Constructor<T = object> = new (...args: any[]) => T;\n\n/**\n * Direction of a wheel tick. `+1` for `deltaY < 0` (wheel up/away), `-1` for\n * `deltaY > 0` (wheel down/toward).\n */\nexport type WheelDirection = 1 | -1;\n\n/**\n * Abstract surface a consumer of {@link WheelNudgeMixin} must implement.\n *\n * `_applyWheelDelta` is called once per handled wheel tick. The consumer is\n * expected to reuse its existing arrow-key step math (typically a shared\n * `_stepByDelta(direction, effectiveStep)` private method) and call it here.\n *\n * `_shouldHandleWheel` may be overridden to restrict when the wheel acts\n * (e.g. editable-number rejects while the user is typing).\n */\nexport interface WheelNudgeConsumer {\n  _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;\n  _shouldHandleWheel(): boolean;\n}\n\n/**\n * Internal: the surface a {@link WheelNudgeMixin}-decorated class exposes to\n * TypeScript — its own members plus the consumer contract.\n */\nexport type WheelNudgeConsumerType<TBase> = TBase & WheelNudgeConsumer;\ntype WheelNudgeMixinBase<T> = T extends Constructor<infer U> ? U : never;\ntype WheelNudgeMixinResult<T extends Constructor<LitElement>>\n  = Constructor<WheelNudgeConsumerType<WheelNudgeMixinBase<T>>> & T;\n\n/**\n * Mixin that adds mousewheel support with an optional `lighttouch` hover mode.\n *\n * Activation rule:\n *   - If the host's `disabled` property is truthy → ignore.\n *   - Otherwise, handle if EITHER:\n *       • `lighttouch` is true AND the pointer is currently over the host, OR\n *       • the host (or anything in its shadow tree) currently has focus.\n *\n * Direction convention: `deltaY < 0` (wheel up/away) → +1 step; `deltaY > 0` → -1 step.\n *\n * Consumers must implement `_applyWheelDelta(direction, event)` (see\n * {@link WheelNudgeConsumer}). The mixin calls `event.preventDefault()` only when\n * the activation rule accepts the event, so page scroll is suppressed during\n * interaction without blocking wheel events over empty space.\n *\n * Usage:\n *\n * ```ts\n * class MyInput extends WheelNudgeMixin(LitElement) {\n *   protected _applyWheelDelta(direction, event) {\n *     const step = resolveAxisStep(this.range, this.stops, this.step, event.shiftKey);\n *     this._stepByDelta(direction, step);\n *   }\n * }\n * ```\n */\nexport function WheelNudgeMixin<T extends Constructor<LitElement>>(superClass: T): WheelNudgeMixinResult<T> {\n  class WheelNudgeMixinClass extends superClass {\n    /**\n     * When true, the wheel adjusts the value simply when the pointer is hovering\n     * over the host (no focus required). When false (default), the host must\n     * have focus for the wheel to act.\n     */\n    @property({ type: Boolean, reflect: true })\n    lighttouch = false;\n\n    /**\n     * Imperative hover flag — not Lit-reactive (avoids update churn for what\n     * is purely an interaction-time predicate).\n     */\n    _isHovering = false;\n\n    override connectedCallback(): void {\n      super.connectedCallback();\n      this.addEventListener(`pointerenter`, this._onPointerEnter);\n      this.addEventListener(`pointerleave`, this._onPointerLeave);\n      this.addEventListener(`wheel`, this._onWheel, { passive: false });\n    }\n\n    override disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.removeEventListener(`pointerenter`, this._onPointerEnter);\n      this.removeEventListener(`pointerleave`, this._onPointerLeave);\n      this.removeEventListener(`wheel`, this._onWheel);\n      this._isHovering = false;\n    }\n\n    _onPointerEnter = (): void => {\n      this._isHovering = true;\n    };\n\n    _onPointerLeave = (): void => {\n      this._isHovering = false;\n    };\n\n    /**\n     * Override to restrict when wheel is handled (e.g. editable-number rejects\n     * while the user is typing). Default: respect `disabled`, then apply the\n     * focus-or-lighttouch rule described on the mixin.\n     */\n    _shouldHandleWheel(): boolean {\n      const anyThis = this as unknown as { disabled?: boolean };\n      if (anyThis.disabled)\n        return false;\n      if (this.lighttouch && this._isHovering)\n        return true;\n      if (this.matches?.(`:focus, :focus-within`))\n        return true;\n      const root = this.renderRoot;\n      if (root && (root as ShadowRoot).activeElement !== null)\n        return true;\n      return false;\n    }\n\n    _onWheel = (event: WheelEvent): void => {\n      if (!this._shouldHandleWheel())\n        return;\n      event.preventDefault();\n      // Some browsers (notably when the user holds Shift) send `deltaY=0`\n      // and route the scroll into `deltaX` instead. Use whichever axis\n      // actually moved so the direction sign matches the user's intent.\n      const delta = event.deltaY !== 0 ? event.deltaY : event.deltaX;\n      const direction: WheelDirection = delta < 0 ? 1 : -1;\n      (this as unknown as WheelNudgeConsumer)._applyWheelDelta(direction, event);\n    };\n  }\n  return WheelNudgeMixinClass as unknown as WheelNudgeMixinResult<T>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,gBAAmD,YAAyC;CAC1G,MAAM,6BAA6B,WAAW;;;GAO/B,KAAA,aAAA;GAMC,KAAA,cAAA;GAiBgB,KAAA,wBAAA;IAC5B,KAAK,cAAc;GACrB;GAE8B,KAAA,wBAAA;IAC5B,KAAK,cAAc;GACrB;GAqBY,KAAA,YAAA,UAA4B;IACtC,IAAI,CAAC,KAAK,mBAAmB,GAC3B;IACF,MAAM,eAAe;IAKrB,MAAM,aADQ,MAAM,WAAW,IAAI,MAAM,SAAS,MAAM,UACd,IAAI,IAAI;IAClD,KAAwC,iBAAiB,WAAW,KAAK;GAC3E;;EApDA,oBAAmC;GACjC,MAAM,kBAAkB;GACxB,KAAK,iBAAiB,gBAAgB,KAAK,eAAe;GAC1D,KAAK,iBAAiB,gBAAgB,KAAK,eAAe;GAC1D,KAAK,iBAAiB,SAAS,KAAK,UAAU,EAAE,SAAS,MAAM,CAAC;EAClE;EAEA,uBAAsC;GACpC,MAAM,qBAAqB;GAC3B,KAAK,oBAAoB,gBAAgB,KAAK,eAAe;GAC7D,KAAK,oBAAoB,gBAAgB,KAAK,eAAe;GAC7D,KAAK,oBAAoB,SAAS,KAAK,QAAQ;GAC/C,KAAK,cAAc;EACrB;;;;;;EAeA,qBAA8B;GAE5B,IAAI,KAAQ,UACV,OAAO;GACT,IAAI,KAAK,cAAc,KAAK,aAC1B,OAAO;GACT,IAAI,KAAK,UAAU,uBAAuB,GACxC,OAAO;GACT,MAAM,OAAO,KAAK;GAClB,IAAI,QAAS,KAAoB,kBAAkB,MACjD,OAAO;GACT,OAAO;EACT;CAaF;CA9DG,WAAA,CAAA,SAAS;EAAE,MAAM;EAAS,SAAS;CAAK,CAAC,CAAA,GAAA,qBAAA,WAAA,cAAA,KAAA,CAAA;CA+D5C,OAAO;AACT"}

package/dist/{wheel-nudge-DGrNzWuE.d.ts → wheel-nudge-DgMTRYlh.d.ts}

@@ -16,8 +16,8 @@ type WheelDirection = 1 | -1;
  * (e.g. editable-number rejects while the user is typing).
  */
 interface WheelNudgeConsumer {
-  _applyWheelDelta: (direction: WheelDirection, event: WheelEvent) => void;
-  _shouldHandleWheel: () => boolean;
+  _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;
+  _shouldHandleWheel(): boolean;
 }
 /**
  * Internal: the surface a {@link WheelNudgeMixin}-decorated class exposes to
@@ -26,4 +26,4 @@ interface WheelNudgeConsumer {
 type WheelNudgeConsumerType<TBase> = TBase & WheelNudgeConsumer;
 //#endregion
 export { WheelNudgeConsumerType as n, WheelDirection as t };
-//# sourceMappingURL=wheel-nudge-DGrNzWuE.d.ts.map
+//# sourceMappingURL=wheel-nudge-DgMTRYlh.d.ts.map

package/dist/wheel-nudge-DgMTRYlh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-nudge-DgMTRYlh.d.ts","names":[],"sources":["../src/mixins/wheel-nudge.ts"],"mappings":";;;;;;KASY;;;;;;;;;;;UAYK;EACf,iBAAiB,WAAW,gBAAgB,OAAO;EACnD;;;;;;KAOU,uBAAuB,SAAS,QAAQ"}

package/dist/xy-pad.d.ts

@@ -1,4 +1,4 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DGrNzWuE.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
 import { LitElement, PropertyValues, html } from "lit";
 //#region src/xy-pad/xy-pad.d.ts
 declare const XyPad_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;

package/docs-user/README.md

@@ -39,6 +39,7 @@ This directory contains documentation for each component and some architectural
 - [swipe](./swipe.md)
 - [tabs](./tabs.md)
 - [timeline](./timeline.md)
+- [toolbar](./toolbar.md)
 - [transitory-label](./transitory-label.md)
 - [tree](./tree.md)
 - [util](./util.md)

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.6.0",
-  "generated": "2026-08-29T11:13:25.291Z",
+  "version": "0.6.1",
+  "generated": "2026-08-29T21:26:06.851Z",
   "components": [
     {
       "name": "ac-text",
@@ -178,6 +178,11 @@
       "summary": "A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.",
       "path": "docs-user/timeline.md"
     },
+    {
+      "name": "toolbar",
+      "summary": "Two components for building toolbars:",
+      "path": "docs-user/toolbar.md"
+    },
     {
       "name": "transitory-label",
       "summary": "An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.",

package/docs-user/llms.txt

@@ -46,6 +46,7 @@ import '@ixfx/components/data-grid';
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
+- [toolbar](docs-user/toolbar.md): Two components for building toolbars:
 - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).

package/docs-user/toolbar.md

@@ -0,0 +1,135 @@
+# Toolbar components
+
+Two components for building toolbars:
+
+- **`ixfx-toolbar`** — a responsive toolbar container with overflow handling
+- **`ixfx-toolbar-group`** — a labelled grouping container for toolbar items
+
+---
+
+## `ixfx-toolbar`
+
+A responsive toolbar container that handles overflow by moving items to a popover. Supports horizontal and vertical orientations.
+
+```html
+<ixfx-toolbar>
+  <ixfx-toolbar-group label="Clipboard">
+    <ixfx-button icon="copy">Copy</ixfx-button>
+    <ixfx-button icon="paste">Paste</ixfx-button>
+  </ixfx-toolbar-group>
+  <ixfx-toolbar-group label="Font">
+    <ixfx-button>B</ixfx-button>
+    <ixfx-button>I</ixfx-button>
+  </ixfx-toolbar-group>
+</ixfx-toolbar>
+```
+
+### Properties / attributes
+
+| Attribute / Property | Type                                              | Default        | Description                                          |
+|---------------------|---------------------------------------------------|----------------|------------------------------------------------------|
+| `orientation`       | `'horizontal'` \| `'vertical-left'` \| `'vertical-right'` | `'horizontal'` | Layout direction. `vertical-left` flips text upward. |
+| `layout`            | `'one-line'` \| `'wrap'`                          | `'one-line'`   | Whether items wrap or overflow                        |
+| `vertical-writing`   | `'auto'` \| `'up'` \| `'down'` \| `'none'`       | `'auto'`       | Writing mode for vertical orientations               |
+| `show-group-labels` | boolean                                           | `false`        | Show labels as rows above group content              |
+| `invisible-groups`   | boolean                                           | `false`        | Hide group borders and backgrounds                   |
+
+### Slots
+
+| Slot        | Description                              |
+|-------------|------------------------------------------|
+| default     | Toolbar items (buttons, groups, etc.)    |
+| `overflow`  | Items in the overflow popover             |
+
+### CSS custom properties
+
+| Property | Default | Description                          |
+|----------|---------|--------------------------------------|
+| `--toolbar-gap`      | `var(--space-s)` | Gap between toolbar items |
+| `--toolbar-bg`      | `var(--surface-2)` | Toolbar background |
+| `--toolbar-padding` | `var(--space-s)` | Toolbar padding |
+| `--toolbar-border`  | `var(--border-subtle)` | Toolbar border |
+
+### Writing mode
+
+For vertical toolbars, `vertical-writing` controls how text is displayed:
+
+- `'auto'` — `vertical-right` uses `vertical-lr`, `vertical-left` uses `vertical-rl`
+- `'up'` — Forces `vertical-rl` (text runs upward)
+- `'down'` — Forces `vertical-lr` (text runs downward)
+- `'none'` — Forces `horizontal-tb` (no vertical writing)
+
+### Overflow handling
+
+When `layout="one-line"` and items exceed available space, excess items are moved to an overflow popover. The popover is positioned using CSS Anchor Positioning relative to the overflow button.
+
+```html
+<ixfx-toolbar layout="one-line">
+  <!-- Items that don't fit will be moved to overflow -->
+  <ixfx-button>Item 1</ixfx-button>
+  <ixfx-button>Item 2</ixfx-button>
+  <!-- ... -->
+</ixfx-toolbar>
+```
+
+---
+
+## `ixfx-toolbar-group`
+
+A grouping container for toolbar items. Groups can have a label and support grow behavior.
+
+```html
+<ixfx-toolbar-group label="Font">
+  <ixfx-button>B</ixfx-button>
+  <ixfx-button>I</ixfx-button>
+</ixfx-toolbar-group>
+
+<ixfx-toolbar-group grow>
+  <!-- This group takes up remaining space -->
+</ixfx-toolbar-group>
+```
+
+### Properties / attributes
+
+| Attribute / Property | Type    | Default | Description                              |
+|---------------------|---------|---------|------------------------------------------|
+| `label`            | string  | `''`    | Label text displayed above content        |
+| `grow`             | boolean | `false` | Group grows to fill remaining space      |
+
+### CSS custom properties
+
+| Property                          | Default      | Description                                  |
+|-----------------------------------|-------------|----------------------------------------------|
+| `--toolbar-group-justify-content` | `flex-start` | Horizontal alignment of group contents      |
+| `--toolbar-group-align-items`     | `center`     | Vertical alignment of group contents        |
+
+```html
+<!-- Right-align items within a group -->
+<ixfx-toolbar-group style="--toolbar-group-justify-content: flex-end;">
+  <ixfx-button>Action</ixfx-button>
+</ixfx-toolbar-group>
+```
+
+---
+
+## Demos
+
+See `demo/toolbar.html` for complete examples including:
+
+- Word-style horizontal toolbar with font selection, formatting buttons, and paragraph controls
+- Chrome-style toolbar with a growable search input
+- Vertical toolbars with different writing modes
+- Footer toolbar with far-right justified group
+- Toolbar with group labels displayed as rows
+
+---
+
+## TypeScript types
+
+```ts
+import type {
+  ToolbarOrientation, // 'horizontal' | 'vertical-left' | 'vertical-right'
+  ToolbarLayout,      // 'one-line' | 'wrap'
+  ToolbarVerticalWriting // 'auto' | 'up' | 'down' | 'none'
+} from 'ixfxfun-components';
+```

package/llms.txt

@@ -46,6 +46,7 @@ import '@ixfx/components/data-grid';
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
+- [toolbar](docs-user/toolbar.md): Two components for building toolbars:
 - [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",

package/dist/wheel-nudge-DGrNzWuE.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wheel-nudge-DGrNzWuE.d.ts","names":[],"sources":["../src/mixins/wheel-nudge.ts"],"mappings":";;;;;;KASY;;;;;;;;;;;UAYK;EACf,mBAAmB,WAAW,gBAAgB,OAAO;EACrD;;;;;;KAOU,uBAAuB,SAAS,QAAQ"}