@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/definition49.cjs

@@ -1,622 +1,58 @@
-const require_chunk = require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_host_semantics = require("./host-semantics.cjs");
-const require_option = require("./option.cjs");
-const require_optgroup = require("./optgroup.cjs");
-const require_extractOptions = require("./extractOptions.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-let scroll_into_view_if_needed = require("scroll-into-view-if-needed");
-scroll_into_view_if_needed = require_chunk.__toESM(scroll_into_view_if_needed, 1);
-//#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 (require_optgroup.isOptgroup(el)) {
-		const hasVisibleOption = Array.from(el.children).some((child) => require_option.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);
-		}
-	}
-	require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-		attribute: "search-text",
-		mode: "fromView"
-	})], WithOptionsElement.prototype, "searchText", void 0);
-	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "optionFilter", void 0);
-	require_decorate.__decorate([_microsoft_fast_element.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 = require_extractOptions.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 = (0, _microsoft_fast_web_utilities.uniqueId)("option-");
-		}
-	}
-	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "_slottedElements", void 0);
-	require_decorate.__decorate([_microsoft_fast_element.observable], WithOptionsElement.prototype, "_slottedOptions", void 0);
-	return WithOptionsElement;
-};
-var optionsTemplate = _microsoft_fast_element.html`<slot
-	${(0, _microsoft_fast_element.slotted)({
-	filter: ((n) => require_option.isListboxOption(n) || require_optgroup.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 === _microsoft_fast_web_utilities.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);
+//#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(require_host_semantics.HostSemantics(require_vivid_element.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;
-			(0, scroll_into_view_if_needed.default)(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;
-	}
-};
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "selection-mode",
-	mode: "fromView"
-})], Listbox.prototype, "selectionMode", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "selection-behavior",
-	mode: "fromView"
-})], Listbox.prototype, "selectionBehavior", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "required-selection",
-	mode: "fromView"
-})], Listbox.prototype, "requiredSelection", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Listbox.prototype, "_activeDescendantId", void 0);
-require_decorate.__decorate([_microsoft_fast_element.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 _microsoft_fast_element.html`<template
-		tabindex="0"
-		${require_host_semantics.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}${(0, _microsoft_fast_element.when)((x) => x.searchText !== "" && x._filteredOptions.length === 0, _microsoft_fast_element.html`<slot name="no-matches"></slot>`)}</template
-	>`;
-};
+var Layout = class extends require_vivid_element.VividElement {};
+require_decorate.__decorate([_microsoft_fast_element.attr], Layout.prototype, "gutters", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-basis" })], Layout.prototype, "columnBasis", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "column-spacing" })], Layout.prototype, "columnSpacing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "row-spacing" })], Layout.prototype, "rowSpacing", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.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 = _microsoft_fast_element.html` <div
+	class="${(x) => (0, _microsoft_fast_web_utilities.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 = require_vivid_element.defineVividComponent("listbox", Listbox, listboxTemplate, [], { styles: listbox_default });
+var layoutDefinition = require_vivid_element.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 = require_vivid_element.createRegisterFunction(listboxDefinition);
+var registerLayout = require_vivid_element.createRegisterFunction(layoutDefinition);
 //#endregion
-Object.defineProperty(exports, "Listbox", {
+Object.defineProperty(exports, "Layout", {
 	enumerable: true,
 	get: function() {
-		return Listbox;
+		return Layout;
 	}
 });
-Object.defineProperty(exports, "listboxDefinition", {
+Object.defineProperty(exports, "layoutDefinition", {
 	enumerable: true,
 	get: function() {
-		return listboxDefinition;
+		return layoutDefinition;
 	}
 });
-Object.defineProperty(exports, "registerListbox", {
+Object.defineProperty(exports, "registerLayout", {
 	enumerable: true,
 	get: function() {
-		return registerListbox;
+		return registerLayout;
 	}
 });