@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition5.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
 const definition$1 = require('./definition11.cjs');
-const definition$2 = require('./definition48.cjs');
-const definition = require('./definition30.cjs');
+const definition$3 = require('./definition49.cjs');
+const definition = require('./definition31.cjs');
 const vividElement = require('./vivid-element.cjs');
+const definition$2 = require('./definition30.cjs');
 const enums = require('./enums.cjs');
 const localized = require('./localized.cjs');
 const playbackRates = require('./playbackRates.cjs');
@@ -74,7 +75,7 @@ class AudioPlayer extends localized.Localized(vividElement.VividElement) {
       this.#currentTimeChanged = true;
       vividElement.Observable.notify(this, "currentTime");
       const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.currentValue = percent.toString();
+      this.#sliderEl.value = percent.toString();
       if (percent === 100) {
         this.pause();
       }
@@ -271,7 +272,7 @@ function renderForwardSkipButtons(context) {
 	`;
 }
 function renderSlider(context) {
-  const sliderTag = context.tagFor(definition$2.Slider);
+  const sliderTag = context.tagFor(definition$3.Slider);
   return vividElement.html`
 	<${sliderTag}
 		class="slider"
@@ -303,7 +304,7 @@ function handlePlaybackRateClick(playbackRate, context) {
 const AudioPlayerTemplate = (context) => {
   const menuTag = context.tagFor(definition.Menu);
   const buttonTag = context.tagFor(definition$1.Button);
-  const menuItemTag = context.tagFor(definition.MenuItem);
+  const menuItemTag = context.tagFor(definition$2.MenuItem);
   return vividElement.html` <div class="wrapper">
 		<div class="base ${getClasses}">
 			<div class="controls">
@@ -336,7 +337,7 @@ const AudioPlayerTemplate = (context) => {
 				${repeat.repeat(
       (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
       vividElement.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-																			 role="menuitemradio"
+																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(x) => x}"
 																			 check-appearance="tick-only"
@@ -352,7 +353,7 @@ const audioPlayerDefinition = vividElement.defineVividComponent(
   "audio-player",
   AudioPlayer,
   AudioPlayerTemplate,
-  [definition$1.buttonDefinition, definition$2.sliderDefinition, definition.menuDefinition, definition.menuItemDefinition],
+  [definition$1.buttonDefinition, definition$3.sliderDefinition, definition.menuDefinition, definition$2.menuItemDefinition],
   {
     styles
   }

package/shared/definition5.js

@@ -1,7 +1,8 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { S as Slider, s as sliderDefinition } from './definition48.js';
-import { e as Menu, M as MenuItem, c as menuDefinition, m as menuItemDefinition } from './definition30.js';
-import { O as Observable, V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { S as Slider, s as sliderDefinition } from './definition49.js';
+import { M as Menu, m as menuDefinition } from './definition31.js';
+import { O as Observable, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { M as MenuItem, m as menuItemDefinition } from './definition30.js';
 import { M as MediaSkipBy } from './enums.js';
 import { L as Localized } from './localized.js';
 import { g as getPlaybackRatesArray } from './playbackRates.js';
@@ -72,7 +73,7 @@ class AudioPlayer extends Localized(VividElement) {
       this.#currentTimeChanged = true;
       Observable.notify(this, "currentTime");
       const percent = this.currentTime / this.duration * 100;
-      this.#sliderEl.currentValue = percent.toString();
+      this.#sliderEl.value = percent.toString();
       if (percent === 100) {
         this.pause();
       }
@@ -334,7 +335,7 @@ const AudioPlayerTemplate = (context) => {
 				${repeat(
       (x) => getPlaybackRatesArray(x.playbackRates),
       html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-																			 role="menuitemradio"
+																			 control-type="radio"
 																			 class="playback-rate"
 																			 text="${(x) => x}"
 																			 check-appearance="tick-only"

package/shared/definition50.cjs

@@ -2,22 +2,11 @@
 
 const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
+const affix = require('./affix.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.cjs');
-const keyCodes = require('./key-codes.cjs');
+const localized = require('./localized.cjs');
+const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-
-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(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.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(--vvd-color-neutral-700)}.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;outline:none}@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;flex-shrink:0;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}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
-
-class _Switch extends vividElement.VividElement {
-}
-class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switch) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,111 +17,120 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Switch extends delegatesAria.DelegatesAria(FormAssociatedSwitch) {
+class SplitButton extends affix.AffixIcon(
+  localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement))
+) {
   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 (e.key === keyCodes.keySpace || e.key === keyCodes.keyEnter) {
-        this.checked = !this.checked;
-      }
-    };
-    /**
-     * @internal
-     */
-    this.clickHandler = () => {
-      if (!this.disabled && !this.readOnly) {
-        this.checked = !this.checked;
-      }
-    };
-    this.defaultChecked = !!this.checkedAttribute;
-    this.checked = this.defaultChecked;
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-    this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
+    super(...arguments);
+    this.splitIndicator = "chevron-down-line";
+    this.disabled = false;
+    this.indicatorAriaLabel = null;
   }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", "checkbox");
-    this.updateForm();
+  get action() {
+    return this._action;
   }
-  updateForm() {
-    const value = this.checked ? this.value : null;
-    this.setFormValue(value, value);
+  get indicator() {
+    return this._indicator;
   }
 }
 __decorateClass([
   vividElement.attr
-], Switch.prototype, "label");
+], SplitButton.prototype, "connotation");
 __decorateClass([
   vividElement.attr
-], Switch.prototype, "connotation");
+], SplitButton.prototype, "shape");
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], Switch.prototype, "readOnly");
+  vividElement.attr
+], SplitButton.prototype, "appearance");
 __decorateClass([
-  vividElement.observable
-], Switch.prototype, "defaultSlottedNodes");
+  vividElement.attr
+], SplitButton.prototype, "size");
+__decorateClass([
+  vividElement.attr
+], SplitButton.prototype, "label");
+__decorateClass([
+  vividElement.attr({ attribute: "split-indicator", mode: "fromView" })
+], SplitButton.prototype, "splitIndicator");
+__decorateClass([
+  vividElement.attr({ attribute: "disabled", mode: "boolean" })
+], SplitButton.prototype, "disabled");
+__decorateClass([
+  vividElement.attr({ attribute: "indicator-aria-label" })
+], SplitButton.prototype, "indicatorAriaLabel");
+
+const styles = ":host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator: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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator: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}.control:where(.disabled,:disabled).appearance-filled,.indicator: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(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[data-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
 
-const getClasses = (_) => classNames.classNames(
-  "control",
-  ["appearance-filled", _.checked],
-  ["checked", _.checked],
-  ["disabled", _.disabled],
-  ["readonly", _.readOnly],
-  [
-    `connotation-${_.connotation}`,
-    Boolean(_.checked) && Boolean(_.connotation)
-  ]
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  size,
+  label,
+  icon,
+  iconSlottedContent
+}) => classNames.classNames(
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["disabled", disabled],
+  [`shape-${shape}`, Boolean(shape)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)]
 );
-const SwitchTemplate = vividElement.html`
-	<template>
-		<div
-			class="${getClasses}"
+function actionButton(context) {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return vividElement.html`
+		<button
+			${ref.ref("_action")}
+			class="control ${getClasses}"
 			${delegatesAria.delegateAria({
-  role: "switch",
-  ariaChecked: (x) => x.checked,
-  ariaDisabled: (x) => x.disabled,
-  ariaReadOnly: (x) => x.readOnly
-})}
-			tabindex="${(x) => x.disabled ? null : 0}"
-			@keypress="${(x, c) => x.keypressHandler(c.event)}"
-			@click="${(x) => x.clickHandler()}"
+    ariaExpanded: null
+  })}
+			?disabled="${(x) => x.disabled}"
+			@click="${(x) => x.$emit("action-click", void 0, {
+    bubbles: false
+  })}"
 		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
-			</div>
-			${when.when(
-  (x) => x.label,
-  vividElement.html`<div class="label">${(x) => x.label}</div>`
-)}
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+			<span class="text">${(x) => x.label}</span>
+		</button>
+	`;
+}
+function indicatorButton(context) {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return vividElement.html`
+		<button
+			${ref.ref("_indicator")}
+			class="indicator ${getClasses}"
+			?disabled="${(x) => x.disabled}"
+			aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
+			${delegatesAria.delegateAria(
+    {
+      ariaExpanded: (x) => x.ariaExpanded
+    },
+    { onlySpecified: true }
+  )}
+			@click="${(x) => x.$emit("indicator-click", void 0, {
+    bubbles: false
+  })}"
+		>
+			${(x) => affixIconTemplate(x.splitIndicator)}
+		</button>
+	`;
+}
+const SplitButtonTemplate = (context) => {
+  return vividElement.html` <template>
+		<div class="base" role="group">
+			${actionButton(context)} ${indicatorButton(context)}
+			<slot></slot>
 		</div>
-	</template>
-`;
+	</template>`;
+};
 
-const switchDefinition = vividElement.defineVividComponent(
-  "switch",
-  Switch,
-  SwitchTemplate,
+const splitButtonDefinition = vividElement.defineVividComponent(
+  "split-button",
+  SplitButton,
+  SplitButtonTemplate,
   [definition.iconDefinition],
   {
     styles,
@@ -141,8 +139,10 @@ const switchDefinition = vividElement.defineVividComponent(
     }
   }
 );
-const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
+const registerSplitButton = vividElement.createRegisterFunction(
+  splitButtonDefinition
+);
 
-exports.Switch = Switch;
-exports.registerSwitch = registerSwitch;
-exports.switchDefinition = switchDefinition;
+exports.SplitButton = SplitButton;
+exports.registerSplitButton = registerSplitButton;
+exports.splitButtonDefinition = splitButtonDefinition;