@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition47.js

@@ -1,497 +1,147 @@
-import { F as FoundationElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, r as registerFactory } from './index.js';
-import { p as popupRegistries } from './definition64.js';
-import { b as keyHome, a as keyEnd, c as keyArrowDown, e as keyArrowLeft, d as keyArrowUp, f as keyArrowRight } from './key-codes.js';
-import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
-import { F as FormAssociated } from './form-associated.js';
-import { D as Direction, g as getDirection } from './localization.js';
-import { O as Orientation } from './aria.js';
-import { l as limit } from './numbers.js';
+import { i as iconDefinition } from './definition27.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
-
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.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));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
-
-class _Slider extends FoundationElement {
-}
-class FormAssociatedSlider extends FormAssociated(_Slider) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
+import { r as ref } from './ref.js';
+import { c as classNames } from './class-names.js';
 
 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;
+  var result = void 0 ;
   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);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
-const SliderMode = {
-  singleValue: "single-value"
-};
-class Slider extends FormAssociatedSlider {
+class SplitButton extends VividElement {
   constructor() {
     super(...arguments);
-    this.direction = Direction.ltr;
-    this.isDragging = false;
-    this.trackWidth = 0;
-    this.trackMinWidth = 0;
-    this.trackHeight = 0;
-    this.trackLeft = 0;
-    this.trackMinHeight = 0;
-    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.min = 0;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.max = 10;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.step = 1;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.orientation = Orientation.horizontal;
-    this.mode = SliderMode.singleValue;
-    this.keypressHandler = (e) => {
-      this._focusVisible = true;
-      if (this.readOnly) {
-        return;
-      }
-      if (e.key === keyHome) {
-        e.preventDefault();
-        this.value = `${this.min}`;
-      } else if (e.key === keyEnd) {
-        e.preventDefault();
-        this.value = `${this.max}`;
-      } else if (!e.shiftKey) {
-        switch (e.key) {
-          case keyArrowRight:
-          case keyArrowUp:
-            e.preventDefault();
-            this.increment();
-            break;
-          case keyArrowLeft:
-          case keyArrowDown:
-            e.preventDefault();
-            this.decrement();
-            break;
-        }
-      }
-    };
-    this.setupTrackConstraints = () => {
-      const clientRect = this.track.getBoundingClientRect();
-      this.trackWidth = this.track.clientWidth;
-      this.trackMinWidth = this.track.clientLeft;
-      this.trackHeight = clientRect.bottom;
-      this.trackMinHeight = clientRect.top;
-      this.trackLeft = this.getBoundingClientRect().left;
-      if (this.trackWidth === 0) {
-        this.trackWidth = 1;
-      }
-    };
-    this.setupListeners = (remove = false) => {
-      const eventAction = remove ? "removeEventListener" : "addEventListener";
-      this[eventAction]("keydown", this.keypressHandler);
-      this[eventAction]("mousedown", this.handleMouseDown);
-      this.thumb[eventAction](
-        "mousedown",
-        this.handleThumbMouseDown,
-        {
-          passive: true
-        }
-      );
-      this.thumb[eventAction](
-        "touchstart",
-        this.handleThumbMouseDown,
-        {
-          passive: true
-        }
-      );
-      if (remove) {
-        this.handleMouseDown(null);
-        this.handleThumbMouseDown(null);
-      }
-    };
-    /**
-     * @internal
-     */
-    this.initialValue = "";
-    /**
-     *  Handle mouse moves during a thumb drag operation
-     *  If the event handler is null it removes the events
-     */
-    this.handleThumbMouseDown = (event) => {
-      if (event) {
-        if (this.readOnly || this.disabled || event.defaultPrevented) {
-          return;
-        }
-        this.#isNonVisibleFocus = true;
-        event.target.focus();
-        this.#isNonVisibleFocus = false;
-      }
-      const eventAction = event !== null ? "addEventListener" : "removeEventListener";
-      window[eventAction]("mouseup", this.handleWindowMouseUp);
-      window[eventAction]("mousemove", this.handleMouseMove, {
-        passive: true
-      });
-      window[eventAction]("touchmove", this.handleMouseMove, {
-        passive: true
-      });
-      window[eventAction]("touchend", this.handleWindowMouseUp);
-      this.isDragging = event !== null;
-    };
-    /**
-     *  Handle mouse moves during a thumb drag operation
-     */
-    this.handleMouseMove = (e) => {
-      if (this.readOnly || this.disabled || e.defaultPrevented) {
-        return;
-      }
-      const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
-      const value = this.#calculateValueFromMouseEvent(sourceEvent);
-      this.value = `${this.#roundToNearestStep(value)}`;
-    };
-    /**
-     * Handle a window mouse up during a drag operation
-     */
-    this.handleWindowMouseUp = (_) => {
-      this.stopDragging();
-    };
-    this.stopDragging = () => {
-      this.isDragging = false;
-      this.handleMouseDown(null);
-      this.handleThumbMouseDown(null);
-    };
-    /**
-     *
-     * @param e - MouseEvent or null. If there is no event handler it will remove the events
-     */
-    this.handleMouseDown = (e) => {
-      const eventAction = e !== null ? "addEventListener" : "removeEventListener";
-      if (e === null || !this.disabled && !this.readOnly) {
-        window[eventAction]("mouseup", this.handleWindowMouseUp);
-        window.document[eventAction](
-          "mouseleave",
-          this.handleWindowMouseUp
-        );
-        window[eventAction]("mousemove", this.handleMouseMove);
-        if (e) {
-          e.preventDefault();
-          this.setupTrackConstraints();
-          this.#isNonVisibleFocus = true;
-          e.target.focus();
-          this.#isNonVisibleFocus = false;
-          const value = this.#calculateValueFromMouseEvent(e);
-          this.value = `${this.#roundToNearestStep(value)}`;
-          this.isDragging = true;
-        }
-      }
-    };
+    this.splitIndicator = "chevron-down-line";
+    this.disabled = false;
     this.ariaLabel = null;
-    this.ariaValuetext = null;
-    this.markers = false;
-    this.pin = false;
-    this._focusVisible = false;
-    this._hoveringOnThumb = false;
-    this.#isNonVisibleFocus = false;
-    /**
-     * @internal
-     */
-    this._onFocusIn = () => {
-      if (!this.#isNonVisibleFocus) {
-        this._focusVisible = true;
-      }
-    };
-    /**
-     * @internal
-     */
-    this._onFocusOut = () => {
-      this._focusVisible = false;
-    };
-    this.#onMouseOver = () => {
-      this._hoveringOnThumb = true;
-    };
-    this.#onMouseOut = () => {
-      this._hoveringOnThumb = false;
-    };
+    this.ariaExpanded = null;
+    this.indicatorAriaLabel = null;
   }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-  }
-  /**
-   * The value property, typed as a number.
-   *
-   * @public
-   */
-  get valueAsNumber() {
-    return parseFloat(super.value);
-  }
-  set valueAsNumber(next) {
-    this.value = next.toString();
-  }
-  /**
-   * @internal
-   */
-  valueChanged(previous, next) {
-    super.valueChanged(previous, next);
-    if (this.$fastController.isConnected) {
-      const nextAsNumber = parseFloat(next);
-      const value = this.#roundToNearestStep(nextAsNumber).toString();
-      if (value !== next) {
-        this.value = value;
-        return;
-      }
-      this.setThumbPositionForOrientation(this.direction);
-      this.$emit("change");
-    }
-  }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  minChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.min = `${this.min}`;
-    }
-    this.validate();
+  get action() {
+    return this._action;
   }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  maxChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = `${this.max}`;
-    }
-    this.validate();
-  }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  stepChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.step = `${this.step}`;
-    }
-    this.updateStepMultiplier();
-    this.validate();
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    if (this.$fastController.isConnected) {
-      this.setThumbPositionForOrientation(this.direction);
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", "range");
-    this.direction = getDirection(this);
-    this.updateStepMultiplier();
-    this.setupTrackConstraints();
-    this.setupListeners();
-    this.setupDefaultValue();
-    this.setThumbPositionForOrientation(this.direction);
-    this.#registerThumbListeners();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    this.setupListeners(true);
-    this.#unregisterThumbListeners();
-  }
-  /**
-   * Increment the value by the step
-   *
-   * @public
-   */
-  increment() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
-    this.value = this.#roundToNearestStep(newVal).toString();
-  }
-  /**
-   * Decrement the value by the step
-   *
-   * @public
-   */
-  decrement() {
-    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
-    this.value = this.#roundToNearestStep(newVal).toString();
-  }
-  /**
-   * Places the thumb based on the current value
-   *
-   * @public
-   * @param direction - writing mode
-   */
-  setThumbPositionForOrientation(_) {
-    const percentage = this.#thumbTrackEndOffset(this.valueAsNumber);
-    if (this.orientation === Orientation.horizontal) {
-      this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
-    } else {
-      this.position = this.isDragging ? `bottom: ${percentage}%; transition: none;` : `bottom: ${percentage}%; transition: all 0.2s ease;`;
-    }
-  }
-  #thumbTrackEndOffset(value) {
-    return (1 - inverseLerp(this.min, this.max, value)) * 100;
-  }
-  /**
-   * Update the step multiplier used to ensure rounding errors from steps that
-   * are not whole numbers
-   */
-  updateStepMultiplier() {
-    const stepString = this.step + "";
-    const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
-    this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
-  }
-  get midpoint() {
-    return `${this.#roundToNearestStep((this.max + this.min) / 2)}`;
-  }
-  setupDefaultValue() {
-    if (typeof this.value === "string") {
-      if (this.value.length === 0) {
-        this.initialValue = this.midpoint;
-      } else {
-        const value = parseFloat(this.value);
-        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
-          this.value = this.midpoint;
-        }
-      }
-    }
+  get indicator() {
+    return this._indicator;
   }
-  #calculateValueFromMouseEvent(e) {
-    const trackClientRect = this.track.getBoundingClientRect();
-    const [minPos, maxPos, valuePos] = this.orientation === Orientation.horizontal ? [
-      this.track.clientLeft,
-      this.track.clientWidth,
-      e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-    ] : [
-      trackClientRect.top,
-      trackClientRect.bottom,
-      e.pageY - document.documentElement.scrollTop
-    ];
-    return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
-  }
-  #roundToNearestStep(value) {
-    return limit(
-      this.min,
-      this.max,
-      roundToStepValue(value - this.min, this.step) + this.min
-    );
-  }
-  get _isThumbPopupOpen() {
-    return this._focusVisible || this._hoveringOnThumb || this.isDragging;
-  }
-  #isNonVisibleFocus;
-  #registerThumbListeners() {
-    this.thumb.addEventListener("mouseover", this.#onMouseOver, {
-      passive: true
-    });
-    this.thumb.addEventListener("mouseout", this.#onMouseOut, {
-      passive: true
-    });
-  }
-  #unregisterThumbListeners() {
-    this.thumb.removeEventListener("mouseover", this.#onMouseOver);
-    this.thumb.removeEventListener("mouseout", this.#onMouseOut);
-  }
-  #onMouseOver;
-  #onMouseOut;
 }
 __decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], Slider.prototype, "readOnly", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "direction", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "isDragging", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "position", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "trackWidth", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "trackMinWidth", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "trackHeight", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "trackLeft", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "trackMinHeight", 2);
-__decorateClass([
-  observable
-], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], Slider.prototype, "min", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], Slider.prototype, "max", 2);
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], Slider.prototype, "step", 2);
+  attr
+], SplitButton.prototype, "connotation");
 __decorateClass([
   attr
-], Slider.prototype, "orientation", 2);
+], SplitButton.prototype, "shape");
 __decorateClass([
   attr
-], Slider.prototype, "mode", 2);
+], SplitButton.prototype, "appearance");
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], Slider.prototype, "ariaLabel", 2);
+  attr
+], SplitButton.prototype, "size");
 __decorateClass([
-  attr({ attribute: "aria-valuetext" })
-], Slider.prototype, "ariaValuetext", 2);
+  attr
+], SplitButton.prototype, "label");
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], Slider.prototype, "markers", 2);
+  attr
+], SplitButton.prototype, "icon");
 __decorateClass([
-  attr({ mode: "boolean" })
-], Slider.prototype, "pin", 2);
+  attr({ attribute: "split-indicator", mode: "fromView" })
+], SplitButton.prototype, "splitIndicator");
 __decorateClass([
-  attr
-], Slider.prototype, "connotation", 2);
+  attr({ attribute: "disabled", mode: "boolean" })
+], SplitButton.prototype, "disabled");
 __decorateClass([
-  observable
-], Slider.prototype, "_focusVisible", 2);
+  attr({ attribute: "aria-label" })
+], SplitButton.prototype, "ariaLabel");
 __decorateClass([
-  observable
-], Slider.prototype, "_hoveringOnThumb", 2);
+  attr({ attribute: "aria-expanded" })
+], SplitButton.prototype, "ariaExpanded");
 __decorateClass([
-  volatile
-], Slider.prototype, "_isThumbPopupOpen", 1);
-applyMixins(Slider, Localized);
+  attr({ attribute: "indicator-aria-label" })
+], SplitButton.prototype, "indicatorAriaLabel");
+applyMixins(SplitButton, AffixIcon, Localized);
+
+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,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-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,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-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,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-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.appearance-outlined{--focus-inset: -1px}.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))}.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: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))}.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 sliderDefinition = Slider.compose({
-  baseName: "slider",
-  template: SliderTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  size,
+  label,
+  icon,
+  iconSlottedContent
+}) => 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)]
+);
+function actionButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<button
+			${ref("_action")}
+			class="control ${getClasses}"
+			aria-label="${(x) => x.ariaLabel}"
+			?disabled="${(x) => x.disabled}"
+			@click="${(x) => x.$emit("action-click", void 0, {
+    bubbles: false
+  })}"
+		>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<span class="text">${(x) => x.label}</span>
+		</button>
+	`;
+}
+function indicatorButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<button
+			${ref("_indicator")}
+			class="indicator ${getClasses}"
+			?disabled="${(x) => x.disabled}"
+			aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			@click="${(x) => x.$emit("indicator-click", void 0, {
+    bubbles: false
+  })}"
+		>
+			${(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>
+	</template>`;
+};
+
+const splitButtonDefinition = defineVividComponent(
+  "split-button",
+  SplitButton,
+  SplitButtonTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const sliderRegistries = [...popupRegistries, sliderDefinition()];
-const registerSlider = registerFactory(sliderRegistries);
+);
+const registerSplitButton = createRegisterFunction(
+  splitButtonDefinition
+);
 
-export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };
+export { registerSplitButton as r, splitButtonDefinition as s };