@vonage/vivid 5.0.0 → 5.2.0

package/split-button/definition.js

@@ -0,0 +1,170 @@
+import { iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, html, ref } from '@microsoft/fast-element';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class SplitButton extends AffixIcon(
+  Localized(DelegatesAria(VividElement))
+) {
+  constructor() {
+    super(...arguments);
+    this.splitIndicator = "chevron-down-line";
+    this.disabled = false;
+    this.indicatorAriaLabel = null;
+  }
+  get action() {
+    return this._action;
+  }
+  get indicator() {
+    return this._indicator;
+  }
+  /**
+   * Handles action click events.
+   * Prevents interaction when disabled or pending.
+   */
+  handleActionClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    } else {
+      this.$emit("action-click", void 0, {
+        bubbles: false
+      });
+    }
+  }
+  /**
+   * Handles indicator click events.
+   * Prevents interaction when disabled or pending.
+   */
+  handleIndicatorClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    } else {
+      this.$emit("indicator-click", void 0, {
+        bubbles: false
+      });
+    }
+  }
+}
+__decorateClass([
+  attr
+], SplitButton.prototype, "connotation");
+__decorateClass([
+  attr
+], SplitButton.prototype, "shape");
+__decorateClass([
+  attr
+], SplitButton.prototype, "appearance");
+__decorateClass([
+  attr
+], SplitButton.prototype, "size");
+__decorateClass([
+  attr
+], SplitButton.prototype, "label");
+__decorateClass([
+  attr({ attribute: "split-indicator", mode: "fromView" })
+], SplitButton.prototype, "splitIndicator");
+__decorateClass([
+  attr({ attribute: "disabled", mode: "boolean" })
+], SplitButton.prototype, "disabled");
+__decorateClass([
+  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,.appearance-outlined-light){--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));--_connotation-color-fierce-primary: var(--vvd-split-button-cta-fierce-primary, var(--vvd-color-cta-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-success-fierce-primary, var(--vvd-color-success-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-alert-fierce-primary, var(--vvd-color-alert-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.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.appearance-outlined-light,.indicator.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)),.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)),.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled,.indicator:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined,.indicator:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled,.indicator:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light,.indicator:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled,.indicator.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined,.indicator.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.indicator.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light,.indicator.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled,.indicator:active: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:active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator:active: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:active:where(:not(.disabled,:disabled)),.indicator:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled,.indicator.active: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.active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator.active: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.active:where(:not(.disabled,:disabled)),.indicator.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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,.indicator.appearance-outlined-light{--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,.appearance-outlined-light):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined,.appearance-outlined-light):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 = ({
+  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}"
+			${delegateAria({
+    ariaExpanded: null,
+    ariaDisabled: (x) => x.disabled
+  })}
+			@click="${(x, c) => x.handleActionClick(c.event)}"
+		>
+			${(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}"
+			aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
+			${delegateAria(
+    {
+      ariaExpanded: (x) => x.ariaExpanded,
+      ariaDisabled: (x) => x.disabled
+    },
+    { onlySpecified: true }
+  )}
+			@click="${(x, c) => x.handleIndicatorClick(c.event)}"
+		>
+			${(x) => affixIconTemplate(x.splitIndicator)}
+		</button>
+	`;
+}
+const SplitButtonTemplate = (context) => {
+  return html` <template>
+		<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 registerSplitButton = createRegisterFunction(
+  splitButtonDefinition
+);
+
+export { SplitButton as VwcSplitButtonElement, registerSplitButton, splitButtonDefinition };

package/split-button/index.cjs

@@ -1,5 +1,26 @@
-'use strict';
-
-const definition = require('../shared/definition50.cjs');
-
-definition.registerSplitButton();
+"use strict";const _=require("../bundled/definition2.cjs"),t=require("../bundled/vivid-element.cjs"),d=require("../bundled/affix.cjs"),s=require("../bundled/delegates-aria.cjs"),f=require("../bundled/localized.cjs"),v=require("../bundled/ref.cjs"),m=require("../bundled/class-names.cjs");var y=Object.defineProperty,i=(r,a,o,c)=>{for(var n=void 0,l=r.length-1,p;l>=0;l--)(p=r[l])&&(n=p(a,o,n)||n);return n&&y(a,o,n),n};class e extends d.AffixIcon(f.Localized(s.DelegatesAria(t.VividElement))){constructor(){super(...arguments),this.splitIndicator="chevron-down-line",this.disabled=!1,this.indicatorAriaLabel=null}get action(){return this._action}get indicator(){return this._indicator}handleActionClick(a){if(this.disabled){a.preventDefault(),a.stopImmediatePropagation();return}else this.$emit("action-click",void 0,{bubbles:!1})}handleIndicatorClick(a){if(this.disabled){a.preventDefault(),a.stopImmediatePropagation();return}else this.$emit("indicator-click",void 0,{bubbles:!1})}}i([t.attr],e.prototype,"connotation");i([t.attr],e.prototype,"shape");i([t.attr],e.prototype,"appearance");i([t.attr],e.prototype,"size");i([t.attr],e.prototype,"label");i([t.attr({attribute:"split-indicator",mode:"fromView"})],e.prototype,"splitIndicator");i([t.attr({attribute:"disabled",mode:"boolean"})],e.prototype,"disabled");i([t.attr({attribute:"indicator-aria-label"})],e.prototype,"indicatorAriaLabel");const x=':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,.appearance-outlined-light){--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));--_connotation-color-fierce-primary: var(--vvd-split-button-cta-fierce-primary, var(--vvd-color-cta-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-success-fierce-primary, var(--vvd-color-success-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-alert-fierce-primary, var(--vvd-color-alert-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.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.appearance-outlined-light,.indicator.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)),.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)),.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled,.indicator:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined,.indicator:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled,.indicator:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light,.indicator:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled,.indicator.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined,.indicator.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.indicator.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light,.indicator.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled,.indicator:active: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:active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator:active: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:active:where(:not(.disabled,:disabled)),.indicator:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled,.indicator.active: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.active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator.active: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.active:where(:not(.disabled,:disabled)),.indicator.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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,.indicator.appearance-outlined-light{--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,.appearance-outlined-light):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined,.appearance-outlined-light):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)}',u=({connotation:r,appearance:a,shape:o,disabled:c,size:n,label:l,icon:p,iconSlottedContent:b})=>m.classNames([`connotation-${r}`,!!r],["disabled",c],[`shape-${o}`,!!o],[`appearance-${a}`,!!a],[`size-${n}`,!!n],["icon-only",!l&&!!(p||b?.length)]);function h(r){const a=d.affixIconTemplateFactory(r);return t.html`
+		<button
+			${v.ref("_action")}
+			class="control ${u}"
+			${s.delegateAria({ariaExpanded:null,ariaDisabled:o=>o.disabled})}
+			@click="${(o,c)=>o.handleActionClick(c.event)}"
+		>
+			${o=>a(o.icon,d.IconWrapper.Slot)}
+			<span class="text">${o=>o.label}</span>
+		</button>
+	`}function g(r){const a=d.affixIconTemplateFactory(r);return t.html`
+		<button
+			${v.ref("_indicator")}
+			class="indicator ${u}"
+			aria-label="${o=>o.indicatorAriaLabel||o.locale.splitButton.showMoreActionsLabel}"
+			${s.delegateAria({ariaExpanded:o=>o.ariaExpanded,ariaDisabled:o=>o.disabled},{onlySpecified:!0})}
+			@click="${(o,c)=>o.handleIndicatorClick(c.event)}"
+		>
+			${o=>a(o.splitIndicator)}
+		</button>
+	`}const z=r=>t.html` <template>
+		<div class="base" role="group">
+			${h(r)} ${g(r)}
+			<slot></slot>
+		</div>
+	</template>`,w=t.defineVividComponent("split-button",e,z,[_.iconDefinition],{styles:x,shadowOptions:{delegatesFocus:!0}}),k=t.createRegisterFunction(w);k();

package/split-button/index.js

@@ -1,3 +1,149 @@
-import { r as registerSplitButton } from '../shared/definition50.js';
-
-registerSplitButton();
+import { i as f } from "../bundled/definition2.js";
+import { V as m, a as e, h as d, c as y, d as x } from "../bundled/vivid-element.js";
+import { b as h, a as s, I as g } from "../bundled/affix.js";
+import { D as z, d as v } from "../bundled/delegates-aria.js";
+import { L as w } from "../bundled/localized.js";
+import { r as u } from "../bundled/ref.js";
+import { c as k } from "../bundled/class-names.js";
+var $ = Object.defineProperty, i = (r, a, o, c) => {
+  for (var t = void 0, l = r.length - 1, p; l >= 0; l--)
+    (p = r[l]) && (t = p(a, o, t) || t);
+  return t && $(a, o, t), t;
+};
+class n extends h(
+  w(z(m))
+) {
+  constructor() {
+    super(...arguments), this.splitIndicator = "chevron-down-line", this.disabled = !1, this.indicatorAriaLabel = null;
+  }
+  get action() {
+    return this._action;
+  }
+  get indicator() {
+    return this._indicator;
+  }
+  /**
+   * Handles action click events.
+   * Prevents interaction when disabled or pending.
+   */
+  handleActionClick(a) {
+    if (this.disabled) {
+      a.preventDefault(), a.stopImmediatePropagation();
+      return;
+    } else
+      this.$emit("action-click", void 0, {
+        bubbles: !1
+      });
+  }
+  /**
+   * Handles indicator click events.
+   * Prevents interaction when disabled or pending.
+   */
+  handleIndicatorClick(a) {
+    if (this.disabled) {
+      a.preventDefault(), a.stopImmediatePropagation();
+      return;
+    } else
+      this.$emit("indicator-click", void 0, {
+        bubbles: !1
+      });
+  }
+}
+i([
+  e
+], n.prototype, "connotation");
+i([
+  e
+], n.prototype, "shape");
+i([
+  e
+], n.prototype, "appearance");
+i([
+  e
+], n.prototype, "size");
+i([
+  e
+], n.prototype, "label");
+i([
+  e({ attribute: "split-indicator", mode: "fromView" })
+], n.prototype, "splitIndicator");
+i([
+  e({ attribute: "disabled", mode: "boolean" })
+], n.prototype, "disabled");
+i([
+  e({ attribute: "indicator-aria-label" })
+], n.prototype, "indicatorAriaLabel");
+const I = ':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,.appearance-outlined-light){--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));--_connotation-color-fierce-primary: var(--vvd-split-button-cta-fierce-primary, var(--vvd-color-cta-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-success-fierce-primary, var(--vvd-color-success-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-alert-fierce-primary, var(--vvd-color-alert-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.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));--_connotation-color-fierce-primary: var(--vvd-split-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.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.appearance-outlined-light,.indicator.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)),.indicator: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:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)),.indicator.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.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled,.indicator:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined,.indicator:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled,.indicator:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light,.indicator:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled,.indicator.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined,.indicator.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.indicator.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light,.indicator.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled,.indicator:active: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:active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator:active: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:active:where(:not(.disabled,:disabled)),.indicator:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled,.indicator.active: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.active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator.active: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.active:where(:not(.disabled,:disabled)),.indicator.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.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,.indicator.appearance-outlined-light{--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,.appearance-outlined-light):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined,.appearance-outlined-light):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)}', b = ({
+  connotation: r,
+  appearance: a,
+  shape: o,
+  disabled: c,
+  size: t,
+  label: l,
+  icon: p,
+  iconSlottedContent: _
+}) => k(
+  [`connotation-${r}`, !!r],
+  ["disabled", c],
+  [`shape-${o}`, !!o],
+  [`appearance-${a}`, !!a],
+  [`size-${t}`, !!t],
+  ["icon-only", !l && !!(p || _?.length)]
+);
+function B(r) {
+  const a = s(r);
+  return d`
+		<button
+			${u("_action")}
+			class="control ${b}"
+			${v({
+    ariaExpanded: null,
+    ariaDisabled: (o) => o.disabled
+  })}
+			@click="${(o, c) => o.handleActionClick(c.event)}"
+		>
+			${(o) => a(o.icon, g.Slot)}
+			<span class="text">${(o) => o.label}</span>
+		</button>
+	`;
+}
+function A(r) {
+  const a = s(r);
+  return d`
+		<button
+			${u("_indicator")}
+			class="indicator ${b}"
+			aria-label="${(o) => o.indicatorAriaLabel || o.locale.splitButton.showMoreActionsLabel}"
+			${v(
+    {
+      ariaExpanded: (o) => o.ariaExpanded,
+      ariaDisabled: (o) => o.disabled
+    },
+    { onlySpecified: !0 }
+  )}
+			@click="${(o, c) => o.handleIndicatorClick(c.event)}"
+		>
+			${(o) => a(o.splitIndicator)}
+		</button>
+	`;
+}
+const C = (r) => d` <template>
+		<div class="base" role="group">
+			${B(r)} ${A(r)}
+			<slot></slot>
+		</div>
+	</template>`, D = x(
+  "split-button",
+  n,
+  C,
+  [f],
+  {
+    styles: I,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), L = y(
+  D
+);
+L();

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:43 GMT
+ * Generated on Fri, 12 Sep 2025 16:11:38 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {