@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/definition49.js

@@ -1,603 +1,41 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { n as isListboxOption } from "./option.js";
-import { n as isOptgroup } from "./optgroup.js";
-import { t as extractOptions } from "./extractOptions.js";
-import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
-import { keySpace, uniqueId } from "@microsoft/fast-web-utilities";
-import scrollIntoView from "scroll-into-view-if-needed";
-//#region src/shared/listbox/with-options-filter.ts
-function applyFilter(allOptions, allElements, optionFilter, searchText) {
-	const newFilteredOptions = [];
-	for (const option of allOptions) {
-		option._vvdSearchText = searchText;
-		const matches = !searchText || optionFilter(option, searchText);
-		option._isNotMatching = !matches;
-		if (!option.hidden && !option.disabled && matches) newFilteredOptions.push(option);
-	}
-	for (const el of allElements) if (isOptgroup(el)) {
-		const hasVisibleOption = Array.from(el.children).some((child) => isListboxOption(child) && !child._isNotMatching && !child.hidden);
-		el.style.display = hasVisibleOption ? "" : "none";
-	}
-	return newFilteredOptions;
-}
-var WithOptionsFilter = (Base) => {
-	class WithOptionsElement extends Base {
-		constructor(..._args) {
-			super(..._args);
-			this.searchText = "";
-			this._filteredOptions = [];
-		}
-		/** @internal */
-		_slottedOptionsChanged() {
-			super._slottedOptionsChanged();
-			this._updateFilter();
-		}
-		/** @internal */
-		searchTextChanged() {
-			this._updateFilter();
-		}
-		/** @internal */
-		optionFilterChanged() {
-			this._updateFilter();
-		}
-		/** @internal */
-		_updateFilter() {
-			this._filteredOptions = applyFilter(this._slottedOptions, this._slottedElements, this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase())), this.searchText);
-		}
-	}
-	__decorate([attr({
-		attribute: "search-text",
-		mode: "fromView"
-	})], WithOptionsElement.prototype, "searchText", void 0);
-	__decorate([observable], WithOptionsElement.prototype, "optionFilter", void 0);
-	__decorate([observable], WithOptionsElement.prototype, "_filteredOptions", void 0);
-	return WithOptionsElement;
-};
-//#endregion
-//#region src/shared/listbox/with-options.ts
-/** A mixin for elements that accept slotted options */
-var WithOptions = (Base) => {
-	class WithOptionsElement extends Base {
-		constructor(..._args) {
-			super(..._args);
-			this._slottedElements = [];
-			this.#onOptgroupChange = () => {
-				this._slottedElementsChanged();
-			};
-			this._slottedOptions = [];
-		}
-		/** @internal */
-		_slottedElementsChanged() {
-			this._slottedOptions = extractOptions(this._slottedElements);
-		}
-		#onOptgroupChange;
-		connectedCallback() {
-			super.connectedCallback();
-			this.addEventListener("optgroup-change", this.#onOptgroupChange);
-		}
-		disconnectedCallback() {
-			super.disconnectedCallback();
-			this.removeEventListener("optgroup-change", this.#onOptgroupChange);
-		}
-		/** @internal */
-		_slottedOptionsChanged() {
-			for (const option of this._slottedOptions) if (!option.id) option.id = uniqueId("option-");
-		}
-	}
-	__decorate([observable], WithOptionsElement.prototype, "_slottedElements", void 0);
-	__decorate([observable], WithOptionsElement.prototype, "_slottedOptions", void 0);
-	return WithOptionsElement;
-};
-var optionsTemplate = html`<slot
-	${slotted({
-	filter: ((n) => isListboxOption(n) || isOptgroup(n)),
-	flatten: true,
-	property: "_slottedElements"
-})}
->
-</slot>`;
-//#endregion
-//#region src/shared/listbox/selection.ts
-var modifierKeys = (e) => {
-	const modKey = e.ctrlKey || e.metaKey;
-	return e.shiftKey && modKey ? "ShiftMod" : e.shiftKey ? "Shift" : modKey ? "Mod" : null;
-};
-var selectionForMove = (state, ctx, move, mods) => {
-	if (move.amount === "step" && mods === "Mod") return null;
-	if (ctx.selectionMode === "multiple") {
-		if (move.amount === "step" && mods === "Shift") return {
-			action: {
-				type: "extend-from-anchor",
-				anchorIndex: state.rangeAnchorIndex ?? state.activeIndex
-			},
-			replaceExisting: false
-		};
-		if (move.amount === "limit" && mods === "ShiftMod") return {
-			action: { type: "select-from-current" },
-			replaceExisting: false
-		};
-	}
-	if (ctx.selectionBehavior === "replace") return {
-		action: { type: "select" },
-		replaceExisting: true
-	};
-	return null;
-};
-/** How the selection should change when an option is triggered (by pressing Space or clicking) */
-var selectionForTrigger = (ctx, mods) => {
-	if (mods === "Shift") return {
-		action: { type: "select-from-most-recent" },
-		replaceExisting: ctx.selectionBehavior === "replace"
-	};
-	if (mods === "Mod") return {
-		action: { type: "toggle" },
-		replaceExisting: false
-	};
-	if (ctx.selectionBehavior === "replace") return {
-		action: { type: "select" },
-		replaceExisting: true
-	};
-	return {
-		action: { type: "toggle" },
-		replaceExisting: false
-	};
-};
-function addRange(baseValues, ctx, fromIdx, toIdx) {
-	const baseSet = new Set(baseValues);
-	const [from, to] = [fromIdx, toIdx].sort((a, b) => a - b);
-	const newValues = [...baseValues];
-	for (let i = from; i <= to; i++) {
-		const v = ctx.selectable.optionValue(i);
-		if (!baseSet.has(v)) newValues.push(v);
-	}
-	return newValues;
-}
-function updateAnchoredRange(baseValues, ctx, anchorIdx, targetIdx, prevTargetIdx) {
-	const baseSet = new Set(baseValues);
-	const [from, , to] = [
-		anchorIdx,
-		targetIdx,
-		prevTargetIdx
-	].sort((a, b) => a - b);
-	let newValues = [...baseValues];
-	for (let i = from; i <= to; i++) {
-		const v = ctx.selectable.optionValue(i);
-		if (i < anchorIdx && i < targetIdx || i > anchorIdx && i > targetIdx) {
-			if (baseSet.has(v)) newValues = newValues.filter((val) => val !== v);
-		} else if (!baseSet.has(v)) newValues.push(v);
-	}
-	return newValues;
-}
-function mostRecentlySelectedIndex(state, ctx) {
-	const values = state.values;
-	for (let i = values.length - 1; i >= 0; i--) {
-		const index = ctx.selectable.optionIndex(values[i]);
-		if (index !== null) return index;
-	}
-	return null;
-}
-function applyAction(state, ctx, command) {
-	const newState = (v) => {
-		return {
-			...state,
-			values: v.values ?? state.values,
-			activeIndex: v.activeIndex ?? state.activeIndex,
-			rangeAnchorIndex: v.rangeAnchorIndex ?? null
-		};
-	};
-	if (command.type !== "action") return newState({});
-	const prevValues = state.values;
-	const { targetIndex, selection } = command;
-	const enforceRestrictions = (newValues) => {
-		if (ctx.selectionMode === "single" && newValues.length > 1) return [newValues[newValues.length - 1]];
-		if (ctx.requiredSelection !== "none") {
-			if (newValues.length === 0) return prevValues;
-			if (ctx.requiredSelection === "selectable") {
-				if (!newValues.some((v) => ctx.selectable.optionIndex(v) !== null)) return prevValues;
-			}
-		}
-		return newValues;
-	};
-	const targetValue = ctx.selectable.optionValue(targetIndex);
-	const baseValues = selection?.replaceExisting ? [] : prevValues;
-	switch (selection?.action.type) {
-		case void 0: return newState({ activeIndex: targetIndex });
-		case "select": return newState({
-			activeIndex: targetIndex,
-			values: enforceRestrictions(prevValues.includes(targetValue) ? prevValues : [...baseValues, targetValue])
-		});
-		case "toggle": return newState({
-			activeIndex: targetIndex,
-			values: enforceRestrictions(prevValues.includes(targetValue) ? baseValues.filter((v) => v !== targetValue) : [...baseValues, targetValue])
-		});
-		case "select-from-current": return newState({
-			activeIndex: targetIndex,
-			values: enforceRestrictions(addRange(baseValues, ctx, state.activeIndex, targetIndex))
-		});
-		case "select-from-most-recent": return newState({
-			activeIndex: targetIndex,
-			values: enforceRestrictions(addRange(baseValues, ctx, mostRecentlySelectedIndex(state, ctx) ?? 0, targetIndex))
-		});
-		case "extend-from-anchor": return newState({
-			values: enforceRestrictions(updateAnchoredRange(baseValues, ctx, selection.action.anchorIndex, targetIndex, state.activeIndex)),
-			activeIndex: targetIndex,
-			rangeAnchorIndex: selection.action.anchorIndex
-		});
-	}
-}
-//#endregion
-//#region src/shared/listbox/typeahead.ts
-var TypeaheadTimeout = 2e3;
-function typeaheadFromKey(state, _ctx, key, now) {
-	const typeahead = state.typeahead && state.typeahead.lastInputMs > now - TypeaheadTimeout ? state.typeahead : null;
-	return key.length === 1 && !(key === keySpace && !typeahead) ? {
-		buffer: (typeahead?.buffer ?? "") + key,
-		lastInputMs: now
-	} : null;
-}
-function applyTypeahead(state, ctx, command) {
-	if (command.type !== "typeahead") return {
-		...state,
-		typeahead: null
-	};
-	const typeahead = command.typeahead;
-	for (let candidateIdx = (state.activeIndex + 1) % ctx.selectable.numOptions; candidateIdx !== state.activeIndex; candidateIdx = (candidateIdx + 1) % ctx.selectable.numOptions) if (ctx.selectable.optionText(candidateIdx).toLowerCase().startsWith(typeahead.buffer.toLowerCase())) return {
-		...applyAction(state, ctx, {
-			type: "action",
-			targetIndex: candidateIdx,
-			selection: command.selection
-		}),
-		typeahead
-	};
-	return {
-		...state,
-		typeahead
-	};
-}
-//#endregion
-//#region src/shared/listbox/options.ts
-var optionsInterface = (options) => ({
-	numOptions: options.length,
-	optionValue: (index) => options[index].value,
-	optionText: (index) => options[index].text,
-	optionIndex: (value) => {
-		const index = options.findIndex((o) => o.value === value);
-		return index === -1 ? null : index;
-	},
-	isEq: (newOptions) => options === newOptions
-});
-function initialValues(ctx, allOptions, providedValues) {
-	const selectedValues = allOptions.filter((option) => option.selected || providedValues.includes(option.value)).map((o) => o.value);
-	const maxSelected = ctx.selectionMode === "single" ? 1 : Infinity;
-	return ensureRequiredSelection(ctx, selectedValues.slice(0, maxSelected), maxSelected);
-}
-//#endregion
-//#region src/shared/listbox/state.ts
-function isUIState(state) {
-	return "activeIndex" in state;
-}
-function applyContextChange(state, newCtx, requestedValues) {
-	const validValues = requestedValues.filter((v) => newCtx.all.optionIndex(v) !== null);
-	const maxSelected = newCtx.selectionMode === "single" ? 1 : Infinity;
-	let values = validValues.slice(0, maxSelected);
-	values = ensureRequiredSelection(newCtx, values, maxSelected);
-	return {
-		...state,
-		values
-	};
-}
-/**
-* Applies the `requiredSelection` restriction to a set of values, selecting a selectable option if needed.
-* @internal
-*/
-function ensureRequiredSelection(ctx, values, maxSelected) {
-	if (ctx.requiredSelection === "none" || ctx.selectable.numOptions === 0) return values;
-	if (values.length === 0) return [ctx.selectable.optionValue(0)];
-	if (ctx.requiredSelection === "selectable") {
-		if (!values.some((v) => ctx.selectable.optionIndex(v) !== null)) return maxSelected === 1 ? [ctx.selectable.optionValue(0)] : [...values, ctx.selectable.optionValue(0)];
-	}
-	return values;
-}
-function initialState(ctx, providedOptions, providedValues) {
-	const values = initialValues(ctx, providedOptions, providedValues);
-	if (ctx.selectable.numOptions === 0) return valuesOnlyState(values);
-	let activeIndex = 0;
-	for (const candidate of values) {
-		const index = ctx.selectable.optionIndex(candidate);
-		if (index !== null) {
-			activeIndex = index;
-			break;
-		}
-	}
-	return {
-		values,
-		activeIndex,
-		typeahead: null,
-		rangeAnchorIndex: null
-	};
-}
-function valuesOnlyState(values) {
-	return { values };
-}
-//#endregion
-//#region src/shared/listbox/move.ts
-function moveFromKey(key) {
-	switch (key) {
-		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 moveIndex(index, numItems, pageSize, move) {
-	const limits = {
-		backward: 0,
-		forward: numItems - 1
-	};
-	const dirs = {
-		backward: -1,
-		forward: 1
-	};
-	const amounts = {
-		step: 1,
-		page: pageSize
-	};
-	switch (move.amount) {
-		case "limit": return limits[move.direction];
-		case "page":
-		case "step": return Math.min(limits.forward, Math.max(limits.backward, index + dirs[move.direction] * amounts[move.amount]));
-	}
-}
-//#endregion
-//#region src/shared/listbox/commands.ts
-var PageSize = 10;
-function commandFromKey(state, ctx, e, now) {
-	if (!isUIState(state)) return null;
-	const typeahead = typeaheadFromKey(state, ctx, e.key, now);
-	if (typeahead) return {
-		type: "typeahead",
-		typeahead,
-		selection: ctx.selectionBehavior === "replace" ? {
-			action: { type: "select" },
-			replaceExisting: true
-		} : null
-	};
-	const move = moveFromKey(e.key);
-	if (move) return {
-		type: "action",
-		targetIndex: moveIndex(state.activeIndex, ctx.selectable.numOptions, PageSize, move),
-		selection: selectionForMove(state, ctx, move, modifierKeys(e))
-	};
-	if (e.key === " ") return {
-		type: "action",
-		targetIndex: state.activeIndex,
-		selection: selectionForTrigger(ctx, modifierKeys(e))
-	};
-	return null;
-}
-function commandFromClick(_state, ctx, e, targetIndex) {
-	return {
-		type: "action",
-		targetIndex,
-		selection: selectionForTrigger(ctx, modifierKeys(e))
-	};
-}
-function apply(state, context, command) {
-	state = applyTypeahead(state, context, command);
-	state = applyAction(state, context, command);
-	return state;
-}
-//#endregion
-//#region src/lib/listbox/listbox.ts
-var deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+import { attr, html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/layout/layout.ts
 /**
+* [--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],
+* minmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.
+*
 * @public
-* @component listbox
-* @slot - Holds the available options.
-* @slot no-matches - Message that appears when no options match the search query.
-* @event {CustomEvent<undefined>} change - Fired when the selected options change.
-* @vueModel modelValue value change `event.currentTarget.value`
-* @vueModel values values change `event.currentTarget.values`
+* @component layout
+* @slot - Default slot.
 */
-var Listbox = class extends WithOptionsFilter(WithOptions(HostSemantics(VividElement))) {
-	constructor(..._args) {
-		super(..._args);
-		this.selectionMode = "single";
-		this.selectionBehavior = "toggle";
-		this.requiredSelection = "none";
-		this._activeDescendantId = null;
-		this.values = [];
-		this._state = valuesOnlyState([]);
-		this._ctx = {
-			selectionMode: "single",
-			selectionBehavior: "toggle",
-			requiredSelection: "none",
-			selectable: optionsInterface([]),
-			all: optionsInterface([])
-		};
-		this._externalChangeQueued = false;
-	}
-	/** @internal */
-	selectionModeChanged() {
-		this._registerExternalChange();
-	}
-	/** @internal */
-	selectionBehaviorChanged() {
-		this._registerExternalChange();
-	}
-	/** @internal */
-	requiredSelectionChanged() {
-		this._registerExternalChange();
-	}
-	/** @internal */
-	_filteredOptionsChanged() {
-		this._registerExternalChange();
-	}
-	/** @internal */
-	valuesChanged() {
-		if (this._state && !deepEqual(this._state.values, this.values)) this._registerExternalChange();
-	}
-	/** The first selected option value, or `null` if no option is selected. In single-selection mode, this can be used as an alternative to `values`. */
-	get value() {
-		return this.values[0] ?? null;
-	}
-	set value(value) {
-		this.values = value === null ? [] : [value];
-	}
-	/**
-	* Use a microtask to batch multiple synchronous changes. Otherwise, we may update the state based on half-applied changes.
-	* @internal
-	*/
-	_registerExternalChange() {
-		if (!this._externalChangeQueued) {
-			this._externalChangeQueued = true;
-			queueMicrotask(() => this._applyPendingExternalChanges());
-		}
-	}
-	/**
-	* React to external changes of props or options
-	* @internal
-	*/
-	_applyPendingExternalChanges() {
-		this._externalChangeQueued = false;
-		if (!this._ctx.all.isEq(this._slottedOptions) || !this._ctx.selectable.isEq(this._filteredOptions)) {
-			this._initializeState();
-			return;
-		}
-		const newCtx = {
-			...this._ctx,
-			selectionMode: this.selectionMode,
-			selectionBehavior: this.selectionBehavior,
-			requiredSelection: this.requiredSelection
-		};
-		this._ctx = newCtx;
-		this._applyNewState(applyContextChange(this._state, newCtx, this.values));
-	}
-	/** @internal */
-	_initializeState() {
-		this._ctx = {
-			selectionMode: this.selectionMode,
-			selectionBehavior: this.selectionBehavior,
-			requiredSelection: this.requiredSelection,
-			selectable: optionsInterface(this._filteredOptions),
-			all: optionsInterface(this._slottedOptions)
-		};
-		if (!this._slottedOptions?.length) {
-			this._state = valuesOnlyState([]);
-			this._activeDescendantId = null;
-			return;
-		}
-		this._applyNewState(initialState(this._ctx, this._slottedOptions, this.values));
-	}
-	/** @internal */
-	_applyNewState(toState) {
-		if (isUIState(toState)) {
-			const activeOption = this._filteredOptions[toState.activeIndex];
-			this._activeDescendantId = activeOption.id;
-			scrollIntoView(activeOption, {
-				block: "nearest",
-				scrollMode: "if-needed"
-			});
-		} else this._activeDescendantId = null;
-		const valuesChanged = !deepEqual(this.values, toState.values);
-		this._state = toState;
-		this.values = [...toState.values];
-		this._updateSlottedOptions();
-		if (valuesChanged) this.$emit("change", void 0, {
-			bubbles: false,
-			composed: false
-		});
-	}
-	/** @internal */
-	_updateSlottedOptions() {
-		for (const option of this._slottedOptions) {
-			option.selected = this.values.includes(option.value);
-			option._highlighted = Boolean(this._activeDescendantId && option.id === this._activeDescendantId);
-		}
-	}
-	/** @internal */
-	_onKeydown(e) {
-		const command = commandFromKey(this._state, this._ctx, e, Date.now());
-		if (command) {
-			this._applyNewState(apply(this._state, this._ctx, command));
-			return false;
-		}
-		return true;
-	}
-	/** @internal */
-	_onClick(e) {
-		const clickedOnOption = e.target.closest(`[data-vvd-component=option]`);
-		const targetIndex = clickedOnOption ? this._filteredOptions.indexOf(clickedOnOption) : -1;
-		if (targetIndex === -1) return true;
-		const state = this._state;
-		this._applyNewState(apply(state, this._ctx, commandFromClick(state, this._ctx, e, targetIndex)));
-		return false;
-	}
-};
-__decorate([attr({
-	attribute: "selection-mode",
-	mode: "fromView"
-})], Listbox.prototype, "selectionMode", void 0);
-__decorate([attr({
-	attribute: "selection-behavior",
-	mode: "fromView"
-})], Listbox.prototype, "selectionBehavior", void 0);
-__decorate([attr({
-	attribute: "required-selection",
-	mode: "fromView"
-})], Listbox.prototype, "requiredSelection", void 0);
-__decorate([observable], Listbox.prototype, "_activeDescendantId", void 0);
-__decorate([observable], Listbox.prototype, "values", void 0);
-//#endregion
-//#region src/lib/listbox/listbox.scss?inline
-var listbox_default = ":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
-//#region src/lib/listbox/listbox.template.ts
-var listboxTemplate = (_context) => {
-	return html`<template
-		tabindex="0"
-		${applyHostSemantics({
-		role: "listbox",
-		ariaMultiSelectable: (x) => x.selectionMode === "multiple" ? "true" : void 0
-	})}
-		aria-activedescendant="${(x) => x._activeDescendantId}"
-		@click="${(x, c) => x._onClick(c.event)}"
-		@keydown="${(x, c) => x._onKeydown(c.event)}"
-		>${optionsTemplate}${when((x) => x.searchText !== "" && x._filteredOptions.length === 0, html`<slot name="no-matches"></slot>`)}</template
-	>`;
-};
+var Layout = class extends VividElement {};
+__decorate([attr], Layout.prototype, "gutters", void 0);
+__decorate([attr({ attribute: "column-basis" })], Layout.prototype, "columnBasis", void 0);
+__decorate([attr({ attribute: "column-spacing" })], Layout.prototype, "columnSpacing", void 0);
+__decorate([attr({ attribute: "row-spacing" })], Layout.prototype, "rowSpacing", void 0);
+__decorate([attr({ attribute: "auto-sizing" })], Layout.prototype, "autoSizing", void 0);
+//#endregion
+//#region src/lib/layout/layout.scss?inline
+var layout_default = ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}";
+//#endregion
+//#region src/lib/layout/layout.template.ts
+var layoutTemplate = html` <div
+	class="${(x) => classNames("control", [`column-basis-${x.columnBasis}`, Boolean(x.columnBasis)], [`gutters-${x.gutters}`, Boolean(x.gutters)], [`column-spacing-${x.columnSpacing}`, Boolean(x.columnSpacing)], [`row-spacing-${x.rowSpacing ? x.rowSpacing : x.columnSpacing}`, Boolean(x.rowSpacing) || Boolean(x.columnSpacing)], [`auto-sizing-${x.autoSizing}`, Boolean(x.autoSizing)])}"
+>
+	<slot></slot>
+</div>`;
 //#endregion
-//#region src/lib/listbox/definition.ts
+//#region src/lib/layout/definition.ts
 /** @internal */
-var listboxDefinition = defineVividComponent("listbox", Listbox, listboxTemplate, [], { styles: listbox_default });
+var layoutDefinition = defineVividComponent("layout", Layout, layoutTemplate, [], { styles: layout_default });
 /**
-* Registers the listbox elements with the design system.
+* Registers the layout elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerListbox = createRegisterFunction(listboxDefinition);
+var registerLayout = createRegisterFunction(layoutDefinition);
 //#endregion
-export { registerListbox as n, Listbox as r, listboxDefinition as t };
+export { registerLayout as n, Layout as r, layoutDefinition as t };

package/unbundled/definition5.cjs

@@ -1,14 +1,20 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_base_progress = require("./base-progress.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/progress-ring/progress-ring.scss?inline
-var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
+var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
 //#endregion
 //#region src/lib/progress-ring/progress-ring.ts
+var progressRingConnotation = require_component_enum.componentEnum([
+	"accent",
+	"success",
+	"alert",
+	"cta"
+], "accent");
 /**
 * @public
 * @component progress-ring
@@ -21,7 +27,7 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototy
 var progressSegments = 44;
 var ProgressRingTemplate = _microsoft_fast_element.html`<template>
 	<div
-		class="${(x) => x.paused ? "paused" : ""} ${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.paused], [`connotation-${x.connotation}`, !!x.connotation], [`size-${x.size}`, !!x.size])}"
+		class="${(x) => x.paused ? "paused" : ""} ${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", x.paused], `connotation-${progressRingConnotation.parse(x.connotation)}`, "appearance-ghost", "with-idle", "with-disabled", [`size-${x.size}`, !!x.size])}"
 		${require_delegates_aria.delegateAria({
 	role: "progressbar",
 	ariaValueNow: (x) => x.value,