@vonage/vivid 5.15.0 → 5.16.0

package/split-button/index.js

@@ -1,149 +1,88 @@
-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;
+import { t as e } from "../bundled/localized.js";
+import { d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/ref.js";
+import { t as s } from "../bundled/definition2.js";
+import { t as c } from "../bundled/decorate.js";
+import { t as l } from "../bundled/class-names.js";
+import { a as u, i as d, t as f } from "../bundled/affix.js";
+import { n as p, t as m } from "../bundled/delegates-aria.js";
+//#region src/lib/split-button/split-button.ts
+var h = class extends f(e(m(a))) {
+	constructor(...e) {
+		super(...e), this.splitIndicator = "chevron-down-line", this.disabled = !1, this.indicatorAriaLabel = null;
+	}
+	get action() {
+		return this._action;
+	}
+	get indicator() {
+		return this._indicator;
+	}
+	handleActionClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopImmediatePropagation();
+			return;
+		} else this.$emit("action-click", void 0, { bubbles: !1 });
+	}
+	handleIndicatorClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopImmediatePropagation();
+			return;
+		} else this.$emit("indicator-click", void 0, { bubbles: !1 });
+	}
 };
-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(--focus-stroke-color, 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(--focus-stroke-color, 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`
+c([n], h.prototype, "connotation", void 0), c([n], h.prototype, "shape", void 0), c([n], h.prototype, "appearance", void 0), c([n], h.prototype, "size", void 0), c([n], h.prototype, "label", void 0), c([n({
+	attribute: "split-indicator",
+	mode: "fromView"
+})], h.prototype, "splitIndicator", void 0), c([n({
+	attribute: "disabled",
+	mode: "boolean"
+})], h.prototype, "disabled", void 0), c([n({ attribute: "indicator-aria-label" })], h.prototype, "indicatorAriaLabel", void 0);
+//#endregion
+//#region src/lib/split-button/split-button.scss?inline
+var g = ":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{inline-size:inherit;justify-content:flex-start;display:inline-flex}.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{box-sizing:border-box;border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}@supports (user-select:none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap);border-inline-end:0}.control:not(.appearance-filled){--focus-stroke-gap-color:transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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){inline-size:inherit;flex-grow:1}.control.size-super-condensed{--_split-button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));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{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}.indicator{border-bottom-right-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate;border-inline-start:0;position:relative}.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(--focus-stroke-color,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{background-color:var(--_appearance-color-text);content:\"\";opacity:.35;inline-size:1px;position:absolute;inset-inline-start:0}.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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_split-button-inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_split-button-inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12));font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));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)}", _ = ({ connotation: e, appearance: t, shape: n, disabled: r, size: i, label: a, icon: o, iconSlottedContent: s }) => l([`connotation-${e}`, !!e], ["disabled", r], [`shape-${n}`, !!n], [`appearance-${t}`, !!t], [`size-${i}`, !!i], ["icon-only", !a && !!(o || s?.length)]);
+function v(e) {
+	let n = u(e);
+	return t`
 		<button
-			${u("_action")}
-			class="control ${b}"
-			${v({
-    ariaExpanded: null,
-    ariaDisabled: (o) => o.disabled
-  })}
-			@click="${(o, c) => o.handleActionClick(c.event)}"
+			${o("_action")}
+			class="control ${_}"
+			${p({
+		ariaExpanded: null,
+		ariaDisabled: (e) => e.disabled
+	})}
+			@click="${(e, t) => e.handleActionClick(t.event)}"
 		>
-			${(o) => a(o.icon, g.Slot)}
-			<span class="text">${(o) => o.label}</span>
+			${(e) => n(e.icon, d.Slot)}
+			<span class="text">${(e) => e.label}</span>
 		</button>
 	`;
 }
-function A(r) {
-  const a = s(r);
-  return d`
+function y(e) {
+	let n = u(e);
+	return t`
 		<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("_indicator")}
+			class="indicator ${_}"
+			aria-label="${(e) => e.indicatorAriaLabel || e.locale.splitButton.showMoreActionsLabel}"
+			${p({
+		ariaExpanded: (e) => e.ariaExpanded,
+		ariaDisabled: (e) => e.disabled
+	}, { onlySpecified: !0 })}
+			@click="${(e, t) => e.handleIndicatorClick(t.event)}"
 		>
-			${(o) => a(o.splitIndicator)}
+			${(e) => n(e.splitIndicator)}
 		</button>
 	`;
 }
-const C = (r) => d` <template>
+//#endregion
+//#region src/lib/split-button/index.ts
+i(r("split-button", h, (e) => t` <template>
 		<div class="base" role="group">
-			${B(r)} ${A(r)}
+			${v(e)} ${y(e)}
 			<slot></slot>
 		</div>
-	</template>`, D = x(
-  "split-button",
-  n,
-  C,
-  [f],
-  {
-    styles: I,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), L = y(
-  D
-);
-L();
+	</template>`, [s], {
+	styles: g,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion

package/status/definition.cjs

@@ -1,76 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const affix = require('../unbundled/affix.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const enums = require('../unbundled/enums.cjs');
-
-const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
-
-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 Status extends affix.AffixIcon(vividElement.VividElement) {
-}
-__decorateClass([
-  fastElement.attr
-], Status.prototype, "status");
-__decorateClass([
-  fastElement.attr
-], Status.prototype, "connotation");
-
-const DEFAULT_ICON_BY_CONNOTATION = {
-  [enums.Connotation.Success]: "check-circle-solid",
-  [enums.Connotation.Information]: "info-solid",
-  [enums.Connotation.Warning]: "warning-solid",
-  [enums.Connotation.Alert]: "error-solid"
-};
-const getClasses = ({ connotation }) => fastWebUtilities.classNames("base", connotation ? `connotation-${connotation}` : "");
-function getEffectiveIcon(status) {
-  if (status.icon) {
-    return status.icon;
-  }
-  return status.connotation ? DEFAULT_ICON_BY_CONNOTATION[status.connotation] : void 0;
-}
-function getHeaderTemplate() {
-  return fastElement.html`<div class="headline">${(x) => x.status}</div>`;
-}
-const StatusTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return fastElement.html`
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(getEffectiveIcon(x), affix.IconWrapper.Slot)}
-			<div class="text">
-				${fastElement.when((x) => x.status, getHeaderTemplate())}
-				<div class="description">
-					<slot></slot>
-				</div>
-			</div>
-		</div>
-	`;
-};
-
-const statusDefinition = vividElement.defineVividComponent(
-  "status",
-  Status,
-  StatusTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerStatus = vividElement.createRegisterFunction(statusDefinition);
-
-exports.VwcStatusElement = Status;
-exports.registerStatus = registerStatus;
-exports.statusDefinition = statusDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition64.cjs");
+exports.VwcStatusElement = require_definition$1.Status;
+exports.registerStatus = require_definition$1.registerStatus;
+exports.statusDefinition = require_definition$1.statusDefinition;

package/status/definition.js

@@ -1,70 +1,3 @@
-import { iconDefinition } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, when, html } from '@microsoft/fast-element';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { C as Connotation } from '../unbundled/enums.js';
-
-const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
-
-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 Status extends AffixIcon(VividElement) {
-}
-__decorateClass([
-  attr
-], Status.prototype, "status");
-__decorateClass([
-  attr
-], Status.prototype, "connotation");
-
-const DEFAULT_ICON_BY_CONNOTATION = {
-  [Connotation.Success]: "check-circle-solid",
-  [Connotation.Information]: "info-solid",
-  [Connotation.Warning]: "warning-solid",
-  [Connotation.Alert]: "error-solid"
-};
-const getClasses = ({ connotation }) => classNames("base", connotation ? `connotation-${connotation}` : "");
-function getEffectiveIcon(status) {
-  if (status.icon) {
-    return status.icon;
-  }
-  return status.connotation ? DEFAULT_ICON_BY_CONNOTATION[status.connotation] : void 0;
-}
-function getHeaderTemplate() {
-  return html`<div class="headline">${(x) => x.status}</div>`;
-}
-const StatusTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(getEffectiveIcon(x), IconWrapper.Slot)}
-			<div class="text">
-				${when((x) => x.status, getHeaderTemplate())}
-				<div class="description">
-					<slot></slot>
-				</div>
-			</div>
-		</div>
-	`;
-};
-
-const statusDefinition = defineVividComponent(
-  "status",
-  Status,
-  StatusTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerStatus = createRegisterFunction(statusDefinition);
-
+import "../unbundled/definition2.js";
+import { n as statusDefinition, r as Status, t as registerStatus } from "../unbundled/definition64.js";
 export { Status as VwcStatusElement, registerStatus, statusDefinition };

package/status/index.cjs

@@ -1,11 +1,14 @@
-"use strict";const d=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),c=require("../bundled/affix.cjs"),i=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";var p=Object.defineProperty,l=(o,e,t,C)=>{for(var a=void 0,r=o.length-1,v;r>=0;r--)(v=o[r])&&(a=v(e,t,a)||a);return a&&p(e,t,a),a};class s extends c.AffixIcon(n.VividElement){}l([n.attr],s.prototype,"status");l([n.attr],s.prototype,"connotation");const _={[i.Connotation.Success]:"check-circle-solid",[i.Connotation.Information]:"info-solid",[i.Connotation.Warning]:"warning-solid",[i.Connotation.Alert]:"error-solid"},g=({connotation:o})=>u.classNames("base",o?`connotation-${o}`:"");function x(o){return o.icon?o.icon:o.connotation?_[o.connotation]:void 0}function w(){return n.html`<div class="headline">${o=>o.status}</div>`}const y=o=>{const e=c.affixIconTemplateFactory(o);return n.html`
-		<div class="${g}">
-			${t=>e(x(t),c.IconWrapper.Slot)}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/enums.cjs`);var c=`.base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}`,l=class extends o.t(e.t){};i.t([e.l],l.prototype,`status`,void 0),i.t([e.l],l.prototype,`connotation`,void 0),i.t([e.T],l.prototype,`descriptionSlottedContent`,void 0);var u={[s.n.Success]:`check-circle-solid`,[s.n.Information]:`info-solid`,[s.n.Warning]:`warning-solid`,[s.n.Alert]:`error-solid`},d=({connotation:e})=>a.t(`base`,e?`connotation-${e}`:``);function f(e){return e.icon?e.icon:e.connotation?u[e.connotation]:void 0}function p(){return e.d`<div class="headline">${e=>e.status}</div>`}var m=e.o(`status`,l,r=>{let i=o.a(r);return e.d`
+		<div class="${d}">
+			${e=>i(f(e),o.i.Slot)}
 			<div class="text">
-				${f.when(t=>t.status,w())}
-				<div class="description">
-					<slot></slot>
+				${t.t(e=>e.status,p())}
+				<div
+					class="description"
+					data-has-description="${e=>(e.descriptionSlottedContent?.length??0)>0}"
+				>
+					<slot ${n.t(`descriptionSlottedContent`)}></slot>
 				</div>
 			</div>
 		</div>
-	`},b=n.defineVividComponent("status",s,y,[d.iconDefinition],{styles:m}),h=n.createRegisterFunction(b);h();
+	`},[r.t],{styles:c});e.s(m)();

package/status/index.js

@@ -1,55 +1,45 @@
-import { i as d } from "../bundled/definition2.js";
-import { V as f, a as s, h as v, c as m, d as p } from "../bundled/vivid-element.js";
-import { b as u, a as _, I as g } from "../bundled/affix.js";
-import { C as r } from "../bundled/enums.js";
-import { w as x } from "../bundled/when.js";
-import { c as w } from "../bundled/class-names.js";
-const b = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
-var y = Object.defineProperty, l = (o, a, t, $) => {
-  for (var n = void 0, e = o.length - 1, c; e >= 0; e--)
-    (c = o[e]) && (n = c(a, t, n) || n);
-  return n && y(a, t, n), n;
-};
-class i extends u(f) {
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/when.js";
+import { t as s } from "../bundled/slotted.js";
+import { t as c } from "../bundled/definition2.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/class-names.js";
+import { a as d, i as f, t as p } from "../bundled/affix.js";
+import { n as m } from "../bundled/enums.js";
+//#region src/lib/status/status.scss?inline
+var h = ".base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}", g = class extends p(a) {};
+l([n], g.prototype, "status", void 0), l([n], g.prototype, "connotation", void 0), l([e], g.prototype, "descriptionSlottedContent", void 0);
+//#endregion
+//#region src/lib/status/status.template.ts
+var _ = {
+	[m.Success]: "check-circle-solid",
+	[m.Information]: "info-solid",
+	[m.Warning]: "warning-solid",
+	[m.Alert]: "error-solid"
+}, v = ({ connotation: e }) => u("base", e ? `connotation-${e}` : "");
+function y(e) {
+	return e.icon ? e.icon : e.connotation ? _[e.connotation] : void 0;
 }
-l([
-  s
-], i.prototype, "status");
-l([
-  s
-], i.prototype, "connotation");
-const h = {
-  [r.Success]: "check-circle-solid",
-  [r.Information]: "info-solid",
-  [r.Warning]: "warning-solid",
-  [r.Alert]: "error-solid"
-}, I = ({ connotation: o }) => w("base", o ? `connotation-${o}` : "");
-function C(o) {
-  return o.icon ? o.icon : o.connotation ? h[o.connotation] : void 0;
+function b() {
+	return t`<div class="headline">${(e) => e.status}</div>`;
 }
-function T() {
-  return v`<div class="headline">${(o) => o.status}</div>`;
-}
-const N = (o) => {
-  const a = _(o);
-  return v`
-		<div class="${I}">
-			${(t) => a(C(t), g.Slot)}
+//#endregion
+//#region src/lib/status/index.ts
+i(r("status", g, (e) => {
+	let n = d(e);
+	return t`
+		<div class="${v}">
+			${(e) => n(y(e), f.Slot)}
 			<div class="text">
-				${x((t) => t.status, T())}
-				<div class="description">
-					<slot></slot>
+				${o((e) => e.status, b())}
+				<div
+					class="description"
+					data-has-description="${(e) => (e.descriptionSlottedContent?.length ?? 0) > 0}"
+				>
+					<slot ${s("descriptionSlottedContent")}></slot>
 				</div>
 			</div>
 		</div>
 	`;
-}, O = p(
-  "status",
-  i,
-  N,
-  [d],
-  {
-    styles: b
-  }
-), S = m(O);
-S();
+}, [c], { styles: h }))();
+//#endregion

package/styles/core/all.css

@@ -1,17 +1,18 @@
 /**
- * Do not edit directly
- * Generated on Fri, 27 Feb 2026 16:10:27 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 /**
- * Do not edit directly
- * Generated on Fri, 27 Feb 2026 16:10:27 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 .vvd-root {
-  background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
   color-scheme: var(--vvd-color-scheme);
 }
 
+:root.vvd-root {
+  background-color: var(--vvd-color-canvas);
+}
+
 .vvd-scrollbar {
   --scrollbar-track-color: transparent;
   --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);