@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition50.cjs

@@ -1,13 +1,23 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const affix = require('./affix.cjs');
-const localized = require('./localized.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const formAssociated = require('./form-associated.cjs');
+const keyCodes = require('./key-codes.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
-const styles = ":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){justify-content:end;grid-column:1/auto}: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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,: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{position:relative;display:flex;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);min-block-size:40px;vertical-align:middle;white-space:nowrap}@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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+const styles = ":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(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,: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(--_connotation-color-fierce)}.control:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.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:where(.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{display:inline-flex;border-radius:16px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 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 0s}.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:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(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)}";
+
+class _Switch extends vividElement.VividElement {
+}
+class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switch) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,106 +28,120 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends vividElement.VividElement {
+class Switch extends delegatesAria.DelegatesAria(FormAssociatedSwitch) {
   constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
+    super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
+      if (e.key === keyCodes.keySpace || e.key === keyCodes.keyEnter) {
+        this.checked = !this.checked;
+      }
+    };
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      if (!this.disabled && !this.readOnly) {
+        this.checked = !this.checked;
+      }
+    };
+    this.defaultChecked = !!this.checkedAttribute;
+    this.checked = this.defaultChecked;
   }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+    this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
   }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", "checkbox");
+    this.updateForm();
+  }
+  updateForm() {
+    const value = this.checked ? this.value : null;
+    this.setFormValue(value, value);
   }
 }
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
-__decorateClass([
-  vividElement.attr
-], Tab.prototype, "connotation");
 __decorateClass([
   vividElement.attr
-], Tab.prototype, "shape");
+], Switch.prototype, "label");
 __decorateClass([
   vividElement.attr
-], Tab.prototype, "label");
+], Switch.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tab.prototype, "removable");
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], Switch.prototype, "readOnly");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  vividElement.attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected");
-applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
-applyMixins.applyMixins(Tab, localized.Localized);
+  vividElement.observable
+], Switch.prototype, "defaultSlottedNodes");
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape,
-  removable
-}) => classNames.classNames(
-  "base",
+const getClasses = (_) => classNames.classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
   [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
 );
-function renderDismissButton(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html` <span
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", affix.IconWrapper.Span)}
-	</span>`;
-}
-const TabTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html`
-		<template
-			slot="tab"
-			role="tab"
+const SwitchTemplate = vividElement.html`
+	<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+		<div
+			class="${getClasses}"
+			role="switch"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-checked="${(x) => x.checked}"
 			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
+			aria-readonly="${(x) => x.readOnly}"
+			tabindex="${(x) => x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x) => x.clickHandler()}"
 		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
+			<div class="switch">
+				<span class="checked-indicator"></span>
 			</div>
-		</template>
-	`;
-};
+			${when.when(
+  (x) => x.label,
+  vividElement.html`<div class="label">${(x) => x.label}</div>`
+)}
+		</div>
+	</template>
+`;
 
-const tabDefinition = vividElement.defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
+const switchDefinition = vividElement.defineVividComponent(
+  "switch",
+  Switch,
+  SwitchTemplate,
   [definition.iconDefinition],
   {
-    styles
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerTab = vividElement.createRegisterFunction(tabDefinition);
+const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
 
-exports.registerTab = registerTab;
-exports.tabDefinition = tabDefinition;
+exports.Switch = Switch;
+exports.registerSwitch = registerSwitch;
+exports.switchDefinition = switchDefinition;

package/shared/definition50.js

@@ -1,11 +1,21 @@
-import { i as iconDefinition } from './definition27.js';
-import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { L as Localized } from './localized.js';
+import { i as iconDefinition } from './definition28.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DelegatesAria } from './delegates-aria.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { a as keySpace, k as keyEnter } from './key-codes.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
-const styles = ":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){justify-content:end;grid-column:1/auto}: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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,: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{position:relative;display:flex;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);min-block-size:40px;vertical-align:middle;white-space:nowrap}@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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+const styles = ":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(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,: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(--_connotation-color-fierce)}.control:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.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:where(.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{display:inline-flex;border-radius:16px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 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 0s}.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:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(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)}";
+
+class _Switch extends VividElement {
+}
+class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,105 +26,118 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends VividElement {
+class Switch extends DelegatesAria(FormAssociatedSwitch) {
   constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
+    super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    /**
+     * @internal
+     */
+    this.keypressHandler = (e) => {
+      if (e.key === keySpace || e.key === keyEnter) {
+        this.checked = !this.checked;
+      }
+    };
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      if (!this.disabled && !this.readOnly) {
+        this.checked = !this.checked;
+      }
+    };
+    this.defaultChecked = !!this.checkedAttribute;
+    this.checked = this.defaultChecked;
   }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+    this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
   }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", "checkbox");
+    this.updateForm();
+  }
+  updateForm() {
+    const value = this.checked ? this.value : null;
+    this.setFormValue(value, value);
   }
 }
-__decorateClass([
-  attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
-__decorateClass([
-  attr
-], Tab.prototype, "connotation");
 __decorateClass([
   attr
-], Tab.prototype, "shape");
+], Switch.prototype, "label");
 __decorateClass([
   attr
-], Tab.prototype, "label");
+], Switch.prototype, "connotation");
 __decorateClass([
-  attr({ mode: "boolean" })
-], Tab.prototype, "removable");
+  attr({ attribute: "readonly", mode: "boolean" })
+], Switch.prototype, "readOnly");
 __decorateClass([
-  attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected");
-applyMixins(Tab, AffixIconWithTrailing);
-applyMixins(Tab, Localized);
+  observable
+], Switch.prototype, "defaultSlottedNodes");
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape,
-  removable
-}) => classNames(
-  "base",
+const getClasses = (_) => classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
   [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
 );
-function renderDismissButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html` <span
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", IconWrapper.Span)}
-	</span>`;
-}
-const TabTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-		<template
-			slot="tab"
-			role="tab"
+const SwitchTemplate = html`
+	<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+		<div
+			class="${getClasses}"
+			role="switch"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-checked="${(x) => x.checked}"
 			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
+			aria-readonly="${(x) => x.readOnly}"
+			tabindex="${(x) => x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x) => x.clickHandler()}"
 		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
+			<div class="switch">
+				<span class="checked-indicator"></span>
 			</div>
-		</template>
-	`;
-};
+			${when(
+  (x) => x.label,
+  html`<div class="label">${(x) => x.label}</div>`
+)}
+		</div>
+	</template>
+`;
 
-const tabDefinition = defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
+const switchDefinition = defineVividComponent(
+  "switch",
+  Switch,
+  SwitchTemplate,
   [iconDefinition],
   {
-    styles
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
 );
-const registerTab = createRegisterFunction(tabDefinition);
+const registerSwitch = createRegisterFunction(switchDefinition);
 
-export { registerTab as r, tabDefinition as t };
+export { Switch as S, registerSwitch as r, switchDefinition as s };