@ixfx/components 0.6.0 → 0.6.2

package/dist/index.js

@@ -55,6 +55,7 @@ import { customElement, eventOptions, property, query, queryAssignedElements, st
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Trees } from "@ixfx/collections";
 import { clamper, scaler } from "@ixfx/numbers";
+import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends LitElement {
@@ -3629,6 +3630,431 @@ __decorate([property({ type: String })], RatingElement.prototype, "variant", voi
 __decorate([state()], RatingElement.prototype, "_preview", void 0);
 RatingElement = __decorate([customElement(`ixfx-rating`)], RatingElement);
 //#endregion
+//#region src/sliding-number/sliding-number.ts
+const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
+const SECTION_RANK = {
+	lead: 0,
+	integer: 1,
+	decimal: 2,
+	fraction: 3,
+	trail: 4
+};
+function mod(n, m) {
+	return (n % m + m) % m;
+}
+/** Parse a CSS time token (`0.7s`, `700ms`, `0`) to milliseconds. */
+function millis(value) {
+	const s = value.trim();
+	if (s === ``) return 0;
+	if (s.endsWith(`ms`)) return Number.parseFloat(s) || 0;
+	if (s.endsWith(`s`)) return (Number.parseFloat(s) || 0) * 1e3;
+	return Number.parseFloat(s) || 0;
+}
+let SlidingNumberElement = class SlidingNumberElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.prefix = ``;
+		this.suffix = ``;
+		this.trend = `auto`;
+		this.noAnimate = false;
+		this.respectMotionPreference = true;
+		this._cells = [];
+		this._formatted = ``;
+		this._ready = false;
+		this._pendingSpins = [];
+		this._pendingDir = `none`;
+		this._reelAnims = /* @__PURE__ */ new Map();
+		this._reapTimer = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`role`)) this.setAttribute(`role`, `img`);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const anim of this._reelAnims.values()) anim.cancel();
+		this._reelAnims.clear();
+		if (this._reapTimer) clearTimeout(this._reapTimer);
+	}
+	_motionOK() {
+		if (this.noAnimate) return false;
+		if (this.respectMotionPreference && typeof window !== `undefined` && window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches) return false;
+		return true;
+	}
+	_timing(kind) {
+		const cs = getComputedStyle(this);
+		return {
+			duration: this._motionOK() ? millis(cs.getPropertyValue(`--sliding-number-${kind}-duration`)) : 0,
+			easing: cs.getPropertyValue(`--sliding-number-${kind}-easing`).trim() || `ease`
+		};
+	}
+	_numberFormat() {
+		try {
+			return new Intl.NumberFormat(this.locales || void 0, this.format || void 0);
+		} catch {
+			return new Intl.NumberFormat(this.locales || void 0);
+		}
+	}
+	_resolveDir(first) {
+		switch (this.trend) {
+			case `up`:
+			case `increasing`: return `up`;
+			case `down`:
+			case `decreasing`: return `down`;
+			case `none`: return `none`;
+			default:
+				if (first || this._prevValue === void 0 || this.value === this._prevValue) return `none`;
+				return this.value > this._prevValue ? `up` : `down`;
+		}
+	}
+	/** Split the formatted value into positioned cells. */
+	_buildCells(parts) {
+		const intRaw = [];
+		const fractionChars = [];
+		const lead = [];
+		const trail = [];
+		let decimalChar = ``;
+		let sawInteger = false;
+		let sawDecimal = false;
+		for (const part of parts) switch (part.type) {
+			case `integer`:
+				sawInteger = true;
+				for (const c of part.value) intRaw.push({
+					digit: true,
+					char: c
+				});
+				break;
+			case `group`:
+				intRaw.push({
+					digit: false,
+					char: part.value
+				});
+				break;
+			case `decimal`:
+				sawDecimal = true;
+				decimalChar = part.value;
+				break;
+			case `fraction`:
+				for (const c of part.value) fractionChars.push(c);
+				break;
+			default: (sawInteger || sawDecimal ? trail : lead).push(part.value);
+		}
+		const cells = [];
+		const totalIntDigits = intRaw.filter((x) => x.digit).length;
+		lead.forEach((char, index) => {
+			cells.push({
+				key: `lead:${index}`,
+				kind: `symbol`,
+				section: `lead`,
+				char,
+				pos: index - 100,
+				phase: `active`
+			});
+		});
+		let seen = 0;
+		for (const item of intRaw) if (item.digit) {
+			const place = totalIntDigits - 1 - seen;
+			seen++;
+			cells.push({
+				key: `int:${place}`,
+				kind: `digit`,
+				section: `integer`,
+				char: item.char,
+				pos: -place,
+				phase: `active`
+			});
+		} else {
+			const place = totalIntDigits - seen;
+			cells.push({
+				key: `grp:${place}`,
+				kind: `symbol`,
+				section: `integer`,
+				char: item.char,
+				pos: -place + .5,
+				phase: `active`
+			});
+		}
+		if (sawDecimal) cells.push({
+			key: `decimal`,
+			kind: `symbol`,
+			section: `decimal`,
+			char: decimalChar,
+			pos: 0,
+			phase: `active`
+		});
+		fractionChars.forEach((char, index) => {
+			cells.push({
+				key: `frac:${index}`,
+				kind: `digit`,
+				section: `fraction`,
+				char,
+				pos: index + 1,
+				phase: `active`
+			});
+		});
+		trail.forEach((char, index) => {
+			cells.push({
+				key: `trail:${index}`,
+				kind: `symbol`,
+				section: `trail`,
+				char,
+				pos: index + 100,
+				phase: `active`
+			});
+		});
+		return cells;
+	}
+	willUpdate(changed) {
+		if (![
+			`value`,
+			`format`,
+			`locales`,
+			`prefix`,
+			`suffix`,
+			`noAnimate`
+		].some((p) => changed.has(p)) && this._ready) return;
+		const nf = this._numberFormat();
+		this._formatted = `${this.prefix}${nf.format(this.value)}${this.suffix}`;
+		this.setAttribute(`aria-label`, this._formatted);
+		this.toggleAttribute(`data-static`, !this._motionOK());
+		const first = !this._ready;
+		const motionOK = this._motionOK() && !first;
+		const next = this._buildCells(nf.formatToParts(this.value));
+		const nextKeys = new Set(next.map((c) => c.key));
+		const prev = this._cells.filter((c) => c.phase !== `leave`);
+		const prevByKey = new Map(prev.map((c) => [c.key, c]));
+		const dir = this._resolveDir(first);
+		const spins = [];
+		const merged = [];
+		for (const cell of next) {
+			const before = prevByKey.get(cell.key);
+			if (before) {
+				if (motionOK && cell.kind === `digit` && before.char !== cell.char) spins.push({
+					key: cell.key,
+					from: Number(before.char),
+					to: Number(cell.char)
+				});
+				merged.push({
+					...cell,
+					phase: `active`
+				});
+			} else merged.push({
+				...cell,
+				phase: motionOK ? `enter` : `active`
+			});
+		}
+		if (motionOK) {
+			for (const cell of prev) if (!nextKeys.has(cell.key)) merged.push({
+				...cell,
+				phase: `leave`
+			});
+		}
+		merged.sort((a, b) => SECTION_RANK[a.section] - SECTION_RANK[b.section] || a.pos - b.pos);
+		this._cells = merged;
+		this._pendingSpins = spins;
+		this._pendingDir = dir;
+	}
+	updated() {
+		for (const spin of this._pendingSpins) this._spin(spin.key, spin.from, spin.to, this._pendingDir);
+		this._pendingSpins = [];
+		if (this._cells.some((c) => c.phase === `enter`)) requestAnimationFrame(() => requestAnimationFrame(() => {
+			let changed = false;
+			for (const cell of this._cells) if (cell.phase === `enter`) {
+				cell.phase = `active`;
+				changed = true;
+			}
+			if (changed) {
+				this._cells = [...this._cells];
+				this.requestUpdate();
+			}
+		}));
+		if (this._cells.some((c) => c.phase === `leave`)) {
+			if (this._reapTimer) clearTimeout(this._reapTimer);
+			this._reapTimer = window.setTimeout(() => {
+				this._reapTimer = 0;
+				const kept = this._cells.filter((c) => c.phase !== `leave`);
+				if (kept.length !== this._cells.length) {
+					this._cells = kept;
+					this.requestUpdate();
+				}
+			}, this._timing(`transform`).duration + 120);
+		}
+		this._prevValue = this.value;
+		this._ready = true;
+	}
+	_spin(key, fromDigit, toDigit, dir) {
+		const reel = this.renderRoot.querySelector(`[data-key="${key}"] .reel`);
+		if (!reel) return;
+		const fromOffset = 10 + fromDigit;
+		let toOffset;
+		if (dir === `up`) toOffset = fromOffset + mod(toDigit - fromDigit, 10);
+		else if (dir === `down`) toOffset = fromOffset - mod(fromDigit - toDigit, 10);
+		else toOffset = [
+			toDigit,
+			10 + toDigit,
+			20 + toDigit
+		].reduce((best, candidate) => Math.abs(candidate - fromOffset) < Math.abs(best - fromOffset) ? candidate : best);
+		const { duration, easing } = this._timing(`spin`);
+		this._reelAnims.get(key)?.cancel();
+		if (duration === 0) {
+			reel.style.setProperty(`--o`, String(10 + toDigit));
+			return;
+		}
+		const anim = reel.animate([{ transform: `translateY(calc(-1em * ${fromOffset}))` }, { transform: `translateY(calc(-1em * ${toOffset}))` }], {
+			duration,
+			easing,
+			fill: `both`
+		});
+		this._reelAnims.set(key, anim);
+		anim.finished.then(() => {
+			reel.style.setProperty(`--o`, String(10 + toDigit));
+			anim.cancel();
+			this._reelAnims.delete(key);
+		}).catch(() => {});
+	}
+	_renderCell(cell) {
+		if (cell.kind === `digit`) return html`
+        <span class="cell digit" part="digit" data-key=${cell.key} data-phase=${cell.phase}>
+          <span class="reel" style=${`--o:${10 + Number(cell.char)}`}>
+            ${REEL_DIGITS.map((d) => html`<span>${d}</span>`)}
+          </span>
+        </span>
+      `;
+		return html`
+      <span class="cell symbol" part="symbol" data-key=${cell.key} data-phase=${cell.phase}>${cell.char}</span>
+    `;
+	}
+	render() {
+		const section = (name) => this._cells.filter((c) => c.section === name);
+		const integer = [...section(`integer`)].reverse();
+		return html`
+      ${this.prefix ? html`<span class="affix" part="prefix">${this.prefix}</span>` : nothing}
+      <span class="number" part="number" aria-hidden="true">
+        <span class="run lead">${section(`lead`).map((c) => this._renderCell(c))}</span>
+        <span class="run integer" part="integer">
+          ${repeat(integer, (c) => c.key, (c) => this._renderCell(c))}
+        </span>
+        ${section(`decimal`).map((c) => this._renderCell(c))}
+        <span class="run fraction" part="fraction">
+          ${repeat(section(`fraction`), (c) => c.key, (c) => this._renderCell(c))}
+        </span>
+        <span class="run trail">${section(`trail`).map((c) => this._renderCell(c))}</span>
+      </span>
+      ${this.suffix ? html`<span class="affix" part="suffix">${this.suffix}</span>` : nothing}
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      --sliding-number-spin-duration: 0.7s;
+      --sliding-number-spin-easing: cubic-bezier(0.16, 1, 0.3, 1);
+      --sliding-number-transform-duration: 0.5s;
+      --sliding-number-transform-easing: cubic-bezier(0.16, 1, 0.3, 1);
+      --sliding-number-opacity-duration: 0.35s;
+      --sliding-number-digit-width: 1ch;
+
+      display: inline-flex;
+      align-items: flex-end;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .number,
+    .run {
+      display: inline-flex;
+      /* Every cell is exactly 1em tall, so aligning bottom edges keeps
+         every glyph on the same line without relying on synthesised
+         flex baselines (which break under overflow: hidden). */
+      align-items: flex-end;
+      white-space: nowrap;
+    }
+
+    .affix {
+      line-height: 1;
+    }
+
+    /* Integer digits stack right-to-left so the units column (next to the
+       decimal point) stays put while higher places grow outward. */
+    .run.integer {
+      flex-direction: row-reverse;
+    }
+
+    .cell {
+      display: block;
+      height: 1em;
+      line-height: 1;
+      text-align: center;
+      overflow: hidden;
+      transition:
+        width var(--sliding-number-transform-duration) var(--sliding-number-transform-easing),
+        max-width var(--sliding-number-transform-duration) var(--sliding-number-transform-easing),
+        opacity var(--sliding-number-opacity-duration) var(--sliding-number-transform-easing);
+    }
+
+    .cell.digit {
+      position: relative;
+      width: var(--sliding-number-digit-width);
+    }
+
+    .cell.symbol {
+      max-width: 4ch;
+    }
+
+    .cell[data-phase='enter'],
+    .cell[data-phase='leave'] {
+      opacity: 0;
+    }
+
+    .cell.digit[data-phase='enter'],
+    .cell.digit[data-phase='leave'] {
+      width: 0;
+    }
+
+    .cell.symbol[data-phase='enter'],
+    .cell.symbol[data-phase='leave'] {
+      max-width: 0;
+    }
+
+    .reel {
+      position: absolute;
+      inset: 0 0 auto 0;
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
+      transform: translateY(calc(-1em * var(--o, 10)));
+    }
+
+    .reel > span {
+      display: block;
+      height: 1em;
+      line-height: 1;
+      text-align: center;
+    }
+
+    :host([data-static]) .cell {
+      transition: none;
+    }
+  `;
+	}
+};
+__decorate([property({ type: Number })], SlidingNumberElement.prototype, "value", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "locales", void 0);
+__decorate([property({ type: Object })], SlidingNumberElement.prototype, "format", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "prefix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "suffix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "trend", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `no-animate`
+})], SlidingNumberElement.prototype, "noAnimate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], SlidingNumberElement.prototype, "respectMotionPreference", void 0);
+__decorate([state()], SlidingNumberElement.prototype, "_cells", void 0);
+SlidingNumberElement = __decorate([safeCustomElement(`ixfx-sliding-number`)], SlidingNumberElement);
+//#endregion
 //#region src/tabs/tab-list-item.ts
 let TabListItemElement = class TabListItemElement extends LitElement {
 	constructor(..._args) {
@@ -4275,6 +4701,390 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 __decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
 TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
 //#endregion
+//#region src/text-shimmer/text-shimmer.ts
+let TextShimmerElement = class TextShimmerElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.paused = false;
+	}
+	render() {
+		return html`<span class="shimmer" part="text"
+      >${this.text === `` ? html`<slot></slot>` : this.text}</span
+    >`;
+	}
+	static {
+		this.styles = css`
+    :host {
+      --text-shimmer-color: var(--surface-3-text, #888);
+      --text-shimmer-gradient-color: var(--surface-2-text, #fff);
+      --text-shimmer-duration: 2s;
+      --text-shimmer-spread: 15%;
+
+      display: inline-block;
+      color: var(--text-shimmer-color);
+    }
+
+    .shimmer {
+      background-image: linear-gradient(
+        90deg,
+        var(--text-shimmer-color) 0%,
+        var(--text-shimmer-color) calc(50% - var(--text-shimmer-spread)),
+        var(--text-shimmer-gradient-color) 50%,
+        var(--text-shimmer-color) calc(50% + var(--text-shimmer-spread)),
+        var(--text-shimmer-color) 100%
+      );
+      background-size: 250% 100%;
+      background-repeat: no-repeat;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      animation: ixfx-text-shimmer-sweep var(--text-shimmer-duration) linear infinite;
+    }
+
+    /* Sweep the highlight band from the right edge to the left edge. */
+    @keyframes ixfx-text-shimmer-sweep {
+      from {
+        background-position: 100% center;
+      }
+      to {
+        background-position: 0% center;
+      }
+    }
+
+    :host([paused]) .shimmer {
+      animation: none;
+      background-image: none;
+      color: var(--text-shimmer-color);
+      -webkit-text-fill-color: var(--text-shimmer-color);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .shimmer {
+        animation: none;
+        background-image: none;
+        color: var(--text-shimmer-color);
+        -webkit-text-fill-color: var(--text-shimmer-color);
+      }
+    }
+  `;
+	}
+};
+__decorate([property({ type: String })], TextShimmerElement.prototype, "text", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextShimmerElement.prototype, "paused", void 0);
+TextShimmerElement = __decorate([safeCustomElement(`ixfx-text-shimmer`)], TextShimmerElement);
+//#endregion
+//#region src/toolbar/toolbar-group.ts
+let ToolbarGroupElement = class ToolbarGroupElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+		this.grow = false;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: var(--toolbar-group-align-items, center);
+      justify-content: var(--toolbar-group-justify-content, flex-start);
+      gap: var(--toolbar-gap, var(--space-s));
+      padding: var(--space-xs);
+      border: 1px solid var(--border-subtle, var(--border));
+      border-radius: var(--radius-s);
+      background: var(--surface-3);
+      min-width: 0;
+    }
+    :host(:not([label])) {
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+    .label-row {
+      display: none;
+      font-size: var(--text-s, 12px);
+      color: var(--surface-muted-text);
+      padding-inline: var(--space-xs);
+      white-space: nowrap;
+      border-bottom: 1px solid var(--border-subtle);
+      margin-bottom: var(--space-xs);
+    }
+    :host([label][show-label]) .label-row { display: block; }
+    :host(:not([label])) .label-row { display: none; }
+    :host([grow]) { flex: 1 1 auto; min-width: 0; }
+    :host([hidden]) { display: none !important; }
+    .components { display: flex; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]) { flex: 1 1 auto; }
+  `];
+	}
+	render() {
+		return html`
+      <div class="label-row">${this.label}</div>
+      <div class="components">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], ToolbarGroupElement.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ToolbarGroupElement.prototype, "grow", void 0);
+ToolbarGroupElement = __decorate([safeCustomElement(`ixfx-toolbar-group`)], ToolbarGroupElement);
+//#endregion
+//#region src/toolbar/toolbar.ts
+var _ToolbarElement;
+let ToolbarElement = class ToolbarElement extends LitElement {
+	static {
+		_ToolbarElement = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.layout = `one-line`;
+		this.verticalWriting = `auto`;
+		this.showGroupLabels = false;
+		this.invisibleGroups = false;
+		this._overflowCount = 0;
+		this._ro = null;
+		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
+		this._sizes = /* @__PURE__ */ new WeakMap();
+		this._measureQueued = false;
+	}
+	static {
+		this._cnt = 0;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
+    :host {
+      --toolbar-gap: var(--space-s);
+      --toolbar-group-gap: var(--space-m);
+      display: block;
+      container-type: inline-size;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) {
+      container-type: normal;
+      width: max-content;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) { height: 100%; }
+    :host([orientation="vertical-left"]) .inner,
+    :host([orientation="vertical-right"]) .inner { height: 100%; box-sizing: border-box; width: max-content; }
+    .inner {
+      display: flex;
+      gap: var(--toolbar-gap);
+      background: var(--toolbar-bg, var(--surface-2));
+      padding: var(--toolbar-padding, var(--space-s));
+      border: var(--toolbar-border, var(--border-subtle));
+      border-radius: var(--radius-s);
+      align-items: center;
+    }
+    :host([orientation="horizontal"]) .inner { flex-direction: row; justify-content: flex-start; }
+    :host([orientation="vertical-left"]) .inner { flex-direction: column-reverse; align-items: stretch; }
+    :host([orientation="vertical-right"]) .inner { flex-direction: column; align-items: stretch; }
+    :host([layout="wrap"]) .inner { flex-wrap: wrap; }
+    :host([layout="one-line"]) .inner { flex-wrap: nowrap; overflow: hidden; }
+    :host([orientation="vertical-left"][vertical-writing="auto"]) ::slotted(*) { writing-mode: sideways-lr; }
+    :host([orientation="vertical-right"][vertical-writing="auto"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="up"]) ::slotted(*) { writing-mode: vertical-rl; text-orientation: upright; }
+    :host([vertical-writing="down"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="none"]) ::slotted(*) { writing-mode: horizontal-tb; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]), ::slotted(ixfx-toolbar-group[grow]) { flex: 1 1 auto; }
+    ::slotted([hidden]) { display: none !important; }
+    :host([invisible-groups]) ::slotted(ixfx-toolbar-group) { --toolbar-group-border: none; }
+    .overflow-btn {
+      anchor-name: var(--anchor-name);
+      flex-shrink: 0;
+      background: var(--surface-3);
+      border: var(--border);
+      border-radius: var(--radius-s);
+      padding: var(--space-xs) var(--space-s);
+      cursor: pointer;
+      display: none;
+    }
+    .overflow-btn[visible] { display: inline-flex; }
+    .overflow-popover {
+      position: fixed;
+      top: anchor(bottom);
+      left: anchor(right);
+      position-anchor: var(--anchor-name);
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin: 8px;
+      max-height: min(60vh, 400px);
+      max-width: min(90vw, 320px);
+      overflow: auto;
+      overscroll-behavior: contain;
+      z-index: 100;
+      padding: var(--space-s);
+      flex-direction: column;
+      gap: var(--space-s);
+    }
+    .overflow-popover:popover-open { display: flex; }
+    .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
+  `
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.setProperty(`--anchor-name`, this._anchor);
+	}
+	firstUpdated() {
+		this._slot.addEventListener(`slotchange`, () => this._scheduleMeasure());
+		this._ro = new ResizeObserver(() => this._scheduleMeasure());
+		this._ro.observe(this._inner);
+		this._scheduleMeasure();
+		this._updateGroupLabels();
+	}
+	updated(changed) {
+		if (changed.has(`showGroupLabels`)) this._updateGroupLabels();
+	}
+	_updateGroupLabels() {
+		for (const child of Array.from(this.children)) if (child.tagName === `IXFX-TOOLBAR-GROUP`) {
+			if (this.showGroupLabels) child.setAttribute(`show-label`, ``);
+			else child.removeAttribute(`show-label`);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._ro?.disconnect();
+	}
+	/** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
+	_scheduleMeasure() {
+		if (this._measureQueued) return;
+		this._measureQueued = true;
+		requestAnimationFrame(() => {
+			this._measureQueued = false;
+			this._measure();
+		});
+	}
+	_measure() {
+		const children = Array.from(this.children);
+		const isGrow = (el) => el.hasAttribute(`grow`) || el.matches(`[grow]`);
+		const overflowable = children.filter((el) => !isGrow(el));
+		const isHoriz = this.orientation === `horizontal`;
+		if (this.layout !== `one-line`) {
+			let mutated = false;
+			for (const el of children) {
+				if (el.getAttribute(`slot`) === `overflow`) {
+					el.removeAttribute(`slot`);
+					mutated = true;
+				}
+				if (el.hasAttribute(`hidden`)) {
+					el.removeAttribute(`hidden`);
+					mutated = true;
+				}
+			}
+			if (this._overflowCount !== 0) {
+				this._overflowCount = 0;
+				mutated = true;
+			}
+			if (mutated) this.requestUpdate();
+			return;
+		}
+		if (!this._inner) return;
+		const cs = getComputedStyle(this._inner);
+		const gap = (isHoriz ? Number.parseFloat(cs.columnGap) : Number.parseFloat(cs.rowGap)) || 0;
+		const available = isHoriz ? this._inner.clientWidth : this._inner.clientHeight;
+		const btnSize = 36;
+		const inMain = overflowable.filter((el) => el.getAttribute(`slot`) !== `overflow`);
+		const inOverflow = overflowable.filter((el) => el.getAttribute(`slot`) === `overflow`);
+		let cum = 0;
+		inMain.forEach((el, i) => {
+			const s = isHoriz ? el.offsetWidth : el.offsetHeight;
+			if (s > 0) this._sizes.set(el, s);
+			cum += (i ? gap : 0) + (this._sizes.get(el) ?? s);
+		});
+		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
+		let mutated = false;
+		while (inMain.length > 0 && cum + btnAllowance > available) {
+			const last = inMain[inMain.length - 1];
+			const s = this._sizes.get(last) ?? 0;
+			last.setAttribute(`slot`, `overflow`);
+			inMain.pop();
+			inOverflow.unshift(last);
+			cum -= (inMain.length ? gap : 0) + s;
+			mutated = true;
+		}
+		while (inOverflow.length > 0) {
+			const first = inOverflow[0];
+			const s = this._sizes.get(first);
+			if (s === void 0) break;
+			const addGap = inMain.length ? gap : 0;
+			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
+			if (cum + addGap + s + nextBtnAllowance > available) break;
+			first.removeAttribute(`slot`);
+			inOverflow.shift();
+			inMain.push(first);
+			cum += addGap + s;
+			mutated = true;
+		}
+		const newCount = inOverflow.length;
+		if (newCount !== this._overflowCount) {
+			this._overflowCount = newCount;
+			mutated = true;
+		}
+		if (mutated) this.requestUpdate();
+	}
+	_toggleOverflow() {
+		try {
+			this._popover.togglePopover();
+		} catch {
+			this._popover.showPopover();
+		}
+	}
+	render() {
+		const hasOverflow = this._overflowCount > 0;
+		return html`
+      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
+        <slot></slot>
+        <button class="overflow-btn" ?visible=${hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</button>
+      </div>
+      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
+        <slot name="overflow"></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], ToolbarElement.prototype, "layout", void 0);
+__decorate([property({
+	type: String,
+	attribute: `vertical-writing`,
+	reflect: true
+})], ToolbarElement.prototype, "verticalWriting", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `show-group-labels`,
+	reflect: true
+})], ToolbarElement.prototype, "showGroupLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `invisible-groups`,
+	reflect: true
+})], ToolbarElement.prototype, "invisibleGroups", void 0);
+__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
+__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
+__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
+ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
+//#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
 	if (!(el instanceof HTMLElement)) return false;
@@ -4332,6 +5142,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map