@vonage/vivid 4.16.2 → 4.17.0

package/shared/definition49.cjs

@@ -1,24 +1,150 @@
 'use strict';
 
+const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
+const formAssociated = require('./form-associated.cjs');
+const keyCodes = require('./key-codes.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
-class TabPanel extends vividElement.VividElement {
+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");
+  }
 }
 
-const TabPanelTemplate = vividElement.html`
-	<template slot="tabpanel" role="tabpanel">
-		<slot></slot>
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Switch extends FormAssociatedSwitch {
+  constructor() {
+    super();
+    this.ariaLabel = null;
+    /**
+     * 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;
+  }
+  // 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");
+  }
+  /**
+   * @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({ attribute: "aria-label" })
+], Switch.prototype, "ariaLabel");
+__decorateClass([
+  vividElement.attr
+], Switch.prototype, "label");
+__decorateClass([
+  vividElement.attr
+], Switch.prototype, "connotation");
+__decorateClass([
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], Switch.prototype, "readOnly");
+__decorateClass([
+  vividElement.observable
+], Switch.prototype, "defaultSlottedNodes");
+
+const getClasses = (_) => classNames.classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
+  [
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
+);
+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-readonly="${(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.when(
+  (x) => x.label,
+  vividElement.html`<div class="label">${(x) => x.label}</div>`
+)}
+		</div>
 	</template>
 `;
 
-const tabPanelDefinition = vividElement.defineVividComponent(
-  "tab-panel",
-  TabPanel,
-  TabPanelTemplate,
-  [],
-  {}
+const switchDefinition = vividElement.defineVividComponent(
+  "switch",
+  Switch,
+  SwitchTemplate,
+  [definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
 );
-const registerTabPanel = vividElement.createRegisterFunction(tabPanelDefinition);
+const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
 
-exports.registerTabPanel = registerTabPanel;
-exports.tabPanelDefinition = tabPanelDefinition;
+exports.Switch = Switch;
+exports.registerSwitch = registerSwitch;
+exports.switchDefinition = switchDefinition;

package/shared/definition49.js

@@ -1,21 +1,146 @@
-import { V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { i as iconDefinition } from './definition27.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 { 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';
 
-class TabPanel extends VividElement {
+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");
+  }
 }
 
-const TabPanelTemplate = html`
-	<template slot="tabpanel" role="tabpanel">
-		<slot></slot>
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Switch extends FormAssociatedSwitch {
+  constructor() {
+    super();
+    this.ariaLabel = null;
+    /**
+     * 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;
+  }
+  // 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");
+  }
+  /**
+   * @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({ attribute: "aria-label" })
+], Switch.prototype, "ariaLabel");
+__decorateClass([
+  attr
+], Switch.prototype, "label");
+__decorateClass([
+  attr
+], Switch.prototype, "connotation");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], Switch.prototype, "readOnly");
+__decorateClass([
+  observable
+], Switch.prototype, "defaultSlottedNodes");
+
+const getClasses = (_) => classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
+  [
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
+);
+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-readonly="${(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>
 `;
 
-const tabPanelDefinition = defineVividComponent(
-  "tab-panel",
-  TabPanel,
-  TabPanelTemplate,
-  [],
-  {}
+const switchDefinition = defineVividComponent(
+  "switch",
+  Switch,
+  SwitchTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
 );
-const registerTabPanel = createRegisterFunction(tabPanelDefinition);
+const registerSwitch = createRegisterFunction(switchDefinition);
 
-export { registerTabPanel as r, tabPanelDefinition as t };
+export { Switch as S, registerSwitch as r, switchDefinition as s };

package/shared/definition5.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition$1 = require('./definition11.cjs');
-const definition$2 = require('./definition46.cjs');
+const definition$2 = require('./definition47.cjs');
 const definition = require('./definition29.cjs');
 const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
@@ -9,8 +9,8 @@ const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const playbackRates = require('./playbackRates.cjs');
 const repeat = require('./repeat.cjs');
-const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
 
@@ -358,5 +358,6 @@ const registerAudioPlayer = vividElement.createRegisterFunction(
   audioPlayerDefinition
 );
 
+exports.AudioPlayer = AudioPlayer;
 exports.audioPlayerDefinition = audioPlayerDefinition;
 exports.registerAudioPlayer = registerAudioPlayer;

package/shared/definition5.js

@@ -1,14 +1,14 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { S as Slider, s as sliderDefinition } from './definition46.js';
-import { d as Menu, e as MenuItem, b as menuDefinition, m as menuItemDefinition } from './definition29.js';
-import { V as VividElement, O as Observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { S as Slider, s as sliderDefinition } from './definition47.js';
+import { e as Menu, M as MenuItem, c as menuDefinition, m as menuItemDefinition } from './definition29.js';
+import { V as VividElement, O as Observable, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { M as MediaSkipBy } from './enums.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { g as getPlaybackRatesArray } from './playbackRates.js';
 import { r as repeat } from './repeat.js';
-import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";
 
@@ -356,4 +356,4 @@ const registerAudioPlayer = createRegisterFunction(
   audioPlayerDefinition
 );
 
-export { audioPlayerDefinition as a, registerAudioPlayer as r };
+export { AudioPlayer as A, audioPlayerDefinition as a, registerAudioPlayer as r };

package/shared/definition50.cjs

@@ -1,123 +1,25 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const affix = require('./affix.cjs');
-const localized = require('./localized.cjs');
-const classNames = require('./class-names.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}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Tab extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
-  }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
-  }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
-  }
+class TabPanel extends vividElement.VividElement {
 }
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
-__decorateClass([
-  vividElement.attr
-], Tab.prototype, "connotation");
-__decorateClass([
-  vividElement.attr
-], Tab.prototype, "shape");
-__decorateClass([
-  vividElement.attr
-], Tab.prototype, "label");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tab.prototype, "removable");
-__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);
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape,
-  removable
-}) => classNames.classNames(
-  "base",
-  [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
-);
-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"
-			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
-			</div>
-		</template>
-	`;
-};
+const TabPanelTemplate = vividElement.html`
+	<template slot="tabpanel" role="tabpanel">
+		<slot></slot>
+	</template>
+`;
 
-const tabDefinition = vividElement.defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
-  [definition.iconDefinition],
-  {
-    styles
-  }
+const tabPanelDefinition = vividElement.defineVividComponent(
+  "tab-panel",
+  TabPanel,
+  TabPanelTemplate,
+  [],
+  {}
 );
-const registerTab = vividElement.createRegisterFunction(tabDefinition);
+const registerTabPanel = vividElement.createRegisterFunction(tabPanelDefinition);
 
-exports.registerTab = registerTab;
-exports.tabDefinition = tabDefinition;
+exports.TabPanel = TabPanel;
+exports.registerTabPanel = registerTabPanel;
+exports.tabPanelDefinition = tabPanelDefinition;