@ixfx/components 0.11.2 → 0.11.4

package/bundle/index.js

@@ -7245,6 +7245,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		this._isOpen = false;
 		this._hasMenu = false;
 		this._hasTriggerSlot = false;
+		this._hasContextTarget = false;
 		this._anchorName = `--mt-${_MenuTrigger._count++}`;
 		this._clickListener = this._handleClickOutside.bind(this);
 		this._handlePopoverToggle = (e) => {
@@ -7297,11 +7298,14 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 					this._propagateContext();
 				}
 			}
+			const contextSlot = this.shadowRoot?.querySelector(`slot[name="context-target"]`);
+			if (contextSlot) this._hasContextTarget = contextSlot.assignedElements({ flatten: true }).length > 0;
 			this._updatePosition();
 		});
 	}
 	updated(changedProperties) {
 		if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) this._propagateContext();
+		if (changedProperties.has(`mode`)) this._updatePosition();
 	}
 	_updatePosition() {
 		const pos = {
@@ -7348,6 +7352,10 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		const slot = e.target;
 		this._hasTriggerSlot = slot.assignedElements({ flatten: true }).length > 0;
 	}
+	_handleContextTargetSlotChange(e) {
+		const slot = e.target;
+		this._hasContextTarget = slot.assignedElements({ flatten: true }).length > 0;
+	}
 	get isOpen() {
 		return this._isOpen;
 	}
@@ -7386,6 +7394,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		document.removeEventListener(`click`, this._clickListener);
 	}
 	_handleTriggerClick(e) {
+		if (this.mode === `context`) return;
 		e.stopPropagation();
 		if (this._isOpen) {
 			this._closeMenu();
@@ -7432,9 +7441,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		this._popup.style.left = `${e.clientX}px`;
 		this._popup.style.position = `fixed`;
 		this._popup.style.positionAnchor = `none`;
-		if (this._popup?.popover) try {
-			this._popup.showPopover();
-		} catch {}
+		this._openMenu();
 	}
 	static {
 		this.styles = [
@@ -7456,6 +7463,18 @@ let MenuTrigger = class MenuTrigger extends LitElement {
       align-items: stretch;
     }
 
+    /* In context mode the target is the consumer's own content surface (a
+       list, canvas, whole panel) rather than a button wrapper. Dissolve the
+       wrapper's box by default so slotted content participates directly in
+       the layout established around the host and can be clipped/scroll within
+       the space actually available. Set --menu-trigger-area-display: flex
+       (plus --menu-trigger-area-flex) to keep a real box instead, e.g. for
+       a mixed visible-trigger + context-target use. */
+    :host([mode="context"]) .trigger-area {
+      display: var(--menu-trigger-area-display, contents);
+      flex: var(--menu-trigger-area-flex, initial);
+    }
+
     .trigger-btn {
       display: inline-flex;
       align-items: center;
@@ -7518,7 +7537,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
 		];
 	}
 	render() {
-		const showButton = this.mode !== `dropdown` && this._hasMenu && !this._hasTriggerSlot;
+		const showButton = this.mode !== `dropdown` && this._hasMenu && !this._hasTriggerSlot && !(this.mode === `context` && this._hasContextTarget);
 		return html`
       <div
         class="trigger-area"
@@ -7526,6 +7545,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
         @contextmenu=${this._handleContextMenu}
       >
         ${showButton ? html`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.iconName ? html`<ixfx-icon name=${this.iconName}></ixfx-icon>` : this.label || html`<ixfx-icon name="ellipsis-vertical"></ixfx-icon>`}</button>` : null}
+        ${this.mode === `context` ? html`<slot name="context-target" @slotchange=${this._handleContextTargetSlotChange}></slot>` : null}
         <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
       </div>
       <div
@@ -7538,7 +7558,10 @@ let MenuTrigger = class MenuTrigger extends LitElement {
     `;
 	}
 };
-__decorate([property({ type: String })], MenuTrigger.prototype, "mode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], MenuTrigger.prototype, "mode", void 0);
 __decorate([property({ type: String })], MenuTrigger.prototype, "label", void 0);
 __decorate([property({
 	type: String,
@@ -7554,6 +7577,7 @@ __decorate([property({
 __decorate([state()], MenuTrigger.prototype, "_isOpen", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
+__decorate([state()], MenuTrigger.prototype, "_hasContextTarget", void 0);
 __decorate([query(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([query(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
 MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
@@ -8460,37 +8484,40 @@ var LabelledInputBase = class extends LitElement {
 		this._isDragging = false;
 		this._debounceTimer = void 0;
 		this._handleNumberChange = (e) => {
-			const newValue = Number.parseFloat(e.detail.value);
+			const valueStr = e.detail?.value ?? String(this.value);
+			const newValue = Number.parseFloat(valueStr);
 			this.value = newValue;
 			this._syncValue(newValue);
 			this.dispatchEvent(new CustomEvent(`change`, {
-				detail: { value: e.detail.value },
+				detail: { value: valueStr },
 				bubbles: true,
 				composed: true
 			}));
 		};
 		this._handleInputChange = (e) => {
-			this.value = e.detail.value;
+			const value = e.detail?.value ?? this.value;
+			this.value = value;
 			clearTimeout(this._debounceTimer);
 			this._debounceTimer = window.setTimeout(() => {
 				this._isDragging = false;
 			}, 300);
 			this.dispatchEvent(new CustomEvent(`change`, {
-				detail: { value: String(e.detail.value) },
+				detail: { value: String(value) },
 				bubbles: true,
 				composed: true
 			}));
 		};
 		this._handleSliderInput = (e) => {
+			const value = e.detail?.value ?? this.value;
 			console.log(`[LABELLED-INPUT] _handleSliderInput called`, {
-				value: e.detail.value,
+				value,
 				composedPath: e.composedPath()
 			});
-			this.value = e.detail.value;
+			this.value = value;
 			this._isDragging = true;
 			clearTimeout(this._debounceTimer);
 			this.dispatchEvent(new CustomEvent(`input`, {
-				detail: { value: e.detail.value },
+				detail: { value },
 				bubbles: true,
 				composed: true
 			}));
@@ -11995,7 +12022,10 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editingCancelled = false;
 		this._editStartIndex = null;
 		this._openCumPath = null;
+		this._dragCumPath = null;
+		this._dropCumPath = null;
 		this.#uid = Math.random().toString(36).slice(2, 8);
+		this.#clickSuppressUntil = 0;
 		this.#onPopoverToggle = (e) => {
 			if (e.newState === `closed` && this._openIdx !== null) {
 				this._openIdx = null;
@@ -12049,6 +12079,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#pendingController;
 	#pendingIndex;
 	#uid;
+	/** Clicks within this window after a drag are ignored (post-drag click-through guard). */
+	#clickSuppressUntil;
 	#anchorName(cumPath) {
 		return `--cp-${this.#uid}-${cumPath.replaceAll(this.separator, `-`).replaceAll(` `, `-`).replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
 	}
@@ -12110,6 +12142,23 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		if (isRoot) return rootSegments.slice(0, index + 1).join(this.separator);
 		return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
 	}
+	#resolveFullPathSegments(index, isRoot) {
+		const rootSegments = this.#getRootSegments();
+		if (isRoot) return rootSegments.slice(0, index + 1);
+		return [...rootSegments, ...this.#getSegments().slice(0, index + 1)];
+	}
+	#segmentDragPayloads(fullPathSegments) {
+		try {
+			const result = this.segmentDragLookup?.(fullPathSegments, fullPathSegments.length - 1);
+			if (result === void 0 || result === null) return [];
+			return Array.isArray(result) ? [...result] : [result];
+		} catch {
+			return [];
+		}
+	}
+	#clicksSuppressed() {
+		return Date.now() < this.#clickSuppressUntil || this._dragCumPath !== null;
+	}
 	#resolveSegmentIcon(fullPathSegments, index) {
 		const direct = this.segmentIconLookup?.(fullPathSegments, index);
 		if (typeof direct === `string` && direct.length > 0) return direct;
@@ -12176,7 +12225,87 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		}
 		this.requestUpdate();
 	}
+	#onLabelDragStart(fullPathSegments, cumPath, event) {
+		this.#closeDropdown();
+		const index = fullPathSegments.length - 1;
+		const dt = event.dataTransfer;
+		const detail = {
+			index,
+			label: fullPathSegments[index] ?? ``,
+			pathSegments: fullPathSegments,
+			parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+			fullPath: fullPathSegments.join(this.separator),
+			dataTransfer: dt
+		};
+		const evt = new CustomEvent(`crumb-drag-start`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (!this.dispatchEvent(evt)) {
+			event.preventDefault();
+			return;
+		}
+		this._dragCumPath = cumPath;
+		this.toggleAttribute(`data-native-dragging`, true);
+		if (!dt) return;
+		try {
+			if (dt.effectAllowed === `none` || dt.effectAllowed === `uninitialized`) dt.effectAllowed = `copyMove`;
+		} catch {}
+		try {
+			for (const payload of this.#segmentDragPayloads(fullPathSegments)) dt.setData(payload.type, payload.data);
+			if (!dt.types.includes(`text/plain`)) dt.setData(`text/plain`, detail.fullPath);
+		} catch {}
+	}
+	#onLabelDragEnd() {
+		this._dragCumPath = null;
+		this._dropCumPath = null;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.#clickSuppressUntil = Date.now() + 150;
+	}
+	#onSegDragOver(cumPath, event) {
+		if (!this.parseExternalDrop) return;
+		if (!event.dataTransfer) return;
+		event.preventDefault();
+		if (this._dropCumPath !== cumPath) this._dropCumPath = cumPath;
+	}
+	#onSegDragLeave(cumPath, _event) {
+		if (!this.parseExternalDrop) return;
+		if (this._dropCumPath === cumPath) this._dropCumPath = null;
+	}
+	#onSegDrop(fullPathSegments, event) {
+		if (!this.parseExternalDrop) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this._dropCumPath = null;
+		const dt = event.dataTransfer;
+		if (!dt) return;
+		let data;
+		try {
+			data = this.parseExternalDrop(dt);
+		} catch (err) {
+			console.error(`parseExternalDrop failed:`, err);
+			return;
+		}
+		if (data === void 0) return;
+		const index = fullPathSegments.length - 1;
+		this.dispatchEvent(new CustomEvent(`crumb-drop`, {
+			detail: {
+				index,
+				label: fullPathSegments[index] ?? ``,
+				pathSegments: fullPathSegments,
+				parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+				fullPath: fullPathSegments.join(this.separator),
+				data,
+				dataTransfer: dt
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#onLabelClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -12258,16 +12387,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#renderSegment(label, index, isLast) {
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, false);
-		const fullPathSegments = [...this.#getRootSegments(), ...this.#getSegments().slice(0, index + 1)];
+		const fullPathSegments = this.#resolveFullPathSegments(index, false);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, fullPathSegments.length - 1);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg" data-cumulative=${cumPath} @click=${(e) => this.#onSegmentClick(index, e)}>
-        <label title=${label} @click=${(e) => this.#onLabelClick(index, e)}>
+      <div class="seg ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>
           ${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}
           ${label}
         </label>
         ${(!isLast || this.siblingLookup) && this._leafSegmentIndex !== index ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -12278,17 +12422,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#renderRootSegment(label, index) {
-		const rootSegments = this.#getRootSegments();
-		const isLast = index === rootSegments.length - 1;
+		const isLast = index === this.#getRootSegments().length - 1;
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, true);
-		const fullPathSegments = rootSegments.slice(0, index + 1);
+		const fullPathSegments = this.#resolveFullPathSegments(index, true);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, index);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg seg-root" data-cumulative=${cumPath} @click=${(e) => this.#onRootSegmentClick(index, e)}>
-        <label title=${label}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
+      <div class="seg seg-root ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onRootSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
         ${isLast && this.siblingLookup ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -12299,12 +12457,14 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#onRootSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		const newPath = this.#getRootSegments().slice(0, index + 1).join(this.separator);
 		this.setPath(newPath);
 	}
 	#onSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -12312,6 +12472,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editStartIndex = index;
 	}
 	#onTrailingClick() {
+		if (this.#clicksSuppressed()) return;
 		this.#closeDropdown();
 		this._editing = true;
 		this._editStartIndex = null;
@@ -12533,6 +12694,21 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
       cursor: not-allowed;
     }
 
+    /* Drag and drop styles */
+    label[draggable] {
+      cursor: grab;
+    }
+
+    .seg.dragging {
+      opacity: 0.4;
+    }
+
+    .seg.drop-into {
+      outline: var(--crumb-drop-into-outline, 2px solid var(--accent));
+      outline-offset: -2px;
+      background: var(--crumb-drop-into-bg, color-mix(in srgb, var(--accent) 14%, transparent));
+    }
+
     .crumb-icon {
       width: 1em;
       height: 1em;
@@ -12615,6 +12791,8 @@ __decorate([property({
 })], CrumbPathElement.prototype, "pathRoot", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentIconLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentDragLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "parseExternalDrop", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openIdx", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editing", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
@@ -12624,6 +12802,8 @@ __decorate([state()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0
 __decorate([state()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dragCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dropCumPath", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-display/data-display.ts
@@ -38359,6 +38539,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         --multicol-list-border: var(--border);
         --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
         --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
+        --multicol-list-header-font-size: unset;
 
         display: block;
         overflow: hidden;
@@ -38424,7 +38605,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         text-overflow: ellipsis;
         white-space: nowrap;
         padding: 0 var(--space-s);
-        font-size: var(--text-m);
+        font-size: var(--multicol-list-header-font-size);
         font-weight: 600;
         background: transparent;
         border: none;
@@ -42706,8 +42887,14 @@ let RangeInput = class RangeInput extends WheelNudgeMixin(LitElement) {
 		const clamped = Math.min(this.max, Math.max(this.min, candidate));
 		if (clamped === this.value) return;
 		input.value = String(clamped);
-		input.dispatchEvent(new Event(`input`, { bubbles: true }));
-		input.dispatchEvent(new Event(`change`, { bubbles: true }));
+		input.dispatchEvent(new CustomEvent(`input`, {
+			detail: { value: clamped },
+			bubbles: true
+		}));
+		input.dispatchEvent(new CustomEvent(`change`, {
+			detail: { value: clamped },
+			bubbles: true
+		}));
 	}
 	render() {
 		const tooltipEl = this.tooltip ? html`
@@ -44150,6 +44337,7 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		this.#dragging = false;
 		this.#dragStartY = 0;
 		this.#valueAtDragStart = 0;
+		this.#lastPointerY = 0;
 		this.#onPointerDown = (event) => {
 			if (this.disabled) return;
 			event.preventDefault();
@@ -44157,7 +44345,9 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 			svgEl?.focus();
 			this.#dragging = true;
 			this.#dragStartY = event.clientY;
+			this.#lastPointerY = event.clientY;
 			this.#valueAtDragStart = this.value;
+			this.#lastSetValue = this.value;
 			this.toggleAttribute(`dragging`, true);
 			if (svgEl) svgEl.setPointerCapture(event.pointerId);
 			window.addEventListener(`pointermove`, this.#onPointerMove);
@@ -44167,10 +44357,16 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		this.#onPointerMove = (event) => {
 			if (!this.#dragging) return;
 			event.preventDefault();
+			if (this.value !== this.#lastSetValue) {
+				this.#valueAtDragStart = this.value;
+				this.#dragStartY = this.#lastPointerY;
+				this.#lastSetValue = this.value;
+			}
 			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
 			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
 			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
 			this.#setValueFromRelative(clampValue(relativeValue, 0, 1), true);
+			this.#lastPointerY = event.clientY;
 		};
 		this.#onPointerUp = () => {
 			this.#dragging = false;
@@ -44213,6 +44409,10 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 	#dragging;
 	#dragStartY;
 	#valueAtDragStart;
+	/** Client Y of the last processed pointer event, for external-write re-baselining. */
+	#lastPointerY;
+	/** Value at the drag's last write — detects external `value` writes mid-drag. */
+	#lastSetValue;
 	#changeDebounceTimer;
 	#getRelativeValue() {
 		return scale(this.value, this.min, this.max, 0, 1);
@@ -44230,6 +44430,7 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		if (clampedValue === this.value) return;
 		const previousValue = this.value;
 		this.value = clampedValue;
+		this.#lastSetValue = clampedValue;
 		if (this.hasAttribute(`data-tooltip-live`)) {
 			const percentage = Math.round(this.#getRelativeValue() * 100);
 			this.setAttribute(`data-tooltip`, `${percentage}%`);