@vonage/vivid 5.25.0 → 5.28.0

package/kbd-key/index.js

@@ -2,9 +2,10 @@ import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element
 import { t as a } from "../bundled/when.js";
 import { t as o } from "../bundled/decorate.js";
 import { t as s } from "../bundled/class-names.js";
-import { t as c } from "../bundled/platform.js";
+import { t as c } from "../bundled/component-enum.js";
+import { t as l } from "../bundled/platform.js";
 //#region src/lib/kbd-key/kbd-key.scss?inline
-var l = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-color-primary:var(--vvd-kbd-key-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-kbd-key-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-kbd-key-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-kbd-key-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-kbd-key-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-kbd-key-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-kbd-key-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-kbd-key-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}", u = new Set(/* @__PURE__ */ "Alt.Control.Shift.Enter.Tab.Space.Backspace.Escape.ArrowUp.ArrowDown.ArrowLeft.ArrowRight.End.Home.PageUp.PageDown.A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z.0.1.2.3.4.5.6.7.8.9.Mod.Custom".split(".")), d = {
+var u = ":host{vertical-align:middle;display:inline-block}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}", d = /* @__PURE__ */ new Set(/* @__PURE__ */ "Alt.Control.Shift.Enter.Tab.Space.Backspace.Escape.ArrowUp.ArrowDown.ArrowLeft.ArrowRight.End.Home.PageUp.PageDown.A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z.0.1.2.3.4.5.6.7.8.9.Mod.Custom".split(".")), f = {
 	Enter: "↵",
 	Tab: "⇥",
 	Space: "␣",
@@ -21,10 +22,10 @@ var l = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-c
 	Home: "Home",
 	PageUp: "PgUp",
 	PageDown: "PgDn"
-}, f = {
+}, p = {
 	Control: "⌃",
 	Alt: "⌥"
-}, p = {
+}, m = {
 	Enter: "Enter",
 	Tab: "Tab",
 	Space: "Space",
@@ -34,28 +35,36 @@ var l = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-c
 	ArrowDown: "Down Arrow",
 	ArrowLeft: "Left Arrow",
 	ArrowRight: "Right Arrow"
-}, m = {
+}, h = {
 	Control: "Control",
 	Alt: "Option"
-}, h = class extends r {
+}, g = c([
+	"outlined",
+	"subtle",
+	"dropshadow"
+], "outlined"), _ = class extends r {
 	get _isApple() {
-		return this.keyboard === "apple" ? !0 : this.keyboard === "standard" ? !1 : c();
+		return this.keyboard === "apple" || this.keyboard !== "standard" && l();
 	}
 	get _displayLabel() {
-		return !this.name || this.name === "Custom" ? "" : u.has(this.name) ? this.name === "Mod" ? this._isApple ? "⌘" : "Ctrl" : this._isApple && this.name in f ? f[this.name] : d[this.name] ?? this.name : (console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`), "");
+		return !this.name || this.name === "Custom" ? "" : d.has(this.name) ? this.name === "Mod" ? this._isApple ? "⌘" : "Ctrl" : this._isApple && this.name in p ? p[this.name] : f[this.name] ?? this.name : (console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`), "");
 	}
 	get _ariaKeyLabel() {
-		return !this.name || this.name === "Custom" ? null : this.name === "Mod" ? this._isApple ? "Command" : null : this._isApple && this.name in m ? m[this.name] : p[this.name] ?? null;
+		return !this.name || this.name === "Custom" ? null : this.name === "Mod" ? this._isApple ? "Command" : null : this._isApple && this.name in h ? h[this.name] : m[this.name] ?? null;
 	}
 	_getKeyshortcutsKey() {
 		return this.keyshortcutsKey === void 0 ? this.name ? this.name === "Custom" ? this.textContent.trim() || null : this.name === "Mod" ? this._isApple ? "Meta" : "Control" : this.name : null : this.keyshortcutsKey || null;
 	}
 };
+o([t], _.prototype, "name", void 0), o([t], _.prototype, "keyboard", void 0), o([t], _.prototype, "appearance", void 0), o([t], _.prototype, "size", void 0), o([t({ attribute: "keyshortcuts-key" })], _.prototype, "keyshortcutsKey", void 0);
 //#endregion
-//#region src/lib/kbd-key/index.ts
-o([t], h.prototype, "name", void 0), o([t], h.prototype, "keyboard", void 0), o([t], h.prototype, "appearance", void 0), o([t], h.prototype, "size", void 0), o([t({ attribute: "keyshortcuts-key" })], h.prototype, "keyshortcutsKey", void 0), e(i("kbd-key", h, () => n`<kbd
-		class="${(e) => s("base", [`appearance-${e.appearance}`, !!e.appearance], [`size-${e.size}`, !!e.size])}"
+//#region src/lib/kbd-key/definition.ts
+var v = i("kbd-key", _, () => n`<kbd
+		class="${(e) => s("base", "connotation-accent", `appearance-${g.parse(e.appearance)}`, "with-idle", [`size-${e.size}`, !!e.size])}"
 		aria-label="${(e) => e._ariaKeyLabel}"
 		>${a((e) => e.name === "Custom", n`<slot></slot>`)}${a((e) => !!(e.name && e.name !== "Custom" && e._displayLabel), n`${(e) => e._displayLabel}`)}</kbd
-	>`, [], { styles: l }))();
+	>`, [], { styles: u });
+//#endregion
+//#region src/lib/kbd-key/index.ts
+e(v)();
 //#endregion

package/kbd-shortcut/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition46.cjs");
+const require_definition = require("../unbundled/definition47.cjs");
 exports.VwcKbdShortcutElement = require_definition.KbdShortcut;
 exports.kbdShortcutDefinition = require_definition.kbdShortcutDefinition;
 exports.registerKbdShortcut = require_definition.registerKbdShortcut;

package/kbd-shortcut/definition.js

@@ -1,2 +1,2 @@
-import { n as registerKbdShortcut, r as KbdShortcut, t as kbdShortcutDefinition } from "../unbundled/definition46.js";
+import { n as registerKbdShortcut, r as KbdShortcut, t as kbdShortcutDefinition } from "../unbundled/definition47.js";
 export { KbdShortcut as VwcKbdShortcutElement, kbdShortcutDefinition, registerKbdShortcut };

package/kbd-shortcut/index.cjs

@@ -1,3 +1,3 @@
-const e=require(`../bundled/vivid-element.cjs`);var t=`:host{display:inline-block}.base{white-space:nowrap;align-items:center;gap:.3em;display:inline-flex}`,n=new Set([`Control`,`Alt`,`Shift`,`Meta`]),r=class extends e.t{getKeyshortcutsValue(){let e=Array.from(this.children).filter(e=>typeof e._getKeyshortcutsKey==`function`);if(e.length===0)return null;let t=[];for(let n of e){let e=n._getKeyshortcutsKey();e!==null&&t.push(e)}if(t.length===0)return null;let r=t.filter(e=>n.has(e)),i=t.filter(e=>!n.has(e));return[...r,...i].join(`+`)}},i=e.u(`kbd-shortcut`,r,()=>e.p`<span class="base" role="group"
+const e=require("../bundled/vivid-element.cjs");var t=`:host{display:inline-block}.base{white-space:nowrap;align-items:center;gap:.3em;display:inline-flex}`,n=new Set([`Control`,`Alt`,`Shift`,`Meta`]),r=class extends e.t{getKeyshortcutsValue(){let e=Array.from(this.children).filter(e=>typeof e._getKeyshortcutsKey==`function`);if(e.length===0)return null;let t=[];for(let n of e){let e=n._getKeyshortcutsKey();e!==null&&t.push(e)}if(t.length===0)return null;let r=t.filter(e=>n.has(e)),i=t.filter(e=>!n.has(e));return[...r,...i].join(`+`)}},i=e.u(`kbd-shortcut`,r,()=>e.p`<span class="base" role="group"
 		><slot></slot
 	></span>`,[],{styles:t});e.d(i)();

package/kbd-shortcut/index.js

@@ -1,14 +1,11 @@
 import { d as e, p as t, t as n, u as r } from "../bundled/vivid-element.js";
 //#region src/lib/kbd-shortcut/kbd-shortcut.scss?inline
-var i = ":host{display:inline-block}.base{white-space:nowrap;align-items:center;gap:.3em;display:inline-flex}", a = new Set([
+var i = ":host{display:inline-block}.base{white-space:nowrap;align-items:center;gap:.3em;display:inline-flex}", a = /* @__PURE__ */ new Set([
 	"Control",
 	"Alt",
 	"Shift",
 	"Meta"
-]);
-//#endregion
-//#region src/lib/kbd-shortcut/index.ts
-e(r("kbd-shortcut", class extends n {
+]), o = r("kbd-shortcut", class extends n {
 	getKeyshortcutsValue() {
 		let e = Array.from(this.children).filter((e) => typeof e._getKeyshortcutsKey == "function");
 		if (e.length === 0) return null;
@@ -23,5 +20,8 @@ e(r("kbd-shortcut", class extends n {
 	}
 }, () => t`<span class="base" role="group"
 		><slot></slot
-	></span>`, [], { styles: i }))();
+	></span>`, [], { styles: i });
+//#endregion
+//#region src/lib/kbd-shortcut/index.ts
+e(o)();
 //#endregion

package/layout/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition48.cjs");
+const require_definition = require("../unbundled/definition49.cjs");
 exports.VwcLayoutElement = require_definition.Layout;
 exports.layoutDefinition = require_definition.layoutDefinition;
 exports.registerLayout = require_definition.registerLayout;

package/layout/definition.js

@@ -1,2 +1,2 @@
-import { n as registerLayout, r as Layout, t as layoutDefinition } from "../unbundled/definition48.js";
+import { n as registerLayout, r as Layout, t as layoutDefinition } from "../unbundled/definition49.js";
 export { Layout as VwcLayoutElement, layoutDefinition, registerLayout };

package/layout/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`);var r=class extends e.t{};t.t([e.m],r.prototype,`gutters`,void 0),t.t([e.m({attribute:`column-basis`})],r.prototype,`columnBasis`,void 0),t.t([e.m({attribute:`column-spacing`})],r.prototype,`columnSpacing`,void 0),t.t([e.m({attribute:`row-spacing`})],r.prototype,`rowSpacing`,void 0),t.t([e.m({attribute:`auto-sizing`})],r.prototype,`autoSizing`,void 0);var i=`.control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}`,a=e.p` <div
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/decorate.cjs"),n=require("../bundled/class-names.cjs");var r=class extends e.t{};t.t([e.m],r.prototype,`gutters`,void 0),t.t([e.m({attribute:`column-basis`})],r.prototype,`columnBasis`,void 0),t.t([e.m({attribute:`column-spacing`})],r.prototype,`columnSpacing`,void 0),t.t([e.m({attribute:`row-spacing`})],r.prototype,`rowSpacing`,void 0),t.t([e.m({attribute:`auto-sizing`})],r.prototype,`autoSizing`,void 0);var i=`.control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}`,a=e.p` <div
 	class="${e=>n.t(`control`,[`column-basis-${e.columnBasis}`,!!e.columnBasis],[`gutters-${e.gutters}`,!!e.gutters],[`column-spacing-${e.columnSpacing}`,!!e.columnSpacing],[`row-spacing-${e.rowSpacing?e.rowSpacing:e.columnSpacing}`,!!e.rowSpacing||!!e.columnSpacing],[`auto-sizing-${e.autoSizing}`,!!e.autoSizing])}"
 >
 	<slot></slot>

package/layout/index.js

@@ -3,11 +3,15 @@ import { t as a } from "../bundled/decorate.js";
 import { t as o } from "../bundled/class-names.js";
 //#region src/lib/layout/layout.ts
 var s = class extends r {};
+a([t], s.prototype, "gutters", void 0), a([t({ attribute: "column-basis" })], s.prototype, "columnBasis", void 0), a([t({ attribute: "column-spacing" })], s.prototype, "columnSpacing", void 0), a([t({ attribute: "row-spacing" })], s.prototype, "rowSpacing", void 0), a([t({ attribute: "auto-sizing" })], s.prototype, "autoSizing", void 0);
 //#endregion
-//#region src/lib/layout/index.ts
-a([t], s.prototype, "gutters", void 0), a([t({ attribute: "column-basis" })], s.prototype, "columnBasis", void 0), a([t({ attribute: "column-spacing" })], s.prototype, "columnSpacing", void 0), a([t({ attribute: "row-spacing" })], s.prototype, "rowSpacing", void 0), a([t({ attribute: "auto-sizing" })], s.prototype, "autoSizing", void 0), e(i("layout", s, n` <div
+//#region src/lib/layout/layout.scss?inline
+var c = ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}", l = n` <div
 	class="${(e) => o("control", [`column-basis-${e.columnBasis}`, !!e.columnBasis], [`gutters-${e.gutters}`, !!e.gutters], [`column-spacing-${e.columnSpacing}`, !!e.columnSpacing], [`row-spacing-${e.rowSpacing ? e.rowSpacing : e.columnSpacing}`, !!e.rowSpacing || !!e.columnSpacing], [`auto-sizing-${e.autoSizing}`, !!e.autoSizing])}"
 >
 	<slot></slot>
-</div>`, [], { styles: ".control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-inline{margin:0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.gutters-small-block{margin:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}" }))();
+</div>`, u = i("layout", s, l, [], { styles: c });
+//#endregion
+//#region src/lib/layout/index.ts
+e(u)();
 //#endregion

package/lib/accordion-item/accordion-item.d.ts

@@ -1,8 +1,13 @@
-import { Appearance, Size } from '../enums';
+import { Size } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { ExtractFromEnum } from '../../shared/utils/enums';
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
 export type AccordionItemSize = ExtractFromEnum<Size, Size.Condensed | Size.Normal>;
-export type AccordionItemAppearance = ExtractFromEnum<Appearance, Appearance.Ghost | Appearance.Filled | Appearance.GhostLight>;
+export declare const accordionItemAppearance: {
+    parse: (value: unknown) => "filled" | "ghost" | "ghost-light";
+    defaultValue: "filled" | "ghost" | "ghost-light";
+};
+export type AccordionItemAppearance = ComponentEnum<typeof accordionItemAppearance>;
 declare const AccordionItem_base: {
     new (...args: any[]): {
         iconTrailing: boolean;
@@ -10,7 +15,7 @@ declare const AccordionItem_base: {
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -426,9 +431,9 @@ declare const AccordionItem_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class AccordionItem extends AccordionItem_base {

package/lib/action-group/action-group.d.ts

@@ -1,7 +1,12 @@
-import { Appearance, Shape } from '../enums.js';
+import { Shape } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { ExtractFromEnum } from '../../shared/utils/enums';
-export type ActionGroupAppearance = ExtractFromEnum<Appearance, Appearance.Fieldset | Appearance.Ghost>;
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
+export declare const actionGroupAppearance: {
+    parse: (value: unknown) => "fieldset" | "ghost";
+    defaultValue: "fieldset" | "ghost";
+};
+export type ActionGroupAppearance = ComponentEnum<typeof actionGroupAppearance>;
 export type ActionGroupShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 declare const ActionGroup_base: {
     new (...args: any[]): {
@@ -423,9 +428,9 @@ declare const ActionGroup_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.js').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class ActionGroup extends ActionGroup_base {

package/lib/alert/alert.d.ts

@@ -1,14 +1,11 @@
-import { Connotation } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
-export declare const CONNOTATION_ICON_MAP: {
-    readonly accent: "megaphone-line";
-    readonly information: "info-line";
-    readonly success: "check-circle-line";
-    readonly warning: "warning-line";
-    readonly announcement: "sparkles-line";
-    readonly alert: "error-line";
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
+export declare const alertConnotation: {
+    parse: (value: unknown) => "alert" | "accent" | "warning" | "success" | "information" | "announcement";
+    defaultValue: "alert" | "accent" | "warning" | "success" | "information" | "announcement";
 };
-export type AlertConnotation = Connotation.Accent | Connotation.Information | Connotation.Success | Connotation.Warning | Connotation.Announcement | Connotation.Alert;
+export type AlertConnotation = ComponentEnum<typeof alertConnotation>;
+export declare const CONNOTATION_ICON_MAP: Record<AlertConnotation, string>;
 export type AlertPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type AlertStrategy = 'fixed' | 'static';
 declare const Alert_base: {
@@ -17,7 +14,7 @@ declare const Alert_base: {
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -433,16 +430,16 @@ declare const Alert_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
-        get locale(): import('../../shared/localization/Locale').Locale;
+        get locale(): import('../../shared/localization/Locale.ts').Locale;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -858,9 +855,9 @@ declare const Alert_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class Alert extends Alert_base {

package/lib/avatar/avatar.d.ts

@@ -1,8 +1,17 @@
-import { Appearance, Connotation, Shape, Size } from '../enums.js';
+import { Shape, Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { ExtractFromEnum } from '../../shared/utils/enums';
-export type AvatarConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
-export type AvatarAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Duotone | Appearance.Subtle>;
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
+export declare const avatarConnotation: {
+    parse: (value: unknown) => "accent" | "cta";
+    defaultValue: "accent" | "cta";
+};
+export type AvatarConnotation = ComponentEnum<typeof avatarConnotation>;
+export declare const avatarAppearance: {
+    parse: (value: unknown) => "filled" | "outlined" | "duotone" | "subtle";
+    defaultValue: "filled" | "outlined" | "duotone" | "subtle";
+};
+export type AvatarAppearance = ComponentEnum<typeof avatarAppearance>;
 export type AvatarShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 export type AvatarSize = ExtractFromEnum<Size, Size.Condensed | Size.Normal | Size.Expanded>;
 declare const Avatar_base: {
@@ -16,7 +25,7 @@ declare const Avatar_base: {
         target?: "_self" | "_blank" | "_parent" | "_top";
         type?: string;
         control: HTMLAnchorElement;
-        _renderLinkElement: <T extends any>(content: import('@microsoft/fast-element').ViewTemplate<T>, cssClass: import('@microsoft/fast-element').TemplateValue<T>, boundAriaProperties?: import('../../shared/aria/aria-binding-directive.js').BoundAriaProperties<unknown>) => import('@microsoft/fast-element').ViewTemplate<T, any>;
+        _renderLinkElement: <T extends any>(content: import('@microsoft/fast-element').ViewTemplate<T>, cssClass: import('@microsoft/fast-element').TemplateValue<T>, boundAriaProperties?: import('../../shared/aria/aria-binding-directive.ts').BoundAriaProperties<unknown>) => import('@microsoft/fast-element').ViewTemplate<T, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
         focus(...args: any[]): void;
@@ -435,9 +444,9 @@ declare const Avatar_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.js').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class Avatar extends Avatar_base {

package/lib/badge/badge.d.ts

@@ -1,8 +1,17 @@
-import { Appearance, Connotation, Shape, Size } from '../enums.js';
+import { Shape, Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { ExtractFromEnum } from '../../shared/utils/enums';
-export type BadgeConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
-export type BadgeAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle | Appearance.SubtleLight>;
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
+export declare const badgeConnotation: {
+    parse: (value: unknown) => "alert" | "accent" | "warning" | "cta" | "success" | "information" | "announcement";
+    defaultValue: "alert" | "accent" | "warning" | "cta" | "success" | "information" | "announcement";
+};
+export type BadgeConnotation = ComponentEnum<typeof badgeConnotation>;
+export declare const badgeAppearance: {
+    parse: (value: unknown) => "filled" | "duotone" | "subtle" | "subtle-light";
+    defaultValue: "filled" | "duotone" | "subtle" | "subtle-light";
+};
+export type BadgeAppearance = ComponentEnum<typeof badgeAppearance>;
 export type BadgeShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 export type BadgeSize = ExtractFromEnum<Size, Size.Normal | Size.Expanded>;
 declare const Badge_base: {
@@ -12,7 +21,7 @@ declare const Badge_base: {
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.js').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -428,9 +437,9 @@ declare const Badge_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.js').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class Badge extends Badge_base {
@@ -438,6 +447,8 @@ export declare class Badge extends Badge_base {
     shape?: BadgeShape;
     size?: BadgeSize;
     appearance?: BadgeAppearance;
+    count: boolean;
     text?: string;
+    textSecondary?: string;
 }
 export {};

package/lib/badge/badge.template.d.ts

@@ -1,2 +1,3 @@
 import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
-export declare const badgeTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<any, any>;
+import { Badge } from './badge';
+export declare const badgeTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<Badge, any>;

package/lib/banner/banner.d.ts

@@ -1,20 +1,18 @@
-import { Connotation } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
-export declare const CONNOTATION_ICON_MAP: {
-    readonly information: "info-solid";
-    readonly announcement: "megaphone-solid";
-    readonly success: "check-circle-solid";
-    readonly warning: "warning-solid";
-    readonly alert: "error-solid";
+import { ComponentEnum } from '../../shared/utils/component-enum.ts';
+export declare const bannerConnotation: {
+    parse: (value: unknown) => "alert" | "warning" | "success" | "information" | "announcement";
+    defaultValue: "alert" | "warning" | "success" | "information" | "announcement";
 };
-export type BannerConnotation = Connotation.Information | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export type BannerConnotation = ComponentEnum<typeof bannerConnotation>;
+export declare const CONNOTATION_ICON_MAP: Record<BannerConnotation, string>;
 declare const Banner_base: {
     new (...args: any[]): {
         icon?: string;
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -430,16 +428,16 @@ declare const Banner_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
-        get locale(): import('../../shared/localization/Locale').Locale;
+        get locale(): import('../../shared/localization/Locale.ts').Locale;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: import('../../shared/aria/aria-mixin.ts').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -855,9 +853,9 @@ declare const Banner_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -1279,9 +1277,9 @@ declare const Banner_base: {
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
-        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller').ReactiveController>;
-        _addController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
-        _removeController(controller: import('../../shared/framework/reactive-controller').ReactiveController): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.ts').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.ts').ReactiveController): void;
     };
 } & typeof VividElement;
 export declare class Banner extends Banner_base {