@ixfx/components 0.2.2 → 0.2.4

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

@@ -0,0 +1,77 @@
+/**
+ * <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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,214 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

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

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

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

@@ -0,0 +1,80 @@
+/**
+ * <ixfx-labelled-range-input> — labelled range input combining ixfx-editable-number and ixfx-range-input.
+ *
+ * Layout is driven by container queries on the component's own height:
+ *   - height >= 80px → vertical (label above slider) — the default with height: 100px
+ *   - height <  80px → horizontal (label beside slider)
+ *
+ * Mini mode: hides ixfx-editable-number, shows only the slider 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 (bypasses the container query).
+ * Override height with --height (e.g. --height: 100% to fill a constrained container).
+ * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).
+ *
+ * CSS variables (passes through to child components):
+ *
+ * From ixfx-editable-number:
+ *   --label-font-size   (default: var(--text-m))
+ *   --label-font-family (default: var(--font-family))
+ *   --label-color       (default: var(--surface-2-text))
+ *   --label-muted-color (default: var(--surface-muted-text))
+ *   --label-padding     (default: var(--space-xs) var(--space-s))
+ *   --label-radius      (default: var(--radius-s))
+ *   --label-align       (default: center)
+ *
+ * From ixfx-range-input:
+ *   --track-thickness          (default: 1.5em)
+ *   --thumb-color             (default: var(--surface-2-text))
+ *   --thumb-color-active      (default: var(--accent))
+ *   --thumb-size              (default: var(--track-thickness))
+ *   --thumb-thickness         (default: 2em)
+ *   --thumb-radius            (default: 0)
+ *   --thumb-border            (default: none)
+ *   --thumb-shadow            (default: none)
+ *   --background-track        (default: var(--surface-4))
+ *   --background-track-hover  (default: --background-track)
+ *   --background-track-value  (default: var(--surface-6))
+ *   --background-track-value-hover (default: var(--accent))
+ *   --background-track-value-active (default: var(--accent))
+ *
+ * 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)
+ *   orientation             'horizontal' | 'vertical' (slider orientation)
+ *   tooltip                 Boolean — show slider tooltip
+ *   tooltip-orientation     'top' | 'right'
+ *   switch-height           Height threshold for vertical↔horizontal switch (default: 80)
+ *   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)
+ *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'
+ *   formatter               Function (value: string) => string — formats value for display and tooltip
+ *
+ * Events:
+ *   change — CustomEvent<{ value: string }>, bubbles + composed
+ *            Fired when value changes via slider or editable-number commit
+ *   input  — CustomEvent<{ value: number }>, bubbles + composed
+ *            Fired on every slider move
+ */
+import type { CSSResultGroup } from 'lit';
+import { LabelledInputBase } from '../mixins/labelled-input-base.js';
+export declare class LabelledRangeInput extends LabelledInputBase {
+    readonly inputSelector = "ixfx-range-input";
+    orientation: `horizontal` | `vertical`;
+    tooltip: boolean;
+    noTooltip: boolean;
+    tooltipOrientation: `top` | `right`;
+    switchHeight: number;
+    render(): import("lit").TemplateResult<1>;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-labelled-range-input': LabelledRangeInput;
+    }
+}
+//# sourceMappingURL=labelled-range-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labelled-range-input.d.ts","sourceRoot":"","sources":["../../src/labelled-range-input/labelled-range-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,qBACa,kBAAmB,SAAQ,iBAAiB;IACvD,QAAQ,CAAC,aAAa,sBAAsB;IAEhB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACrD,OAAO,UAAS;IACS,SAAS,UAAS;IACV,kBAAkB,EAAE,KAAK,GAAG,OAAO,CAAS;IAElD,YAAY,SAAM;IAEjE,MAAM;IA0Bf,MAAM,CAAC,MAAM,EAAE,cAAc,CAwE3B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,kBAAkB,CAAC;KACjD;CACF"}

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

@@ -0,0 +1,137 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { LabelledInputBase } from '../mixins/labelled-input-base.js';
+let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
+    constructor() {
+        super(...arguments);
+        this.inputSelector = `ixfx-range-input`;
+        this.orientation = `horizontal`;
+        this.tooltip = false;
+        this.noTooltip = false;
+        this.tooltipOrientation = `top`;
+        this.switchHeight = 80;
+    }
+    render() {
+        const sliderLabelFormatter = this._formatter
+            ? (raw) => this._formatter(String(raw))
+            : undefined;
+        const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);
+        return html `
+      <div class="wrap ${this._isMini ? `mini` : ``}">
+        ${super._renderEditableNumber()}
+        <ixfx-range-input
+          class="slider"
+          .value=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          .step=${this.step}
+          .orientation=${this.orientation}
+          ?tooltip=${showTooltip}
+          .tooltipOrientation=${this.tooltipOrientation}
+          .labelFormatter=${sliderLabelFormatter}
+          @input=${this._handleSliderInput}
+          @change=${this._handleInputChange}
+        ></ixfx-range-input>
+      </div>
+    `;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      container-type: size;
+      min-height: var(--min-height, 20px);
+      min-width: var(--min-width, 50px);
+      width: var(--width, auto);
+      height: var(--height, 50px);
+    }
+
+    .wrap {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      gap: var(--space-s, 4px);
+      align-items: center;
+    }
+
+    ixfx-editable-number {
+      flex-shrink: 0;
+    }
+
+    ixfx-range-input {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* Default (compact): horizontal — label beside slider */
+    .wrap {
+      flex-direction: var(--flow, row);
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    ixfx-editable-number {
+      --label-align: left;
+      width: var(--label-width, 5ch);
+      --label-min-width: var(--label-width, 5ch);
+      /* Block fill/background variables from reaching editable-number */
+      --fill-color: initial;
+      --fill-opacity: initial;
+      --fill-image: initial;
+    }
+
+    /* Vertically-stacked layout: when container has enough height */
+    @container (height >= 45px) {
+      .wrap {
+        flex-direction: var(--flow, column);
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      ixfx-editable-number {
+        --label-align: center;
+        align-self: center;
+        width: 100%;
+      }
+
+      ixfx-range-input {
+        width: 100%;
+      }
+    }
+
+    /* Mini mode: slider fills the full component */
+    .wrap.mini {
+      gap: 0;
+    }
+
+    .wrap.mini ixfx-range-input {
+      width: 100%;
+      height: 100%;
+    }
+  `; }
+};
+__decorate([
+    property({ type: String })
+], LabelledRangeInput.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean })
+], LabelledRangeInput.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `no-tooltip` })
+], LabelledRangeInput.prototype, "noTooltip", void 0);
+__decorate([
+    property({ type: String, attribute: `tooltip-orientation` })
+], LabelledRangeInput.prototype, "tooltipOrientation", void 0);
+__decorate([
+    property({ type: Number, attribute: `switch-height` })
+], LabelledRangeInput.prototype, "switchHeight", void 0);
+LabelledRangeInput = __decorate([
+    customElement(`ixfx-labelled-range-input`)
+], LabelledRangeInput);
+export { LabelledRangeInput };
+//# sourceMappingURL=labelled-range-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labelled-range-input.js","sourceRoot":"","sources":["../../src/labelled-range-input/labelled-range-input.ts"],"names":[],"mappings":";;;;;;AA+DA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAG9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,iBAAiB;IAAlD;;QACI,kBAAa,GAAG,kBAAkB,CAAC;QAEhB,gBAAW,GAA8B,YAAY,CAAC;QACrD,YAAO,GAAG,KAAK,CAAC;QACS,cAAS,GAAG,KAAK,CAAC;QACV,uBAAkB,GAAoB,KAAK,CAAC;QAElD,iBAAY,GAAG,EAAE,CAAC;IAqG5E,CAAC;IAnGU,MAAM;QACb,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU;YAC1C,CAAC,CAAC,CAAC,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,UAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAChD,CAAC,CAAC,SAAS,CAAC;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtE,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UACzC,KAAK,CAAC,qBAAqB,EAAE;;;mBAGpB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;iBACR,IAAI,CAAC,GAAG;kBACP,IAAI,CAAC,IAAI;yBACF,IAAI,CAAC,WAAW;qBACpB,WAAW;gCACA,IAAI,CAAC,kBAAkB;4BAC3B,oBAAoB;mBAC7B,IAAI,CAAC,kBAAkB;oBACtB,IAAI,CAAC,kBAAkB;;;KAGtC,CAAC;IACJ,CAAC;aAEM,WAAM,GAAmB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwElC,AAxEY,CAwEX;;AAzG0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAuD;AACrD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiB;AACS;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;qDAAmB;AACV;IAA7D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;8DAA6C;AAElD;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;wDAAmB;AAR/D,kBAAkB;IAD9B,aAAa,CAAC,2BAA2B,CAAC;GAC9B,kBAAkB,CA6G9B"}

package/dist/led.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+export declare class LedElement extends LitElement {
+    #private;
+    value: number;
+    lit: boolean;
+    color: string;
+    blinking: boolean;
+    rate: number;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-led": LedElement;
+    }
+}
+//# sourceMappingURL=led.d.ts.map

package/dist/led.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"led.d.ts","sourceRoot":"","sources":["../src/led.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;;IAExC,KAAK,SAAK;IAGV,GAAG,UAAS;IAGZ,KAAK,SAAwB;IAG7B,QAAQ,UAAS;IAGjB,IAAI,SAAO;IAIX,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAelD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,oBAAoB;IAwBpB,SAAS,CAAC,MAAM;IAIhB,MAAM,CAAC,MAAM,0BAkBX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF"}

package/dist/led.js

@@ -0,0 +1,100 @@
+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, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let LedElement = class LedElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.lit = false;
+        this.color = `oklch(50% 0.15 25)`;
+        this.blinking = false;
+        this.rate = 500;
+    }
+    #blinkInterval;
+    willUpdate(changedProperties) {
+        if (changedProperties.has(`value`)) {
+            this.style.setProperty(`--value`, String(this.value));
+        }
+        if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {
+            this.#updateBlinking();
+        }
+        if (changedProperties.has(`rate`)) {
+            const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;
+            this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has(`lit`)) {
+            this.value = this.lit ? 1 : 0;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#stopBlinking();
+    }
+    #updateBlinking() {
+        if (this.blinking && this.rate > 0) {
+            this.#stopBlinking();
+            this.#blinkInterval = window.setInterval(() => {
+                this.value = this.value === 0 ? 1 : 0;
+            }, this.rate);
+        }
+        else {
+            this.#stopBlinking();
+            this.value = 0;
+        }
+    }
+    #stopBlinking() {
+        if (this.#blinkInterval !== undefined) {
+            clearInterval(this.#blinkInterval);
+            this.#blinkInterval = undefined;
+        }
+    }
+    render() {
+        return html `<div part="circle"></div>`;
+    }
+    static { this.styles = css `
+    :host {
+      --_size: var(--size, 1ex);
+      display: inline-block;
+      min-width: 1ex;
+      min-height: 1ex;
+      width: var(--_size);
+      height: var(--_size);
+      vertical-align: middle;
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));
+      transition: background var(--transition-duration, 150ms) ease-out;
+    }
+  `; }
+};
+__decorate([
+    property({ type: Number })
+], LedElement.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `lit`, reflect: true })
+], LedElement.prototype, "lit", void 0);
+__decorate([
+    property({ type: String })
+], LedElement.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, attribute: `blinking`, reflect: true })
+], LedElement.prototype, "blinking", void 0);
+__decorate([
+    property({ type: Number, attribute: `rate` })
+], LedElement.prototype, "rate", void 0);
+LedElement = __decorate([
+    customElement(`ixfx-led`)
+], LedElement);
+export { LedElement };
+//# sourceMappingURL=led.js.map