@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/definition67.js

@@ -1,101 +1,107 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
 import { t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { t as Localized } from "./localized.js";
-import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
-import { attr, html, observable } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/tab/tab.scss?inline
-var tab_default = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_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:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;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))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color:transparent;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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as CheckableFormAssociated } from "./form-associated.js";
+import { attr, html, observable, when } from "@microsoft/fast-element";
+import { classNames, keyEnter, keySpace } from "@microsoft/fast-web-utilities";
+//#region src/lib/switch/switch.scss?inline
+var switch_default = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text:var(--vvd-switch-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary:var(--vvd-switch-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-increment:var(--vvd-switch-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-switch-cta-firm,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-switch-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-fierce:var(--vvd-switch-cta-fierce,var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text:var(--vvd-switch-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary:var(--vvd-switch-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-increment:var(--vvd-switch-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-firm:var(--vvd-switch-alert-firm,var(--vvd-color-alert-600));--_connotation-color-intermediate:var(--vvd-switch-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-fierce:var(--vvd-switch-alert-fierce,var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text:var(--vvd-switch-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary:var(--vvd-switch-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-increment:var(--vvd-switch-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-firm:var(--vvd-switch-success-firm,var(--vvd-color-success-600));--_connotation-color-intermediate:var(--vvd-switch-success-intermediate,var(--vvd-color-success-500));--_connotation-color-fierce:var(--vvd-switch-success-fierce,var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text:var(--vvd-switch-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary:var(--vvd-switch-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-increment:var(--vvd-switch-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-firm:var(--vvd-switch-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-intermediate:var(--vvd-switch-announcement-intermediate,var(--vvd-color-announcement-500));--_connotation-color-fierce:var(--vvd-switch-announcement-fierce,var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text:var(--vvd-switch-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary:var(--vvd-switch-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-increment:var(--vvd-switch-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-switch-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-switch-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-fierce:var(--vvd-switch-accent-fierce,var(--vvd-color-neutral-700))}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-800);--_appearance-color-fill:var(--vvd-color-neutral-500);--_appearance-color-outline:transparent}.control{border-radius:16px;outline:none;gap:8px;display:inline-flex}@supports (user-select:none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * 1.8);box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);border-radius:40px;flex-shrink:0;align-items:center;transition:all .2s ease-in-out;display:flex}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:6px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.checked-indicator{--_switch-checked-indicator-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) / 1.6667);--_switch-gutter:calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translateX(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 //#endregion
-//#region src/lib/tab/tab.ts
+//#region src/lib/switch/switch.ts
 /**
 * @public
-* @component tab
-* @slot icon - The preferred way to add an icon to the component.
+* @component switch
+* @event {CustomEvent<undefined>} change - Emits a custom change event when the checked state changes
+* @vueModel modelValue checked change `event.currentTarget.checked`
 * @testSelector byLabel byLabel
-* @testAction select click #base
-* @testQuery active active true
-* @testQuery inactive active false
-* @testRef base shadow .base
+* @testAction check click #switch
+* @testAction uncheck click #switch
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef switch shadow .switch
 */
-var Tab = class extends HostSemantics(AffixIconWithTrailing(Localized(VividElement))) {
-	constructor(..._args) {
-		super(..._args);
-		this.removable = false;
-		this.tabIndex = "-1";
-		this.active = false;
+var Switch = class extends DelegatesAria(CheckableFormAssociated(VividElement)) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+		this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
 	}
 	/**
 	* @internal
 	*/
-	_handleCloseClick(e) {
-		e.stopImmediatePropagation();
-		this.$emit("close");
+	connectedCallback() {
+		super.connectedCallback();
+		this.proxy.setAttribute("type", "checkbox");
+		this.updateForm();
+	}
+	constructor() {
+		super();
+		this.proxy = document.createElement("input");
+		this.initialValue = "on";
+		this.keypressHandler = (e) => {
+			if (e.key === keySpace || e.key === keyEnter) this.checked = !this.checked;
+		};
+		this.clickHandler = () => {
+			if (!this.disabled && !this.readOnly) this.checked = !this.checked;
+		};
+		this.checked = this.defaultChecked;
 	}
 	/**
 	* @internal
 	*/
-	_onKeyDown(e) {
-		if (!this.removable || e.key !== "Delete") return true;
-		e.stopImmediatePropagation();
-		this.$emit("close");
-		return false;
+	updateForm() {
+		const value = this.checked ? this.value : null;
+		this.setFormValue(value, value);
 	}
 };
-__decorate([attr({ mode: "boolean" })], Tab.prototype, "disabled", void 0);
-__decorate([attr], Tab.prototype, "connotation", void 0);
-__decorate([attr], Tab.prototype, "shape", void 0);
-__decorate([attr], Tab.prototype, "label", void 0);
-__decorate([attr({ mode: "boolean" })], Tab.prototype, "removable", void 0);
-__decorate([attr({ mode: "fromView" })], Tab.prototype, "tabIndex", void 0);
-__decorate([observable], Tab.prototype, "active", void 0);
+__decorate([attr], Switch.prototype, "label", void 0);
+__decorate([attr], Switch.prototype, "connotation", void 0);
+__decorate([attr({
+	attribute: "readonly",
+	mode: "boolean"
+})], Switch.prototype, "readOnly", void 0);
+__decorate([observable], Switch.prototype, "defaultSlottedNodes", void 0);
 //#endregion
-//#region src/lib/tab/tab.template.ts
-var getClasses = ({ connotation, disabled, active, iconTrailing, shape, removable }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)], [`shape-${shape}`, Boolean(shape)], ["disabled", Boolean(disabled)], ["selected", Boolean(active)], ["icon-trailing", iconTrailing], ["removable", removable]);
-function renderDismissButton(context) {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	return html`<button
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", IconWrapper.Span)}
-	</button>`;
-}
-var TabTemplate = (context) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	return html`
-		<template
-			slot="tab"
-			?active="${(x) => x.active}"
-			${applyHostSemantics({
-		role: "tab",
-		ariaDisabled: (x) => x.disabled,
-		ariaSelected: (x) => x.active
-	})}
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
-			</div>
-		</template>
-	`;
-};
+//#region src/lib/switch/switch.template.ts
+var getClasses = (_) => classNames("control", ["appearance-filled", _.checked], ["checked", _.checked], ["disabled", _.disabled], ["readonly", _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
 //#endregion
-//#region src/lib/tab/definition.ts
+//#region src/lib/switch/definition.ts
 /**
 * @internal
 */
-var tabDefinition = defineVividComponent("tab", Tab, TabTemplate, [iconDefinition], { styles: tab_default });
+var switchDefinition = defineVividComponent("switch", Switch, html`
+	<template>
+		<div
+			class="${getClasses}"
+			${delegateAria({
+	role: "switch",
+	ariaChecked: (x) => x.checked,
+	ariaDisabled: (x) => x.disabled,
+	ariaReadOnly: (x) => x.readOnly
+})}
+			tabindex="${(x) => x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x) => x.clickHandler()}"
+		>
+			<div class="switch">
+				<span class="checked-indicator"></span>
+			</div>
+			${when((x) => x.label, html`<div class="label">${(x) => x.label}</div>`)}
+		</div>
+	</template>
+`, [iconDefinition], {
+	styles: switch_default,
+	shadowOptions: { delegatesFocus: true }
+});
 /**
-* Registers the tab elements with the design system.
+* Registers the switch elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTab = createRegisterFunction(tabDefinition);
+var registerSwitch = createRegisterFunction(switchDefinition);
 //#endregion
-export { tabDefinition as n, Tab as r, registerTab as t };
+export { switchDefinition as n, Switch as r, registerSwitch as t };

package/unbundled/definition68.cjs

@@ -1,374 +1,49 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_decorate = require("./decorate.cjs");
-const require_key_codes = require("./key-codes.cjs");
-const require_definition = require("./definition66.cjs");
-const require_definition$1 = require("./definition67.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/tabs/tabs.scss?inline
-var tabs_default = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-firm:var(--vvd-tabs-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm:var(--vvd-tabs-accent-firm,var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding: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)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}";
-//#endregion
-//#region src/lib/tabs/tabs.ts
-var ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-var TabsGutters = {
-	None: "none",
-	Small: "small"
-};
-var TabsOrientation = {
-	vertical: "vertical",
-	horizontal: "horizontal"
-};
-var oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
-var gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
-var translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
-var offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
-var isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.disabled && !el.hasAttribute("hidden");
-var arrayShallowEquals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+//#region src/lib/tab-panel/tab-panel.ts
 /**
 * @public
-* @component tabs
-* @slot - Default slot for tab and tab-panel elements.
-* @slot action-items - Slot for action items such as buttons or controls.
-* @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+* @component tab-panel
+* @slot - Default slot.
 */
-var Tabs = class extends require_vivid_element.VividElement {
-	constructor(..._args) {
-		super(..._args);
-		this.orientation = TabsOrientation.horizontal;
-		this.tabs = [];
-		this.tabpanels = [];
-		this.scrollablePanel = false;
-		this._actionItemsSlottedContent = [];
-		this.activeindicator = true;
-	}
-	/**
-	* @internal
-	*/
-	orientationChanged() {
-		this._registerTabsChange();
-		if (this.$fastController.isConnected) _microsoft_fast_element.Updates.enqueue(() => this.#moveActiveIndicator(false));
-	}
-	/**
-	* @internal
-	*/
-	tabsChanged() {
-		for (const tab of this.tabs) {
-			if (!tab.id) tab.id = `tab-${(0, _microsoft_fast_web_utilities.uniqueId)()}`;
-			tab.addEventListener("click", this.#onTabClick);
-			tab.addEventListener("keydown", this.#onTabKeyDown);
-		}
-		this._registerTabsChange();
-	}
-	/**
-	* @internal
-	*/
-	tabpanelsChanged() {
-		for (const panel of this.tabpanels) if (!panel.id) panel.id = `panel-${(0, _microsoft_fast_web_utilities.uniqueId)()}`;
-		this._registerTabsChange();
-	}
-	#areSlotsSynced() {
-		return arrayShallowEquals(this.tabs, this._tabsSlot.assignedNodes()) && arrayShallowEquals(this.tabpanels, this._tabPanelsSlot.assignedNodes());
-	}
-	/**
-	* Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
-	*/
-	get _pairedTabs() {
-		return this.tabs.slice(0, Math.min(this.tabs.length, this.tabpanels.length));
-	}
-	/**
-	* Tabs that are eligible to become active.
-	*/
-	get _validTabs() {
-		return this._pairedTabs.filter(isFocusableElement);
-	}
-	/**
-	* @internal
-	*/
-	activeidChanged() {
-		this._registerTabsChange();
-	}
-	/**
-	* A reference to the active tab
-	* @public
-	*/
-	get activetab() {
-		return this._validTabs.find((tab) => tab.id === this.activeid) ?? null;
-	}
-	#setActiveTabDueToUserInteraction(tab) {
-		this.activeid = tab.id;
-		tab.focus();
-		this.$emit("change", tab);
-	}
-	#isTabsChangeQueued = false;
-	/**
-	* Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and
-	* active id are updated at the same time.
-	*/
-	_registerTabsChange() {
-		if (this.#isTabsChangeQueued) return;
-		this.#isTabsChangeQueued = true;
-		window.queueMicrotask(() => {
-			if (this.$fastController.isConnected && this.#areSlotsSynced()) this.#handleTabsChange();
-			this.#isTabsChangeQueued = false;
-		});
-	}
-	#lastActiveId = void 0;
-	#handleTabsChange() {
-		const validTabs = this._validTabs;
-		let newActiveId = this.activeid;
-		if (!validTabs.length || newActiveId && !validTabs.find((t) => t.id === newActiveId)) newActiveId = void 0;
-		if (!newActiveId && validTabs.length) newActiveId = validTabs[0].id;
-		if (this.activeid !== newActiveId) {
-			this.activeid = newActiveId;
-			this.$emit("change", this.activetab);
-		}
-		this.#updateSlottedChildren();
-		if (this.activeid !== this.#lastActiveId) {
-			if (this.activetab) {
-				const shouldAnimate = this.#lastActiveId !== void 0;
-				this.#scrollToTab(this.activetab, shouldAnimate);
-				this.#moveActiveIndicator(shouldAnimate);
-			}
-			this.#lastActiveId = this.activeid;
-		} else this.#moveActiveIndicator(this.#isTransitioningTransform);
-	}
-	/**
-	* Updates the tabs and their panels according to the current state of the component.
-	*/
-	#updateSlottedChildren() {
-		for (const [index, tab] of this._pairedTabs.entries()) {
-			const panel = this.tabpanels[index];
-			const isActiveTab = tab.id === this.activeid;
-			/* v8 ignore else -- @preserve */
-			if (tab instanceof require_definition$1.Tab) tab.active = isActiveTab;
-			tab.setAttribute("aria-controls", panel.id);
-			tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-			if (isActiveTab && this.connotation) tab.setAttribute("connotation", this.connotation);
-			else tab.removeAttribute("connotation");
-			tab.classList.toggle("vertical", this.orientation === TabsOrientation.vertical);
-			tab.style[gridProperty(oppositeOrientation(this.orientation))] = "";
-			tab.style[gridProperty(this.orientation)] = `${index + 1}`;
-			panel.setAttribute("aria-labelledby", tab.id);
-			panel.hidden = !isActiveTab;
-		}
-	}
-	#onTabClick = (event) => {
-		const selectedTab = event.currentTarget;
-		if (this._validTabs.includes(selectedTab)) this.#setActiveTabDueToUserInteraction(selectedTab);
-	};
-	#onTabKeyDown = (event) => {
-		const tabs = this._validTabs;
-		const activeTab = this.activetab;
-		if (!activeTab) return;
-		const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [require_key_codes.keyArrowLeft, require_key_codes.keyArrowRight] : [_microsoft_fast_web_utilities.keyArrowUp, _microsoft_fast_web_utilities.keyArrowDown];
-		const keyToNextTab = {
-			[arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
-			[arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
-			[_microsoft_fast_web_utilities.keyHome]: () => tabs[0],
-			[_microsoft_fast_web_utilities.keyEnd]: () => tabs[tabs.length - 1]
-		};
-		if (keyToNextTab[event.key]) {
-			event.preventDefault();
-			this.#setActiveTabDueToUserInteraction(keyToNextTab[event.key]());
-		}
-	};
-	/**
-	* Adjusts the active index by numerical increments.
-	* Only enabled tabs are considered.
-	* @public
-	* @remarks
-	*/
-	adjust(adjustment) {
-		const focusableTabs = this._validTabs;
-		const currentActiveTabIndex = focusableTabs.findIndex((t) => t.id === this.activeid);
-		if (currentActiveTabIndex === -1) return;
-		const nextTabIndex = (0, _microsoft_fast_web_utilities.limit)(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-		this.#setActiveTabDueToUserInteraction(focusableTabs[nextTabIndex]);
-	}
-	#isTransitioningTransform = false;
-	/**
-	* @internal
-	*/
-	_onActiveIndicatorTransitionend(event) {
-		/* v8 ignore else -- @preserve */
-		if (event.propertyName === "transform") this.#isTransitioningTransform = false;
-	}
-	#cancelAnimationIfNeeded() {
-		this.#isTransitioningTransform = false;
-		this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-	}
-	#moveActiveIndicator(shouldAnimate) {
-		const activeTabIndex = this._pairedTabs.findIndex((tab) => tab.id === this.activeid);
-		if (activeTabIndex === -1) return;
-		const indicatorEl = this.activeIndicatorRef;
-		const currentOffset = indicatorEl[offsetProperty(this.orientation)];
-		indicatorEl.style[gridProperty(this.orientation)] = `${activeTabIndex + 1}`;
-		const targetOffset = indicatorEl[offsetProperty(this.orientation)];
-		indicatorEl.style[gridProperty(this.orientation)] = "";
-		const relativeOffset = targetOffset - currentOffset;
-		const currentTransform = indicatorEl.style.transform;
-		const targetTransform = `${translateProperty(this.orientation)}(${relativeOffset}px)`;
-		if (shouldAnimate) {
-			indicatorEl.classList.add("activeIndicatorTransition");
-			if (currentTransform !== targetTransform) this.#isTransitioningTransform = true;
-		} else this.#cancelAnimationIfNeeded();
-		indicatorEl.style.transform = targetTransform;
-		indicatorEl.style.setProperty(ACTIVE_TAB_WIDTH, this.tabs[activeTabIndex].getBoundingClientRect().width + "px");
-	}
-	/**
-	* @internal
-	*/
-	connotationChanged() {
-		this._registerTabsChange();
-	}
-	#updateScrollStatus() {
-		this.#tabListScrollWrapper.dispatchEvent(new Event("scroll"));
-	}
-	#resizeObserver;
-	connectedCallback() {
-		super.connectedCallback();
-		this._registerTabsChange();
-		requestAnimationFrame(() => this.#updateScrollStatus());
-		this.#resizeObserver = new ResizeObserver(() => {
-			this.#moveActiveIndicator(this.#isTransitioningTransform);
-			this.#updateScrollStatus();
-		});
-		this.#resizeObserver.observe(this.#tabListScrollWrapper);
-		this.#resizeObserver.observe(this.tablist);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#resizeObserver.disconnect();
-	}
-	get #tabListWrapper() {
-		return this.shadowRoot.querySelector(".tablist-wrapper");
-	}
-	get #tabListScrollWrapper() {
-		return this.tablist.parentElement;
-	}
-	#scrollToTab(tab, shouldAnimate = true) {
-		const index = this.tabs.findIndex((t) => t === tab);
-		let left = 0;
-		let top = 0;
-		if (this.orientation === TabsOrientation.vertical) {
-			if (index === this.tabs.length - 1) top = this.#tabListWrapper.scrollHeight;
-			if (index > 0 && index < this.tabs.length - 1) top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + tab.offsetHeight / 2;
-		} else {
-			if (index === this.tabs.length - 1) left = this.#tabListWrapper.scrollWidth;
-			if (index > 0 && index < this.tabs.length - 1) left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + tab.offsetWidth / 2;
-		}
-		this.#tabListWrapper.scrollTo({
-			top,
-			left,
-			behavior: shouldAnimate ? "smooth" : "instant"
-		});
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], Tabs.prototype, "orientation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Tabs.prototype, "tabs", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Tabs.prototype, "tabpanels", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tabs.prototype, "activeid", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Tabs.prototype, "activeIndicatorRef", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Tabs.prototype, "tablist", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tabs.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Tabs.prototype, "gutters", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "scrollable-panel"
-})], Tabs.prototype, "scrollablePanel", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tabs-layout" })], Tabs.prototype, "tabsLayout", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Tabs.prototype, "_actionItemsSlottedContent", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tabs.prototype, "activeindicator", void 0);
+var TabPanel = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
 //#endregion
-//#region src/lib/tabs/tabs.template.ts
-var getClasses = ({ connotation, orientation, gutters, scrollablePanel, tabsLayout, _actionItemsSlottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", `layout-${tabsLayout ?? "align-start"}`, [`connotation-${connotation}`, Boolean(connotation)], [`orientation-${orientation}`, Boolean(orientation)], `gutters-${gutters ?? "small"}`, ["scroll", Boolean(scrollablePanel)], ["has-action-items", Boolean(_actionItemsSlottedContent.length)]);
-function setNoScrollState(scrollShadow, scrollWrapper) {
-	if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
-		scrollShadow.classList.toggle("start-scroll", false);
-		scrollShadow.classList.toggle("end-scroll", false);
-		return true;
-	}
-	return false;
-}
-function addStartShadow(scrollShadow, scrollWrapper) {
-	scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
-}
-function addEndShadow(scrollShadow, scrollWrapper) {
-	scrollShadow.classList.toggle("end-scroll", scrollWrapper.scrollLeft + 1 < scrollWrapper.scrollWidth - scrollWrapper.clientWidth);
-}
-function setShadowWhenScrollTabs(_, { event }) {
-	const scrollWrapper = event.currentTarget;
-	const scrollShadow = scrollWrapper.parentElement;
-	if (setNoScrollState(scrollShadow, scrollWrapper)) return;
-	addStartShadow(scrollShadow, scrollWrapper);
-	addEndShadow(scrollShadow, scrollWrapper);
-}
-var TabsTemplate = _microsoft_fast_element.html`
-	<template>
-		<div class="${getClasses}">
-			<div class="tabs">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${(0, _microsoft_fast_element.ref)("tablist")}>
-							<slot name="tab" ${(0, _microsoft_fast_element.ref)("_tabsSlot")} ${(0, _microsoft_fast_element.slotted)("tabs")}></slot>
-							<div
-								${(0, _microsoft_fast_element.ref)("activeIndicatorRef")}
-								class="active-indicator"
-								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(c.event)}"
-							></div>
-						</div>
-					</div>
-				</div>
-				<slot
-					name="action-items"
-					${(0, _microsoft_fast_element.slotted)("_actionItemsSlottedContent")}
-				></slot>
-			</div>
-			<div class="tabpanel" part="tab-panel">
-				<slot
-					name="tabpanel"
-					${(0, _microsoft_fast_element.ref)("_tabPanelsSlot")}
-					${(0, _microsoft_fast_element.slotted)("tabpanels")}
-				></slot>
-			</div>
-		</div>
+//#region src/lib/tab-panel/tab-panel.template.ts
+var TabPanelTemplate = _microsoft_fast_element.html`
+	<template slot="tabpanel" ${require_host_semantics.applyHostSemantics({ role: "tabpanel" })}>
+		<slot></slot>
 	</template>
 `;
 //#endregion
-//#region src/lib/tabs/definition.ts
+//#region src/lib/tab-panel/definition.ts
 /**
 * @internal
 */
-var tabsDefinition = require_vivid_element.defineVividComponent("tabs", Tabs, TabsTemplate, [require_definition$1.tabDefinition, require_definition.tabPanelDefinition], { styles: tabs_default });
+var tabPanelDefinition = require_vivid_element.defineVividComponent("tab-panel", TabPanel, TabPanelTemplate, [], {});
 /**
-* Registers the tabs elements with the design system.
+* Registers the tab-panel elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerTabs = require_vivid_element.createRegisterFunction(tabsDefinition);
+var registerTabPanel = require_vivid_element.createRegisterFunction(tabPanelDefinition);
 //#endregion
-Object.defineProperty(exports, "Tabs", {
-	enumerable: true,
-	get: function() {
-		return Tabs;
-	}
-});
-Object.defineProperty(exports, "TabsGutters", {
+Object.defineProperty(exports, "TabPanel", {
 	enumerable: true,
 	get: function() {
-		return TabsGutters;
+		return TabPanel;
 	}
 });
-Object.defineProperty(exports, "registerTabs", {
+Object.defineProperty(exports, "registerTabPanel", {
 	enumerable: true,
 	get: function() {
-		return registerTabs;
+		return registerTabPanel;
 	}
 });
-Object.defineProperty(exports, "tabsDefinition", {
+Object.defineProperty(exports, "tabPanelDefinition", {
 	enumerable: true,
 	get: function() {
-		return tabsDefinition;
+		return tabPanelDefinition;
 	}
 });