@ixfx/components 0.2.5 → 0.2.6

package/dist/keyboard-De_vOHLg.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-De_vOHLg.js","names":[],"sources":["../src/keyboard.ts"],"sourcesContent":["/**\n * Keyboard interaction constants\n */\nexport const KEY_STEP_DIVISOR = 10;\n\n/**\n * Resolve the effective keyboard nudge step for a single numeric axis.\n *\n * Priority: stops (quantised grid) > explicit step > percentage of range.\n *\n * @param range        max - min for the axis\n * @param stops        number of quantised divisions (undefined or ≤1 = ignored)\n * @param step         explicit absolute step size (undefined = ignored)\n * @param defaultFraction  fraction of range used when neither stops nor step is set (default 0.1 = 10%)\n */\nexport function resolveStep(\n  range: number,\n  stops: number | undefined,\n  step: number | undefined,\n  defaultFraction = 0.1,\n): number {\n  if (stops !== undefined && stops > 1) return range / stops;\n  if (step !== undefined) return step;\n  return range * defaultFraction;\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAgB,YACd,OACA,OACA,MACA,kBAAkB,IACV;AACR,KAAI,UAAU,KAAA,KAAa,QAAQ,EAAG,QAAO,QAAQ;AACrD,KAAI,SAAS,KAAA,EAAW,QAAO;AAC/B,QAAO,QAAQ"}
+{"version":3,"file":"keyboard-De_vOHLg.js","names":[],"sources":["../src/keyboard.ts"],"sourcesContent":["/**\n * Keyboard interaction constants\n */\nexport const KEY_STEP_DIVISOR = 10;\n\n/**\n * Resolve the effective keyboard nudge step for a single numeric axis.\n *\n * Priority: stops (quantised grid) > explicit step > percentage of range.\n *\n * @param range        max - min for the axis\n * @param stops        number of quantised divisions (undefined or ≤1 = ignored)\n * @param step         explicit absolute step size (undefined = ignored)\n * @param defaultFraction  fraction of range used when neither stops nor step is set (default 0.1 = 10%)\n */\nexport function resolveStep(\n  range: number,\n  stops: number | undefined,\n  step: number | undefined,\n  defaultFraction = 0.1,\n): number {\n  if (stops !== undefined && stops > 1) return range / stops;\n  if (step !== undefined) return step;\n  return range * defaultFraction;\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAgB,YACd,OACA,OACA,MACA,kBAAkB,IACV;CACR,IAAI,UAAU,KAAA,KAAa,QAAQ,GAAG,OAAO,QAAQ;CACrD,IAAI,SAAS,KAAA,GAAW,OAAO;CAC/B,OAAO,QAAQ;AACjB"}

package/dist/{labelled-input-base-DS6-6C0r.js → labelled-input-base-BvgH7ldm.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as __decorate } from "./decorate-O4m1U4l3.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-DS6-6C0r.js.map
+//# sourceMappingURL=labelled-input-base-BvgH7ldm.js.map

package/dist/{labelled-input-base-DS6-6C0r.js.map → labelled-input-base-BvgH7ldm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-input-base-DS6-6C0r.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-BvgH7ldm.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-input-base-DnRh4reU.d.ts → labelled-input-base-D-Y7agky.d.ts}

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

package/dist/labelled-input-base-D-Y7agky.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelled-input-base-D-Y7agky.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;;uBAIsB,iBAAA,SAA0B,UAAA;EAClC,KAAA;EAEgB,GAAA;EACA,GAAA;EACA,KAAA;EACA,IAAA;EACA,SAAA;EAC+B,eAAA;EAEI,kBAAA;EACC,mBAAA;EAEjB,gBAAA;EAAA,UAE5B,OAAA;EAAA,UACA,WAAA;EAAA,UACA,UAAA,IAAc,KAAA;EAAA,QAEzB,cAAA;EAAA,QACA,eAAA;EAAA,kBAEU,aAAA;EAAA,IAEd,SAAA,CAAA,IAAc,KAAA;EAAA,IAId,SAAA,CAAU,KAAA,IAAS,KAAA;EAAA,cAIT,kBAAA,CAAA;EAIL,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAMC,aAAA,CAAc,OAAA,EAAS,mBAAA;EAAA,UAcvB,mBAAA,GAAuB,CAAA,EAAG,WAAA;IAAc,KAAA;EAAA;EAAA,UAWxC,kBAAA,GAAsB,CAAA,EAAG,WAAA;IAAc,KAAA;EAAA;EAAA,UAavC,kBAAA,GAAsB,CAAA,EAAG,WAAA;IAAc,KAAA;EAAA;EAAA,UAYvC,UAAA,CAAW,CAAA;EAAA,UAYX,qBAAA,CAAA,UAAqB,OAAA,iBAAA,cAAA;EAuBtB,OAAA,CAAQ,iBAAA,EAAmB,GAAA;AAAA"}

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

@@ -1,6 +1,5 @@
-import { t as LabelledInputBase } from "./labelled-input-base-DnRh4reU.js";
-import { i as MarkerStyle, l as ValueMode } from "./radial-input-xSTd4kEz.js";
-import * as _$lit from "lit";
+import { t as LabelledInputBase } from "./labelled-input-base-D-Y7agky.js";
+import { i as MarkerStyle, l as ValueMode } from "./radial-input-LUSBEycd.js";
 import { CSSResultGroup, nothing } from "lit";
 
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,8 +18,8 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | _$lit.TemplateResult<1>;
-  render(): _$lit.TemplateResult<1>;
+  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;
 }

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":";;;;;;cAsDa,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;EAAA,QAEhD,OAAA;EAAA,QAIT,sBAAA;EAAA,UAeW,aAAA,CAAc,OAAA,EAAS,mBAAA;EAAA,UAMvB,qBAAA,CAAA,UAAqB,OAAA,GAAA,KAAA,CAAA,cAAA;EAyB/B,MAAA,CAAA,GAzB+B,KAAA,CAyBzB,cAAA;EAAA,QA4BP,gBAAA;EAAA,OAYD,MAAA,EAAQ,cAAA;AAAA;AAAA,QA0ET,MAAA;EAAA,UACI,qBAAA;IACR,4BAAA,EAA8B,mBAAA;EAAA;AAAA"}
+{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;;cAuDa,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;EAAA,QAEhD,OAAA;EAAA,QAIT,sBAAA;EAAA,UAeW,aAAA,CAAc,OAAA,EAAS,mBAAA;EAAA,UAMvB,qBAAA,CAAA,UAAqB,OAAA,iBAAA,cAAA;EAyB/B,MAAA,CAAA,iBAAM,cAAA;EAAA,QA4BP,gBAAA;EAAA,OAYD,MAAA,EAAQ,cAAA;AAAA;AAAA,QA0ET,MAAA;EAAA,UACI,qBAAA;IACR,4BAAA,EAA8B,mBAAmB;EAAA;AAAA"}

package/dist/labelled-radial-input.js

@@ -1,8 +1,8 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import { t as LabelledInputBase } from "./labelled-input-base-DS6-6C0r.js";
-import "./radial-input-CNJ8asY2.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { t as LabelledInputBase } from "./labelled-input-base-BvgH7ldm.js";
+import "./radial-input-Dbc6fgCK.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 //#region src/labelled-radial-input/labelled-radial-input.ts
 let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
 	constructor(..._args) {
@@ -181,7 +181,7 @@ __decorate([property({
 	attribute: `aspect-ratio-threshold`
 })], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
 __decorate([state()], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([customElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
+LabelledRadialInput = __decorate([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
 //#endregion
 export { LabelledRadialInput };
 

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

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.js","names":[],"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 *\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 { customElement, property, state } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.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  @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        .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          .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 = 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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"}
+{"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 *\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 '../radial-input/radial-input.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.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  @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        .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          .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 = 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-C5dK8RZa.js";
+import { t as LabelledRangeInput } from "./index-DrQjA8Gs.js";
 export { LabelledRangeInput };

package/dist/labelled-range-input.js

@@ -1,7 +1,7 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import { t as LabelledInputBase } from "./labelled-input-base-DS6-6C0r.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { t as LabelledInputBase } from "./labelled-input-base-BvgH7ldm.js";
 import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 //#region src/labelled-range-input/labelled-range-input.ts
 let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
 	constructor(..._args) {
@@ -125,7 +125,7 @@ __decorate([property({
 	type: Number,
 	attribute: `switch-height`
 })], LabelledRangeInput.prototype, "switchHeight", void 0);
-LabelledRangeInput = __decorate([customElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
+LabelledRangeInput = __decorate([safeCustomElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
 //#endregion
 export { LabelledRangeInput };
 

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

@@ -1 +1 @@
-{"version":3,"file":"labelled-range-input.js","names":[],"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 *\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 { customElement, property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.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\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\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        ${super._renderEditableNumber()}\n        <ixfx-range-input\n          class=\"slider\"\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":";;;;;AAoEO,IAAA,qBAAA,MAAM,2BAA2B,kBAAkB;;;uBAC/B;qBAE4C;iBAC9B;mBAC2B;4BACkC;sBAE7B;;CAEvE,SAAkB;EAChB,MAAM,uBAAuB,KAAK,cAC7B,QAAgB,KAAK,WAAY,OAAO,IAAI,CAAC,GAC9C,KAAA;EACJ,MAAM,cAAc,CAAC,KAAK,cAAc,KAAK,WAAW,KAAK;AAE7D,SAAO,IAAI;yBACU,KAAK,UAAU,SAAS,GAAG;UAC1C,MAAM,uBAAuB,CAAC;;;mBAGrB,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;;;;;;gBAMV,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAjClC,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,mBAAA,WAAA,eAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;YAC3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC,CAAA,EAAA,mBAAA,WAAA,aAAA,KAAA,EAAA;YACpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAuB,CAAC,CAAA,EAAA,mBAAA,WAAA,sBAAA,KAAA,EAAA;YAE5D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC,CAAA,EAAA,mBAAA,WAAA,gBAAA,KAAA,EAAA;iCATxD,cAAc,4BAA4B,CAAA,EAAA,mBAAA"}
+{"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 *\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\n  @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\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        ${super._renderEditableNumber()}\n        <ixfx-range-input\n          class=\"slider\"\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":";;;;;AAqEO,IAAA,qBAAA,MAAM,2BAA2B,kBAAkB;;;uBAC/B;qBAE4C;iBAC9B;mBAC2B;4BACkC;sBAE7B;;CAEvE,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,MAAM,sBAAsB,EAAE;;;mBAGrB,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;YA1GG,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;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,mBAAA,WAAA,gBAAA,KAAA,CAAA;iCATvDA,kBAAc,2BAA2B,CAAA,GAAA,kBAAA"}

package/dist/led.d.ts

@@ -1,4 +1,3 @@
-import * as _$lit from "lit";
 import { LitElement } from "lit";
 
 //#region src/led.d.ts
@@ -12,8 +11,8 @@ declare class LedElement extends LitElement {
   willUpdate(changedProperties: Map<string, unknown>): void;
   updated(changedProperties: Map<string, unknown>): void;
   disconnectedCallback(): void;
-  protected render(): _$lit.TemplateResult<1>;
-  static styles: _$lit.CSSResult;
+  protected render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/led.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led.ts"],"mappings":";;;;cAIa,UAAA,SAAmB,UAAA;EAAA;EAE9B,KAAA;EAGA,GAAA;EAGA,KAAA;EAGA,QAAA;EAGA,IAAA;EAIA,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAM3B,oBAAA,CAAA;EAAA,UAwBU,MAAA,CAAA,GA9BoB,KAAA,CA8Bd,cAAA;EAAA,OAIT,MAAA,EAJS,KAAA,CAIH,SAAA;AAAA;AAAA,QAqBP,MAAA;EAAA,UACI,qBAAA;IACR,UAAA,EAAY,UAAA;EAAA;AAAA"}
+{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led.ts"],"mappings":";;;cAKa,UAAA,SAAmB,UAAA;EAAA;EAE9B,KAAA;EAGA,GAAA;EAGA,KAAA;EAGA,QAAA;EAGA,IAAA;EAIA,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAM3B,oBAAA,CAAA;EAAA,UAwBU,MAAA,CAAA,iBAAM,cAAA;EAAA,OAIT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAqBP,MAAA;EAAA,UACI,qBAAA;IACR,UAAA,EAAY,UAAU;EAAA;AAAA"}

package/dist/led.js

@@ -1,6 +1,6 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 //#region src/led.ts
 let LedElement = class LedElement extends LitElement {
 	constructor(..._args) {
@@ -85,7 +85,7 @@ __decorate([property({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
-LedElement = __decorate([customElement(`ixfx-led`)], LedElement);
+LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 export { LedElement };
 

package/dist/led.js.map

@@ -1 +1 @@
-{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval"],"sources":["../src/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.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(`value`)) {\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  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\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":";;;;AAIO,IAAA,aAAA,MAAM,mBAAmB,WAAW;;;eAEjC;aAGF;eAGE;kBAGG;cAGJ;;CAEP;CAEA,WAAW,mBAAyC;AAClD,MAAI,kBAAkB,IAAI,QAAQ,CAChC,MAAK,MAAM,YAAY,WAAW,OAAO,KAAK,MAAM,CAAC;AAGvD,MAAI,kBAAkB,IAAI,WAAW,IAAI,kBAAkB,IAAI,OAAO,CACpE,OAAA,gBAAsB;AAGxB,MAAI,kBAAkB,IAAI,OAAO,EAAE;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;AACzD,QAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,IAAI;;;CAIxE,QAAQ,mBAAyC;AAC/C,MAAI,kBAAkB,IAAI,MAAM,CAC9B,MAAK,QAAQ,KAAK,MAAM,IAAI;;CAIhC,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,QAAA,cAAoB;;CAGtB,kBAAkB;AAChB,MAAI,KAAK,YAAY,KAAK,OAAO,GAAG;AAClC,SAAA,cAAoB;AACpB,SAAA,gBAAsB,OAAO,kBAAkB;AAC7C,SAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;MACnC,KAAK,KAAK;SACR;AACL,SAAA,cAAoB;AACpB,QAAK,QAAQ;;;CAIjB,gBAAgB;AACd,MAAI,MAAA,kBAAwB,KAAA,GAAW;AACrC,iBAAc,MAAA,cAAoB;AAClC,SAAA,gBAAsB,KAAA;;;CAI1B,SAAmB;AACjB,SAAO,IAAI;;;gBAGG,GAAG;;;;;;;;;;;;;;;;;;;;;YAlElB,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;CAAM,CAAC,CAAA,EAAA,WAAA,WAAA,OAAA,KAAA,EAAA;YAG5D,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;CAAM,CAAC,CAAA,EAAA,WAAA,WAAA,YAAA,KAAA,EAAA;YAGjE,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,QAAA,KAAA,EAAA;yBAd/C,cAAc,WAAW,CAAA,EAAA,WAAA"}
+{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/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(`value`)) {\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  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\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,OAAO,GAC/B,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,QAAQ,mBAAyC;EAC/C,IAAI,kBAAkB,IAAI,KAAK,GAC7B,KAAK,QAAQ,KAAK,MAAM,IAAI;CAEhC;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;YArFG,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"}

package/dist/{menu-BV6UFx_z.js → menu-C3eANB5M.js}

@@ -1,11 +1,11 @@
 import { t as __exportAll } from "./chunk-pbuEa-1d.js";
 import { t as tickledItemStyles } from "./tickled-styles-Bg3QbcrD.js";
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import "./icon-BR5aTIiP.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import "./icon-CYACf6o8.js";
 import "./interaction-CQDQJf2Q.js";
-import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-DEzL_Yjk.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-6IU5weHi.js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-bar.ts
 let MenuBar = class MenuBar extends LitElement {
 	constructor(..._args) {
@@ -87,7 +87,7 @@ let MenuBar = class MenuBar extends LitElement {
 		return html`<slot role="menubar"></slot>`;
 	}
 };
-MenuBar = __decorate([customElement(`ixfx-menu-bar`)], MenuBar);
+MenuBar = __decorate([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
 //#endregion
 //#region src/menu/menu-check-item.ts
 let MenuCheckItem = class MenuCheckItem extends LitElement {
@@ -237,7 +237,7 @@ __decorate([property({
 })], MenuCheckItem.prototype, "iconName", void 0);
 __decorate([property({ attribute: false })], MenuCheckItem.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuCheckItem.prototype, "keyboardManager", void 0);
-MenuCheckItem = __decorate([customElement(`ixfx-menu-check-item`)], MenuCheckItem);
+MenuCheckItem = __decorate([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
 //#endregion
 //#region src/menu/menu-command-controller.ts
 var MenuCommandController = class {
@@ -285,7 +285,7 @@ let MenuHeader = class MenuHeader extends LitElement {
 	}
 };
 __decorate([property({ type: String })], MenuHeader.prototype, "label", void 0);
-MenuHeader = __decorate([customElement(`ixfx-menu-header`)], MenuHeader);
+MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
 //#endregion
 //#region src/menu/menu-sub-trigger.ts
 var _MenuSubTrigger;
@@ -542,7 +542,7 @@ __decorate([state()], MenuSubTrigger.prototype, "_hasSubmenu", void 0);
 __decorate([query(`slot[name="submenu"]`)], MenuSubTrigger.prototype, "_slot", void 0);
 __decorate([query(`.submenu-popover`)], MenuSubTrigger.prototype, "_submenuPopover", void 0);
 __decorate([query(`.item`)], MenuSubTrigger.prototype, "_itemEl", void 0);
-MenuSubTrigger = _MenuSubTrigger = __decorate([customElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
+MenuSubTrigger = _MenuSubTrigger = __decorate([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
 //#endregion
 //#region src/menu/menu-separator.ts
 let MenuSeparator = class MenuSeparator extends LitElement {
@@ -563,7 +563,7 @@ let MenuSeparator = class MenuSeparator extends LitElement {
 		return html`<div class="separator"></div>`;
 	}
 };
-MenuSeparator = __decorate([customElement(`ixfx-menu-separator`)], MenuSeparator);
+MenuSeparator = __decorate([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
 //#endregion
 //#region src/menu/menu-from-tree.ts
 function isLeaf(node) {
@@ -737,7 +737,7 @@ __decorate([property({
 	type: String,
 	attribute: `icon-name`
 })], MenuRadioItem.prototype, "iconName", void 0);
-MenuRadioItem = __decorate([customElement(`ixfx-menu-radio-item`)], MenuRadioItem);
+MenuRadioItem = __decorate([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
 //#endregion
 //#region src/menu/menu-radio-group.ts
 let MenuRadioGroup = class MenuRadioGroup extends LitElement {
@@ -789,7 +789,7 @@ let MenuRadioGroup = class MenuRadioGroup extends LitElement {
 __decorate([property({ type: String })], MenuRadioGroup.prototype, "name", void 0);
 __decorate([property({ type: String })], MenuRadioGroup.prototype, "value", void 0);
 __decorate([state()], MenuRadioGroup.prototype, "slottedElements", void 0);
-MenuRadioGroup = __decorate([customElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
+MenuRadioGroup = __decorate([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
 //#endregion
 //#region src/menu/index.ts
 var menu_exports = /* @__PURE__ */ __exportAll({
@@ -810,4 +810,4 @@ var menu_exports = /* @__PURE__ */ __exportAll({
 //#endregion
 export { menuFromTreeToElements as a, MenuHeader as c, MenuBar as d, menuFromTree as i, MenuCommandController as l, MenuRadioGroup as n, MenuSeparator as o, MenuRadioItem as r, MenuSubTrigger as s, menu_exports as t, MenuCheckItem as u };
 
-//# sourceMappingURL=menu-BV6UFx_z.js.map
+//# sourceMappingURL=menu-C3eANB5M.js.map

package/dist/menu-C3eANB5M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-C3eANB5M.js","names":["customElement","customElement","customElement","customElement","customElement","customElement","customElement"],"sources":["../src/menu/menu-bar.ts","../src/menu/menu-check-item.ts","../src/menu/menu-command-controller.ts","../src/menu/menu-header.ts","../src/menu/menu-sub-trigger.ts","../src/menu/menu-separator.ts","../src/menu/menu-from-tree.ts","../src/menu/menu-radio-item.ts","../src/menu/menu-radio-group.ts","../src/menu/index.ts"],"sourcesContent":["import type { MenuTrigger } from './menu-trigger.js';\nimport { css, html, LitElement } from 'lit';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport './menu-trigger.js';\n\n@customElement(`ixfx-menu-bar`)\nexport class MenuBar extends LitElement {\n  private _openTrigger: MenuTrigger | null = null;\n  private _inputMode: `keyboard` | `mouse` = `mouse`;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n    this.addEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n    this.addEventListener(`focusin`, this._handleFocusIn as EventListener);\n    this.addEventListener(`keydown`, this._handleKeydown);\n    this.addEventListener(`pointermove`, this._handlePointerMove);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n    this.removeEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n    this.removeEventListener(`focusin`, this._handleFocusIn as EventListener);\n    this.removeEventListener(`keydown`, this._handleKeydown);\n    this.removeEventListener(`pointermove`, this._handlePointerMove);\n  }\n\n  private _setInputMode(mode: `keyboard` | `mouse`): void {\n    if (this._inputMode === mode)\n      return;\n    this._inputMode = mode;\n    this.setAttribute(`data-input-mode`, mode);\n  }\n\n  private _handlePointerMove = (): void => {\n    this._setInputMode(`mouse`);\n  };\n\n  private _getTriggers(): MenuTrigger[] {\n    return [...this.children].filter(\n      el => el.tagName === `IXFX-MENU-TRIGGER`,\n    ) as MenuTrigger[];\n  }\n\n  private _handleTriggerOpen = (e: Event): void => {\n    this._openTrigger = e.target as MenuTrigger;\n  };\n\n  private _handleTriggerClose = (e: Event): void => {\n    if (e.target === this._openTrigger) {\n      this._openTrigger = null;\n    }\n  };\n\n  // When focus moves to a trigger button while another menu is open, switch menus.\n  // focusin is composed, so e.target is retargeted to the ixfx-menu-trigger host.\n  private _handleFocusIn = (e: FocusEvent): void => {\n    const triggers = this._getTriggers();\n    const trigger = triggers.find(t => t === e.target);\n    if (!trigger || !this._openTrigger || trigger === this._openTrigger)\n      return;\n    this._openTrigger.closeMenu();\n    trigger.openMenu();\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== `ArrowLeft` && e.key !== `ArrowRight`)\n      return;\n\n    const triggers = this._getTriggers();\n    if (triggers.length === 0)\n      return;\n\n    // When a menu is open, navigate from the open trigger.\n    // When no menu is open, navigate from the focused trigger button\n    // (e.target is retargeted to ixfx-menu-trigger when focus is on its inner button).\n    const current = this._openTrigger ?? triggers.find(t => t === e.target);\n    if (!current)\n      return;\n\n    const idx = triggers.indexOf(current);\n    if (idx === -1)\n      return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this._setInputMode(`keyboard`);\n\n    const dir = e.key === `ArrowRight` ? 1 : -1;\n    const next = triggers[(idx + dir + triggers.length) % triggers.length];\n\n    if (this._openTrigger) {\n      this._openTrigger.closeMenu();\n      next.openMenu();\n    } else {\n      next.focusTrigger();\n    }\n  };\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n    }\n\n    /* Keyboard mode: suppress hover highlight on trigger buttons */\n    :host([data-input-mode=\"keyboard\"]) {\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n  `;\n\n  render() {\n    return html`<slot role=\"menubar\"></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-bar': MenuBar;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type MenuCheckItemCommandDetail = {\n  readonly command: string;\n  readonly checked: boolean;\n  readonly args: string;\n};\n\nexport type MenuCheckItemCommandEvent = CustomEvent<MenuCheckItemCommandDetail>;\n\n@customElement(`ixfx-menu-check-item`)\nexport class MenuCheckItem extends LitElement {\n  @property({ type: String }) command = ``;\n  @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n  @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n  private handleClick(): void {\n    if (this.disabled)\n      return;\n\n    this.checked = !this.checked;\n    this.dispatchEvent(new CustomEvent<MenuCheckItemCommandDetail>(`command`, {\n      detail: { command: this.command, checked: this.checked, args: this.commandArgs },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _resolvedLabel(): string {\n    if (this.label)\n      return this.label;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.label ?? ``;\n    }\n    return ``;\n  }\n\n  private _resolvedIcon(): string | null {\n    if (this.iconName)\n      return this.iconName;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.icon ?? null;\n    }\n    return null;\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>): void {\n    super.willUpdate(changedProperties);\n    const resolvedIcon = this._resolvedIcon();\n    if (resolvedIcon && !this.iconName) {\n      this.setAttribute(`data-icon-section`, ``);\n    } else if (!resolvedIcon && !this.iconName) {\n      this.removeAttribute(`data-icon-section`);\n    }\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n  }\n\n  private _getShortcut(): string | null {\n    if (!this.keyboardManager || !this.command)\n      return null;\n    const bindings = (this.keyboardManager as any).getBindings?.() ?? [];\n    const binding = bindings.find((b: any) => b.commandId === this.command);\n    if (!binding)\n      return null;\n    const mods = Array.from(binding.modifiers ?? [], (m: string) =>\n      ({ ctrl: `⌃`, shift: `⇧`, alt: `⌥`, meta: `⌘` })[m] ?? m);\n    const key = binding.key?.length === 1 ? binding.key.toUpperCase() : binding.key;\n    return [...mods, key].join(``);\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .check {\n      width: 16px;\n      margin-right: var(--space-s);\n      font-size: var(--text-m);\n      color: var(--accent);\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n\n    .shortcut {\n      margin-left: var(--space-l);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s);\n    }\n  `];\n\n  render() {\n    const shortcut = this._getShortcut();\n    const resolvedIcon = this._resolvedIcon();\n    return html`\n      <div \n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this.handleClick}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitemcheckbox\"\n        aria-checked=\"${this.checked}\"\n      >\n        <span class=\"check\">${this.checked ? `✓` : ``}</span>\n        <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\">${this._resolvedLabel()}</span>\n        ${shortcut ? html`<span class=\"shortcut\">${shortcut}</span>` : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-check-item': MenuCheckItem;\n  }\n}\n","import type { CommandRegistry } from '@clinth/ui-commands';\n\nexport class MenuCommandController {\n  private registry: CommandRegistry<unknown>;\n  private target: EventTarget;\n  private boundHandler: (e: Event) => void;\n\n  constructor(options: { registry: CommandRegistry<unknown>; target?: EventTarget }) {\n    this.registry = options.registry;\n    this.target = options.target ?? document;\n    this.boundHandler = this.handleCommand.bind(this);\n  }\n\n  start(): void {\n    this.target.addEventListener(`command`, this.boundHandler);\n  }\n\n  stop(): void {\n    this.target.removeEventListener(`command`, this.boundHandler);\n  }\n\n  private handleCommand(e: Event): void {\n    const target = e.target as any;\n    const command = target?.command;\n    if (!command)\n      return;\n\n    const args = target?.commandArgs ?? ``;\n    this.registry.invoke(command, { args });\n  }\n}\n","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-menu-header`)\nexport class MenuHeader extends LitElement {\n  @property({ type: String }) label = ``;\n\n  static styles = css`\n    :host {\n      display: block;\n      padding: 6px var(--space-m) var(--space-xs);\n      font-size: var(--text-s);\n      font-weight: var(--font-weight-bold);\n      text-transform: uppercase;\n      color: var(--surface-muted-text);\n      letter-spacing: 0.5px;\n    }\n  `;\n\n  render() {\n    return html`<div>${this.label}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-header': MenuHeader;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-menu-sub-trigger`)\nexport class MenuSubTrigger extends LitElement {\n  @property({ type: String }) command = ``;\n  @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n  @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n  @state() private _hasSubmenu = false;\n  @query(`slot[name=\"submenu\"]`) private _slot!: HTMLSlotElement;\n  @query(`.submenu-popover`) private _submenuPopover!: HTMLElement;\n  @query(`.item`) private _itemEl!: HTMLElement;\n\n  private static _count = 0;\n  private _anchorName = `--mst-${MenuSubTrigger._count++}`;\n  private _hoverTimeout: number | null = null;\n  private _hideTimeout: number | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`keydown`, this._handleKeydown);\n  }\n\n  firstUpdated(): void {\n    this.style.setProperty(`--anchor-name`, this._anchorName);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`keydown`, this._handleKeydown);\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n    }\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n    }\n  }\n\n  private _propagateContext(): void {\n    const items = this._slot?.assignedElements({ flatten: true }) ?? [];\n    for (const el of items) {\n      if (`registry` in el)\n        (el as any).registry = this.registry;\n      if (`keyboardManager` in el)\n        (el as any).keyboardManager = this.keyboardManager;\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) {\n      this._propagateContext();\n    }\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>): void {\n    super.willUpdate(changedProperties);\n    const resolvedIcon = this._resolvedIcon();\n    if (resolvedIcon && !this.iconName) {\n      this.setAttribute(`data-icon-section`, ``);\n    } else if (!resolvedIcon && !this.iconName) {\n      this.removeAttribute(`data-icon-section`);\n    }\n  }\n\n  private _resolvedIcon(): string | null {\n    if (this.iconName)\n      return this.iconName;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.icon ?? null;\n    }\n    return null;\n  }\n\n  private _handleSlotChange(): void {\n    this._hasSubmenu = this._slot?.assignedElements().length > 0;\n    this._propagateContext();\n  }\n\n  private _showSubmenu(): void {\n    if (!this._submenuPopover?.popover)\n      return;\n    try {\n      (this._submenuPopover as any).showPopover();\n    } catch (_) { /* ignore */ }\n  }\n\n  private _hideSubmenu(): void {\n    if (!this._submenuPopover?.popover)\n      return;\n    try {\n      (this._submenuPopover as any).hidePopover();\n    } catch (_) { /* ignore */ }\n  }\n\n  private _cancelHide(): void {\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n      this._hideTimeout = null;\n    }\n  }\n\n  private _scheduleHide(): void {\n    this._cancelHide();\n    this._hideTimeout = window.setTimeout(() => {\n      this._hideSubmenu();\n      this._hideTimeout = null;\n    }, 100);\n  }\n\n  private _handleMouseEnter(): void {\n    if (this.disabled || !this._hasSubmenu)\n      return;\n    this._cancelHide();\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n    }\n    this._hoverTimeout = window.setTimeout(() => {\n      this._showSubmenu();\n    }, 150);\n  }\n\n  private _handleMouseLeave(): void {\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n      this._hoverTimeout = null;\n    }\n    this._scheduleHide();\n  }\n\n  private _handleSubmenuMouseEnter(): void {\n    this._cancelHide();\n  }\n\n  private _handleSubmenuMouseLeave(): void {\n    this._scheduleHide();\n  }\n\n  private _handleClick(): void {\n    if (this.disabled || !this.command)\n      return;\n\n    this.dispatchEvent(new CustomEvent(`command`, {\n      detail: { command: this.command, args: this.commandArgs },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled)\n      return;\n\n    switch (e.key) {\n      case `ArrowRight`:\n      case `Enter`:\n      case ` `:\n        e.preventDefault();\n        e.stopPropagation();\n        if (this._hasSubmenu) {\n          this._showSubmenu();\n          requestAnimationFrame(() => {\n            const container = this._slot?.assignedElements({ flatten: true })\n              .find(el => el.tagName === `IXFX-MENU-CONTAINER`) as (HTMLElement & { focusFirst: () => void }) | undefined;\n            container?.focusFirst();\n          });\n        }\n        break;\n      case `ArrowLeft`:\n        e.preventDefault();\n        e.stopPropagation();\n        this._hideSubmenu();\n        this._itemEl?.focus();\n        break;\n      case `Escape`:\n        e.preventDefault();\n        e.stopPropagation();\n        this._hideSubmenu();\n        break;\n    }\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      anchor-name: var(--anchor-name);\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    .submenu-popover {\n      position: fixed;\n      position-anchor: var(--anchor-name);\n      inset: auto;\n      top: anchor(top);\n      left: anchor(right);\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: transparent;\n      /* UA stylesheet sets overflow:auto on [popover], which clips the box-shadow\n         of the inner ixfx-menu-container child. Override to let the shadow render. */\n      overflow: visible;\n      position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n\n    .arrow {\n      color: var(--surface-muted-text);\n      margin-left: var(--space-m);\n    }\n  `];\n\n  render() {\n    const resolvedIcon = this._resolvedIcon();\n    return html`\n      <div\n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this._handleClick}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"false\"\n      >\n        <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\"><slot></slot>${this.label}</span>\n        <span class=\"arrow\">${this._hasSubmenu ? html`<ixfx-icon name=\"chevron-right\"></ixfx-icon>` : nothing}</span>\n      </div>\n      <div class=\"submenu-popover\" popover=\"auto\"\n        @mouseenter=${this._handleSubmenuMouseEnter}\n        @mouseleave=${this._handleSubmenuMouseLeave}\n      >\n        <slot name=\"submenu\" @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-sub-trigger': MenuSubTrigger;\n  }\n}\n","import { css, html, LitElement } from 'lit';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-menu-separator`)\nexport class MenuSeparator extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      margin: var(--space-xs) 0;\n    }\n\n    .separator {\n      height: 1px;\n      background: var(--surface-4);\n    }\n  `;\n\n  render() {\n    return html`<div class=\"separator\"></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-separator': MenuSeparator;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport type { TemplateResult } from 'lit';\nimport type { TreeNode } from '../tree/types.js';\nimport type { MenuTriggerCommandDetail } from './menu-trigger.js';\nimport { html, nothing } from 'lit';\nimport './menu-container.js';\nimport './menu-item.js';\nimport './menu-sub-trigger.js';\nimport './menu-separator.js';\nimport './menu-header.js';\n\nexport type MenuFromTreeOptions = {\n  onCommand?: (detail: MenuTriggerCommandDetail) => void;\n  registry?: CommandRegistry<unknown>;\n  keyboardManager?: KeyboardManager;\n};\n\nfunction isLeaf(node: TreeNode): boolean {\n  return node.children === undefined || node.children.length === 0;\n}\n\nexport function menuFromTree(\n  nodes: TreeNode[],\n  options: MenuFromTreeOptions = {}\n): TemplateResult {\n  const { onCommand, registry, keyboardManager } = options;\n\n  return html`${nodes.map(node => {\n    const label = node.item.label;\n\n    if (label === '-') {\n      return html`<ixfx-menu-separator></ixfx-menu-separator>`;\n    }\n\n    if (label.startsWith('# ')) {\n      return html`<ixfx-menu-header label=\"${label.slice(2)}\"></ixfx-menu-header>`;\n    }\n\n    if (!isLeaf(node)) {\n      const submenu = menuFromTree(node.children!, options);\n      return html`\n        <ixfx-menu-sub-trigger label=\"${label}\">\n          <ixfx-menu-container\n            slot=\"submenu\"\n            .registry=${registry ?? nothing}\n            .keyboardManager=${keyboardManager ?? nothing}\n          >${submenu}</ixfx-menu-container>\n        </ixfx-menu-sub-trigger>\n      `;\n    }\n\n    return html`\n      <ixfx-menu-item\n        command=\"${node.item.key}\"\n        label=\"${label}\"\n        icon-name=\"${node.item.icon ?? nothing}\"\n        @command=${onCommand ? (e: CustomEvent) => onCommand(e.detail) : nothing}\n      ></ixfx-menu-item>\n    `;\n  })}`;\n}\n\nfunction buildMenuItemEl(\n  node: TreeNode,\n  options: MenuFromTreeOptions\n): HTMLElement {\n  const { onCommand, registry } = options;\n  const label = node.item.label;\n\n  const el = document.createElement('ixfx-menu-item');\n  el.setAttribute('command', node.item.key);\n  el.setAttribute('label', label);\n  if (node.item.icon) {\n    el.setAttribute('icon-name', node.item.icon);\n  }\n  if (onCommand) {\n    el.addEventListener('command', (e) => onCommand((e as CustomEvent).detail));\n  }\n  if (registry) {\n    (el as any).registry = registry;\n  }\n  return el;\n}\n\nfunction buildMenuSeparatorEl(): HTMLElement {\n  return document.createElement('ixfx-menu-separator');\n}\n\nfunction buildMenuHeaderEl(label: string): HTMLElement {\n  const el = document.createElement('ixfx-menu-header');\n  el.setAttribute('label', label);\n  return el;\n}\n\nfunction buildMenuSubTriggerEl(\n  node: TreeNode,\n  options: MenuFromTreeOptions\n): HTMLElement {\n  const { onCommand, registry, keyboardManager } = options;\n\n  const el = document.createElement('ixfx-menu-sub-trigger');\n  el.setAttribute('label', node.item.label);\n  if (registry) (el as any).registry = registry;\n  if (keyboardManager) (el as any).keyboardManager = keyboardManager;\n\n  const container = document.createElement('ixfx-menu-container');\n  container.setAttribute('slot', 'submenu');\n  if (registry) (container as any).registry = registry;\n  if (keyboardManager) (container as any).keyboardManager = keyboardManager;\n\n  const childEls = menuFromTreeToElements(node.children!, options);\n  for (const child of childEls) {\n    container.appendChild(child);\n  }\n\n  el.appendChild(container);\n  return el;\n}\n\nexport function menuFromTreeToElements(\n  nodes: TreeNode[],\n  options: MenuFromTreeOptions = {}\n): HTMLElement[] {\n  return nodes.map(node => {\n    const label = node.item.label;\n\n    if (label === '-') {\n      return buildMenuSeparatorEl();\n    }\n\n    if (label.startsWith('# ')) {\n      return buildMenuHeaderEl(label.slice(2));\n    }\n\n    if (!isLeaf(node)) {\n      return buildMenuSubTriggerEl(node, options);\n    }\n\n    return buildMenuItemEl(node, options);\n  });\n}\n","import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type MenuRadioItemSelectDetail = {\n  readonly value: string;\n};\n\nexport type MenuRadioItemSelectEvent = CustomEvent<MenuRadioItemSelectDetail>;\n\n@customElement(`ixfx-menu-radio-item`)\nexport class MenuRadioItem extends LitElement {\n  @property({ type: String }) value = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String }) groupValue = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n\n  private handleClick(): void {\n    if (this.disabled)\n      return;\n\n    this.dispatchEvent(new CustomEvent<MenuRadioItemSelectDetail>(`radio-select`, {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .radio {\n      width: 16px;\n      margin-right: var(--space-s);\n      font-size: var(--text-m);\n      color: var(--accent);\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n  `];\n\n  render() {\n    const isSelected = this.groupValue === this.value;\n\n    return html`\n      <div \n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this.handleClick}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitemradio\"\n        aria-checked=\"${isSelected}\"\n      >\n        <span class=\"radio\">${isSelected ? `●` : ``}</span>\n        <span class=\"icon-slot\">${this.iconName ? html`<ixfx-icon name=\"${this.iconName}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-radio-item': MenuRadioItem;\n  }\n}\n","import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport './menu-radio-item.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type MenuRadioGroupChangeDetail = {\n  readonly name: string;\n  readonly value: string;\n};\n\nexport type MenuRadioGroupChangeEvent = CustomEvent<MenuRadioGroupChangeDetail>;\n\n@customElement(`ixfx-menu-radio-group`)\nexport class MenuRadioGroup extends LitElement {\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  @state() private slottedElements: Element[] = [];\n\n  private handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.slottedElements = slot.assignedElements();\n    this.updateSlottedValues();\n  }\n\n  private updateSlottedValues(): void {\n    for (const el of this.slottedElements) {\n      (el as any).groupValue = this.value;\n    }\n  }\n\n  private handleRadioSelect(e: CustomEvent): void {\n    this.value = e.detail.value;\n    this.dispatchEvent(new CustomEvent<MenuRadioGroupChangeDetail>(`radio-change`, {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`value`)) {\n      this.updateSlottedValues();\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    ::slotted(menu-radio-item) {\n      display: block;\n    }\n  `;\n\n  render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange} @radio-select=${this.handleRadioSelect}></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-radio-group': MenuRadioGroup;\n  }\n}\n","export { MenuBar } from './menu-bar.js';\nexport { MenuCheckItem } from './menu-check-item.js';\nexport { MenuCommandController } from './menu-command-controller.js';\nexport { MenuContainer } from './menu-container.js';\nexport { MenuHeader } from './menu-header.js';\nexport { MenuItem } from './menu-item.js';\nexport { menuFromTree, menuFromTreeToElements } from './menu-from-tree.js';\nexport type { MenuFromTreeOptions } from './menu-from-tree.js';\nexport { MenuRadioGroup } from './menu-radio-group.js';\nexport { MenuRadioItem } from './menu-radio-item.js';\nexport { MenuSeparator } from './menu-separator.js';\nexport { MenuSubTrigger } from './menu-sub-trigger.js';\nexport { MenuTrigger } from './menu-trigger.js';\n"],"mappings":"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"}

package/dist/{menu-item-DEzL_Yjk.js → menu-item-6IU5weHi.js}

@@ -1,10 +1,10 @@
 import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-Bg3QbcrD.js";
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
-import "./icon-BR5aTIiP.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import "./icon-CYACf6o8.js";
 import { t as popupSurfaceStyles } from "./popup-Ddx9LCzY.js";
 import "./interaction-CQDQJf2Q.js";
 import { LitElement, css, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-container.ts
 let MenuContainer = class MenuContainer extends LitElement {
 	constructor(..._args) {
@@ -266,7 +266,7 @@ __decorate([property({
 __decorate([property({ attribute: false })], MenuContainer.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuContainer.prototype, "keyboardManager", void 0);
 __decorate([query(`.popover`)], MenuContainer.prototype, "_popover", void 0);
-MenuContainer = __decorate([customElement(`ixfx-menu-container`)], MenuContainer);
+MenuContainer = __decorate([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
 //#endregion
 //#region src/menu/menu-trigger.ts
 var _MenuTrigger;
@@ -558,7 +558,7 @@ __decorate([state()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
 __decorate([query(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([query(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
-MenuTrigger = _MenuTrigger = __decorate([customElement(`ixfx-menu-trigger`)], MenuTrigger);
+MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
 //#endregion
 //#region src/menu/menu-item.ts
 let MenuItem = class MenuItem extends LitElement {
@@ -759,8 +759,8 @@ __decorate([property({ attribute: false })], MenuItem.prototype, "keyboardManage
 __decorate([property({ attribute: false })], MenuItem.prototype, "submenuPopover", void 0);
 __decorate([state()], MenuItem.prototype, "_hasChildren", void 0);
 __decorate([query(`slot`)], MenuItem.prototype, "_slot", void 0);
-MenuItem = __decorate([customElement(`ixfx-menu-item`)], MenuItem);
+MenuItem = __decorate([safeCustomElement(`ixfx-menu-item`)], MenuItem);
 //#endregion
 export { MenuTrigger as n, MenuContainer as r, MenuItem as t };
 
-//# sourceMappingURL=menu-item-DEzL_Yjk.js.map
+//# sourceMappingURL=menu-item-6IU5weHi.js.map