@vonage/vivid 4.4.0 → 4.6.0

package/shared/definition49.cjs

@@ -1,37 +1,167 @@
 'use strict';
 
 const index = require('./index.cjs');
+const definition = require('./definition27.cjs');
+const formAssociated = require('./form-associated.cjs');
+const keyCodes = require('./key-codes.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+class _Switch extends index.FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switch) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
 
 /**
- * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
  *
- * @slot - The default slot for the tabpanel content
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
  *
  * @public
  */
-let TabPanel$1 = class TabPanel extends index.FoundationElement {
+let Switch$1 = class Switch extends FormAssociatedSwitch {
+    constructor() {
+        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 (this.readOnly) {
+                return;
+            }
+            switch (e.key) {
+                case keyCodes.keyEnter:
+                case keyCodes.keySpace:
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (!this.disabled && !this.readOnly) {
+                this.checked = !this.checked;
+            }
+        };
+        this.proxy.setAttribute("type", "checkbox");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+        this.readOnly
+            ? this.classList.add("readonly")
+            : this.classList.remove("readonly");
+    }
+    /**
+     * @internal
+     */
+    checkedChanged(prev, next) {
+        super.checkedChanged(prev, next);
+        /**
+         * @deprecated - this behavior already exists in the template and should not exist in the class.
+         */
+        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+    }
 };
+index.__decorate([
+    index.attr({ attribute: "readonly", mode: "boolean" })
+], Switch$1.prototype, "readOnly", void 0);
+index.__decorate([
+    index.observable
+], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
-class TabPanel extends TabPanel$1 {
+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)}";
+
+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 Switch$1 {
 }
+__decorateClass([
+  index.attr
+], Switch.prototype, "label");
+__decorateClass([
+  index.attr
+], Switch.prototype, "connotation");
 
-function TabPanelTemplate() {
+const getClasses = (_) => classNames.classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
+  [
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
+);
+const SwitchTemplate = () => {
   return index.html`
-		<template slot="tabpanel" role="tabpanel">
-			<slot></slot>
-		</template>
+		<div
+			class="${getClasses}"
+			role="switch"
+			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, c) => x.clickHandler(c.event)}"
+		>
+			<div class="switch">
+				<span class="checked-indicator"></span>
+			</div>
+			${when.when(
+    (x) => x.label,
+    index.html`<div class="label">${(x) => x.label}</div>`
+  )}
+		</div>
 	`;
-}
+};
 
-const tabPanelDefinition = TabPanel.compose(
-  {
-    baseName: "tab-panel",
-    template: TabPanelTemplate
+const switchDefinition = Switch.compose({
+  baseName: "switch",
+  template: SwitchTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
   }
-);
-const tabPanelRegistries = [tabPanelDefinition()];
-const registerTabPanel = index.registerFactory(tabPanelRegistries);
+});
+const switchRegistries = [switchDefinition(), ...definition.iconRegistries];
+const registerSwitch = index.registerFactory(switchRegistries);
 
-exports.registerTabPanel = registerTabPanel;
-exports.tabPanelDefinition = tabPanelDefinition;
-exports.tabPanelRegistries = tabPanelRegistries;
+exports.registerSwitch = registerSwitch;
+exports.switchDefinition = switchDefinition;
+exports.switchRegistries = switchRegistries;

package/shared/definition49.js

@@ -1,33 +1,163 @@
-import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition27.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { a as keySpace, k as keyEnter } from './key-codes.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
+
+class _Switch extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
 
 /**
- * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
  *
- * @slot - The default slot for the tabpanel content
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
  *
  * @public
  */
-let TabPanel$1 = class TabPanel extends FoundationElement {
+let Switch$1 = class Switch extends FormAssociatedSwitch {
+    constructor() {
+        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 (this.readOnly) {
+                return;
+            }
+            switch (e.key) {
+                case keyEnter:
+                case keySpace:
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (!this.disabled && !this.readOnly) {
+                this.checked = !this.checked;
+            }
+        };
+        this.proxy.setAttribute("type", "checkbox");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+        this.readOnly
+            ? this.classList.add("readonly")
+            : this.classList.remove("readonly");
+    }
+    /**
+     * @internal
+     */
+    checkedChanged(prev, next) {
+        super.checkedChanged(prev, next);
+        /**
+         * @deprecated - this behavior already exists in the template and should not exist in the class.
+         */
+        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+    }
 };
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Switch$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Switch$1.prototype, "defaultSlottedNodes", void 0);
 
-class TabPanel extends TabPanel$1 {
+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)}";
+
+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 Switch$1 {
 }
+__decorateClass([
+  attr
+], Switch.prototype, "label");
+__decorateClass([
+  attr
+], Switch.prototype, "connotation");
 
-function TabPanelTemplate() {
+const getClasses = (_) => classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
+  [
+    `connotation-${_.connotation}`,
+    Boolean(_.checked) && Boolean(_.connotation)
+  ]
+);
+const SwitchTemplate = () => {
   return html`
-		<template slot="tabpanel" role="tabpanel">
-			<slot></slot>
-		</template>
+		<div
+			class="${getClasses}"
+			role="switch"
+			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, c) => x.clickHandler(c.event)}"
+		>
+			<div class="switch">
+				<span class="checked-indicator"></span>
+			</div>
+			${when(
+    (x) => x.label,
+    html`<div class="label">${(x) => x.label}</div>`
+  )}
+		</div>
 	`;
-}
+};
 
-const tabPanelDefinition = TabPanel.compose(
-  {
-    baseName: "tab-panel",
-    template: TabPanelTemplate
+const switchDefinition = Switch.compose({
+  baseName: "switch",
+  template: SwitchTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
   }
-);
-const tabPanelRegistries = [tabPanelDefinition()];
-const registerTabPanel = registerFactory(tabPanelRegistries);
+});
+const switchRegistries = [switchDefinition(), ...iconRegistries];
+const registerSwitch = registerFactory(switchRegistries);
 
-export { tabPanelRegistries as a, registerTabPanel as r, tabPanelDefinition as t };
+export { switchRegistries as a, registerSwitch as r, switchDefinition as s };

package/shared/definition5.cjs

@@ -2,15 +2,13 @@
 
 const index = require('./index.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition$2 = require('./definition46.cjs');
+const definition$2 = require('./definition47.cjs');
 const definition$3 = require('./definition30.cjs');
 const enums = require('./enums.cjs');
-require('./affix.cjs');
-require('./index2.cjs');
-const localized = require('./localized.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const videoPlayer = require('./video-player.cjs');
+const localized = require('./localized.cjs');
 const definition = require('./definition29.cjs');
+const playbackRates = require('./playbackRates.cjs');
 const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
@@ -153,6 +151,7 @@ class AudioPlayer extends index.FoundationElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
+    this.pause();
   }
   play() {
     this.#pausedChanged(PLAY);
@@ -332,7 +331,7 @@ const AudioPlayerTemplate = (context) => {
 				></${buttonTag}>
 
 				${repeat.repeat(
-      (x) => videoPlayer.getPlaybackRatesArray(x.playbackRates),
+      (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
       index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
 																			 role="menuitemradio"
 																			 class="playback-rate"

package/shared/definition5.js

@@ -1,14 +1,12 @@
-import { a as attr, F as FoundationElement, O as Observable, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, O as Observable, a as attr, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
-import { S as Slider, a as sliderRegistries } from './definition46.js';
+import { S as Slider, a as sliderRegistries } from './definition47.js';
 import { a as menuRegistries } from './definition30.js';
 import { M as MediaSkipBy } from './enums.js';
-import './affix.js';
-import './index2.js';
-import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { g as getPlaybackRatesArray } from './video-player.js';
+import { L as Localized } from './localized.js';
 import { b as Menu, c as MenuItem } from './definition29.js';
+import { g as getPlaybackRatesArray } from './playbackRates.js';
 import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
@@ -151,6 +149,7 @@ class AudioPlayer extends FoundationElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#setSliderInteractionListeners(false);
+    this.pause();
   }
   play() {
     this.#pausedChanged(PLAY);

package/shared/definition50.cjs

@@ -1,98 +1,37 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition27.cjs');
-const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const classNames = require('./class-names.cjs');
 
 /**
- * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
  *
- * @slot - The default slot for the tab content
+ * @slot - The default slot for the tabpanel content
  *
  * @public
  */
-let Tab$1 = class Tab extends index.FoundationElement {
+let TabPanel$1 = class TabPanel extends index.FoundationElement {
 };
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Tab$1.prototype, "disabled", void 0);
 
-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(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;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}.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))}@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}: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}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
-
-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 Tab$1 {
-  constructor() {
-    super(...arguments);
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
-  }
+class TabPanel extends TabPanel$1 {
 }
-__decorateClass([
-  index.attr
-], Tab.prototype, "connotation");
-__decorateClass([
-  index.attr
-], Tab.prototype, "shape");
-__decorateClass([
-  index.attr
-], Tab.prototype, "label");
-__decorateClass([
-  index.attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  index.attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected");
-applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape
-}) => classNames.classNames(
-  "base",
-  [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing]
-);
-function TabTemplate(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html` <template
-		slot="tab"
-		role="tab"
-		aria-disabled="${(x) => x.disabled}"
-		aria-selected="${(x) => x.ariaSelected}"
-	>
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-		</div>
-	</template>`;
+function TabPanelTemplate() {
+  return index.html`
+		<template slot="tabpanel" role="tabpanel">
+			<slot></slot>
+		</template>
+	`;
 }
 
-const tabDefinition = Tab.compose({
-  baseName: "tab",
-  template: TabTemplate,
-  styles
-});
-const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
-const registerTab = index.registerFactory(tabRegistries);
+const tabPanelDefinition = TabPanel.compose(
+  {
+    baseName: "tab-panel",
+    template: TabPanelTemplate
+  }
+);
+const tabPanelRegistries = [tabPanelDefinition()];
+const registerTabPanel = index.registerFactory(tabPanelRegistries);
 
-exports.registerTab = registerTab;
-exports.tabDefinition = tabDefinition;
-exports.tabRegistries = tabRegistries;
+exports.registerTabPanel = registerTabPanel;
+exports.tabPanelDefinition = tabPanelDefinition;
+exports.tabPanelRegistries = tabPanelRegistries;