@vonage/vivid 5.25.0 → 5.28.0

package/selectable-box/index.js

@@ -4,10 +4,11 @@ import { n as o } from "../bundled/enums.js";
 import { t as s } from "../bundled/decorate.js";
 import { t as c } from "../bundled/class-names.js";
 import { n as l, t as u } from "../bundled/delegates-aria.js";
-import { r as d, t as f } from "../bundled/definition15.js";
-import { r as p, t as m } from "../bundled/definition16.js";
+import { t as d } from "../bundled/component-enum.js";
+import { r as f, t as p } from "../bundled/definition15.js";
+import { r as m, t as h } from "../bundled/definition16.js";
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", g = class extends u(r) {
+var g = ":host{display:flex}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", _ = d(["accent", "cta"], "accent"), v = class extends u(r) {
 	constructor(...e) {
 		super(...e), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
 	}
@@ -23,24 +24,24 @@ var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:
 		return !0;
 	}
 };
-s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
+s([t({ mode: "boolean" })], v.prototype, "checked", void 0), s([t({
 	attribute: "clickable-box",
 	mode: "boolean"
-})], g.prototype, "clickableBox", void 0), s([t], g.prototype, "connotation", void 0), s([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([t({
+})], v.prototype, "clickableBox", void 0), s([t], v.prototype, "connotation", void 0), s([t({ attribute: "control-type" })], v.prototype, "controlType", void 0), s([t({
 	attribute: "control-placement",
 	mode: "fromView"
-})], g.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], g.prototype, "tight", void 0), s([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
+})], v.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], v.prototype, "tight", void 0), s([t({ mode: "boolean" })], v.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-function _(e) {
+function y(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
-function v(e) {
-	let t = e.tagFor(d);
+function b(e) {
+	let t = e.tagFor(f);
 	return n`${a((e) => e.controlType !== "radio", n`
 		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
-			@change="${(e) => _(e)}"
+			@change="${(e) => y(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
@@ -48,12 +49,12 @@ function v(e) {
 			inert="${(e) => e.clickableBox ? !0 : null}"
 		></${t}>`)} `;
 }
-function y(e) {
-	let t = e.tagFor(p);
+function x(e) {
+	let t = e.tagFor(m);
 	return n`${a((e) => e.controlType === "radio", n`
 		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
-			@change="${(e) => _(e)}"
+			@change="${(e) => y(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
@@ -62,10 +63,10 @@ function y(e) {
 		></${t}>`)} `;
 }
 //#endregion
-//#region src/lib/selectable-box/index.ts
-e(i("selectable-box", g, (e) => n`<template>
+//#region src/lib/selectable-box/definition.ts
+var S = i("selectable-box", v, (e) => n`<template>
 		<div
-			class="${(e) => c("base", [`connotation-${e.connotation}`, !!e.connotation], ["tight", e.tight], ["selected", e.checked], ["clickable", e.clickableBox], ["readonly", !e.clickableBox], [`control-placement-${e.controlPlacement}`, !!e.controlPlacement], ["disabled", e.disabled])}"
+			class="${(e) => c("base", `connotation-${_.parse(e.connotation)}`, "appearance-duotone", "with-idle", "with-hover", "with-selected", "with-selectedAndHover", "with-disabled", ["tight", e.tight], ["selected", e.checked], ["clickable", e.clickableBox], ["readonly", !e.clickableBox], [`control-placement-${e.controlPlacement}`, !!e.controlPlacement], ["disabled", e.disabled])}"
 			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"
 			${l({
 	role: (e) => e.clickableBox ? "button" : null,
@@ -76,11 +77,14 @@ e(i("selectable-box", g, (e) => n`<template>
 			@keydown="${(e, t) => e._handleKeydown(t.event)}"
 			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
 		>
-			${v(e)} ${y(e)}
+			${b(e)} ${x(e)}
 			<slot></slot>
 		</div>
-	</template>`, [f, m], {
-	styles: h,
+	</template>`, [p, h], {
+	styles: g,
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/selectable-box/index.ts
+e(S)();
 //#endregion

package/shared/localization/Locale.d.ts

@@ -21,6 +21,7 @@ import { CharCountLocale } from '../patterns/char-count/locale';
 import { DataGridLocale } from '../../lib/data-grid/locale';
 import { PaginationLocale } from '../../lib/pagination/locale';
 import { TagLocale } from '../../lib/tag/locale';
+import { TableSortingButtonLocale } from '../../lib/table/locale';
 import { Connotation } from '../../lib/enums';
 import { ToggletipLocale } from '../../lib/toggletip/locale';
 import { SimpleColorPickerLocale } from '../../lib/simple-color-picker/locale';
@@ -61,6 +62,7 @@ export interface Locale {
     dataGrid: DataGridLocale;
     pagination: PaginationLocale;
     tag: TagLocale;
+    tableSortingButton: TableSortingButtonLocale;
     toggletip: ToggletipLocale;
     baseColorPicker: BaseColorPickerLocale;
     simpleColorPicker: SimpleColorPickerLocale;

package/shared/patterns/anchored.d.ts

@@ -868,4 +868,6 @@ export declare const anchorSlotTemplateFactory: () => import('@microsoft/fast-el
     _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
     _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
 } & VividElement, any>;
+export declare function setAnchorExpanded(anchor: HTMLElement, expanded: boolean): void;
+export declare function clearAnchorExpanded(anchor: HTMLElement): void;
 export {};

package/shared/styles/appearance.d.ts

@@ -0,0 +1,2 @@
+export declare const APPEARANCES: string[];
+export declare const STATES: string[];

package/shared/styles/connotation.d.ts

@@ -0,0 +1,2 @@
+export declare const CONNOTATIONS: readonly ["accent", "warning", "cta", "success", "alert", "information", "announcement"];
+export declare const CONNOTATION_SHADES: readonly ["faint", "soft", "dim", "pale", "light", "intermediate", "firm", "firm-all", "fierce", "fierce-primary", "contrast", "primary", "primary-increment", "primary-text"];

package/shared/styles/connotationOverrides.d.ts

@@ -0,0 +1 @@
+export declare function generateConnotationOverridesStylesheet(component: string): string;

package/shared/utils/component-enum.d.ts

@@ -0,0 +1,7 @@
+export declare function componentEnum<const V extends ReadonlyArray<string>>(validValues: V, defaultValue: V[number]): {
+    parse: (value: unknown) => V[number];
+    defaultValue: V[number];
+};
+export type ComponentEnum<C> = C extends {
+    defaultValue: infer T;
+} ? T : never;

package/side-drawer/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition67.cjs");
+const require_definition = require("../unbundled/definition68.cjs");
 exports.VwcSideDrawerElement = require_definition.SideDrawer;
 exports.registerSideDrawer = require_definition.registerSideDrawer;
 exports.sideDrawerDefinition = require_definition.sideDrawerDefinition;

package/side-drawer/definition.js

@@ -1,2 +1,2 @@
-import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "../unbundled/definition67.js";
+import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "../unbundled/definition68.js";
 export { SideDrawer as VwcSideDrawerElement, registerSideDrawer, sideDrawerDefinition };

package/side-drawer/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/dialog.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(e,t,n){switch(super.attributeChangedCallback(e,t,n),e){case`open`:this.open?this.#t():this.#e()}}#e(){this.$emit(`close`,void 0,{bubbles:!1})}#t(){this.$emit(`open`,void 0,{bubbles:!1})}_onKeydown(e){if(i.t(e)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}};n.t([e.m({mode:`boolean`})],a.prototype,`alternate`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`modal`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`open`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`trailing`,void 0);var o=`:host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}`,s=e.p`
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/when.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/class-names.cjs"),i=require("../bundled/dialog.cjs");var a=class extends e.t{constructor(...e){super(...e),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`open`&&(this.open?this.#t():this.#e())}#e(){this.$emit(`close`,void 0,{bubbles:!1})}#t(){this.$emit(`open`,void 0,{bubbles:!1})}_onKeydown(e){if(i.t(e)){this._handleCloseRequest();return}return!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}};n.t([e.m({mode:`boolean`})],a.prototype,`alternate`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`modal`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`open`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`trailing`,void 0);var o=`:host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}`,s=e.p`
 	<div
 		class="${e=>r.t(`control`,[`modal`,e.modal],[`open`,e.open],[`trailing`,e.trailing])}"
 		?inert="${e=>!e.open}"

package/side-drawer/index.js

@@ -9,9 +9,7 @@ var l = class extends r {
 		super(...e), this.alternate = !1, this.modal = !1, this.open = !1, this.trailing = !1;
 	}
 	attributeChangedCallback(e, t, n) {
-		switch (super.attributeChangedCallback(e, t, n), e) {
-			case "open": this.open ? this.#t() : this.#e();
-		}
+		super.attributeChangedCallback(e, t, n), e === "open" && (this.open ? this.#t() : this.#e());
 	}
 	#e() {
 		this.$emit("close", void 0, { bubbles: !1 });
@@ -23,7 +21,8 @@ var l = class extends r {
 		if (c(e)) {
 			this._handleCloseRequest();
 			return;
-		} else return !0;
+		}
+		return !0;
 	}
 	_handleCloseRequest() {
 		this.$emit("cancel", void 0, {
@@ -32,9 +31,10 @@ var l = class extends r {
 		}) && (this.open = !1);
 	}
 };
+o([t({ mode: "boolean" })], l.prototype, "alternate", void 0), o([t({ mode: "boolean" })], l.prototype, "modal", void 0), o([t({ mode: "boolean" })], l.prototype, "open", void 0), o([t({ mode: "boolean" })], l.prototype, "trailing", void 0);
 //#endregion
-//#region src/lib/side-drawer/index.ts
-o([t({ mode: "boolean" })], l.prototype, "alternate", void 0), o([t({ mode: "boolean" })], l.prototype, "modal", void 0), o([t({ mode: "boolean" })], l.prototype, "open", void 0), o([t({ mode: "boolean" })], l.prototype, "trailing", void 0), e(i("side-drawer", l, n`
+//#region src/lib/side-drawer/side-drawer.scss?inline
+var u = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}", d = n`
 	<div
 		class="${(e) => s("control", ["modal", e.modal], ["open", e.open], ["trailing", e.trailing])}"
 		?inert="${(e) => !e.open}"
@@ -52,5 +52,8 @@ o([t({ mode: "boolean" })], l.prototype, "alternate", void 0), o([t({ mode: "boo
 			class="${(e) => s("scrim", ["open", e.open])}"
 			@click="${(e) => e._handleCloseRequest()}"
 		></div>`)}
-`, [], { styles: ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}" }))();
+`, f = i("side-drawer", l, d, [], { styles: u });
+//#endregion
+//#region src/lib/side-drawer/index.ts
+e(f)();
 //#endregion

package/simple-color-picker/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition68.cjs");
+const require_definition = require("../unbundled/definition69.cjs");
 exports.VwcSimpleColorPickerElement = require_definition.SimpleColorPicker;
 exports.registerSimpleColorPicker = require_definition.registerSimpleColorPicker;
 exports.simpleColorPickerDefinition = require_definition.simpleColorPickerDefinition;

package/simple-color-picker/definition.js

@@ -1,2 +1,2 @@
-import { n as simpleColorPickerDefinition, r as SimpleColorPicker, t as registerSimpleColorPicker } from "../unbundled/definition68.js";
+import { n as simpleColorPickerDefinition, r as SimpleColorPicker, t as registerSimpleColorPicker } from "../unbundled/definition69.js";
 export { SimpleColorPicker as VwcSimpleColorPickerElement, registerSimpleColorPicker, simpleColorPickerDefinition };

package/simple-color-picker/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/icon.cjs`),o=require(`../bundled/definition8.cjs`),s=require(`../bundled/definition9.cjs`),c=require(`../bundled/anchored.cjs`),l=require(`../bundled/dialog.cjs`),u=require(`../bundled/base-color-picker.cjs`);var d=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}`,f=class extends c.t(u.t(e.t)){constructor(...t){super(...t),this.placement=`top-start`,this.swatchesPerRow=7,this.#r=!1,this.#i=()=>{this.open||(this.#r=!1,e.M.enqueue(()=>this.open=!0))},this.#a=t=>{(t.key===`Enter`||t.key===` `)&&(this.open||(this.#r=!0,e.M.enqueue(()=>this.open=!0)),t.preventDefault())},this._closeOnClickOutside=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key===`Escape`&&(this.open=!1)}}openChanged(e,t){this._updateListeners(),this._anchorEl&&this.#e(this._anchorEl),t&&this.isConnected&&requestAnimationFrame(()=>{if(this._refreshCanvasColor(),this.#r){let e=this.swatches.findIndex(e=>e.value===this.value),t=e>=0?e:0;this._focusSwatchByIndex(t)}this.#r=!1})}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener(`click`,this._closeOnClickOutside),document.removeEventListener(`keydown`,this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener(`click`,this._closeOnClickOutside),document.addEventListener(`keydown`,this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,t){e&&this.#n(e),t&&this.#t(t)}#e(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#t(e){this.#e(e),e.addEventListener(`click`,this.#i,!0),e.addEventListener(`keydown`,this.#a),e.setAttribute(`aria-haspopup`,`true`)}#n(e){e.removeEventListener(`click`,this.#i,!0),e.removeEventListener(`keydown`,this.#a),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.removeAttribute(`aria-haspopup`)}#r;#i;#a};n.t([e.m({mode:`fromView`})],f.prototype,`placement`,void 0),n.t([e.m({attribute:`swatches-per-row`,mode:`fromView`,converter:e.h})],f.prototype,`swatchesPerRow`,void 0);var p=e=>r.t(`control`),m=e.u(`simple-color-picker`,f,n=>{let r=n.tagFor(o.i),i=n.tagFor(a.t),u=n.tagFor(s.r);return e.p`
-		${c.n()}
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/repeat.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/class-names.cjs"),i=require("../bundled/definition2.cjs"),a=require("../bundled/icon.cjs"),o=require("../bundled/definition7.cjs"),s=require("../bundled/definition8.cjs"),c=require("../bundled/anchored.cjs"),l=require("../bundled/dialog.cjs"),u=require("../bundled/base-color-picker.cjs");var d=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}`,f=class extends c.t(u.t(e.t)){constructor(...t){super(...t),this.placement=`top-start`,this.swatchesPerRow=7,this.#r=!1,this.#i=()=>{this.open||(this.#r=!1,e.M.enqueue(()=>this.open=!0))},this.#a=t=>{(t.key===`Enter`||t.key===` `)&&(this.open||(this.#r=!0,e.M.enqueue(()=>this.open=!0)),t.preventDefault())},this._closeOnClickOutside=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key===`Escape`&&(this.open=!1)}}openChanged(e,t){this._updateListeners(),this._anchorEl&&this.#e(this._anchorEl),t&&this.isConnected&&requestAnimationFrame(()=>{if(this._refreshCanvasColor(),this.#r){let e=this.swatches.findIndex(e=>e.value===this.value),t=e>=0?e:0;this._focusSwatchByIndex(t)}this.#r=!1})}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener(`click`,this._closeOnClickOutside),document.removeEventListener(`keydown`,this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener(`click`,this._closeOnClickOutside),document.addEventListener(`keydown`,this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,t){e&&this.#n(e),t&&this.#t(t)}#e(e){e.setAttribute(`aria-expanded`,this.open.toString()),c.i(e,this.open)}#t(e){this.#e(e),e.addEventListener(`click`,this.#i,!0),e.addEventListener(`keydown`,this.#a),e.setAttribute(`aria-haspopup`,`true`)}#n(e){e.removeEventListener(`click`,this.#i,!0),e.removeEventListener(`keydown`,this.#a),e.removeAttribute(`aria-expanded`),c.r(e),e.removeAttribute(`aria-haspopup`)}#r;#i;#a};n.t([e.m({mode:`fromView`})],f.prototype,`placement`,void 0),n.t([e.m({attribute:`swatches-per-row`,mode:`fromView`,converter:e.h})],f.prototype,`swatchesPerRow`,void 0);var p=e=>r.t(`control`),m=e.u(`simple-color-picker`,f,n=>{let r=n.tagFor(o.i),i=n.tagFor(a.t),u=n.tagFor(s.r),d=c.n();return e.p`
+		${d}
 		<${r}
 			class="${p}"
 			:anchor="${e=>e._anchorEl}"

package/simple-color-picker/index.js

@@ -2,15 +2,15 @@ import { M as e, d as t, h as n, m as r, p as i, t as a, u as o } from "../bundl
 import { n as s } from "../bundled/repeat.js";
 import { t as c } from "../bundled/decorate.js";
 import { t as l } from "../bundled/class-names.js";
-import { t as u } from "../bundled/definition3.js";
+import { t as u } from "../bundled/definition2.js";
 import { t as d } from "../bundled/icon.js";
-import { i as f, t as p } from "../bundled/definition8.js";
-import { n as m, r as h } from "../bundled/definition9.js";
-import { n as g, t as _ } from "../bundled/anchored.js";
-import { t as v } from "../bundled/dialog.js";
-import { t as y } from "../bundled/base-color-picker.js";
+import { i as f, t as p } from "../bundled/definition7.js";
+import { n as m, r as h } from "../bundled/definition8.js";
+import { i as g, n as _, r as v, t as y } from "../bundled/anchored.js";
+import { t as b } from "../bundled/dialog.js";
+import { t as x } from "../bundled/base-color-picker.js";
 //#region src/lib/simple-color-picker/simple-color-picker.scss?inline
-var b = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}", x = class extends _(y(a)) {
+var S = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}", C = class extends y(x(a)) {
 	constructor(...t) {
 		super(...t), this.placement = "top-start", this.swatchesPerRow = 7, this.#r = !1, this.#i = () => {
 			this.open || (this.#r = !1, e.enqueue(() => this.open = !0));
@@ -54,39 +54,36 @@ var b = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--
 		e && this.#n(e), t && this.#t(t);
 	}
 	#e(e) {
-		e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
+		e.setAttribute("aria-expanded", this.open.toString()), g(e, this.open);
 	}
 	#t(e) {
 		this.#e(e), e.addEventListener("click", this.#i, !0), e.addEventListener("keydown", this.#a), e.setAttribute("aria-haspopup", "true");
 	}
 	#n(e) {
-		e.removeEventListener("click", this.#i, !0), e.removeEventListener("keydown", this.#a), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
+		e.removeEventListener("click", this.#i, !0), e.removeEventListener("keydown", this.#a), e.removeAttribute("aria-expanded"), v(e), e.removeAttribute("aria-haspopup");
 	}
 	#r;
 	#i;
 	#a;
 };
-c([r({ mode: "fromView" })], x.prototype, "placement", void 0), c([r({
+c([r({ mode: "fromView" })], C.prototype, "placement", void 0), c([r({
 	attribute: "swatches-per-row",
 	mode: "fromView",
 	converter: n
-})], x.prototype, "swatchesPerRow", void 0);
+})], C.prototype, "swatchesPerRow", void 0);
 //#endregion
 //#region src/lib/simple-color-picker/simple-color-picker.template.ts
-var S = (e) => l("control");
-//#endregion
-//#region src/lib/simple-color-picker/index.ts
-t(o("simple-color-picker", x, (e) => {
-	let t = e.tagFor(f), n = e.tagFor(d), r = e.tagFor(h);
+var w = (e) => l("control"), T = o("simple-color-picker", C, (e) => {
+	let t = e.tagFor(f), n = e.tagFor(d), r = e.tagFor(h), a = _();
 	return i`
-		${g()}
+		${a}
 		<${t}
-			class="${S}"
+			class="${w}"
 			:anchor="${(e) => e._anchorEl}"
 			:open="${(e) => e.open}"
 			placement="${(e) => e.placement}"
 			offset="4"
-			@keydown="${(e, { event: t }) => !(e.open && v(t))}"
+			@keydown="${(e, { event: t }) => !(e.open && b(t))}"
 		>
 			<div class="palette" role="grid" 
 				aria-rowcount="${(e) => Math.ceil(e.swatches.length / e._getRowLength())}"
@@ -101,5 +98,8 @@ t(o("simple-color-picker", x, (e) => {
 	p,
 	u,
 	m
-], { styles: b }))();
+], { styles: S });
+//#endregion
+//#region src/lib/simple-color-picker/index.ts
+t(T)();
 //#endregion

package/slider/definition.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_definition = require("../unbundled/definition10.cjs");
-exports.VwcSliderElement = require_definition.Slider;
+const require_slider_template = require("../unbundled/slider.template.cjs");
+exports.VwcSliderElement = require_slider_template.Slider;
 exports.registerSlider = require_definition.registerSlider;
 exports.sliderDefinition = require_definition.sliderDefinition;

package/slider/definition.js

@@ -1,2 +1,3 @@
-import { n as sliderDefinition, r as Slider, t as registerSlider } from "../unbundled/definition10.js";
+import { n as sliderDefinition, t as registerSlider } from "../unbundled/definition10.js";
+import { r as Slider } from "../unbundled/slider.template.js";
 export { Slider as VwcSliderElement, registerSlider, sliderDefinition };

package/slider/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition2.cjs`).t();
+require("../bundled/definition14.cjs").t();

package/slider/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../bundled/definition2.js";
+import { t as e } from "../bundled/definition14.js";
 //#region src/lib/slider/index.ts
 e();
 //#endregion

package/split-button/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition69.cjs");
+const require_definition = require("../unbundled/definition70.cjs");
 exports.VwcSplitButtonElement = require_definition.SplitButton;
 exports.registerSplitButton = require_definition.registerSplitButton;
 exports.splitButtonDefinition = require_definition.splitButtonDefinition;

package/split-button/definition.js

@@ -1,2 +1,2 @@
-import { n as splitButtonDefinition, r as SplitButton, t as registerSplitButton } from "../unbundled/definition69.js";
+import { n as splitButtonDefinition, r as SplitButton, t as registerSplitButton } from "../unbundled/definition70.js";
 export { SplitButton as VwcSplitButtonElement, registerSplitButton, splitButtonDefinition };

package/split-button/index.cjs

@@ -1,26 +1,28 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/definition3.cjs`),o=require(`../bundled/affix.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends o.t(e.t(s.t(t.t))){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});return!0}handleIndicatorClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}else this.$emit(`indicator-click`,void 0,{bubbles:!1});return!0}};r.t([t.m],c.prototype,`connotation`,void 0),r.t([t.m],c.prototype,`shape`,void 0),r.t([t.m],c.prototype,`appearance`,void 0),r.t([t.m],c.prototype,`size`,void 0),r.t([t.m],c.prototype,`label`,void 0),r.t([t.m({attribute:`split-indicator`,mode:`fromView`})],c.prototype,`splitIndicator`,void 0),r.t([t.m({attribute:`disabled`,mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.m({attribute:`indicator-aria-label`})],c.prototype,`indicatorAriaLabel`,void 0);var l=`: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;user-select:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.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)}`,u=e=>i.t([`connotation-${e.connotation}`,!!e.connotation],[`disabled`,e.disabled],[`shape-${e.shape}`,!!e.shape],[`appearance-${e.appearance}`,!!e.appearance],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)]);function d(e){let r=o.a(e);return t.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/ref.cjs"),r=require("../bundled/decorate.cjs"),i=require("../bundled/class-names.cjs"),a=require("../bundled/definition2.cjs"),o=require("../bundled/affix.cjs"),s=require("../bundled/delegates-aria.cjs"),c=require("../bundled/component-enum.cjs");var l=c.t([`accent`,`announcement`,`cta`,`success`,`alert`],`accent`),u=c.t([`filled`,`outlined`,`ghost`,`outlined-light`],`ghost`),d=class extends o.t(e.t(s.t(t.t))){constructor(...e){super(...e),this.splitIndicator=`chevron-down-line`,this.disabled=!1,this.indicatorAriaLabel=null,this._actionExpanded=!1,this._onActionExpandedChange=()=>{this._actionExpanded=this.action.dataset.expanded===`true`},this._indicatorExpanded=!1,this._onIndicatorExpandedChange=()=>{this._indicatorExpanded=this.indicator.dataset.expanded===`true`}}get action(){return this._action}get indicator(){return this._indicator}handleActionClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}return this.$emit(`action-click`,void 0,{bubbles:!1}),!0}handleIndicatorClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}return this.$emit(`indicator-click`,void 0,{bubbles:!1}),!0}};r.t([t.m],d.prototype,`connotation`,void 0),r.t([t.m],d.prototype,`shape`,void 0),r.t([t.m],d.prototype,`appearance`,void 0),r.t([t.m],d.prototype,`size`,void 0),r.t([t.m],d.prototype,`label`,void 0),r.t([t.m({attribute:`split-indicator`,mode:`fromView`})],d.prototype,`splitIndicator`,void 0),r.t([t.m({attribute:`disabled`,mode:`boolean`})],d.prototype,`disabled`,void 0),r.t([t.m({attribute:`indicator-aria-label`})],d.prototype,`indicatorAriaLabel`,void 0),r.t([t.A],d.prototype,`_actionExpanded`,void 0),r.t([t.A],d.prototype,`_indicatorExpanded`,void 0);var f=`: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,.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;user-select:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.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)}`,p=e=>i.t(`connotation-${l.parse(e.connotation)}`,`appearance-${u.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-active`,`with-disabled`,[`disabled`,e.disabled],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)]),m=e=>i.t(p(e),[`active`,e._actionExpanded]),h=e=>i.t(p(e),[`active`,e._indicatorExpanded]);function g(e){let r=o.a(e);return t.p`
 		<button
 			${n.t(`_action`)}
 			${n.t(`control`)}
-			class="control ${u}"
+			class="control ${m}"
 			${s.n({ariaExpanded:null,ariaDisabled:e=>e.disabled})}
 			@click="${(e,t)=>e.handleActionClick(t.event)}"
+			@_vvd-anchor-expanded-change="${e=>e._onActionExpandedChange()}"
 		>
 			${e=>r(e.icon,o.i.Slot)}
 			<span class="text">${e=>e.label}</span>
 		</button>
-	`}function f(e){let r=o.a(e);return t.p`
+	`}function _(e){let r=o.a(e);return t.p`
 		<button
 			${n.t(`_indicator`)}
-			class="indicator ${u}"
+			class="indicator ${h}"
 			${s.n({ariaLabel:e=>e.indicatorAriaLabel||e.locale.splitButton.showMoreActionsLabel,ariaExpanded:e=>e.ariaExpanded,ariaDisabled:e=>e.disabled},{onlySpecified:!0})}
 			@click="${(e,t)=>e.handleIndicatorClick(t.event)}"
+			@_vvd-anchor-expanded-change="${e=>e._onIndicatorExpandedChange()}"
 		>
 			${e=>r(e.splitIndicator)}
 		</button>
-	`}var p=t.u(`split-button`,c,e=>t.p` <template>
+	`}var v=t.u(`split-button`,d,e=>t.p` <template>
 		<div class="base" role="group">
-			${d(e)} ${f(e)}
+			${g(e)} ${_(e)}
 			<slot></slot>
 		</div>
-	</template>`,[a.t],{styles:l,shadowOptions:{delegatesFocus:!0}});t.d(p)();
+	</template>`,[a.t],{styles:f,shadowOptions:{delegatesFocus:!0}});t.d(v)();