@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition45.js

@@ -1,106 +1,14 @@
-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 './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { a as keySpace, k as keyEnter } from './key-codes.js';
-import './affix.js';
-import { f as focusTemplateFactory } from './focus2.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import './index2.js';
-import { w as when } from './when.js';
+import { L as Localized } from './localized.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { r as ref } from './ref.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 Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
- *
- * @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 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);
-
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -112,56 +20,123 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Switch extends Switch$1 {
+class SplitButton extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.splitIndicator = "chevron-down-line";
+    this.disabled = false;
+    this.ariaLabel = null;
+    this.ariaExpanded = null;
+    this.indicatorAriaLabel = null;
+  }
+  get action() {
+    return this._action;
+  }
+  get indicator() {
+    return this._indicator;
+  }
 }
 __decorateClass([
   attr
-], Switch.prototype, "label", 2);
+], SplitButton.prototype, "connotation", 2);
+__decorateClass([
+  attr
+], SplitButton.prototype, "shape", 2);
+__decorateClass([
+  attr
+], SplitButton.prototype, "appearance", 2);
 __decorateClass([
   attr
-], Switch.prototype, "connotation", 2);
+], SplitButton.prototype, "size", 2);
+__decorateClass([
+  attr
+], SplitButton.prototype, "label", 2);
+__decorateClass([
+  attr
+], SplitButton.prototype, "icon", 2);
+__decorateClass([
+  attr({ attribute: "split-indicator", mode: "fromView" })
+], SplitButton.prototype, "splitIndicator", 2);
+__decorateClass([
+  attr({ attribute: "disabled", mode: "boolean" })
+], SplitButton.prototype, "disabled", 2);
+__decorateClass([
+  attr({ attribute: "aria-label" })
+], SplitButton.prototype, "ariaLabel", 2);
+__decorateClass([
+  attr({ attribute: "aria-expanded" })
+], SplitButton.prototype, "ariaExpanded", 2);
+__decorateClass([
+  attr({ attribute: "indicator-aria-label" })
+], SplitButton.prototype, "indicatorAriaLabel", 2);
+applyMixins(SplitButton, AffixIcon, Localized);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-flex;\n  justify-content: flex-start;\n  inline-size: inherit;\n}\n\n.control,\n.indicator {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 1px solid var(--_appearance-color-outline);\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_split-button-block-size);\n  color: var(--_appearance-color-text);\n  vertical-align: middle;\n}\n.control.connotation-cta,\n.indicator.connotation-cta {\n  /* @cssprop [--vvd-split-button-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-split-button-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-split-button-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-split-button-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-split-button-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-split-button-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));\n}\n.control.connotation-success,\n.indicator.connotation-success {\n  /* @cssprop [--vvd-split-button-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-split-button-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-contrast=var(--vvd-color-success-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));\n  /* @cssprop [--vvd-split-button-success-fierce=var(--vvd-color-success-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));\n  /* @cssprop [--vvd-split-button-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-split-button-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));\n  /* @cssprop [--vvd-split-button-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));\n}\n.control.connotation-alert,\n.indicator.connotation-alert {\n  /* @cssprop [--vvd-split-button-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-split-button-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-contrast=var(--vvd-color-alert-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));\n  /* @cssprop [--vvd-split-button-alert-fierce=var(--vvd-color-alert-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));\n  /* @cssprop [--vvd-split-button-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-split-button-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));\n  /* @cssprop [--vvd-split-button-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert),\n.indicator:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-split-button-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-split-button-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-split-button-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-split-button-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-split-button-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-split-button-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50));\n}\n.control.appearance-filled,\n.indicator.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined,\n.indicator.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control,\n.indicator {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined,\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)),\n.indicator:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-filled,\n.indicator:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined,\n.indicator:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled),\n.indicator:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined,\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)),\n.indicator:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .control,\n  .indicator {\n    user-select: none;\n  }\n}\n\n.control {\n  border-inline-end: 0;\n  gap: var(--_split-button-icon-gap);\n  isolation: isolate;\n  /* Disabled */\n  /* shape */\n  /* size */\n}\n.control:focus-visible {\n  outline: none;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_split-button-block-size);\n  }\n}\n.control:not(.icon-only) {\n  flex-grow: 1;\n  inline-size: inherit;\n}\n.control:not(.shape-pill) {\n  border-radius: 6px 0 0 6px;\n}\n.control.shape-pill {\n  border-radius: 24px 0 0 24px;\n}\n.control.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-super-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 4px;\n  padding-inline: 8px;\n}\n.control.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control.size-condensed:not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control.size-expanded:not(.icon-only) {\n  --_split-button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {\n  --_split-button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control .text {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.indicator {\n  border-inline-start: 0;\n  inline-size: var(--_split-button-inline-size);\n  /* Disabled */\n  /* Shape */\n  /* size */\n}\n.indicator:focus-visible {\n  outline: none;\n}\n.indicator:not(:disabled) {\n  cursor: pointer;\n}\n.indicator:disabled {\n  cursor: not-allowed;\n}\n.indicator:not(.shape-pill) {\n  border-radius: 0 6px 6px 0;\n}\n.indicator.shape-pill {\n  border-radius: 0 24px 24px 0;\n}\n.indicator::before {\n  position: absolute;\n  background-color: var(--_appearance-color-text);\n  content: \"\";\n  inline-size: 1px;\n  inset-inline-start: 0;\n  opacity: 0.35;\n}\n.indicator:not(.appearance-filled, .appearance-outlined)::before {\n  block-size: 50%;\n}\n.indicator:is(.appearance-filled, .appearance-outlined)::before {\n  block-size: 100%;\n}\n.indicator.size-super-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-condensed {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n  font: var(--vvd-typography-base-condensed);\n}\n.indicator.size-expanded {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-extended);\n}\n.indicator:not(.size-condensed, .size-expanded, .size-super-condensed) {\n  --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  --_split-button-inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-extended);\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control > .icon {\n  font-size: calc(var(--_split-button-block-size) / 2);\n}\n\n/* Focus */\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.control:not(.appearance-filled) .focus-indicator, .indicator:not(.appearance-filled) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control.appearance-outlined .focus-indicator, .indicator.appearance-outlined .focus-indicator {\n  --focus-inset: -1px;\n}";
 
-const getClasses = (_) => classNames(
-  "control",
-  ["appearance-filled", _.checked && !_.disabled && !_.readOnly],
-  ["checked", _.checked],
-  ["disabled", _.disabled],
-  ["readonly", _.readOnly],
-  [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  size
+}) => classNames(
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["disabled", disabled],
+  [`shape-${shape}`, Boolean(shape)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`size-${size}`, Boolean(size)]
 );
-const SwitchTemplate = (context) => {
+function actionButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
   return html`
-		<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>
-				${() => focusTemplate}
+	<button
+		${ref("_action")}
+		class="control ${getClasses} ${(x) => !x.label && !!x.icon ? "icon-only" : ""}"
+		aria-label="${(x) => x.ariaLabel}"
+		?disabled="${(x) => x.disabled}">
+			${() => focusTemplate}
+			${(x) => affixIconTemplate(x.icon)}
+		<span class="text">${(x) => x.label}</span>
+	</button>
+	`;
+}
+function indicatorButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html`
+	<button
+		${ref("_indicator")}
+		class="indicator ${getClasses}"
+		?disabled="${(x) => x.disabled}"
+		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
+		aria-haspopup="true"
+		aria-expanded="${(x) => x.ariaExpanded}">
+			${() => focusTemplate}
+			${(x) => affixIconTemplate(x.splitIndicator)}
+	</button>
+	`;
+}
+const SplitButtonTemplate = (context) => {
+  return html`
+		<template role="presentation">
+			<div class="base" role="group">
+				${actionButton(context)}
+				${indicatorButton(context)}
+				<slot></slot>
 			</div>
-			${when((x) => x.label, html`<div class="label">
-				${(x) => x.label}
-		</div>`)}
-		</div>
-		`;
+		</template>`;
 };
 
-const switchDefinition = Switch.compose({
-  baseName: "switch",
-  template: SwitchTemplate,
+const splitButtonDefinition = SplitButton.compose({
+  baseName: "split-button",
+  template: SplitButtonTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
-const registerSwitch = registerFactory(switchRegistries);
+const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries, ...focusRegistries];
+const registerSplitButton = registerFactory(splitButtonRegistries);
 
-export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
+export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };

package/shared/definition46.js

@@ -1,31 +1,167 @@
-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 './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { a as keySpace, k as keyEnter } from './key-codes.js';
+import './affix.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import './index2.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);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host(.disabled) {\n  cursor: not-allowed;\n}\n\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-500);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.appearance-filled):where(.readonly) .checked-indicator {\n  background-color: var(--vvd-color-neutral-600);\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n.control.appearance-filled.disabled .checked-indicator {\n  background-color: var(--_appearance-color-text);\n}\n.control.appearance-filled.readonly .checked-indicator {\n  background-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
-class TabPanel extends TabPanel$1 {
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Switch extends Switch$1 {
 }
+__decorateClass([
+  attr
+], Switch.prototype, "label", 2);
+__decorateClass([
+  attr
+], Switch.prototype, "connotation", 2);
 
-function TabPanelTemplate() {
+const getClasses = (_) => classNames(
+  "control",
+  ["appearance-filled", _.checked],
+  ["checked", _.checked],
+  ["disabled", _.disabled],
+  ["readonly", _.readOnly],
+  [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]
+);
+const SwitchTemplate = (context) => {
+  const focusTemplate = focusTemplateFactory(context);
   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>
+				${() => focusTemplate}
+			</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, ...focusRegistries];
+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/definition47.js

@@ -1,94 +1,31 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
 
 /**
- * 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 FoundationElement {
+let TabPanel$1 = class TabPanel extends FoundationElement {
 };
-__decorate([
-    attr({ mode: "boolean" })
-], Tab$1.prototype, "disabled", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus-visible) {\n    outline: none;\n  }\n}\n:host(.vertical) {\n  justify-content: end;\n  grid-column: 1/auto;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: var(--_tabs-tablist-gutter);\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base-bold);\n  gap: var(--_tabs-tablist-gutter);\n  min-block-size: 40px;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-tab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tab-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tab-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tab-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tab-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.shape-sharp) {\n  border-radius: 6px;\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  pointer-events: none;\n}\n:host(.vertical) .base {\n  padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n  margin-inline-start: auto;\n}\n\n:host(:not(.vertical)) .base::after {\n  position: absolute;\n  background: currentColor;\n  block-size: 2px;\n  border-radius: 2px;\n  content: \"\";\n  inline-size: 100%;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  pointer-events: none;\n  transition-property: opacity;\n}\n:host(:not(.vertical)):host([aria-selected=true]) .base::after {\n  transition-delay: 0.2s;\n}\n:host(:not(.vertical)):host(:not([aria-selected=true])) .base::after {\n  opacity: 0;\n}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && 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([
-  attr
-], Tab.prototype, "connotation", 2);
-__decorateClass([
-  attr
-], Tab.prototype, "shape", 2);
-__decorateClass([
-  attr
-], Tab.prototype, "label", 2);
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex", 2);
-__decorateClass([
-  attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected", 2);
-applyMixins(Tab, AffixIconWithTrailing);
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape
-}) => 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 = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
+function TabPanelTemplate() {
   return html`
-	<template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
-		<div class="${getClasses}" >
-      ${() => focusTemplate}
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-      ${(x) => x.label}
-		</div>
-	</template>`;
+        <template slot="tabpanel" role="tabpanel">
+            <slot></slot>
+        </template>
+    `;
 }
 
-const tabDefinition = Tab.compose({
-  baseName: "tab",
-  template: TabTemplate,
-  styles
+const tabPanelDefinition = TabPanel.compose({
+  baseName: "tab-panel",
+  template: TabPanelTemplate
 });
-const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTab = registerFactory(tabRegistries);
+const tabPanelRegistries = [tabPanelDefinition()];
+const registerTabPanel = registerFactory(tabPanelRegistries);
 
-export { tabRegistries as a, registerTab as r, tabDefinition as t };
+export { tabPanelRegistries as a, registerTabPanel as r, tabPanelDefinition as t };