@ixfx/components 0.2.4 → 0.2.5

package/dist/interaction/tickled-styles.js

@@ -1,106 +0,0 @@
-import { css } from 'lit';
-/**
- * Shared CSS styles for tickled interaction pattern.
- *
- * Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).
- * The `tickledItemStyles` provides base styling that all tickled components should use.
- *
- * ## CSS Variable Contract
- *
- * **Style variables (default values defined in `tickledItemStyles`):**
- * - `--item-bg`: Default background (default: transparent)
- * - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))
- * - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))
- * - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))
- * - `--item-border`: Border style (default: 1px solid transparent)
- * - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))
- * - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))
- * - `--item-text-tickled`: Text color when tickled (default: inherit)
- * - `--item-text-selected`: Text color when selected (default: #fff)
- * - `--item-padding`: Item padding (default: 4px 8px)
- * - `--item-border-radius`: Border radius (default: 4px)
- * - `--item-icon-spacing`: Gap between icon and text (default: 4px)
- *
- * ## Usage
- *
- * Components should import both `tickledStyles` and `tickledItemStyles`:
- *
- * ```ts
- * import { tickledStyles, tickledItemStyles } from '../interaction/index.js';
- *
- * class MyComponent extends LitElement {
- *   static styles = [
- *     tickledStyles,
- *     tickledItemStyles,
- *     css`
- *       :host {
- *         --item-bg-tickled: #e0e0e0;
- *         --item-bg-selected: #1976d2;
- *       }
- *     `
- *   ];
- * }
- * ```
- */
-export const tickledStyles = css `
-  /**
-   * No suppression needed - tickled styling is always active.
-   */
-`;
-/**
- * Shared item styling for tickled components.
- *
- * Provides base styles for interactive items with tickled and selected states.
- * Components should import this in addition to `tickledStyles` and can override
- * CSS variables to customize appearance.
- */
-export const tickledItemStyles = css `
-  :host {
-    --item-bg: transparent;
-    --item-bg-tickled: rgba(0, 0, 0, 0.06);
-    --item-bg-selected: rgba(25, 118, 210, 1);
-    --item-bg-selected-tickled: rgba(21, 101, 192, 1);
-    --item-border: 1px solid transparent;
-    --item-border-tickled: 1px solid var(--accent);
-    --item-border-selected: 1px solid rgba(25, 118, 210, 1);
-    --item-text: inherit;
-    --item-text-tickled: inherit;
-    --item-text-selected: #fff;
-    --item-padding: 4px 8px;
-    --item-border-radius: 4px;
-    --item-icon-spacing: 4px;
-  }
-
-  .item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--item-icon-spacing);
-    padding: var(--item-padding);
-    background: var(--item-bg);
-    border: var(--item-border);
-    border-radius: var(--item-border-radius);
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);
-  }
-
-  .item.tickled {
-    background: var(--item-bg-tickled);
-    border-color: var(--item-border-tickled);
-    color: var(--item-text-tickled);
-  }
-
-  .item.selected {
-    background: var(--item-bg-selected);
-    border-color: var(--item-border-selected);
-    color: var(--item-text-selected);
-  }
-
-  .item.selected.tickled {
-    background: var(--item-bg-selected-tickled);
-    outline: 2px dashed var(--surface-3);
-    outline-offset: -2px;
-  }
-`;
-//# sourceMappingURL=tickled-styles.js.map

package/dist/interaction/tickled-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tickled-styles.js","sourceRoot":"","sources":["../../src/interaction/tickled-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;CAI/B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDnC,CAAC"}

package/dist/interaction/tree-keyboard-controller.d.ts

@@ -1,30 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { TickledController, TickledItem } from './tickled-controller.js';
-export type TreeKeyboardNavItemId = string;
-export type TreeKeyboardNavCallbacks = {
-    getItems: () => ReadonlyArray<TickledItem<TreeKeyboardNavItemId>>;
-    onExpand: (id: TreeKeyboardNavItemId) => void;
-    onCollapse: (id: TreeKeyboardNavItemId) => void;
-    onActivate: (id: TreeKeyboardNavItemId) => void;
-    onSelect?: (id: TreeKeyboardNavItemId) => void;
-    onEscape?: () => void;
-    isLeaf: (id: TreeKeyboardNavItemId) => boolean;
-    isExpanded: (id: TreeKeyboardNavItemId) => boolean;
-    getParentId?: (id: TreeKeyboardNavItemId) => TreeKeyboardNavItemId | undefined;
-};
-export type TreeKeyboardNavControllerConfig = {
-    callbacks: TreeKeyboardNavCallbacks;
-    disableKeyboardNavigation?: () => boolean;
-};
-export declare class TreeKeyboardNavController implements ReactiveController {
-    #private;
-    private host;
-    private tickled;
-    private callbacks;
-    private disableKeyboardNavigation;
-    constructor(host: ReactiveControllerHost, tickled: TickledController<TreeKeyboardNavItemId>, config: TreeKeyboardNavControllerConfig);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-}
-//# sourceMappingURL=tree-keyboard-controller.d.ts.map

package/dist/interaction/tree-keyboard-controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree-keyboard-controller.d.ts","sourceRoot":"","sources":["../../src/interaction/tree-keyboard-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,MAAM,aAAa,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAClE,QAAQ,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,OAAO,CAAC;IAC/C,UAAU,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,OAAO,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,qBAAqB,KAAK,qBAAqB,GAAG,SAAS,CAAC;CAChF,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,SAAS,EAAE,wBAAwB,CAAC;IACpC,yBAAyB,CAAC,EAAE,MAAM,OAAO,CAAC;CAC3C,CAAC;AAEF,qBAAa,yBAA0B,YAAW,kBAAkB;;IAClE,OAAO,CAAC,IAAI,CAAyB;IACrC,OAAO,CAAC,OAAO,CAA2C;IAC1D,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,yBAAyB,CAAgB;gBAErC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,+BAA+B;IAQpI,aAAa,IAAI,IAAI;IAErB,gBAAgB,IAAI,IAAI;IAExB,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAqC1C;CA8DH"}

package/dist/interaction/tree-keyboard-controller.js

@@ -1,105 +0,0 @@
-export class TreeKeyboardNavController {
-    constructor(host, tickled, config) {
-        this.handleKeyDown = (event) => {
-            if (this.disableKeyboardNavigation()) {
-                return;
-            }
-            const { key } = event;
-            if ([`ArrowDown`, `ArrowUp`, `ArrowLeft`, `ArrowRight`, `Enter`, `Escape`].includes(key)) {
-                this.tickled.setInputMode(`keyboard`);
-            }
-            switch (key) {
-                case `ArrowDown`:
-                    event.preventDefault();
-                    this.#handleArrowDown();
-                    break;
-                case `ArrowUp`:
-                    event.preventDefault();
-                    this.#handleArrowUp();
-                    break;
-                case `ArrowRight`:
-                    event.preventDefault();
-                    this.#handleArrowRight();
-                    break;
-                case `ArrowLeft`:
-                    event.preventDefault();
-                    this.#handleArrowLeft();
-                    break;
-                case `Enter`:
-                    event.preventDefault();
-                    this.#handleEnter();
-                    break;
-                case `Escape`:
-                    event.preventDefault();
-                    this.callbacks.onEscape?.();
-                    break;
-            }
-        };
-        this.host = host;
-        this.tickled = tickled;
-        this.callbacks = config.callbacks;
-        this.disableKeyboardNavigation = config.disableKeyboardNavigation ?? (() => false);
-        host.addController(this);
-    }
-    hostConnected() { }
-    hostDisconnected() { }
-    #handleArrowDown() {
-        this.tickled.handleKeyboardNavigation(`next`);
-    }
-    #handleArrowUp() {
-        this.tickled.handleKeyboardNavigation(`previous`);
-    }
-    #handleArrowRight() {
-        const currentId = this.tickled.tickledId;
-        if (!currentId)
-            return;
-        if (this.callbacks.isLeaf(currentId)) {
-            return;
-        }
-        if (!this.callbacks.isExpanded(currentId)) {
-            this.callbacks.onExpand(currentId);
-            this.tickled.setTickled(currentId);
-        }
-        else {
-            const items = this.callbacks.getItems();
-            const currentIdx = items.findIndex(item => item.id === currentId);
-            if (currentIdx !== -1 && currentIdx + 1 < items.length) {
-                const nextItem = items[currentIdx + 1];
-                if (nextItem.enabled !== false) {
-                    this.tickled.setTickled(nextItem.id);
-                }
-            }
-        }
-    }
-    #handleArrowLeft() {
-        const currentId = this.tickled.tickledId;
-        if (!currentId)
-            return;
-        if (this.callbacks.isLeaf(currentId)) {
-            const parentId = this.callbacks.getParentId?.(currentId);
-            if (parentId) {
-                this.tickled.setTickled(parentId);
-                if (this.callbacks.isExpanded(parentId)) {
-                    this.callbacks.onCollapse(parentId);
-                }
-            }
-        }
-        else if (this.callbacks.isExpanded(currentId)) {
-            this.callbacks.onCollapse(currentId);
-        }
-        else {
-            const parentId = this.callbacks.getParentId?.(currentId);
-            if (parentId) {
-                this.tickled.setTickled(parentId);
-            }
-        }
-    }
-    #handleEnter() {
-        const currentId = this.tickled.tickledId;
-        if (!currentId)
-            return;
-        this.callbacks.onActivate(currentId);
-        this.callbacks.onSelect?.(currentId);
-    }
-}
-//# sourceMappingURL=tree-keyboard-controller.js.map

package/dist/interaction/tree-keyboard-controller.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree-keyboard-controller.js","sourceRoot":"","sources":["../../src/interaction/tree-keyboard-controller.ts"],"names":[],"mappings":"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"}

package/dist/keyboard.d.ts

@@ -1,16 +0,0 @@
-/**
- * Keyboard interaction constants
- */
-export declare const KEY_STEP_DIVISOR = 10;
-/**
- * Resolve the effective keyboard nudge step for a single numeric axis.
- *
- * Priority: stops (quantised grid) > explicit step > percentage of range.
- *
- * @param range        max - min for the axis
- * @param stops        number of quantised divisions (undefined or ≤1 = ignored)
- * @param step         explicit absolute step size (undefined = ignored)
- * @param defaultFraction  fraction of range used when neither stops nor step is set (default 0.1 = 10%)
- */
-export declare function resolveStep(range: number, stops: number | undefined, step: number | undefined, defaultFraction?: number): number;
-//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,eAAe,SAAM,GACpB,MAAM,CAIR"}

package/dist/keyboard.js

@@ -1,22 +0,0 @@
-/**
- * Keyboard interaction constants
- */
-export const KEY_STEP_DIVISOR = 10;
-/**
- * Resolve the effective keyboard nudge step for a single numeric axis.
- *
- * Priority: stops (quantised grid) > explicit step > percentage of range.
- *
- * @param range        max - min for the axis
- * @param stops        number of quantised divisions (undefined or ≤1 = ignored)
- * @param step         explicit absolute step size (undefined = ignored)
- * @param defaultFraction  fraction of range used when neither stops nor step is set (default 0.1 = 10%)
- */
-export function resolveStep(range, stops, step, defaultFraction = 0.1) {
-    if (stops !== undefined && stops > 1)
-        return range / stops;
-    if (step !== undefined)
-        return step;
-    return range * defaultFraction;
-}
-//# sourceMappingURL=keyboard.js.map

package/dist/keyboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAEnC;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,KAAa,EACb,KAAyB,EACzB,IAAwB,EACxB,eAAe,GAAG,GAAG;IAErB,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,KAAK,GAAG,KAAK,CAAC;IAC3D,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,KAAK,GAAG,eAAe,CAAC;AACjC,CAAC"}

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

@@ -1,2 +0,0 @@
-export * from './labelled-radial-input.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/labelled-radial-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/labelled-radial-input/index.js

@@ -1,2 +0,0 @@
-export * from './labelled-radial-input.js';
-//# sourceMappingURL=index.js.map

package/dist/labelled-radial-input/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/labelled-radial-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

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

@@ -1,77 +0,0 @@
-/**
- * <ixfx-labelled-radial-input> — labelled radial input combining ixfx-editable-number and ixfx-radial-input.
- *
- * Layout is driven by container queries on the component's own aspect ratio (width / height):
- *   - width / height >= 1.5 (wide) → horizontal layout (label to the left of dial)
- *   - width / height < 1.5 (tall/square) → vertical layout (label above dial)
- *
- * Mini mode: hides ixfx-editable-number, shows only the dial with tooltip forced on.
- *   Triggered when width < --mini-width-threshold (default 120px)
- *                 OR height < --mini-height-threshold (default 45px).
- *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).
- *
- * Override layout entirely with --flow: row | column.
- *
- * CSS variables (passes through to ixfx-radial-input):
- *   --dial-border-width, --dial-border-color, --dial-fill, --radius
- *   --marker-color, --marker-thickness, --marker-length, --marker-offset
- *   --marker-border-width, --marker-border-color
- *   --midpoint-color, --midpoint-thickness, --midpoint-length, --midpoint-offset
- *   --lane-width, --lane-color, --lane-border-width, --lane-offset, --lane-dasharray
- *   --wedge-fill, --wedge-fill-opacity, --wedge-border-width, --wedge-border-color
- *
- * Properties:
- *   label                   Label text content
- *   min / max / value / step Range bounds and current value
- *   drag-sensitivity        Steps per pixel of drag (default: 1)
- *   precision               Decimal places (default: 0)
- *   radius                  Dial size, 10-50 range (default: 45)
- *   flatten                 How much circle to hide, 0-1 (default: 0.3)
- *   markerStyle             'needle' | 'dot' | 'none' (default: 'needle')
- *   wedge                   Show filled wedge sector (default: false)
- *   valueMode               'range' | 'bipolar' | 'unipolar' (default: 'range')
- *   aspectRatioThreshold    Width/height ratio to trigger horizontal layout (default: 1.5)
- *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)
- *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)
- *   tooltip                 Boolean — show dial tooltip
- *   flip                    Boolean — place label after dial (bottom in vertical, right in horizontal)
- *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'
- *   formatter               Function (value: string) => string — formats value for display
- *
- * Events:
- *   change — CustomEvent<{ value: string }>, bubbles + composed
- *            Fired when value changes via dial or editable-number commit
- *   input  — CustomEvent<{ value: number }>, bubbles + composed
- *            Fired on every dial interaction
- */
-import type { CSSResultGroup } from 'lit';
-import type { MarkerStyle, ValueMode } from '../radial-input/types.js';
-import { nothing } from 'lit';
-import { LabelledInputBase } from '../mixins/labelled-input-base.js';
-import '../radial-input/radial-input.js';
-export declare class LabelledRadialInput extends LabelledInputBase {
-    readonly inputSelector = "ixfx-radial-input";
-    max: number;
-    step: number;
-    radius: number;
-    flatten: number;
-    markerStyle: MarkerStyle;
-    wedge: boolean;
-    valueMode: ValueMode;
-    tooltip: boolean;
-    flip: boolean;
-    aspectRatioThreshold: number;
-    private _isWide;
-    private _getEffectivePrecision;
-    protected _handleResize(entries: ResizeObserverEntry[]): void;
-    protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
-    render(): import("lit").TemplateResult<1>;
-    private _getTooltipValue;
-    static styles: CSSResultGroup;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'ixfx-labelled-radial-input': LabelledRadialInput;
-    }
-}
-//# sourceMappingURL=labelled-radial-input.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"labelled-radial-input.d.ts","sourceRoot":"","sources":["../../src/labelled-radial-input/labelled-radial-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,iBAAiB;IACxD,QAAQ,CAAC,aAAa,uBAAuB;IAGpC,GAAG,SAAO;IACV,IAAI,SAAK;IAEU,MAAM,SAAM;IACZ,OAAO,SAAO;IACa,WAAW,EAAE,WAAW,CAAY;IAC9D,KAAK,UAAS;IACU,SAAS,EAAE,SAAS,CAAW;IACvD,OAAO,UAAS;IAChB,IAAI,UAAS;IAEuB,oBAAoB,SAAO;IAEnF,OAAO,CAAC,OAAO,CAAS;IAIjC,OAAO,CAAC,sBAAsB;cAeX,aAAa,CAAC,OAAO,EAAE,mBAAmB,EAAE,GAAG,IAAI;cAMnD,qBAAqB;IAyB/B,MAAM;IA4Bf,OAAO,CAAC,gBAAgB;IAYxB,MAAM,CAAC,MAAM,EAAE,cAAc,CAuE3B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,mBAAmB,CAAC;KACnD;CACF"}

package/dist/labelled-radial-input/labelled-radial-input.js

@@ -1,214 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { LabelledInputBase } from '../mixins/labelled-input-base.js';
-import '../radial-input/radial-input.js';
-let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
-    constructor() {
-        super(...arguments);
-        this.inputSelector = `ixfx-radial-input`;
-        // Override LabelledInputBase defaults (max=1, step=0.01) to match ixfx-radial-input defaults
-        this.max = 100;
-        this.step = 1;
-        this.radius = 45;
-        this.flatten = 0.3;
-        this.markerStyle = `needle`;
-        this.wedge = false;
-        this.valueMode = `range`;
-        this.tooltip = false;
-        this.flip = false;
-        this.aspectRatioThreshold = 1.5;
-        this._isWide = false;
-    }
-    // Returns effective precision: uses explicit value if set, otherwise computes based on step or range.
-    // Prefers step-derived precision, falls back to range-based heuristic.
-    _getEffectivePrecision() {
-        if (this.hasAttribute(`precision`)) {
-            return this.precision;
-        }
-        // If step is set, derive precision from it (e.g., step=0.5 → precision=1, step=1 → precision=0)
-        if (this.step !== undefined) {
-            const stepStr = String(this.step);
-            const decimalPart = stepStr.split(`.`)[1];
-            return decimalPart ? decimalPart.length : 0;
-        }
-        // Fallback: range > 10 → precision 0 (integers), range <= 10 → precision 2
-        const range = this.max - this.min;
-        return range > 10 ? 0 : 2;
-    }
-    _handleResize(entries) {
-        super._handleResize(entries);
-        const { width, height } = entries[0].contentRect;
-        this._isWide = height > 0 && (width / height) >= this.aspectRatioThreshold;
-    }
-    _renderEditableNumber() {
-        if (this._isMini) {
-            return nothing;
-        }
-        const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;
-        return html `
-      <ixfx-editable-number
-        class="number"
-        mode="label"
-        no-drag
-        .value=${String(this.value)}
-        .min=${this.min}
-        .max=${this.max}
-        .step=${this.step}
-        .dragSensitivity=${this.dragSensitivity}
-        .precision=${this._getEffectivePrecision()}
-        .displayText=${this.label}
-        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}
-        .formatter=${this._formatter}
-        style="--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;"
-        @change=${this._handleNumberChange}
-      ></ixfx-editable-number>
-    `;
-    }
-    render() {
-        const showTooltip = this.tooltip || this._isMini;
-        const tooltipValue = this._getTooltipValue();
-        return html `
-      <div class="wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}">
-        ${this._renderEditableNumber()}
-        <ixfx-radial-input
-          class="dial"
-          .value=${this.value}
-          .min=${this.min}
-          .max=${this.max}
-          .step=${this.step}
-          .radius=${this.radius}
-          .flatten=${this.flatten}
-          .markerStyle=${this.markerStyle}
-          ?wedge=${this.wedge}
-          .valueMode=${this.valueMode}
-          data-tooltip-anchor="top"
-          data-tooltip=${tooltipValue}
-          data-tooltip-live=${showTooltip ? `input` : nothing}
-          @input=${this._handleSliderInput}
-          @change=${this._handleInputChange}
-        ></ixfx-radial-input>
-      </div>
-    `;
-    }
-    _getTooltipValue() {
-        const range = this.max - this.min;
-        const numValue = Number(this.value);
-        if (this.min === 0 && this.max === 1) {
-            return `${Math.round(numValue * 100)}%`;
-        }
-        if (range > 10) {
-            return String(Math.floor(numValue));
-        }
-        return numValue.toFixed(2);
-    }
-    static { this.styles = css `
-  :host {
-    display: block;
-    min-height: var(--min-height, 60px);
-    min-width: var(--min-width, 60px);
-    width: var(--width, auto);
-    height: var(--height, auto);
-  }
-
-  :host(:focus-within) {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-
-    .wrap {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      flex-direction: var(--flow, column);
-    }
-
-    ixfx-editable-number {
-      flex-shrink: 0;
-      --label-align: center;
-      width: 100%;
-    }
-
-  ixfx-radial-input {
-    flex-shrink: 1;
-    min-height: 0;
-    min-width: 0;
-    max-width: 100%;
-    --radial-input-svg-focus-outline: none;
-    --radial-input-svg-focus-outline-offset: 0;
-    --prominence-tickled-opacity: 1;
-    --prominence-tickled-saturate: 1;
-  }
-
-    /* Wide layout (aspect ratio >= threshold): label to the left of dial */
-    .wrap.wide {
-      flex-direction: var(--flow, row);
-      justify-content: space-evenly;
-    }
-
-    .wrap.wide ixfx-editable-number {
-      --label-align: left;
-      width: var(--label-width, 5ch);
-    }
-
-    .wrap.wide ixfx-radial-input {
-      height: auto;
-      max-width: none;
-    }
-
-    /* Flip: label after dial (bottom in column, right in row) */
-    .wrap.flip ixfx-editable-number {
-      order: 1;
-    }
-
-    /* Mini mode: dial fills the component */
-    .wrap.mini {
-      justify-content: center;
-      gap: 0;
-    }
-
-    .wrap.mini ixfx-radial-input {
-      width: 100%;
-      height: 100%;
-    }
-  `; }
-};
-__decorate([
-    property({ type: Number })
-], LabelledRadialInput.prototype, "radius", void 0);
-__decorate([
-    property({ type: Number })
-], LabelledRadialInput.prototype, "flatten", void 0);
-__decorate([
-    property({ type: String, attribute: `marker-style` })
-], LabelledRadialInput.prototype, "markerStyle", void 0);
-__decorate([
-    property({ type: Boolean })
-], LabelledRadialInput.prototype, "wedge", void 0);
-__decorate([
-    property({ type: String, attribute: `value-mode` })
-], LabelledRadialInput.prototype, "valueMode", void 0);
-__decorate([
-    property({ type: Boolean })
-], LabelledRadialInput.prototype, "tooltip", void 0);
-__decorate([
-    property({ type: Boolean })
-], LabelledRadialInput.prototype, "flip", void 0);
-__decorate([
-    property({ type: Number, attribute: `aspect-ratio-threshold` })
-], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
-__decorate([
-    state()
-], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([
-    customElement(`ixfx-labelled-radial-input`)
-], LabelledRadialInput);
-export { LabelledRadialInput };
-//# sourceMappingURL=labelled-radial-input.js.map

package/dist/labelled-radial-input/labelled-radial-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"labelled-radial-input.js","sourceRoot":"","sources":["../../src/labelled-radial-input/labelled-radial-input.ts"],"names":[],"mappings":"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"}

package/dist/labelled-range-input/index.d.ts

@@ -1,2 +0,0 @@
-export * from './labelled-range-input.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/labelled-range-input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/labelled-range-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/labelled-range-input/index.js

@@ -1,2 +0,0 @@
-export * from './labelled-range-input.js';
-//# sourceMappingURL=index.js.map

package/dist/labelled-range-input/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/labelled-range-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}