@ixfx/components 0.5.20 → 0.6.0

package/dist/{labelled-input-base-ORb1rGq6.d.ts → labelled-input-base-Dp_9KP0G.d.ts}

@@ -1,5 +1,4 @@
 import { LitElement, nothing } from "lit";
-
 //#region src/mixins/labelled-input-base.d.ts
 declare abstract class LabelledInputBase extends LitElement {
   label: string;
@@ -34,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
     value: number;
   }>) => void;
   protected _syncValue(v: number): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   updated(changedProperties: Map<string, unknown>): void;
 }
 //#endregion
 export { LabelledInputBase as t };
-//# sourceMappingURL=labelled-input-base-ORb1rGq6.d.ts.map
+//# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map

package/dist/labelled-input-base-Dp_9KP0G.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelled-input-base-Dp_9KP0G.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,uCAAqB,2BAAA;EAuBtB,QAAQ,mBAAmB"}

package/dist/{labelled-input-base-9K_w3oLj.js → labelled-input-base-hoKGwyKT.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-DdjvVHS-.js";
+import { t as __decorate } from "./decorate-VRK8rslU.js";
 import { LitElement, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/mixins/labelled-input-util.ts
@@ -152,4 +152,4 @@ __decorate([state()], LabelledInputBase.prototype, "_formatter", void 0);
 //#endregion
 export { LabelledInputBase as t };
 
-//# sourceMappingURL=labelled-input-base-9K_w3oLj.js.map
+//# sourceMappingURL=labelled-input-base-hoKGwyKT.js.map

package/dist/{labelled-input-base-9K_w3oLj.js.map → labelled-input-base-hoKGwyKT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-input-base-9K_w3oLj.js","names":[],"sources":["../src/mixins/labelled-input-util.ts","../src/mixins/labelled-input-base.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nexport function applyValue(\n  el: Element | null,\n  value: number,\n): void {\n  if (el == null) {\n    return;\n  }\n  (el as any).value = value;\n}\n","import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { applyValue } from './labelled-input-util.js';\n\nexport abstract class LabelledInputBase extends LitElement {\n  @property() label = ``;\n\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1;\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) step = 0.01;\n  @property({ type: Number }) precision = 0;\n  @property({ type: Number, attribute: `drag-sensitivity` }) dragSensitivity = 1;\n\n  @property({ type: Number, attribute: `mini-width-threshold` }) miniWidthThreshold = 120;\n  @property({ type: Number, attribute: `mini-height-threshold` }) miniHeightThreshold = 45;\n\n  @property({ attribute: `display-text-logic` }) displayTextLogic: `hidden` | `show` | `override` | `transient` = `transient`;\n\n  @state() protected _isMini = false;\n  @state() protected _isDragging = false;\n  @state() protected _formatter?: (value: string) => string;\n\n  private _debounceTimer: number | undefined = undefined;\n  private _resizeObserver?: ResizeObserver;\n\n  abstract readonly inputSelector: string;\n\n  get formatter(): (value: string) => string {\n    return this._formatter ?? ((v: string) => v);\n  }\n\n  set formatter(value: ((value: string) => string) | undefined) {\n    this._formatter = value;\n  }\n\n  protected get hasCustomFormatter(): boolean {\n    return this._formatter !== undefined;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(entries => this._handleResize(entries));\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  protected _handleResize(entries: ResizeObserverEntry[]): void {\n    const { width, height } = entries[0].contentRect;\n    const miniOverride = getComputedStyle(this).getPropertyValue(`--mini`).trim();\n    if (miniOverride === `1`) {\n      this._isMini = true;\n      return;\n    }\n    if (miniOverride === `0`) {\n      this._isMini = false;\n      return;\n    }\n    this._isMini = width < this.miniWidthThreshold || height < this.miniHeightThreshold;\n  }\n\n  protected _handleNumberChange = (e: CustomEvent<{ value: string }>): void => {\n    const newValue = Number.parseFloat(e.detail.value);\n    this.value = newValue;\n    this._syncValue(newValue);\n    this.dispatchEvent(new CustomEvent(`change`, {\n      detail: { value: e.detail.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _handleInputChange = (e: CustomEvent<{ value: number }>): void => {\n    this.value = e.detail.value;\n    clearTimeout(this._debounceTimer);\n    this._debounceTimer = window.setTimeout(() => {\n      this._isDragging = false;\n    }, 300);\n    this.dispatchEvent(new CustomEvent(`change`, {\n      detail: { value: String(e.detail.value) },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _handleSliderInput = (e: CustomEvent<{ value: number }>): void => {\n    console.log(`[LABELLED-INPUT] _handleSliderInput called`, { value: e.detail.value, composedPath: e.composedPath() });\n    this.value = e.detail.value;\n    this._isDragging = true;\n    clearTimeout(this._debounceTimer);\n    this.dispatchEvent(new CustomEvent(`input`, {\n      detail: { value: e.detail.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _syncValue(v: number): void {\n    const input = this.renderRoot?.querySelector(this.inputSelector);\n    if (input) {\n      applyValue(input, v);\n    }\n    const editableNumber = this.renderRoot?.querySelector(`ixfx-editable-number`);\n    if (editableNumber) {\n      applyValue(editableNumber, v);\n      (editableNumber as any)._requestDisplayUpdate?.();\n    }\n  }\n\n  protected _renderEditableNumber() {\n    if (this._isMini) {\n      return nothing;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has(`value`)) {\n      this._syncValue(this.value);\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"labelled-input-base-hoKGwyKT.js","names":[],"sources":["../src/mixins/labelled-input-util.ts","../src/mixins/labelled-input-base.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nexport function applyValue(\n  el: Element | null,\n  value: number,\n): void {\n  if (el == null) {\n    return;\n  }\n  (el as any).value = value;\n}\n","import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { applyValue } from './labelled-input-util.js';\n\nexport abstract class LabelledInputBase extends LitElement {\n  @property() label = ``;\n\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 1;\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) step = 0.01;\n  @property({ type: Number }) precision = 0;\n  @property({ type: Number, attribute: `drag-sensitivity` }) dragSensitivity = 1;\n\n  @property({ type: Number, attribute: `mini-width-threshold` }) miniWidthThreshold = 120;\n  @property({ type: Number, attribute: `mini-height-threshold` }) miniHeightThreshold = 45;\n\n  @property({ attribute: `display-text-logic` }) displayTextLogic: `hidden` | `show` | `override` | `transient` = `transient`;\n\n  @state() protected _isMini = false;\n  @state() protected _isDragging = false;\n  @state() protected _formatter?: (value: string) => string;\n\n  private _debounceTimer: number | undefined = undefined;\n  private _resizeObserver?: ResizeObserver;\n\n  abstract readonly inputSelector: string;\n\n  get formatter(): (value: string) => string {\n    return this._formatter ?? ((v: string) => v);\n  }\n\n  set formatter(value: ((value: string) => string) | undefined) {\n    this._formatter = value;\n  }\n\n  protected get hasCustomFormatter(): boolean {\n    return this._formatter !== undefined;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(entries => this._handleResize(entries));\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  protected _handleResize(entries: ResizeObserverEntry[]): void {\n    const { width, height } = entries[0].contentRect;\n    const miniOverride = getComputedStyle(this).getPropertyValue(`--mini`).trim();\n    if (miniOverride === `1`) {\n      this._isMini = true;\n      return;\n    }\n    if (miniOverride === `0`) {\n      this._isMini = false;\n      return;\n    }\n    this._isMini = width < this.miniWidthThreshold || height < this.miniHeightThreshold;\n  }\n\n  protected _handleNumberChange = (e: CustomEvent<{ value: string }>): void => {\n    const newValue = Number.parseFloat(e.detail.value);\n    this.value = newValue;\n    this._syncValue(newValue);\n    this.dispatchEvent(new CustomEvent(`change`, {\n      detail: { value: e.detail.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _handleInputChange = (e: CustomEvent<{ value: number }>): void => {\n    this.value = e.detail.value;\n    clearTimeout(this._debounceTimer);\n    this._debounceTimer = window.setTimeout(() => {\n      this._isDragging = false;\n    }, 300);\n    this.dispatchEvent(new CustomEvent(`change`, {\n      detail: { value: String(e.detail.value) },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _handleSliderInput = (e: CustomEvent<{ value: number }>): void => {\n    console.log(`[LABELLED-INPUT] _handleSliderInput called`, { value: e.detail.value, composedPath: e.composedPath() });\n    this.value = e.detail.value;\n    this._isDragging = true;\n    clearTimeout(this._debounceTimer);\n    this.dispatchEvent(new CustomEvent(`input`, {\n      detail: { value: e.detail.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  protected _syncValue(v: number): void {\n    const input = this.renderRoot?.querySelector(this.inputSelector);\n    if (input) {\n      applyValue(input, v);\n    }\n    const editableNumber = this.renderRoot?.querySelector(`ixfx-editable-number`);\n    if (editableNumber) {\n      applyValue(editableNumber, v);\n      (editableNumber as any)._requestDisplayUpdate?.();\n    }\n  }\n\n  protected _renderEditableNumber() {\n    if (this._isMini) {\n      return nothing;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has(`value`)) {\n      this._syncValue(this.value);\n    }\n  }\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
-import { t as LabelledInputBase } from "./labelled-input-base-ORb1rGq6.js";
-import { i as MarkerStyle, l as ValueMode } from "./radial-input-Dhu5ZGP5.js";
+import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
+import { i as MarkerStyle, l as ValueMode } from "./radial-input-DXMN55Nz.js";
 import { CSSResultGroup, nothing } from "lit";
-
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
 declare class LabelledRadialInput extends LabelledInputBase {
   readonly inputSelector = "ixfx-radial-input";
@@ -20,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;
@@ -29,7 +28,7 @@ declare global {
   interface HTMLElementTagNameMap {
     'ixfx-labelled-radial-input': LabelledRadialInput;
   }
-} //# sourceMappingURL=labelled-radial-input.d.ts.map
+}
 //#endregion
 export { LabelledRadialInput };
 //# sourceMappingURL=labelled-radial-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;;cA0Da,mBAAA,SAA4B,iBAAA;EAAA,SAC9B,aAAA;EAGA,GAAA;EACA,IAAA;EAEmB,MAAA;EACA,OAAA;EAC2B,WAAA,EAAa,WAAA;EACvC,KAAA;EACwB,SAAA,EAAW,SAAA;EACnC,OAAA;EACA,IAAA;EAEoC,oBAAA;;EAGpC,UAAA;EAAA,QAEZ,OAAA;EAAA,QAIT,sBAAA;EAAA,UAeW,aAAA,CAAc,OAAA,EAAS,mBAAA;EAAA,UAMvB,qBAAA,WAAqB,OAAA,iBAAA,cAAA;EA0B/B,MAAA,kBAAM,cAAA;EAAA,QA6BP,gBAAA;EAAA,OAYD,MAAA,EAAQ,cAAA;AAAA;AAAA,QA0ET,MAAA;EAAA,UACI,qBAAA;IACR,4BAAA,EAA8B,mBAAmB;EAAA;AAAA"}
+{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,uCAAqB,2BAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}

package/dist/labelled-radial-input.js

@@ -1,7 +1,6 @@
 import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { t as LabelledInputBase } from "./labelled-input-base-9K_w3oLj.js";
-import "./radial-input-C4f-2Bya.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
 import { css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/labelled-radial-input/labelled-radial-input.ts

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

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.js","names":["customElement"],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-radial-input> — labelled radial input combining ixfx-editable-number and ixfx-radial-input.\n *\n * Layout is driven by container queries on the component's own aspect ratio (width / height):\n *   - width / height >= 1.5 (wide) → horizontal layout (label to the left of dial)\n *   - width / height < 1.5 (tall/square) → vertical layout (label above dial)\n *\n * Mini mode: hides ixfx-editable-number, shows only the dial with tooltip forced on.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column.\n *\n * CSS variables (passes through to ixfx-radial-input):\n *   --dial-border-width, --dial-border-color, --dial-fill, --radius\n *   --marker-color, --marker-thickness, --marker-length, --marker-offset\n *   --marker-border-width, --marker-border-color\n *   --midpoint-color, --midpoint-thickness, --midpoint-length, --midpoint-offset\n *   --lane-width, --lane-color, --lane-border-width, --lane-offset, --lane-dasharray\n *   --wedge-fill, --wedge-fill-opacity, --wedge-border-width, --wedge-border-color\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   radius                  Dial size, 10-50 range (default: 45)\n *   flatten                 How much circle to hide, 0-1 (default: 0.3)\n *   markerStyle             'needle' | 'dot' | 'none' (default: 'needle')\n *   wedge                   Show filled wedge sector (default: false)\n *   valueMode               'range' | 'bipolar' | 'unipolar' (default: 'range')\n *   aspectRatioThreshold    Width/height ratio to trigger horizontal layout (default: 1.5)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   tooltip                 Boolean — show dial tooltip\n *   flip                    Boolean — place label after dial (bottom in vertical, right in horizontal)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display\n *   lighttouch              Boolean — passed through to the inner dial and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via dial or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every dial interaction\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { MarkerStyle, ValueMode } from '../radial-input/types.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../radial-input/radial-input.js';\n\n@customElement(`ixfx-labelled-radial-input`)\nexport class LabelledRadialInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-radial-input`;\n\n  // Override LabelledInputBase defaults (max=1, step=0.01) to match ixfx-radial-input defaults\n  override max = 100;\n  override step = 1;\n\n  @property({ type: Number }) radius = 45;\n  @property({ type: Number }) flatten = 0.3;\n  @property({ type: String, attribute: `marker-style` }) markerStyle: MarkerStyle = `needle`;\n  @property({ type: Boolean }) wedge = false;\n  @property({ type: String, attribute: `value-mode` }) valueMode: ValueMode = `range`;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: Boolean }) flip = false;\n\n  @property({ type: Number, attribute: `aspect-ratio-threshold` }) aspectRatioThreshold = 1.5;\n\n  /** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @state() private _isWide = false;\n\n  // Returns effective precision: uses explicit value if set, otherwise computes based on step or range.\n  // Prefers step-derived precision, falls back to range-based heuristic.\n  private _getEffectivePrecision(): number {\n    if (this.hasAttribute(`precision`)) {\n      return this.precision;\n    }\n    // If step is set, derive precision from it (e.g., step=0.5 → precision=1, step=1 → precision=0)\n    if (this.step !== undefined) {\n      const stepStr = String(this.step);\n      const decimalPart = stepStr.split(`.`)[1];\n      return decimalPart ? decimalPart.length : 0;\n    }\n    // Fallback: range > 10 → precision 0 (integers), range <= 10 → precision 2\n    const range = this.max - this.min;\n    return range > 10 ? 0 : 2;\n  }\n\n  protected override _handleResize(entries: ResizeObserverEntry[]): void {\n    super._handleResize(entries);\n    const { width, height } = entries[0].contentRect;\n    this._isWide = height > 0 && (width / height) >= this.aspectRatioThreshold;\n  }\n\n  protected override _renderEditableNumber() {\n    if (this._isMini) {\n      return nothing;\n    }\n    const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this._getEffectivePrecision()}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        style=\"--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;\"\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override render() {\n    const showTooltip = this.tooltip || this._isMini;\n    const tooltipValue = this._getTooltipValue();\n\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-radial-input\n          class=\"dial\"\n          ?lighttouch=${this.lighttouch}\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .radius=${this.radius}\n          .flatten=${this.flatten}\n          .markerStyle=${this.markerStyle}\n          ?wedge=${this.wedge}\n          .valueMode=${this.valueMode}\n          data-tooltip-anchor=\"top\"\n          data-tooltip=${tooltipValue}\n          data-tooltip-live=${showTooltip ? `input` : nothing}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-radial-input>\n      </div>\n    `;\n  }\n\n  private _getTooltipValue(): string {\n    const range = this.max - this.min;\n    const numValue = Number(this.value);\n    if (this.min === 0 && this.max === 1) {\n      return `${Math.round(numValue * 100)}%`;\n    }\n    if (range > 10) {\n      return String(Math.floor(numValue));\n    }\n    return numValue.toFixed(2);\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, css`\n    :host {\n    display: block;\n    min-height: var(--min-height, 60px);\n    min-width: var(--min-width, 60px);\n    width: var(--width, auto);\n    height: var(--height, auto);\n  }\n\n  :host(:focus-within) {\n    outline: 2px solid var(--accent);\n    outline-offset: 2px;\n  }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      flex-direction: var(--flow, column);\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n      --label-align: center;\n      width: 100%;\n    }\n\n  ixfx-radial-input {\n    flex-shrink: 1;\n    min-height: 0;\n    min-width: 0;\n    max-width: 100%;\n    --radial-input-svg-focus-outline: none;\n    --radial-input-svg-focus-outline-offset: 0;\n    --prominence-tickled-opacity: 1;\n    --prominence-tickled-saturate: 1;\n  }\n\n    /* Wide layout (aspect ratio >= threshold): label to the left of dial */\n    .wrap.wide {\n      flex-direction: var(--flow, row);\n      justify-content: space-evenly;\n    }\n\n    .wrap.wide ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n    }\n\n    .wrap.wide ixfx-radial-input {\n      height: auto;\n      max-width: none;\n    }\n\n    /* Flip: label after dial (bottom in column, right in row) */\n    .wrap.flip ixfx-editable-number {\n      order: 1;\n    }\n\n    /* Mini mode: dial fills the component */\n    .wrap.mini {\n      justify-content: center;\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-radial-input {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-radial-input': LabelledRadialInput;\n  }\n}\n"],"mappings":";;;;;;;AA0DO,IAAA,sBAAA,MAAM,4BAA4B,kBAAkB;;;uBAChC;aAGV;cACC;gBAEqB;iBACC;qBAC4C;eAC7C;mBACuC;iBACrC;cACH;8BAEoD;oBAG9C;iBAEf;;CAI3B,yBAAyC;EACvC,IAAI,KAAK,aAAa,WAAW,GAC/B,OAAO,KAAK;EAGd,IAAI,KAAK,SAAS,KAAA,GAAW;GAE3B,MAAM,cADU,OAAO,KAAK,IACF,EAAE,MAAM,GAAG,EAAE;GACvC,OAAO,cAAc,YAAY,SAAS;EAC5C;EAGA,OADc,KAAK,MAAM,KAAK,MACf,KAAK,IAAI;CAC1B;CAEA,cAAiC,SAAsC;EACrE,MAAM,cAAc,OAAO;EAC3B,MAAM,EAAE,OAAO,WAAW,QAAQ,GAAG;EACrC,KAAK,UAAU,SAAS,KAAM,QAAQ,UAAW,KAAK;CACxD;CAEA,wBAA2C;EACzC,IAAI,KAAK,SACP,OAAO;EAET,MAAM,gBAAgB,KAAK,IAAI,KAAK,OAAO,UAAU,GAAG,CAAC,IAAI;EAC7D,OAAO,IAAI;;;;;sBAKO,KAAK,WAAW;iBACrB,OAAO,KAAK,KAAK,EAAE;eACrB,KAAK,IAAI;eACT,KAAK,IAAI;gBACR,KAAK,KAAK;2BACC,KAAK,gBAAgB;qBAC3B,KAAK,uBAAuB,EAAE;uBAC5B,KAAK,MAAM;4BACN,KAAK,cAAc,WAAW,KAAK,iBAAiB;qBAC3D,KAAK,WAAW;uDACkB,cAAc;kBACnD,KAAK,oBAAoB;;;CAGzC;CAEA,SAAkB;EAChB,MAAM,cAAc,KAAK,WAAW,KAAK;EACzC,MAAM,eAAe,KAAK,iBAAiB;EAE3C,OAAO,IAAI;yBACU,KAAK,UAAU,SAAS,GAAG,GAAG,KAAK,UAAU,SAAS,GAAG,GAAG,KAAK,OAAO,SAAS,GAAG;UACnG,KAAK,sBAAsB,EAAE;;;wBAGf,KAAK,WAAW;mBACrB,KAAK,MAAM;iBACb,KAAK,IAAI;iBACT,KAAK,IAAI;kBACR,KAAK,KAAK;oBACR,KAAK,OAAO;qBACX,KAAK,QAAQ;yBACT,KAAK,YAAY;mBACvB,KAAK,MAAM;uBACP,KAAK,UAAU;;yBAEb,aAAa;8BACR,cAAc,UAAU,QAAQ;mBAC3C,KAAK,mBAAmB;oBACvB,KAAK,mBAAmB;;;;CAI1C;CAEA,mBAAmC;EACjC,MAAM,QAAQ,KAAK,MAAM,KAAK;EAC9B,MAAM,WAAW,OAAO,KAAK,KAAK;EAClC,IAAI,KAAK,QAAQ,KAAK,KAAK,QAAQ,GACjC,OAAO,GAAG,KAAK,MAAM,WAAW,GAAG,EAAE;EAEvC,IAAI,QAAQ,IACV,OAAO,OAAO,KAAK,MAAM,QAAQ,CAAC;EAEpC,OAAO,SAAS,QAAQ,CAAC;CAC3B;;gBAEgC,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEnD;;AACH;YAjLG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,UAAA,KAAA,CAAA;YACzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,WAAA,KAAA,CAAA;YACzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAe,CAAC,CAAA,GAAA,oBAAA,WAAA,eAAA,KAAA,CAAA;YACpD,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,oBAAA,WAAA,SAAA,KAAA,CAAA;YAC1B,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,oBAAA,WAAA,aAAA,KAAA,CAAA;YAClD,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,oBAAA,WAAA,WAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,oBAAA,WAAA,QAAA,KAAA,CAAA;YAE1B,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAyB,CAAC,CAAA,GAAA,oBAAA,WAAA,wBAAA,KAAA,CAAA;YAG9D,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,oBAAA,WAAA,cAAA,KAAA,CAAA;YAE1B,MAAM,CAAA,GAAA,oBAAA,WAAA,WAAA,KAAA,CAAA;kCArBRA,kBAAc,4BAA4B,CAAA,GAAA,mBAAA"}
+{"version":3,"file":"labelled-radial-input.js","names":["customElement"],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-radial-input> — labelled radial input combining ixfx-editable-number and ixfx-radial-input.\n *\n * Layout is driven by container queries on the component's own aspect ratio (width / height):\n *   - width / height >= 1.5 (wide) → horizontal layout (label to the left of dial)\n *   - width / height < 1.5 (tall/square) → vertical layout (label above dial)\n *\n * Mini mode: hides ixfx-editable-number, shows only the dial with tooltip forced on.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column.\n *\n * CSS variables (passes through to ixfx-radial-input):\n *   --dial-border-width, --dial-border-color, --dial-fill, --radius\n *   --marker-color, --marker-thickness, --marker-length, --marker-offset\n *   --marker-border-width, --marker-border-color\n *   --midpoint-color, --midpoint-thickness, --midpoint-length, --midpoint-offset\n *   --lane-width, --lane-color, --lane-border-width, --lane-offset, --lane-dasharray\n *   --wedge-fill, --wedge-fill-opacity, --wedge-border-width, --wedge-border-color\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   radius                  Dial size, 10-50 range (default: 45)\n *   flatten                 How much circle to hide, 0-1 (default: 0.3)\n *   markerStyle             'needle' | 'dot' | 'none' (default: 'needle')\n *   wedge                   Show filled wedge sector (default: false)\n *   valueMode               'range' | 'bipolar' | 'unipolar' (default: 'range')\n *   aspectRatioThreshold    Width/height ratio to trigger horizontal layout (default: 1.5)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   tooltip                 Boolean — show dial tooltip\n *   flip                    Boolean — place label after dial (bottom in vertical, right in horizontal)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display\n *   lighttouch              Boolean — passed through to the inner dial and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via dial or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every dial interaction\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { MarkerStyle, ValueMode } from '../radial-input/types.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../radial-input/radial-input.js';\n\n@customElement(`ixfx-labelled-radial-input`)\nexport class LabelledRadialInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-radial-input`;\n\n  // Override LabelledInputBase defaults (max=1, step=0.01) to match ixfx-radial-input defaults\n  override max = 100;\n  override step = 1;\n\n  @property({ type: Number }) radius = 45;\n  @property({ type: Number }) flatten = 0.3;\n  @property({ type: String, attribute: `marker-style` }) markerStyle: MarkerStyle = `needle`;\n  @property({ type: Boolean }) wedge = false;\n  @property({ type: String, attribute: `value-mode` }) valueMode: ValueMode = `range`;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: Boolean }) flip = false;\n\n  @property({ type: Number, attribute: `aspect-ratio-threshold` }) aspectRatioThreshold = 1.5;\n\n  /** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @state() private _isWide = false;\n\n  // Returns effective precision: uses explicit value if set, otherwise computes based on step or range.\n  // Prefers step-derived precision, falls back to range-based heuristic.\n  private _getEffectivePrecision(): number {\n    if (this.hasAttribute(`precision`)) {\n      return this.precision;\n    }\n    // If step is set, derive precision from it (e.g., step=0.5 → precision=1, step=1 → precision=0)\n    if (this.step !== undefined) {\n      const stepStr = String(this.step);\n      const decimalPart = stepStr.split(`.`)[1];\n      return decimalPart ? decimalPart.length : 0;\n    }\n    // Fallback: range > 10 → precision 0 (integers), range <= 10 → precision 2\n    const range = this.max - this.min;\n    return range > 10 ? 0 : 2;\n  }\n\n  protected override _handleResize(entries: ResizeObserverEntry[]): void {\n    super._handleResize(entries);\n    const { width, height } = entries[0].contentRect;\n    this._isWide = height > 0 && (width / height) >= this.aspectRatioThreshold;\n  }\n\n  protected override _renderEditableNumber() {\n    if (this._isMini) {\n      return nothing;\n    }\n    const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this._getEffectivePrecision()}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        style=\"--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;\"\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override render() {\n    const showTooltip = this.tooltip || this._isMini;\n    const tooltipValue = this._getTooltipValue();\n\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-radial-input\n          class=\"dial\"\n          ?lighttouch=${this.lighttouch}\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .radius=${this.radius}\n          .flatten=${this.flatten}\n          .markerStyle=${this.markerStyle}\n          ?wedge=${this.wedge}\n          .valueMode=${this.valueMode}\n          data-tooltip-anchor=\"top\"\n          data-tooltip=${tooltipValue}\n          data-tooltip-live=${showTooltip ? `input` : nothing}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-radial-input>\n      </div>\n    `;\n  }\n\n  private _getTooltipValue(): string {\n    const range = this.max - this.min;\n    const numValue = Number(this.value);\n    if (this.min === 0 && this.max === 1) {\n      return `${Math.round(numValue * 100)}%`;\n    }\n    if (range > 10) {\n      return String(Math.floor(numValue));\n    }\n    return numValue.toFixed(2);\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, css`\n    :host {\n    display: block;\n    min-height: var(--min-height, 60px);\n    min-width: var(--min-width, 60px);\n    width: var(--width, auto);\n    height: var(--height, auto);\n  }\n\n  :host(:focus-within) {\n    outline: 2px solid var(--accent);\n    outline-offset: 2px;\n  }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      flex-direction: var(--flow, column);\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n      --label-align: center;\n      width: 100%;\n    }\n\n  ixfx-radial-input {\n    flex-shrink: 1;\n    min-height: 0;\n    min-width: 0;\n    max-width: 100%;\n    --radial-input-svg-focus-outline: none;\n    --radial-input-svg-focus-outline-offset: 0;\n    --prominence-tickled-opacity: 1;\n    --prominence-tickled-saturate: 1;\n  }\n\n    /* Wide layout (aspect ratio >= threshold): label to the left of dial */\n    .wrap.wide {\n      flex-direction: var(--flow, row);\n      justify-content: space-evenly;\n    }\n\n    .wrap.wide ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n    }\n\n    .wrap.wide ixfx-radial-input {\n      height: auto;\n      max-width: none;\n    }\n\n    /* Flip: label after dial (bottom in column, right in row) */\n    .wrap.flip ixfx-editable-number {\n      order: 1;\n    }\n\n    /* Mini mode: dial fills the component */\n    .wrap.mini {\n      justify-content: center;\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-radial-input {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-radial-input': LabelledRadialInput;\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { t as LabelledRangeInput } from "./index-CkMIKEWp.js";
+import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
 export { LabelledRangeInput };

package/dist/labelled-range-input.js

@@ -1,5 +1,5 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { t as LabelledInputBase } from "./labelled-input-base-9K_w3oLj.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/labelled-range-input/labelled-range-input.ts

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

@@ -1 +1 @@
-{"version":3,"file":"labelled-range-input.js","names":["customElement"],"sources":["../src/labelled-range-input/labelled-range-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-range-input> — labelled range input combining ixfx-editable-number and ixfx-range-input.\n *\n * Layout is driven by container queries on the component's own height:\n *   - height >= 80px → vertical (label above slider) — the default with height: 100px\n *   - height <  80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider with tooltip forced on.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n *   --label-font-size   (default: var(--text-m))\n *   --label-font-family (default: var(--font-family))\n *   --label-color       (default: var(--surface-2-text))\n *   --label-muted-color (default: var(--surface-muted-text))\n *   --label-padding     (default: var(--space-xs) var(--space-s))\n *   --label-radius      (default: var(--radius-s))\n *   --label-align       (default: center)\n *\n * From ixfx-range-input:\n *   --track-thickness          (default: 1.5em)\n *   --thumb-color             (default: var(--surface-2-text))\n *   --thumb-color-active      (default: var(--accent))\n *   --thumb-size              (default: var(--track-thickness))\n *   --thumb-thickness         (default: 2em)\n *   --thumb-radius            (default: 0)\n *   --thumb-border            (default: none)\n *   --thumb-shadow            (default: none)\n *   --background-track        (default: var(--surface-4))\n *   --background-track-hover  (default: --background-track)\n *   --background-track-value  (default: var(--surface-6))\n *   --background-track-value-hover (default: var(--accent))\n *   --background-track-value-active (default: var(--accent))\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   orientation             'horizontal' | 'vertical' (slider orientation)\n *   tooltip                 Boolean — show slider tooltip\n *   tooltip-orientation     'top' | 'right'\n *   switch-height           Height threshold for vertical↔horizontal switch (default: 80)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display and tooltip\n *   lighttouch              Boolean — passed through to the inner slider and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via slider or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-labelled-range-input`)\nexport class LabelledRangeInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-range-input`;\n\n  @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: Boolean, attribute: `no-tooltip` }) noTooltip = false;\n  @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: `top` | `right` = `top`;\n  /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n  protected override _renderEditableNumber() {\n    // Override base implementation to pass lighttouch through to the inner\n    // editable-number. Mirrors the props forwarded in LabelledInputBase.\n    if (this._isMini) {\n      // Mini mode: no editable-number rendered at all (matches base behaviour).\n      return html``;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override render() {\n    const sliderLabelFormatter = this._formatter\n      ? (raw: number) => this._formatter!(String(raw))\n      : undefined;\n    const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);\n\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-range-input\n          class=\"slider\"\n          ?lighttouch=${this.lighttouch}\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .orientation=${this.orientation}\n          ?tooltip=${showTooltip}\n          .tooltipOrientation=${this.tooltipOrientation}\n          .labelFormatter=${sliderLabelFormatter}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-range-input>\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = css`\n    :host {\n      display: block;\n      container-type: size;\n      min-height: var(--min-height, 20px);\n      min-width: var(--min-width, 50px);\n      width: var(--width, auto);\n      height: var(--height, 50px);\n    }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      gap: var(--space-s, 4px);\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n    }\n\n    ixfx-range-input {\n      flex: 1;\n      min-width: 0;\n    }\n\n    /* Default (compact): horizontal — label beside slider */\n    .wrap {\n      flex-direction: var(--flow, row);\n      justify-content: flex-start;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n      --label-min-width: var(--label-width, 5ch);\n      /* Block fill/background variables from reaching editable-number */\n      --fill-color: initial;\n      --fill-opacity: initial;\n      --fill-image: initial;\n    }\n\n    /* Vertically-stacked layout: when container has enough height */\n    @container (height >= 45px) {\n      .wrap {\n        flex-direction: var(--flow, column);\n        justify-content: flex-start;\n        align-items: center;\n      }\n\n      ixfx-editable-number {\n        --label-align: center;\n        align-self: center;\n        width: 100%;\n      }\n\n      ixfx-range-input {\n        width: 100%;\n      }\n    }\n\n    /* Mini mode: slider fills the full component */\n    .wrap.mini {\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-range-input {\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-range-input': LabelledRangeInput;\n  }\n}\n"],"mappings":";;;;;AAuEO,IAAA,qBAAA,MAAM,2BAA2B,kBAAkB;;;uBAC/B;qBAE4C;iBAC9B;mBAC2B;4BACkC;oBAE1D;sBAE6B;;CAEvE,wBAA2C;EAGzC,IAAI,KAAK,SAEP,OAAO,IAAI;EAEb,OAAO,IAAI;;;;;sBAKO,KAAK,WAAW;iBACrB,OAAO,KAAK,KAAK,EAAE;eACrB,KAAK,IAAI;eACT,KAAK,IAAI;gBACR,KAAK,KAAK;2BACC,KAAK,gBAAgB;qBAC3B,KAAK,UAAU;uBACb,KAAK,MAAM;4BACN,KAAK,cAAc,WAAW,KAAK,iBAAiB;qBAC3D,KAAK,WAAW;kBACnB,KAAK,oBAAoB;;;CAGzC;CAEA,SAAkB;EAChB,MAAM,uBAAuB,KAAK,cAC7B,QAAgB,KAAK,WAAY,OAAO,GAAG,CAAC,IAC7C,KAAA;EACJ,MAAM,cAAc,CAAC,KAAK,cAAc,KAAK,WAAW,KAAK;EAE7D,OAAO,IAAI;yBACU,KAAK,UAAU,SAAS,GAAG;UAC1C,KAAK,sBAAsB,EAAE;;;wBAGf,KAAK,WAAW;mBACrB,KAAK,MAAM;iBACb,KAAK,IAAI;iBACT,KAAK,IAAI;kBACR,KAAK,KAAK;yBACH,KAAK,YAAY;qBACrB,YAAY;gCACD,KAAK,mBAAmB;4BAC5B,qBAAqB;mBAC9B,KAAK,mBAAmB;oBACvB,KAAK,mBAAmB;;;;CAI1C;;gBAEgC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyErC;YAxIG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,eAAA,KAAA,CAAA;YACzB,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,WAAA,KAAA,CAAA;YAC1B,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,mBAAA,WAAA,aAAA,KAAA,CAAA;YACnD,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAsB,CAAC,CAAA,GAAA,mBAAA,WAAA,sBAAA,KAAA,CAAA;YAE3D,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;YAE1B,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,mBAAA,WAAA,gBAAA,KAAA,CAAA;iCAXvDA,kBAAc,2BAA2B,CAAA,GAAA,kBAAA"}
+{"version":3,"file":"labelled-range-input.js","names":["customElement"],"sources":["../src/labelled-range-input/labelled-range-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-range-input> — labelled range input combining ixfx-editable-number and ixfx-range-input.\n *\n * Layout is driven by container queries on the component's own height:\n *   - height >= 80px → vertical (label above slider) — the default with height: 100px\n *   - height <  80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider with tooltip forced on.\n *   Triggered when width < --mini-width-threshold (default 120px)\n *                 OR height < --mini-height-threshold (default 45px).\n *   Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n *   --label-font-size   (default: var(--text-m))\n *   --label-font-family (default: var(--font-family))\n *   --label-color       (default: var(--surface-2-text))\n *   --label-muted-color (default: var(--surface-muted-text))\n *   --label-padding     (default: var(--space-xs) var(--space-s))\n *   --label-radius      (default: var(--radius-s))\n *   --label-align       (default: center)\n *\n * From ixfx-range-input:\n *   --track-thickness          (default: 1.5em)\n *   --thumb-color             (default: var(--surface-2-text))\n *   --thumb-color-active      (default: var(--accent))\n *   --thumb-size              (default: var(--track-thickness))\n *   --thumb-thickness         (default: 2em)\n *   --thumb-radius            (default: 0)\n *   --thumb-border            (default: none)\n *   --thumb-shadow            (default: none)\n *   --background-track        (default: var(--surface-4))\n *   --background-track-hover  (default: --background-track)\n *   --background-track-value  (default: var(--surface-6))\n *   --background-track-value-hover (default: var(--accent))\n *   --background-track-value-active (default: var(--accent))\n *\n * Properties:\n *   label                   Label text content\n *   min / max / value / step Range bounds and current value\n *   drag-sensitivity        Steps per pixel of drag (default: 1)\n *   precision               Decimal places (default: 0)\n *   orientation             'horizontal' | 'vertical' (slider orientation)\n *   tooltip                 Boolean — show slider tooltip\n *   tooltip-orientation     'top' | 'right'\n *   switch-height           Height threshold for vertical↔horizontal switch (default: 80)\n *   mini-width-threshold    Width (in pixels) below which mini mode activates (default: 120)\n *   mini-height-threshold   Height (in pixels) below which mini mode activates (default: 45)\n *   display-text-logic      'hidden' | 'show' | 'override' | 'transient'\n *   formatter               Function (value: string) => string — formats value for display and tooltip\n *   lighttouch              Boolean — passed through to the inner slider and editable-number so wheel\n *                                 adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n *   change — CustomEvent<{ value: string }>, bubbles + composed\n *            Fired when value changes via slider or editable-number commit\n *   input  — CustomEvent<{ value: number }>, bubbles + composed\n *            Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-labelled-range-input`)\nexport class LabelledRangeInput extends LabelledInputBase {\n  readonly inputSelector = `ixfx-range-input`;\n\n  @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n  @property({ type: Boolean }) tooltip = false;\n  @property({ type: Boolean, attribute: `no-tooltip` }) noTooltip = false;\n  @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: `top` | `right` = `top`;\n  /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */\n  @property({ type: Boolean }) lighttouch = false;\n\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n  protected override _renderEditableNumber() {\n    // Override base implementation to pass lighttouch through to the inner\n    // editable-number. Mirrors the props forwarded in LabelledInputBase.\n    if (this._isMini) {\n      // Mini mode: no editable-number rendered at all (matches base behaviour).\n      return html``;\n    }\n    return html`\n      <ixfx-editable-number\n        class=\"number\"\n        mode=\"label\"\n        no-drag\n        ?lighttouch=${this.lighttouch}\n        .value=${String(this.value)}\n        .min=${this.min}\n        .max=${this.max}\n        .step=${this.step}\n        .dragSensitivity=${this.dragSensitivity}\n        .precision=${this.precision}\n        .displayText=${this.label}\n        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n        .formatter=${this._formatter}\n        @change=${this._handleNumberChange}\n      ></ixfx-editable-number>\n    `;\n  }\n\n  override render() {\n    const sliderLabelFormatter = this._formatter\n      ? (raw: number) => this._formatter!(String(raw))\n      : undefined;\n    const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);\n\n    return html`\n      <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n        ${this._renderEditableNumber()}\n        <ixfx-range-input\n          class=\"slider\"\n          ?lighttouch=${this.lighttouch}\n          .value=${this.value}\n          .min=${this.min}\n          .max=${this.max}\n          .step=${this.step}\n          .orientation=${this.orientation}\n          ?tooltip=${showTooltip}\n          .tooltipOrientation=${this.tooltipOrientation}\n          .labelFormatter=${sliderLabelFormatter}\n          @input=${this._handleSliderInput}\n          @change=${this._handleInputChange}\n        ></ixfx-range-input>\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = css`\n    :host {\n      display: block;\n      container-type: size;\n      min-height: var(--min-height, 20px);\n      min-width: var(--min-width, 50px);\n      width: var(--width, auto);\n      height: var(--height, 50px);\n    }\n\n    .wrap {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      gap: var(--space-s, 4px);\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      flex-shrink: 0;\n    }\n\n    ixfx-range-input {\n      flex: 1;\n      min-width: 0;\n    }\n\n    /* Default (compact): horizontal — label beside slider */\n    .wrap {\n      flex-direction: var(--flow, row);\n      justify-content: flex-start;\n      align-items: center;\n    }\n\n    ixfx-editable-number {\n      --label-align: left;\n      width: var(--label-width, 5ch);\n      --label-min-width: var(--label-width, 5ch);\n      /* Block fill/background variables from reaching editable-number */\n      --fill-color: initial;\n      --fill-opacity: initial;\n      --fill-image: initial;\n    }\n\n    /* Vertically-stacked layout: when container has enough height */\n    @container (height >= 45px) {\n      .wrap {\n        flex-direction: var(--flow, column);\n        justify-content: flex-start;\n        align-items: center;\n      }\n\n      ixfx-editable-number {\n        --label-align: center;\n        align-self: center;\n        width: 100%;\n      }\n\n      ixfx-range-input {\n        width: 100%;\n      }\n    }\n\n    /* Mini mode: slider fills the full component */\n    .wrap.mini {\n      gap: 0;\n    }\n\n    .wrap.mini ixfx-range-input {\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-labelled-range-input': LabelledRangeInput;\n  }\n}\n"],"mappings":";;;;;AAuEO,IAAM,qBAAN,MAAM,2BAA2B,kBAAkB;;;EAC/B,KAAA,gBAAA;EAE4C,KAAA,cAAA;EAC9B,KAAA,UAAA;EAC2B,KAAA,YAAA;EACkC,KAAA,qBAAA;EAE1D,KAAA,aAAA;EAE6B,KAAA,eAAA;;CAEvE,wBAA2C;EAGzC,IAAI,KAAK,SAEP,OAAO,IAAI;EAEb,OAAO,IAAI;;;;;sBAKO,KAAK,WAAW;iBACrB,OAAO,KAAK,KAAK,EAAE;eACrB,KAAK,IAAI;eACT,KAAK,IAAI;gBACR,KAAK,KAAK;2BACC,KAAK,gBAAgB;qBAC3B,KAAK,UAAU;uBACb,KAAK,MAAM;4BACN,KAAK,cAAc,WAAW,KAAK,iBAAiB;qBAC3D,KAAK,WAAW;kBACnB,KAAK,oBAAoB;;;CAGzC;CAEA,SAAkB;EAChB,MAAM,uBAAuB,KAAK,cAC7B,QAAgB,KAAK,WAAY,OAAO,GAAG,CAAC,IAC7C,KAAA;EACJ,MAAM,cAAc,CAAC,KAAK,cAAc,KAAK,WAAW,KAAK;EAE7D,OAAO,IAAI;yBACU,KAAK,UAAU,SAAS,GAAG;UAC1C,KAAK,sBAAsB,EAAE;;;wBAGf,KAAK,WAAW;mBACrB,KAAK,MAAM;iBACb,KAAK,IAAI;iBACT,KAAK,IAAI;kBACR,KAAK,KAAK;yBACH,KAAK,YAAY;qBACrB,YAAY;gCACD,KAAK,mBAAmB;4BAC5B,qBAAqB;mBAC9B,KAAK,mBAAmB;oBACvB,KAAK,mBAAmB;;;;CAI1C;;EAEgC,KAAA,SAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyErC;AAxIG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,eAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,WAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,mBAAA,WAAA,aAAA,KAAA,CAAA;AACnD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAsB,CAAC,CAAA,GAAA,mBAAA,WAAA,sBAAA,KAAA,CAAA;AAE3D,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,mBAAA,WAAA,gBAAA,KAAA,CAAA;AAXvDA,qBAAAA,WAAAA,CAAAA,kBAAc,2BAA2B,CAAA,GAAA,kBAAA"}

package/dist/led.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
-
 //#region src/led/led.d.ts
 declare class LedElement extends LitElement {
   #private;
@@ -17,7 +16,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ixfx-led": LedElement;
   }
-} //# sourceMappingURL=led.d.ts.map
+}
 //#endregion
 export { LedElement };
 //# sourceMappingURL=led.d.ts.map

package/dist/led.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":";;;cAKa,UAAA,SAAmB,UAAU;EAAA;EAExC,KAAA;EAGA,GAAA;EAGA,KAAA;EAGA,QAAA;EAGA,IAAA;EAIA,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAmB9B,oBAAA;EAAA,UAwBU,MAAA,kBAAM,cAAA;EAAA,OAIT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAqBP,MAAA;EAAA,UACI,qBAAA;IACR,UAAA,EAAY,UAAU;EAAA;AAAA"}
+{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":";;cAKa,mBAAmB;;EAE9B;EAGA;EAGA;EAGA;EAGA;EAIA,WAAW,mBAAmB;EAmB9B;YAwBU,wBAAM;SAIT,sBAAM;;QAqBP;YACI;IACR,YAAY"}

package/dist/led.js

@@ -1,4 +1,4 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/led/led.ts

package/dist/led.js.map

@@ -1 +1 @@
-{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Boolean, attribute: `lit`, reflect: true })\n  lit = false;\n\n  @property({ type: String })\n  color = `oklch(50% 0.15 25)`;\n\n  @property({ type: Boolean, attribute: `blinking`, reflect: true })\n  blinking = false;\n\n  @property({ type: Number, attribute: `rate` })\n  rate = 500;\n\n  #blinkInterval: number | undefined;\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\n    }\n\n    if (changedProperties.has(`value`) || changedProperties.has(`lit`)) {\n      this.style.setProperty(`--value`, String(this.value));\n    }\n\n    if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n      this.#updateBlinking();\n    }\n\n    if (changedProperties.has(`rate`)) {\n      const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n      this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#stopBlinking();\n  }\n\n  #updateBlinking() {\n    if (this.blinking && this.rate > 0) {\n      this.#stopBlinking();\n      this.#blinkInterval = window.setInterval(() => {\n        this.value = this.value === 0 ? 1 : 0;\n      }, this.rate);\n    } else {\n      this.#stopBlinking();\n      this.value = 0;\n    }\n  }\n\n  #stopBlinking() {\n    if (this.#blinkInterval !== undefined) {\n      clearInterval(this.#blinkInterval);\n      this.#blinkInterval = undefined;\n    }\n  }\n\n  protected render() {\n    return html`<div part=\"circle\"></div>`;\n  }\n\n  static styles = css`\n    :host {\n      --_size: var(--size, 1ex);\n      display: inline-block;\n      min-width: 1ex;\n      min-height: 1ex;\n      width: var(--_size);\n      height: var(--_size);\n      vertical-align: middle;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n      transition: background var(--transition-duration, 150ms) ease-out;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-led\": LedElement;\n  }\n}\n"],"mappings":";;;;AAKO,IAAA,aAAA,MAAM,mBAAmB,WAAW;;;eAEjC;aAGF;eAGE;kBAGG;cAGJ;;CAEP;CAEA,WAAW,mBAAyC;EAClD,IAAI,kBAAkB,IAAI,KAAK,GAC7B,KAAK,QAAQ,KAAK,MAAM,IAAI;EAG9B,IAAI,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,KAAK,GAC/D,KAAK,MAAM,YAAY,WAAW,OAAO,KAAK,KAAK,CAAC;EAGtD,IAAI,kBAAkB,IAAI,UAAU,KAAK,kBAAkB,IAAI,MAAM,GACnE,KAAKA,gBAAgB;EAGvB,IAAI,kBAAkB,IAAI,MAAM,GAAG;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;GACzD,KAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,GAAG;EACrE;CACF;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAKC,cAAc;CACrB;CAEA,kBAAkB;EAChB,IAAI,KAAK,YAAY,KAAK,OAAO,GAAG;GAClC,KAAKA,cAAc;GACnB,KAAKC,iBAAiB,OAAO,kBAAkB;IAC7C,KAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;GACtC,GAAG,KAAK,IAAI;EACd,OAAO;GACL,KAAKD,cAAc;GACnB,KAAK,QAAQ;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,KAAKC,mBAAmB,KAAA,GAAW;GACrC,cAAc,KAAKA,cAAc;GACjC,KAAKA,iBAAiB,KAAA;EACxB;CACF;CAEA,SAAmB;EACjB,OAAO,IAAI;CACb;;gBAEgB,GAAG;;;;;;;;;;;;;;;;;;;;AAmBrB;YAnFG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,OAAA,KAAA,CAAA;YAG3D,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,YAAA,KAAA,CAAA;YAGhE,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;yBAd9CC,kBAAc,UAAU,CAAA,GAAA,UAAA"}
+{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Boolean, attribute: `lit`, reflect: true })\n  lit = false;\n\n  @property({ type: String })\n  color = `oklch(50% 0.15 25)`;\n\n  @property({ type: Boolean, attribute: `blinking`, reflect: true })\n  blinking = false;\n\n  @property({ type: Number, attribute: `rate` })\n  rate = 500;\n\n  #blinkInterval: number | undefined;\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\n    }\n\n    if (changedProperties.has(`value`) || changedProperties.has(`lit`)) {\n      this.style.setProperty(`--value`, String(this.value));\n    }\n\n    if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n      this.#updateBlinking();\n    }\n\n    if (changedProperties.has(`rate`)) {\n      const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n      this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#stopBlinking();\n  }\n\n  #updateBlinking() {\n    if (this.blinking && this.rate > 0) {\n      this.#stopBlinking();\n      this.#blinkInterval = window.setInterval(() => {\n        this.value = this.value === 0 ? 1 : 0;\n      }, this.rate);\n    } else {\n      this.#stopBlinking();\n      this.value = 0;\n    }\n  }\n\n  #stopBlinking() {\n    if (this.#blinkInterval !== undefined) {\n      clearInterval(this.#blinkInterval);\n      this.#blinkInterval = undefined;\n    }\n  }\n\n  protected render() {\n    return html`<div part=\"circle\"></div>`;\n  }\n\n  static styles = css`\n    :host {\n      --_size: var(--size, 1ex);\n      display: inline-block;\n      min-width: 1ex;\n      min-height: 1ex;\n      width: var(--_size);\n      height: var(--_size);\n      vertical-align: middle;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n      transition: background var(--transition-duration, 150ms) ease-out;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-led\": LedElement;\n  }\n}\n"],"mappings":";;;;AAKO,IAAM,aAAN,MAAM,mBAAmB,WAAW;;;EAEjC,KAAA,QAAA;EAGF,KAAA,MAAA;EAGE,KAAA,QAAA;EAGG,KAAA,WAAA;EAGJ,KAAA,OAAA;;CAEP;CAEA,WAAW,mBAAyC;EAClD,IAAI,kBAAkB,IAAI,KAAK,GAC7B,KAAK,QAAQ,KAAK,MAAM,IAAI;EAG9B,IAAI,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,KAAK,GAC/D,KAAK,MAAM,YAAY,WAAW,OAAO,KAAK,KAAK,CAAC;EAGtD,IAAI,kBAAkB,IAAI,UAAU,KAAK,kBAAkB,IAAI,MAAM,GACnE,KAAKA,gBAAgB;EAGvB,IAAI,kBAAkB,IAAI,MAAM,GAAG;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;GACzD,KAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,GAAG;EACrE;CACF;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAKC,cAAc;CACrB;CAEA,kBAAkB;EAChB,IAAI,KAAK,YAAY,KAAK,OAAO,GAAG;GAClC,KAAKA,cAAc;GACnB,KAAKC,iBAAiB,OAAO,kBAAkB;IAC7C,KAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;GACtC,GAAG,KAAK,IAAI;EACd,OAAO;GACL,KAAKD,cAAc;GACnB,KAAK,QAAQ;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,KAAKC,mBAAmB,KAAA,GAAW;GACrC,cAAc,KAAKA,cAAc;GACjC,KAAKA,iBAAiB,KAAA;EACxB;CACF;CAEA,SAAmB;EACjB,OAAO,IAAI;CACb;;EAEgB,KAAA,SAAA,GAAG;;;;;;;;;;;;;;;;;;;;AAmBrB;AAnFG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,OAAA,KAAA,CAAA;AAG3D,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,YAAA,KAAA,CAAA;AAGhE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAd9CC,aAAAA,WAAAA,CAAAA,kBAAc,UAAU,CAAA,GAAA,UAAA"}