@vonage/vivid 5.24.0 → 5.25.0

package/listbox/index.js

@@ -0,0 +1,540 @@
+import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/slotted.js";
+import { t as s } from "../bundled/when.js";
+import { t as c } from "../bundled/decorate.js";
+import { r as l } from "../bundled/aria-binding-directive.js";
+import { n as u, t as d } from "../bundled/host-semantics.js";
+import { n as f } from "../bundled/option.js";
+import { n as p } from "../bundled/optgroup.js";
+import { t as m } from "../bundled/extractOptions.js";
+//#region src/shared/listbox/with-options-filter.ts
+function h(e, t, n, r) {
+	let i = [];
+	for (let t of e) {
+		t._vvdSearchText = r;
+		let e = !r || n(t, r);
+		t._isNotMatching = !e, !t.hidden && !t.disabled && e && i.push(t);
+	}
+	for (let e of t) if (p(e)) {
+		let t = Array.from(e.children).some((e) => f(e) && !e._isNotMatching && !e.hidden);
+		e.style.display = t ? "" : "none";
+	}
+	return i;
+}
+var g = (t) => {
+	class r extends t {
+		constructor(...e) {
+			super(...e), this.searchText = "", this._filteredOptions = [];
+		}
+		_slottedOptionsChanged() {
+			super._slottedOptionsChanged(), this._updateFilter();
+		}
+		searchTextChanged() {
+			this._updateFilter();
+		}
+		optionFilterChanged() {
+			this._updateFilter();
+		}
+		_updateFilter() {
+			this._filteredOptions = h(this._slottedOptions, this._slottedElements, this.optionFilter ?? ((e, t) => e.text.toLowerCase().includes(t.toLowerCase())), this.searchText);
+		}
+	}
+	return c([n({
+		attribute: "search-text",
+		mode: "fromView"
+	})], r.prototype, "searchText", void 0), c([e], r.prototype, "optionFilter", void 0), c([e], r.prototype, "_filteredOptions", void 0), r;
+}, _ = (t) => {
+	class n extends t {
+		constructor(...e) {
+			super(...e), this._slottedElements = [], this.#e = () => {
+				this._slottedElementsChanged();
+			}, this._slottedOptions = [];
+		}
+		_slottedElementsChanged() {
+			this._slottedOptions = m(this._slottedElements);
+		}
+		#e;
+		connectedCallback() {
+			super.connectedCallback(), this.addEventListener("optgroup-change", this.#e);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.removeEventListener("optgroup-change", this.#e);
+		}
+		_slottedOptionsChanged() {
+			for (let e of this._slottedOptions) e.id ||= l("option-");
+		}
+	}
+	return c([e], n.prototype, "_slottedElements", void 0), c([e], n.prototype, "_slottedOptions", void 0), n;
+}, v = r`<slot
+	${o({
+	filter: ((e) => f(e) || p(e)),
+	flatten: !0,
+	property: "_slottedElements"
+})}
+>
+</slot>`, y = (e) => {
+	let t = e.ctrlKey || e.metaKey;
+	return e.shiftKey && t ? "ShiftMod" : e.shiftKey ? "Shift" : t ? "Mod" : null;
+}, b = (e, t, n, r) => {
+	if (n.amount === "step" && r === "Mod") return null;
+	if (t.selectionMode === "multiple") {
+		if (n.amount === "step" && r === "Shift") return {
+			action: {
+				type: "extend-from-anchor",
+				anchorIndex: e.rangeAnchorIndex ?? e.activeIndex
+			},
+			replaceExisting: !1
+		};
+		if (n.amount === "limit" && r === "ShiftMod") return {
+			action: { type: "select-from-current" },
+			replaceExisting: !1
+		};
+	}
+	return t.selectionBehavior === "replace" ? {
+		action: { type: "select" },
+		replaceExisting: !0
+	} : null;
+}, x = (e, t) => t === "Shift" ? {
+	action: { type: "select-from-most-recent" },
+	replaceExisting: e.selectionBehavior === "replace"
+} : t === "Mod" ? {
+	action: { type: "toggle" },
+	replaceExisting: !1
+} : e.selectionBehavior === "replace" ? {
+	action: { type: "select" },
+	replaceExisting: !0
+} : {
+	action: { type: "toggle" },
+	replaceExisting: !1
+};
+function S(e, t, n, r) {
+	let i = new Set(e), [a, o] = [n, r].sort((e, t) => e - t), s = [...e];
+	for (let e = a; e <= o; e++) {
+		let n = t.selectable.optionValue(e);
+		i.has(n) || s.push(n);
+	}
+	return s;
+}
+function C(e, t, n, r, i) {
+	let a = new Set(e), [o, , s] = [
+		n,
+		r,
+		i
+	].sort((e, t) => e - t), c = [...e];
+	for (let e = o; e <= s; e++) {
+		let i = t.selectable.optionValue(e);
+		e < n && e < r || e > n && e > r ? a.has(i) && (c = c.filter((e) => e !== i)) : a.has(i) || c.push(i);
+	}
+	return c;
+}
+function w(e, t) {
+	let n = e.values;
+	for (let e = n.length - 1; e >= 0; e--) {
+		let r = t.selectable.optionIndex(n[e]);
+		if (r !== null) return r;
+	}
+	return null;
+}
+function T(e, t, n) {
+	let r = (t) => ({
+		...e,
+		values: t.values ?? e.values,
+		activeIndex: t.activeIndex ?? e.activeIndex,
+		rangeAnchorIndex: t.rangeAnchorIndex ?? null
+	});
+	if (n.type !== "action") return r({});
+	let i = e.values, { targetIndex: a, selection: o } = n, s = (e) => t.selectionMode === "single" && e.length > 1 ? [e[e.length - 1]] : t.requiredSelection !== "none" && (e.length === 0 || t.requiredSelection === "selectable" && !e.some((e) => t.selectable.optionIndex(e) !== null)) ? i : e, c = t.selectable.optionValue(a), l = o?.replaceExisting ? [] : i;
+	switch (o?.action.type) {
+		case void 0: return r({ activeIndex: a });
+		case "select": return r({
+			activeIndex: a,
+			values: s(i.includes(c) ? i : [...l, c])
+		});
+		case "toggle": return r({
+			activeIndex: a,
+			values: s(i.includes(c) ? l.filter((e) => e !== c) : [...l, c])
+		});
+		case "select-from-current": return r({
+			activeIndex: a,
+			values: s(S(l, t, e.activeIndex, a))
+		});
+		case "select-from-most-recent": return r({
+			activeIndex: a,
+			values: s(S(l, t, w(e, t) ?? 0, a))
+		});
+		case "extend-from-anchor": return r({
+			values: s(C(l, t, o.action.anchorIndex, a, e.activeIndex)),
+			activeIndex: a,
+			rangeAnchorIndex: o.action.anchorIndex
+		});
+	}
+}
+//#endregion
+//#region src/shared/listbox/typeahead.ts
+var E = 2e3;
+function D(e, t, n, r) {
+	let i = e.typeahead && e.typeahead.lastInputMs > r - E ? e.typeahead : null;
+	return n.length === 1 && !(n === " " && !i) ? {
+		buffer: (i?.buffer ?? "") + n,
+		lastInputMs: r
+	} : null;
+}
+function O(e, t, n) {
+	if (n.type !== "typeahead") return {
+		...e,
+		typeahead: null
+	};
+	let r = n.typeahead;
+	for (let i = (e.activeIndex + 1) % t.selectable.numOptions; i !== e.activeIndex; i = (i + 1) % t.selectable.numOptions) if (t.selectable.optionText(i).toLowerCase().startsWith(r.buffer.toLowerCase())) return {
+		...T(e, t, {
+			type: "action",
+			targetIndex: i,
+			selection: n.selection
+		}),
+		typeahead: r
+	};
+	return {
+		...e,
+		typeahead: r
+	};
+}
+//#endregion
+//#region src/shared/listbox/options.ts
+var k = (e) => ({
+	numOptions: e.length,
+	optionValue: (t) => e[t].value,
+	optionText: (t) => e[t].text,
+	optionIndex: (t) => {
+		let n = e.findIndex((e) => e.value === t);
+		return n === -1 ? null : n;
+	},
+	isEq: (t) => e === t
+});
+function A(e, t, n) {
+	let r = t.filter((e) => e.selected || n.includes(e.value)).map((e) => e.value), i = e.selectionMode === "single" ? 1 : Infinity;
+	return N(e, r.slice(0, i), i);
+}
+//#endregion
+//#region src/shared/listbox/state.ts
+function j(e) {
+	return "activeIndex" in e;
+}
+function M(e, t, n) {
+	let r = n.filter((e) => t.all.optionIndex(e) !== null), i = t.selectionMode === "single" ? 1 : Infinity, a = r.slice(0, i);
+	return a = N(t, a, i), {
+		...e,
+		values: a
+	};
+}
+function N(e, t, n) {
+	return e.requiredSelection === "none" || e.selectable.numOptions === 0 ? t : t.length === 0 ? [e.selectable.optionValue(0)] : e.requiredSelection === "selectable" && !t.some((t) => e.selectable.optionIndex(t) !== null) ? n === 1 ? [e.selectable.optionValue(0)] : [...t, e.selectable.optionValue(0)] : t;
+}
+function P(e, t, n) {
+	let r = A(e, t, n);
+	if (e.selectable.numOptions === 0) return F(r);
+	let i = 0;
+	for (let t of r) {
+		let n = e.selectable.optionIndex(t);
+		if (n !== null) {
+			i = n;
+			break;
+		}
+	}
+	return {
+		values: r,
+		activeIndex: i,
+		typeahead: null,
+		rangeAnchorIndex: null
+	};
+}
+function F(e) {
+	return { values: e };
+}
+//#endregion
+//#region src/shared/listbox/move.ts
+function I(e) {
+	switch (e) {
+		case "Home": return {
+			direction: "backward",
+			amount: "limit"
+		};
+		case "End": return {
+			direction: "forward",
+			amount: "limit"
+		};
+		case "PageUp": return {
+			direction: "backward",
+			amount: "page"
+		};
+		case "PageDown": return {
+			direction: "forward",
+			amount: "page"
+		};
+		case "ArrowUp": return {
+			direction: "backward",
+			amount: "step"
+		};
+		case "ArrowDown": return {
+			direction: "forward",
+			amount: "step"
+		};
+	}
+	return null;
+}
+function L(e, t, n, r) {
+	let i = {
+		backward: 0,
+		forward: t - 1
+	}, a = {
+		backward: -1,
+		forward: 1
+	}, o = {
+		step: 1,
+		page: n
+	};
+	switch (r.amount) {
+		case "limit": return i[r.direction];
+		case "page":
+		case "step": return Math.min(i.forward, Math.max(i.backward, e + a[r.direction] * o[r.amount]));
+	}
+}
+//#endregion
+//#region src/shared/listbox/commands.ts
+var R = 10;
+function z(e, t, n, r) {
+	if (!j(e)) return null;
+	let i = D(e, t, n.key, r);
+	if (i) return {
+		type: "typeahead",
+		typeahead: i,
+		selection: t.selectionBehavior === "replace" ? {
+			action: { type: "select" },
+			replaceExisting: !0
+		} : null
+	};
+	let a = I(n.key);
+	return a ? {
+		type: "action",
+		targetIndex: L(e.activeIndex, t.selectable.numOptions, R, a),
+		selection: b(e, t, a, y(n))
+	} : n.key === " " ? {
+		type: "action",
+		targetIndex: e.activeIndex,
+		selection: x(t, y(n))
+	} : null;
+}
+function B(e, t, n, r) {
+	return {
+		type: "action",
+		targetIndex: r,
+		selection: x(t, y(n))
+	};
+}
+function V(e, t, n) {
+	return e = O(e, t, n), e = T(e, t, n), e;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/compute-scroll-into-view@3.1.1/node_modules/compute-scroll-into-view/dist/index.js
+var H = (e) => typeof e == "object" && !!e && e.nodeType === 1, U = (e, t) => (!t || e !== "hidden") && e !== "visible" && e !== "clip", W = (e, t) => {
+	if (e.clientHeight < e.scrollHeight || e.clientWidth < e.scrollWidth) {
+		let n = getComputedStyle(e, null);
+		return U(n.overflowY, t) || U(n.overflowX, t) || ((e) => {
+			let t = ((e) => {
+				if (!e.ownerDocument || !e.ownerDocument.defaultView) return null;
+				try {
+					return e.ownerDocument.defaultView.frameElement;
+				} catch {
+					return null;
+				}
+			})(e);
+			return !!t && (t.clientHeight < e.scrollHeight || t.clientWidth < e.scrollWidth);
+		})(e);
+	}
+	return !1;
+}, G = (e, t, n, r, i, a, o, s) => a < e && o > t || a > e && o < t ? 0 : a <= e && s <= n || o >= t && s >= n ? a - e - r : o > t && s < n || a < e && s > n ? o - t + i : 0, K = (e) => e.parentElement ?? (e.getRootNode().host || null), q = (e, t) => {
+	if (typeof document > "u") return [];
+	let { scrollMode: n, block: r, inline: i, boundary: a, skipOverflowHiddenElements: o } = t, s = typeof a == "function" ? a : (e) => e !== a;
+	if (!H(e)) throw TypeError("Invalid target");
+	let c = document.scrollingElement || document.documentElement, l = [], u = e;
+	for (; H(u) && s(u);) {
+		if (u = K(u), u === c) {
+			l.push(u);
+			break;
+		}
+		u != null && u === document.body && W(u) && !W(document.documentElement) || u != null && W(u, o) && l.push(u);
+	}
+	let d = window.visualViewport?.width ?? innerWidth, f = window.visualViewport?.height ?? innerHeight, { scrollX: p, scrollY: m } = window, { height: h, width: g, top: _, right: v, bottom: y, left: b } = e.getBoundingClientRect(), { top: x, right: S, bottom: C, left: w } = ((e) => {
+		let t = window.getComputedStyle(e);
+		return {
+			top: parseFloat(t.scrollMarginTop) || 0,
+			right: parseFloat(t.scrollMarginRight) || 0,
+			bottom: parseFloat(t.scrollMarginBottom) || 0,
+			left: parseFloat(t.scrollMarginLeft) || 0
+		};
+	})(e), T = r === "start" || r === "nearest" ? _ - x : r === "end" ? y + C : _ + h / 2 - x + C, E = i === "center" ? b + g / 2 - w + S : i === "end" ? v + S : b - w, D = [];
+	for (let e = 0; e < l.length; e++) {
+		let t = l[e], { height: a, width: o, top: s, right: u, bottom: x, left: S } = t.getBoundingClientRect();
+		if (n === "if-needed" && _ >= 0 && b >= 0 && y <= f && v <= d && (t === c && !W(t) || _ >= s && y <= x && b >= S && v <= u)) return D;
+		let C = getComputedStyle(t), w = parseInt(C.borderLeftWidth, 10), O = parseInt(C.borderTopWidth, 10), k = parseInt(C.borderRightWidth, 10), A = parseInt(C.borderBottomWidth, 10), j = 0, M = 0, N = "offsetWidth" in t ? t.offsetWidth - t.clientWidth - w - k : 0, P = "offsetHeight" in t ? t.offsetHeight - t.clientHeight - O - A : 0, F = "offsetWidth" in t ? t.offsetWidth === 0 ? 0 : o / t.offsetWidth : 0, I = "offsetHeight" in t ? t.offsetHeight === 0 ? 0 : a / t.offsetHeight : 0;
+		if (c === t) j = r === "start" ? T : r === "end" ? T - f : r === "nearest" ? G(m, m + f, f, O, A, m + T, m + T + h, h) : T - f / 2, M = i === "start" ? E : i === "center" ? E - d / 2 : i === "end" ? E - d : G(p, p + d, d, w, k, p + E, p + E + g, g), j = Math.max(0, j + m), M = Math.max(0, M + p);
+		else {
+			j = r === "start" ? T - s - O : r === "end" ? T - x + A + P : r === "nearest" ? G(s, x, a, O, A + P, T, T + h, h) : T - (s + a / 2) + P / 2, M = i === "start" ? E - S - w : i === "center" ? E - (S + o / 2) + N / 2 : i === "end" ? E - u + k + N : G(S, u, o, w, k + N, E, E + g, g);
+			let { scrollLeft: e, scrollTop: n } = t;
+			j = I === 0 ? 0 : Math.max(0, Math.min(n + j / I, t.scrollHeight - a / I + P)), M = F === 0 ? 0 : Math.max(0, Math.min(e + M / F, t.scrollWidth - o / F + N)), T += n - j, E += e - M;
+		}
+		D.push({
+			el: t,
+			top: j,
+			left: M
+		});
+	}
+	return D;
+}, J = (e) => !1 === e ? {
+	block: "end",
+	inline: "nearest"
+} : ((e) => e === Object(e) && Object.keys(e).length !== 0)(e) ? e : {
+	block: "start",
+	inline: "nearest"
+};
+function Y(e, t) {
+	if (!e.isConnected || !((e) => {
+		let t = e;
+		for (; t && t.parentNode;) {
+			if (t.parentNode === document) return !0;
+			t = t.parentNode instanceof ShadowRoot ? t.parentNode.host : t.parentNode;
+		}
+		return !1;
+	})(e)) return;
+	let n = ((e) => {
+		let t = window.getComputedStyle(e);
+		return {
+			top: parseFloat(t.scrollMarginTop) || 0,
+			right: parseFloat(t.scrollMarginRight) || 0,
+			bottom: parseFloat(t.scrollMarginBottom) || 0,
+			left: parseFloat(t.scrollMarginLeft) || 0
+		};
+	})(e);
+	if (((e) => typeof e == "object" && typeof e.behavior == "function")(t)) return t.behavior(q(e, t));
+	let r = typeof t == "boolean" || t == null ? void 0 : t.behavior;
+	for (let { el: i, top: a, left: o } of q(e, J(t))) {
+		let e = a - n.top + n.bottom, t = o - n.left + n.right;
+		i.scroll({
+			top: e,
+			left: t,
+			behavior: r
+		});
+	}
+}
+//#endregion
+//#region src/lib/listbox/listbox.ts
+var X = (e, t) => JSON.stringify(e) === JSON.stringify(t), Z = class extends g(_(d(i))) {
+	constructor(...e) {
+		super(...e), this.selectionMode = "single", this.selectionBehavior = "toggle", this.requiredSelection = "none", this._activeDescendantId = null, this.values = [], this._state = F([]), this._ctx = {
+			selectionMode: "single",
+			selectionBehavior: "toggle",
+			requiredSelection: "none",
+			selectable: k([]),
+			all: k([])
+		}, this._externalChangeQueued = !1;
+	}
+	selectionModeChanged() {
+		this._registerExternalChange();
+	}
+	selectionBehaviorChanged() {
+		this._registerExternalChange();
+	}
+	requiredSelectionChanged() {
+		this._registerExternalChange();
+	}
+	_filteredOptionsChanged() {
+		this._registerExternalChange();
+	}
+	valuesChanged() {
+		this._state && !X(this._state.values, this.values) && this._registerExternalChange();
+	}
+	get value() {
+		return this.values[0] ?? null;
+	}
+	set value(e) {
+		this.values = e === null ? [] : [e];
+	}
+	_registerExternalChange() {
+		this._externalChangeQueued || (this._externalChangeQueued = !0, queueMicrotask(() => this._applyPendingExternalChanges()));
+	}
+	_applyPendingExternalChanges() {
+		if (this._externalChangeQueued = !1, !this._ctx.all.isEq(this._slottedOptions) || !this._ctx.selectable.isEq(this._filteredOptions)) {
+			this._initializeState();
+			return;
+		}
+		let e = {
+			...this._ctx,
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection
+		};
+		this._ctx = e, this._applyNewState(M(this._state, e, this.values));
+	}
+	_initializeState() {
+		if (this._ctx = {
+			selectionMode: this.selectionMode,
+			selectionBehavior: this.selectionBehavior,
+			requiredSelection: this.requiredSelection,
+			selectable: k(this._filteredOptions),
+			all: k(this._slottedOptions)
+		}, !this._slottedOptions?.length) {
+			this._state = F([]), this._activeDescendantId = null;
+			return;
+		}
+		this._applyNewState(P(this._ctx, this._slottedOptions, this.values));
+	}
+	_applyNewState(e) {
+		if (j(e)) {
+			let t = this._filteredOptions[e.activeIndex];
+			this._activeDescendantId = t.id, Y(t, {
+				block: "nearest",
+				scrollMode: "if-needed"
+			});
+		} else this._activeDescendantId = null;
+		let t = !X(this.values, e.values);
+		this._state = e, this.values = [...e.values], this._updateSlottedOptions(), t && this.$emit("change", void 0, {
+			bubbles: !1,
+			composed: !1
+		});
+	}
+	_updateSlottedOptions() {
+		for (let e of this._slottedOptions) e.selected = this.values.includes(e.value), e._highlighted = !!(this._activeDescendantId && e.id === this._activeDescendantId);
+	}
+	_onKeydown(e) {
+		let t = z(this._state, this._ctx, e, Date.now());
+		return t ? (this._applyNewState(V(this._state, this._ctx, t)), !1) : !0;
+	}
+	_onClick(e) {
+		let t = e.target.closest("[data-vvd-component=option]"), n = t ? this._filteredOptions.indexOf(t) : -1;
+		if (n === -1) return !0;
+		let r = this._state;
+		return this._applyNewState(V(r, this._ctx, B(r, this._ctx, e, n))), !1;
+	}
+};
+//#endregion
+//#region src/lib/listbox/index.ts
+c([n({
+	attribute: "selection-mode",
+	mode: "fromView"
+})], Z.prototype, "selectionMode", void 0), c([n({
+	attribute: "selection-behavior",
+	mode: "fromView"
+})], Z.prototype, "selectionBehavior", void 0), c([n({
+	attribute: "required-selection",
+	mode: "fromView"
+})], Z.prototype, "requiredSelection", void 0), c([e], Z.prototype, "_activeDescendantId", void 0), c([e], Z.prototype, "values", void 0), t(a("listbox", Z, (e) => r`<template
+		tabindex="0"
+		${u({
+	role: "listbox",
+	ariaMultiSelectable: (e) => e.selectionMode === "multiple" ? "true" : void 0
+})}
+		aria-activedescendant="${(e) => e._activeDescendantId}"
+		@click="${(e, t) => e._onClick(t.event)}"
+		@keydown="${(e, t) => e._onKeydown(t.event)}"
+		>${v}${s((e) => e.searchText !== "" && e._filteredOptions.length === 0, r`<slot name="no-matches"></slot>`)}</template
+	>`, [], { styles: ":host{outline:none;flex-direction:column;gap:2px;display:flex}:host(:not(:focus-visible)){--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0}" }))();
+//#endregion

package/nav/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition51.cjs");
+const require_definition = require("../unbundled/definition52.cjs");
 exports.VwcNavElement = require_definition.Nav;
 exports.navDefinition = require_definition.navDefinition;
 exports.registerNav = require_definition.registerNav;

package/nav/definition.js

@@ -1,2 +1,2 @@
-import { n as registerNav, r as Nav, t as navDefinition } from "../unbundled/definition51.js";
+import { n as registerNav, r as Nav, t as navDefinition } from "../unbundled/definition52.js";
 export { Nav as VwcNavElement, navDefinition, registerNav };

package/nav-disclosure/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition49.cjs");
+const require_definition = require("../unbundled/definition50.cjs");
 exports.VwcNavDisclosureElement = require_definition.NavDisclosure;
 exports.navDisclosureDefinition = require_definition.navDisclosureDefinition;
 exports.registerNavDisclosure = require_definition.registerNavDisclosure;

package/nav-disclosure/definition.js

@@ -1,2 +1,2 @@
-import { n as registerNavDisclosure, r as NavDisclosure, t as navDisclosureDefinition } from "../unbundled/definition49.js";
+import { n as registerNavDisclosure, r as NavDisclosure, t as navDisclosureDefinition } from "../unbundled/definition50.js";
 export { NavDisclosure as VwcNavDisclosureElement, navDisclosureDefinition, registerNavDisclosure };

package/nav-disclosure/index.cjs

@@ -1,8 +1,8 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/delegates-aria.cjs`);var s=`.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control{user-select:none}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`,c=class extends a.t(o.t(e.t)){constructor(...e){super(...e),this.open=!1,this.current=!1,this.#e=()=>{this.open=this.details.open,this.$emit(`toggle`,void 0,{bubbles:!1})}}connectedCallback(){super.connectedCallback(),this.details.addEventListener(`toggle`,this.#e),this.details.open=this.open}disconnectedCallback(){super.disconnectedCallback(),this.details.removeEventListener(`toggle`,this.#e)}#e};n.t([e.m],c.prototype,`label`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],c.prototype,`open`,void 0),n.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`true`:null}),e.m({attribute:`current`,mode:`boolean`})],c.prototype,`current`,void 0);var l=e.u(`nav-disclosure`,c,n=>{let s=a.a(n),c=n.tagFor(i.r);return e.p`<details class="base" ${t.t(`details`)} ?open=${e=>e.open}>
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/icon.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=`.control.connotation-cta{--_connotation-color-primary:var(--vvd-nav-disclosure-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-nav-disclosure-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-nav-disclosure-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-nav-disclosure-cta-faint,var(--vvd-color-cta-50));--_connotation-color-firm:var(--vvd-nav-disclosure-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-nav-disclosure-cta-soft,var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-nav-disclosure-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-nav-disclosure-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-nav-disclosure-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-nav-disclosure-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-nav-disclosure-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-nav-disclosure-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-nav-disclosure-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-firm:var(--vvd-nav-disclosure-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-nav-disclosure-accent-soft,var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline:transparent}.control{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;border-radius:8px;align-items:center;gap:12px;padding-block:10px;padding-inline:16px;text-decoration:none;display:flex}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color:color-mix(in srgb, var(--one-color), var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color:transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control{user-select:none}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{border-inline-start:1px solid var(--vvd-color-neutral-200);flex-direction:column;gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px;display:flex}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}`,l=class extends o.t(s.t(e.t)){constructor(...e){super(...e),this.open=!1,this.current=!1,this.#e=()=>{this.open=this.details.open,this.$emit(`toggle`,void 0,{bubbles:!1})}}connectedCallback(){super.connectedCallback(),this.details.addEventListener(`toggle`,this.#e),this.details.open=this.open}disconnectedCallback(){super.disconnectedCallback(),this.details.removeEventListener(`toggle`,this.#e)}#e};n.t([e.m],l.prototype,`label`,void 0),n.t([e.m],l.prototype,`appearance`,void 0),n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],l.prototype,`open`,void 0),n.t([e.n({deprecatedPropertyName:`ariaCurrent`,fromDeprecated:e=>!!e,toDeprecated:e=>e?`true`:null}),e.m({attribute:`current`,mode:`boolean`})],l.prototype,`current`,void 0);var u=e.u(`nav-disclosure`,l,n=>{let i=o.a(n),c=n.tagFor(a.t);return e.p`<details class="base" ${t.t(`details`)} ?open=${e=>e.open}>
 		<summary class="${e=>r.t(`control`,[`appearance-${e.appearance}`,!!e.appearance],[`connotation-${e.connotation}`,!!e.connotation],[`current-closed selected`,e.current&&!e.open])}"
-			${o.n({role:`button`,ariaExpanded:e=>e.open,ariaCurrent:e=>e.open?null:e.current||e.ariaCurrent?`true`:null,ariaControls:`disclosure-content`})}
+			${s.n({role:`button`,ariaExpanded:e=>e.open,ariaCurrent:e=>e.open?null:e.current||e.ariaCurrent?`true`:null,ariaControls:`disclosure-content`})}
 		>
-			${e=>s(e.icon,a.i.Slot)}
+			${e=>i(e.icon,o.i.Slot)}
 			${e=>e.label}
 			<slot name="meta"></slot>
 			<${c} class="toggleIcon" name=${e=>e.open?`chevron-up-line`:`chevron-down-line`}
@@ -12,4 +12,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 			<slot></slot>
 		</div>
 	</details>
-	`},[i.t],{styles:s});e.d(l)();
+	`},[i.t],{styles:c});e.d(u)();

package/nav-disclosure/index.js

@@ -2,7 +2,8 @@ import { d as e, m as t, n, p as r, t as i, u as a } from "../bundled/vivid-elem
 import { t as o } from "../bundled/ref.js";
 import { t as s } from "../bundled/decorate.js";
 import { t as c } from "../bundled/class-names.js";
-import { r as l, t as u } from "../bundled/definition3.js";
+import { t as l } from "../bundled/definition3.js";
+import { t as u } from "../bundled/icon.js";
 import { a as d, i as f, t as p } from "../bundled/affix.js";
 import { n as m, t as h } from "../bundled/delegates-aria.js";
 //#region src/lib/nav-disclosure/nav-disclosure.scss?inline
@@ -30,7 +31,7 @@ s([t], _.prototype, "label", void 0), s([t], _.prototype, "appearance", void 0),
 	attribute: "current",
 	mode: "boolean"
 })], _.prototype, "current", void 0), e(a("nav-disclosure", _, (e) => {
-	let t = d(e), n = e.tagFor(l);
+	let t = d(e), n = e.tagFor(u);
 	return r`<details class="base" ${o("details")} ?open=${(e) => e.open}>
 		<summary class="${(e) => c("control", [`appearance-${e.appearance}`, !!e.appearance], [`connotation-${e.connotation}`, !!e.connotation], ["current-closed selected", e.current && !e.open])}"
 			${m({
@@ -51,5 +52,5 @@ s([t], _.prototype, "label", void 0), s([t], _.prototype, "appearance", void 0),
 		</div>
 	</details>
 	`;
-}, [u], { styles: g }))();
+}, [l], { styles: g }))();
 //#endregion

package/nav-item/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition50.cjs");
+const require_definition = require("../unbundled/definition51.cjs");
 exports.VwcNavItemElement = require_definition.NavItem;
 exports.navItemDefinition = require_definition.navItemDefinition;
 exports.registerNavItem = require_definition.registerNavItem;

package/nav-item/definition.js

@@ -1,2 +1,2 @@
-import { n as registerNavItem, r as NavItem, t as navItemDefinition } from "../unbundled/definition50.js";
+import { n as registerNavItem, r as NavItem, t as navItemDefinition } from "../unbundled/definition51.js";
 export { NavItem as VwcNavItemElement, navItemDefinition, registerNavItem };

package/note/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition52.cjs");
+const require_definition = require("../unbundled/definition53.cjs");
 exports.VwcNoteElement = require_definition.Note;
 exports.noteDefinition = require_definition.noteDefinition;
 exports.registerNote = require_definition.registerNote;

package/note/definition.js

@@ -1,2 +1,2 @@
-import { n as registerNote, r as Note, t as noteDefinition } from "../unbundled/definition52.js";
+import { n as registerNote, r as Note, t as noteDefinition } from "../unbundled/definition53.js";
 export { Note as VwcNoteElement, noteDefinition, registerNote };