@ixfx/components 0.2.4 → 0.2.6

package/dist/colour-picker-BNqDz4wK.js

@@ -0,0 +1,922 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { n as ICON_CHECK } from "./defaults-FEZaGiYZ.js";
+import { t as popupSurfaceStyles } from "./popup-Ddx9LCzY.js";
+import { t as colour_exports } from "./colour-C3MQIjFJ-BJV-QC-3.js";
+import "./labelled-range-input.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const RANGE_LIMITS = {
+	l: [0, 1],
+	c: [0, .4],
+	h: [0, 360],
+	a: [0, 1]
+};
+const DEFAULT_RANGES = {
+	l: RANGE_LIMITS.l,
+	c: RANGE_LIMITS.c,
+	h: RANGE_LIMITS.h,
+	a: RANGE_LIMITS.a
+};
+/**
+* Convert OKLCH to a CSS string
+*/
+function oklchToCss(l, c, h, a = 1) {
+	if (a < 1) return `oklch(${l} ${c} ${h} / ${a})`;
+	return `oklch(${l} ${c} ${h})`;
+}
+//#endregion
+//#region src/colour-picker/colour-picker.ts
+let ColourPicker = class ColourPicker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.l = .7;
+		this.c = .15;
+		this.h = 180;
+		this.a = 1;
+		this.hidePreview = false;
+		this.hideH = false;
+		this.hideL = false;
+		this.hideC = false;
+		this.showA = false;
+		this.horizontal = false;
+		this.slidersVertical = false;
+		this.hideTooltips = false;
+		this._valueAttr = null;
+		this.rangeLAttr = null;
+		this.rangeCAttr = null;
+		this.rangeHAttr = null;
+		this.rangeAAttr = null;
+		this._ranges = {
+			l: DEFAULT_RANGES.l,
+			c: DEFAULT_RANGES.c,
+			h: DEFAULT_RANGES.h,
+			a: DEFAULT_RANGES.a
+		};
+		this._defaultL = this.l;
+		this._defaultC = this.c;
+		this._defaultH = this.h;
+		this._defaultA = this.a;
+		this._userInitiated = /* @__PURE__ */ new Set();
+		this._onInput = (e, channel) => {
+			const detail = e.detail;
+			this._userInitiated.add(channel);
+			this[channel] = detail.value;
+			this._dispatchInput();
+			e.stopPropagation();
+		};
+		this._onChange = (e, channel) => {
+			const detail = e.detail;
+			this._userInitiated.add(channel);
+			const value = typeof detail.value === `string` ? Number.parseFloat(detail.value) : detail.value;
+			switch (channel) {
+				case `l`:
+					this.l = value;
+					break;
+				case `c`:
+					this.c = value;
+					break;
+				case `h`:
+					this.h = value;
+					break;
+				case `a`:
+					this.a = value;
+					break;
+			}
+			e.stopPropagation();
+			this.requestUpdate();
+			this._dispatchChange();
+		};
+	}
+	get value() {
+		return oklchToCss(this.l, this.c, this.h, this.a);
+	}
+	set value(colourString) {
+		const c = colour_exports.convert(colourString, `oklch-absolute`);
+		this.l = c.l;
+		this.c = c.c;
+		this.h = c.h;
+		this.a = c.opacity ?? 1;
+		this._valueAttr = colourString;
+	}
+	/**
+	* Set the colour from any ixfx-compatible format (CSS string, OkLch object,
+	* HSL object, etc.). Also updates the double-click reset defaults for all
+	* sliders.
+	*/
+	setColour(colour) {
+		const c = colour_exports.convert(colour, `oklch-absolute`);
+		this.l = c.l;
+		this.c = c.c;
+		this.h = c.h;
+		this.a = c.opacity ?? 1;
+	}
+	get rangeL() {
+		return [this._ranges.l[0], this._ranges.l[1]];
+	}
+	set rangeL(range) {
+		this._applyRangeInput(`l`, range);
+	}
+	get rangeC() {
+		return [this._ranges.c[0], this._ranges.c[1]];
+	}
+	set rangeC(range) {
+		this._applyRangeInput(`c`, range);
+	}
+	get rangeH() {
+		return [this._ranges.h[0], this._ranges.h[1]];
+	}
+	set rangeH(range) {
+		this._applyRangeInput(`h`, range);
+	}
+	get rangeA() {
+		return [this._ranges.a[0], this._ranges.a[1]];
+	}
+	set rangeA(range) {
+		this._applyRangeInput(`a`, range);
+	}
+	setRangeL(range) {
+		this.rangeL = range;
+	}
+	setRangeC(range) {
+		this.rangeC = range;
+	}
+	setRangeH(range) {
+		this.rangeH = range;
+	}
+	setRangeA(range) {
+		this.rangeA = range;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has(`rangeLAttr`)) this._setRangeFromAttribute(`l`, this.rangeLAttr);
+		if (changedProperties.has(`rangeCAttr`)) this._setRangeFromAttribute(`c`, this.rangeCAttr);
+		if (changedProperties.has(`rangeHAttr`)) this._setRangeFromAttribute(`h`, this.rangeHAttr);
+		if (changedProperties.has(`rangeAAttr`)) this._setRangeFromAttribute(`a`, this.rangeAAttr);
+		super.willUpdate(changedProperties);
+	}
+	_applyRangeInput(channel, input) {
+		const normalized = this._coerceRangeInput(channel, input);
+		if (!normalized) return;
+		this._setRange(channel, normalized);
+	}
+	_coerceRangeInput(channel, input) {
+		if (!Array.isArray(input) || input.length < 2) return null;
+		const [start, end] = input;
+		if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
+		return this._normalizeRange(channel, [start, end]);
+	}
+	_setRangeFromAttribute(channel, value) {
+		if (value === null) {
+			this._setRange(channel, DEFAULT_RANGES[channel]);
+			return;
+		}
+		const parsed = this._parseRangeString(channel, value);
+		if (parsed) this._setRange(channel, parsed);
+	}
+	_setRange(channel, range) {
+		const normalized = this._normalizeRange(channel, range);
+		const currentRange = this._ranges[channel];
+		if (currentRange[0] === normalized[0] && currentRange[1] === normalized[1]) return;
+		this._ranges = {
+			...this._ranges,
+			[channel]: normalized
+		};
+		switch (channel) {
+			case `l`:
+				this.l = this._clampToRange(`l`, this.l);
+				break;
+			case `c`:
+				this.c = this._clampToRange(`c`, this.c);
+				break;
+			case `h`:
+				this.h = this._clampToRange(`h`, this.h);
+				break;
+			case `a`:
+				this.a = this._clampToRange(`a`, this.a);
+				break;
+		}
+		this.requestUpdate();
+	}
+	_getRange(channel) {
+		return this._ranges[channel] ?? DEFAULT_RANGES[channel];
+	}
+	_parseRangeString(channel, value) {
+		const parts = value.trim().split(`-`, 2);
+		if (parts.length !== 2) return null;
+		const start = Number(parts[0].trim());
+		const end = Number(parts[1].trim());
+		if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
+		return this._normalizeRange(channel, [start, end]);
+	}
+	_normalizeRange(channel, range) {
+		const limits = DEFAULT_RANGES[channel];
+		const [rawMin, rawMax] = range;
+		const minVal = Math.min(Math.min(rawMin, rawMax), limits[1]);
+		const maxVal = Math.max(Math.max(rawMin, rawMax), limits[0]);
+		return [Math.max(minVal, limits[0]), Math.min(maxVal, limits[1])];
+	}
+	_clampToRange(channel, value) {
+		const [min, max] = this._getRange(channel);
+		return Math.min(Math.max(value, min), max);
+	}
+	render() {
+		const makeSlider = (channel, label, min, max, step, isHidden, formatter) => {
+			if (isHidden) return nothing;
+			return html`
+        <ixfx-labelled-range-input
+          id="slider-${channel}"
+          label="${label}"
+          min=${min}
+          max=${max}
+          mini-width-threshold=200
+          .value=${this[channel]}
+          step=${step}
+          .orientation=${this.slidersVertical ? `vertical` : `horizontal`}
+          .formatter=${formatter}
+          ?no-tooltip=${this.hideTooltips}
+          .displayTextLogic=${this.hideTooltips ? `show` : `transient`}
+          @input=${(e) => this._onInput(e, channel)}
+          @change=${(e) => this._onChange(e, channel)}
+        ></ixfx-labelled-range-input>
+      `;
+		};
+		return html`
+      <div class="picker" ?horizontal=${this.horizontal}>
+        <div class="preview" ?hidden=${this.hidePreview}></div>
+        <div class="sliders">
+          ${makeSlider(`h`, `Hue`, ...this._getRange(`h`), 1, this.hideH, (v) => `${Math.round(Number(v))}°`)}
+          ${makeSlider(`l`, `Lightness`, ...this._getRange(`l`), .01, this.hideL, (v) => `${Math.round(Number(v) * 100)}%`)}
+          ${makeSlider(`c`, `Chroma`, ...this._getRange(`c`), .005, this.hideC, (v) => `${Number.parseFloat(v).toFixed(2)}`)}
+          ${this.showA ? makeSlider(`a`, `Opacity`, ...this._getRange(`a`), .01, false, (v) => `${Math.round(Number(v) * 100)}%`) : nothing}
+        </div>
+      </div>
+    `;
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._updateGradients();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has(`l`) && !this._userInitiated.has(`l`)) this._defaultL = this.l;
+		if (changedProperties.has(`c`) && !this._userInitiated.has(`c`)) this._defaultC = this.c;
+		if (changedProperties.has(`h`) && !this._userInitiated.has(`h`)) this._defaultH = this.h;
+		if (changedProperties.has(`a`) && !this._userInitiated.has(`a`)) this._defaultA = this.a;
+		this._userInitiated.clear();
+		if (changedProperties.has(`l`) || changedProperties.has(`c`) || changedProperties.has(`h`) || changedProperties.has(`a`) || changedProperties.has(`showA`) || changedProperties.has(`slidersVertical`)) this._updateGradients();
+	}
+	_updateGradients() {
+		const l = this.l;
+		const c = this.c;
+		const h = this.h;
+		const a = this.a;
+		const [lMin, lMax] = this._ranges.l;
+		const [cMin, cMax] = this._ranges.c;
+		const [hMin, hMax] = this._ranges.h;
+		const [aMin, aMax] = this._ranges.a;
+		const dir = this.slidersVertical ? `to top` : `to right`;
+		const lGrad = `linear-gradient(in oklch ${dir}, oklch(${lMin} ${c} ${h}), oklch(${lMax} ${c} ${h}))`;
+		const cGrad = `linear-gradient(in oklch ${dir}, oklch(${l} ${cMin} ${h}), oklch(${l} ${cMax} ${h}))`;
+		const hGrad = `linear-gradient(in oklch ${hMax - hMin >= 300 ? `longer` : `shorter`} hue ${dir}, oklch(${l} ${c} ${hMin}), oklch(${l} ${c} ${hMax}))`;
+		const aGrad = `
+      linear-gradient(${dir}, oklch(${l} ${c} ${h} / ${aMin}), oklch(${l} ${c} ${h} / ${aMax})),
+      repeating-conic-gradient(
+        var(--surface-2) 0% 25%,
+        var(--surface-4) 0% 50%
+      ) 50% / 16px 16px
+    `;
+		const trackBgVars = [`--background-track`, `--background-track-hover`];
+		const trackValueVars = [
+			`--background-track-value`,
+			`--background-track-value-hover`,
+			`--background-track-value-active`,
+			`--background-track-value-vertical`,
+			`--background-track-value-hover-vertical`,
+			`--background-track-value-active-vertical`
+		];
+		const sliders = [
+			[this._sliderL, lGrad],
+			[this._sliderC, cGrad],
+			[this._sliderH, hGrad]
+		];
+		if (this.showA && this._sliderA) sliders.push([this._sliderA, aGrad]);
+		for (const [el, grad] of sliders) {
+			if (!el) continue;
+			for (const v of trackBgVars) el.style.setProperty(v, grad);
+			for (const v of trackValueVars) el.style.setProperty(v, `transparent`);
+		}
+		if (this._previewEl) if (this.a < 1) {
+			const previewBg = `
+          linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),
+          repeating-conic-gradient(
+            var(--surface-2) 0% 25%,
+            var(--surface-4) 0% 50%
+          ) 50% / 16px 16px
+        `;
+			this._previewEl.style.background = previewBg;
+		} else this._previewEl.style.background = this.value;
+	}
+	_dispatchInput() {
+		const detail = {
+			l: this.l,
+			c: this.c,
+			h: this.h,
+			a: this.a
+		};
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_dispatchChange() {
+		const detail = {
+			l: this.l,
+			c: this.c,
+			h: this.h,
+			a: this.a
+		};
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	static {
+		this.styles = css`
+    /*
+     * Default intrinsic size — not determined by label text.
+     * Override via CSS: ixfx-colour-picker { width: 100%; height: 200px; }
+     * Or via custom properties: --picker-alt-width, --picker-alt-min-slider-height
+     */
+    :host {
+      display: block;
+      width: var(--picker-alt-width, 240px);
+      height: var(--picker-alt-height, 240px);
+      --_radius-m: var(--radius-m, 4px);
+      --_radius-s: var(--radius-m, 3px);
+      container-type: size;
+    }
+
+    .picker {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-s, 8px);
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .picker[horizontal] {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    .sliders {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-s, 8px);
+      flex: 1;
+      min-height: 0;
+    }
+
+    .picker[horizontal] .sliders {
+      flex-direction: column;
+    }
+
+    .preview {
+      flex-shrink: 0;
+      height: 30%;
+      border-radius: var(--_radius-m);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    .preview[hidden] {
+      display: none;
+    }
+
+    .picker[horizontal] .preview {
+      width: 3em;
+      height: auto;
+      flex-shrink: 0;
+    }
+
+    ixfx-labelled-range-input {
+      flex: 1;
+      min-height: var(--picker-alt-min-slider-height, 2.5em);
+      width: 100%;
+      min-width: 0;
+      --track-thickness: 2em;
+      --track-radius: var(--_radius-s);
+      --label-width: 5em;
+      --thumb-thickness: 4px;
+      --thumb-color: rgba(255, 255, 255, 0.9);
+      --thumb-color-active: white;
+      --thumb-radius: 3px;
+      --thumb-border: 2px solid rgba(255, 255, 255, 0.85);
+      --thumb-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65);
+    }
+
+    /* Vertical sliders mode: sliders are side-by-side vertical bars */
+    :host([sliders-vertical]) .sliders {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    :host([sliders-vertical]) ixfx-labelled-range-input {
+      width: auto;
+      height: 100%;
+      min-height: 0;
+      --mini: 1;             /* force mini mode: no label, tooltip on hover */
+      --track-thickness: 100%;  /* fill full width of the narrow slider */
+    }
+
+    /* Landscape */
+    @container (aspect-ratio > 1) {
+      .picker {
+        flex-direction: row;
+        display:flex;
+        align-items: stretch;
+
+      }
+      .preview {
+        width: 30%;
+        height: unset;
+      }
+      .sliders {
+        height: 100%;
+        overflow: hidden;
+      }
+    }
+
+    /* Small height. Show as landscape */
+    @container (max-height: 150px) {
+      .picker {
+        flex-direction: row;
+        align-items: stretch;
+      }
+      ixfx-labelled-range-input {
+        --track-thickness: 1em;
+        min-height: unset;
+      }
+      .preview {
+        min-width: 50%;
+        height: auto;
+      }
+    }
+
+    /* Medium height — tighter but not extreme */
+    @container (max-height: 210px) and (min-height: 150px) {
+      ixfx-labelled-range-input {
+        --track-thickness: 1.6em;
+        min-height: 1.8em;
+      }
+    }
+  `;
+	}
+};
+__decorate([property({ type: Number })], ColourPicker.prototype, "l", void 0);
+__decorate([property({ type: Number })], ColourPicker.prototype, "c", void 0);
+__decorate([property({ type: Number })], ColourPicker.prototype, "h", void 0);
+__decorate([property({ type: Number })], ColourPicker.prototype, "a", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-preview`,
+	reflect: true
+})], ColourPicker.prototype, "hidePreview", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-h`,
+	reflect: true
+})], ColourPicker.prototype, "hideH", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-l`,
+	reflect: true
+})], ColourPicker.prototype, "hideL", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-c`,
+	reflect: true
+})], ColourPicker.prototype, "hideC", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-a`
+})], ColourPicker.prototype, "showA", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `horizontal`,
+	reflect: true
+})], ColourPicker.prototype, "horizontal", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `sliders-vertical`,
+	reflect: true
+})], ColourPicker.prototype, "slidersVertical", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-tooltips`,
+	reflect: true
+})], ColourPicker.prototype, "hideTooltips", void 0);
+__decorate([property({
+	type: String,
+	attribute: `value`
+})], ColourPicker.prototype, "_valueAttr", void 0);
+__decorate([property({
+	type: String,
+	attribute: `range-l`
+})], ColourPicker.prototype, "rangeLAttr", void 0);
+__decorate([property({
+	type: String,
+	attribute: `range-c`
+})], ColourPicker.prototype, "rangeCAttr", void 0);
+__decorate([property({
+	type: String,
+	attribute: `range-h`
+})], ColourPicker.prototype, "rangeHAttr", void 0);
+__decorate([property({
+	type: String,
+	attribute: `range-a`
+})], ColourPicker.prototype, "rangeAAttr", void 0);
+__decorate([query(`#slider-l`)], ColourPicker.prototype, "_sliderL", void 0);
+__decorate([query(`#slider-c`)], ColourPicker.prototype, "_sliderC", void 0);
+__decorate([query(`#slider-h`)], ColourPicker.prototype, "_sliderH", void 0);
+__decorate([query(`#slider-a`)], ColourPicker.prototype, "_sliderA", void 0);
+__decorate([query(`.preview`)], ColourPicker.prototype, "_previewEl", void 0);
+ColourPicker = __decorate([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
+//#endregion
+//#region src/colour-picker/colour-picker-popup.ts
+let _instanceCounter = 0;
+const PICKER_SIZES = {
+	small: {
+		width: 130,
+		height: 100
+	},
+	medium: {
+		width: 100,
+		height: 155
+	},
+	large: {
+		width: 200,
+		height: 180
+	},
+	huge: {
+		width: 290,
+		height: 240
+	}
+};
+function swatchBackground(l, c, h, a) {
+	if (a < 1) return `
+      linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),
+      repeating-conic-gradient(
+        var(--surface-2) 0% 25%,
+        var(--surface-4) 0% 50%
+      ) 50% / 8px 8px
+    `;
+	return oklchToCss(l, c, h);
+}
+let ColourPickerPopup = class ColourPickerPopup extends LitElement {
+	constructor() {
+		super();
+		this.mode = `fluid`;
+		this.l = .7;
+		this.c = .15;
+		this.h = 180;
+		this.a = 1;
+		this.showPreview = false;
+		this.hideH = false;
+		this.hideL = false;
+		this.hideC = false;
+		this.showA = false;
+		this.horizontal = false;
+		this.size = `medium`;
+		this._isOpen = false;
+		this._everOpened = false;
+		this._pendingL = this.l;
+		this._pendingC = this.c;
+		this._pendingH = this.h;
+		this._pendingA = this.a;
+		this._savedL = this.l;
+		this._savedC = this.c;
+		this._savedH = this.h;
+		this._savedA = this.a;
+		this._pendingConfirmed = false;
+		this._onPopoverToggle = (e) => {
+			const te = e;
+			this._isOpen = te.newState === `open`;
+			if (te.newState === `open`) {
+				this._savedL = this.l;
+				this._savedC = this.c;
+				this._savedH = this.h;
+				this._savedA = this.a;
+				this._pendingL = this.l;
+				this._pendingC = this.c;
+				this._pendingH = this.h;
+				this._pendingA = this.a;
+				this._pendingConfirmed = false;
+			} else if (this.mode === `confirm` && !this._pendingConfirmed) this._pickerEl?.setColour(oklchToCss(this._savedL, this._savedC, this._savedH, this._savedA));
+		};
+		this._onPickerInput = (e) => {
+			e.stopPropagation();
+			const detail = e.detail;
+			if (this.mode === `confirm`) {
+				this._pendingL = detail.l;
+				this._pendingC = detail.c;
+				this._pendingH = detail.h;
+				this._pendingA = detail.a ?? 1;
+				return;
+			}
+			this.l = detail.l;
+			this.c = detail.c;
+			this.h = detail.h;
+			this.a = detail.a ?? 1;
+			this._dispatchInput();
+		};
+		this._onPickerChange = (e) => {
+			e.stopPropagation();
+			const detail = e.detail;
+			if (this.mode === `confirm`) {
+				this._pendingL = detail.l;
+				this._pendingC = detail.c;
+				this._pendingH = detail.h;
+				this._pendingA = detail.a ?? 1;
+				return;
+			}
+			this.l = detail.l;
+			this.c = detail.c;
+			this.h = detail.h;
+			this.a = detail.a ?? 1;
+			this._dispatchChange();
+		};
+		this._onConfirm = () => {
+			this.l = this._pendingL;
+			this.c = this._pendingC;
+			this.h = this._pendingH;
+			this.a = this._pendingA;
+			this._pendingConfirmed = true;
+			this._dispatchChange();
+			try {
+				this._popupEl.hidePopover();
+			} catch {}
+		};
+		this._onSwatchClick = async () => {
+			if (!this._everOpened) {
+				this._everOpened = true;
+				await this.updateComplete;
+			}
+			try {
+				this._popupEl.showPopover();
+			} catch {}
+		};
+		const id = ++_instanceCounter;
+		this._uid = `cp-popup-${id}`;
+		this._anchorName = `--cp-popup-anchor-${id}`;
+		this._popupId = `cp-popup-panel-${id}`;
+	}
+	get value() {
+		return oklchToCss(this.l, this.c, this.h, this.a);
+	}
+	get _innerHidePreview() {
+		if (this.mode === `fluid`) return !this.showPreview;
+		return false;
+	}
+	get _pickerDimensions() {
+		return PICKER_SIZES[this.size] ?? PICKER_SIZES.medium;
+	}
+	setColour(colour) {
+		const c = colour_exports.convert(colour, `oklch-absolute`);
+		this.l = c.l;
+		this.c = c.c;
+		this.h = c.h;
+		this.a = c.opacity ?? 1;
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._applyAnchorPositioning();
+		this._updateSwatchBackground();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has(`l`) || changedProperties.has(`c`) || changedProperties.has(`h`) || changedProperties.has(`a`)) this._updateSwatchBackground();
+	}
+	_applyAnchorPositioning() {
+		const swatch = this.shadowRoot?.querySelector(`.swatch`);
+		if (swatch) swatch.style.setProperty(`anchor-name`, this._anchorName);
+		if (this._popupEl) this._popupEl.style.setProperty(`position-anchor`, this._anchorName);
+	}
+	_updateSwatchBackground() {
+		const swatch = this.shadowRoot?.querySelector(`.swatch`);
+		if (swatch) swatch.style.background = swatchBackground(this.l, this.c, this.h, this.a);
+	}
+	_dispatchInput() {
+		const detail = {
+			l: this.l,
+			c: this.c,
+			h: this.h,
+			a: this.a
+		};
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_dispatchChange() {
+		const detail = {
+			l: this.l,
+			c: this.c,
+			h: this.h,
+			a: this.a
+		};
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <button
+        class="swatch"
+        @click=${this._onSwatchClick}
+        aria-label="Pick colour: ${this.value}"
+        aria-expanded="${this._isOpen}"
+        aria-haspopup="dialog"
+      ></button>
+      <div
+        id="${this._popupId}"
+        class="popup popup-surface"
+        popover="auto"
+        role="dialog"
+        aria-label="Colour picker"
+        style="--cp-popup-min-width:${this._pickerDimensions.width}px;--cp-popup-min-height:${this._pickerDimensions.height}px"
+        @toggle=${this._onPopoverToggle}
+      >
+        ${this._everOpened ? html`
+          <ixfx-colour-picker
+            .l=${this.l}
+            .c=${this.c}
+            .h=${this.h}
+            .a=${this.a}
+            style="width:${this._pickerDimensions.width}px;height:${this._pickerDimensions.height}px"
+            ?hide-preview=${this._innerHidePreview}
+            ?hide-h=${this.hideH}
+            ?hide-l=${this.hideL}
+            ?hide-c=${this.hideC}
+            ?show-a=${this.showA}
+            ?horizontal=${this.horizontal}
+            hide-tooltips
+            @input=${this._onPickerInput}
+            @change=${this._onPickerChange}
+          ></ixfx-colour-picker>
+          ${this.mode === `confirm` ? html`
+            <button class="confirm-btn" @click=${this._onConfirm} aria-label="Confirm colour" title="Confirm colour">
+              ${unsafeHTML(ICON_CHECK)}
+            </button>
+          ` : nothing}
+        ` : nothing}
+      </div>
+    `;
+	}
+	static {
+		this.styles = [popupSurfaceStyles, css`
+    :host {
+      display: inline-block;
+    }
+
+    .swatch {
+      display: inline-block;
+      width: var(--cp-popup-swatch-size, 1.5em);
+      height: var(--cp-popup-swatch-size, 1.5em);
+      border-radius: var(--radius-m, 4px);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+      padding: 0;
+      box-sizing: border-box;
+      vertical-align: middle;
+      transition: transform 0.1s ease, box-shadow 0.1s ease;
+    }
+
+    .swatch:hover {
+      transform: scale(1.1);
+    }
+
+    .swatch:focus-visible {
+      outline: 2px solid var(--accent, oklch(60% 0.15 140));
+      outline-offset: 2px;
+    }
+
+    /* Popover panel */
+    .popup {
+      display:flex;
+      flex-direction: column;
+      gap: var(--space-s);
+      /* Reset popover UA inset */
+      inset: unset;
+      margin: 0;
+
+      min-width: var(--cp-popup-min-width);
+      min-height: var(--cp-popup-min-height);
+
+      /* CSS anchor positioning — position-anchor set via inline style in JS */
+      position: fixed;
+      position-area: block-end span-inline-start;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin-block-start: 4px;
+
+      padding: var(--space-l);
+      z-index: 100;
+
+      /* Animate in/out */
+      opacity: 0;
+      scale: 0.97;
+      pointer-events: none;
+      transition: opacity 0.12s ease, scale 0.12s ease;
+    }
+
+    .popup:popover-open {
+      opacity: 1;
+      scale: 1;
+      pointer-events: auto;
+    }
+
+    ixfx-colour-picker {
+      display: block;
+    }
+
+    .confirm-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-block-start: var(--space-s);
+      margin-inline-start: auto;
+      width: 1.8em;
+      height: 1.8em;
+      border-radius: 50%;
+      border: none;
+      background: var(--accent, oklch(60% 0.15 140));
+      color: var(--accent-text, #fff);
+      padding: 0;
+      cursor: pointer;
+      transition: background var(--transition, 0.15s ease-out);
+    }
+
+    .confirm-btn svg {
+      width: 1.1em;
+      height: 1.1em;
+      flex-shrink: 0;
+    }
+
+    .confirm-btn:hover {
+      background: var(--accent, oklch(70% 0.15 140));
+    }
+
+    .confirm-btn:focus-visible {
+      outline: 2px solid var(--accent, oklch(60% 0.15 140));
+      outline-offset: 2px;
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], ColourPickerPopup.prototype, "mode", void 0);
+__decorate([property({ type: Number })], ColourPickerPopup.prototype, "l", void 0);
+__decorate([property({ type: Number })], ColourPickerPopup.prototype, "c", void 0);
+__decorate([property({ type: Number })], ColourPickerPopup.prototype, "h", void 0);
+__decorate([property({ type: Number })], ColourPickerPopup.prototype, "a", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-preview`
+})], ColourPickerPopup.prototype, "showPreview", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-h`,
+	reflect: true
+})], ColourPickerPopup.prototype, "hideH", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-l`,
+	reflect: true
+})], ColourPickerPopup.prototype, "hideL", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-c`,
+	reflect: true
+})], ColourPickerPopup.prototype, "hideC", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-a`
+})], ColourPickerPopup.prototype, "showA", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `horizontal`
+})], ColourPickerPopup.prototype, "horizontal", void 0);
+__decorate([property({ type: String })], ColourPickerPopup.prototype, "size", void 0);
+__decorate([state()], ColourPickerPopup.prototype, "_isOpen", void 0);
+__decorate([state()], ColourPickerPopup.prototype, "_everOpened", void 0);
+__decorate([query(`.popup`)], ColourPickerPopup.prototype, "_popupEl", void 0);
+__decorate([query(`ixfx-colour-picker`)], ColourPickerPopup.prototype, "_pickerEl", void 0);
+ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);
+//#endregion
+export { ColourPicker as n, ColourPickerPopup as t };
+
+//# sourceMappingURL=colour-picker-BNqDz4wK.js.map