@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/chunk.cjs

@@ -5,16 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -30,18 +20,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-Object.defineProperty(exports, "__commonJSMin", {
-	enumerable: true,
-	get: function() {
-		return __commonJSMin;
-	}
-});
-Object.defineProperty(exports, "__exportAll", {
-	enumerable: true,
-	get: function() {
-		return __exportAll;
-	}
-});
 Object.defineProperty(exports, "__toESM", {
 	enumerable: true,
 	get: function() {

package/unbundled/definition11.cjs

@@ -156,6 +156,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this._hoveringOnThumb = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
@@ -239,6 +240,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -246,6 +248,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -330,6 +333,9 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 		this.thumb.removeEventListener("mouseover", this.#onMouseOver);
 		this.thumb.removeEventListener("mouseout", this.#onMouseOut);
 	}
+	#onVisibilityChange = () => {
+		if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
+	};
 	#onMouseOver = () => {
 		this._hoveringOnThumb = true;
 	};

package/unbundled/definition11.js

@@ -155,6 +155,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this._hoveringOnThumb = false;
 		this._onFocusIn = () => {
 			if (!this.#isNonVisibleFocus) this._focusVisible = true;
+			this.#isNonVisibleFocus = false;
 		};
 		this._onFocusOut = () => {
 			this._focusVisible = false;
@@ -238,6 +239,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.setupDefaultValue();
 		this.setThumbPositionForOrientation(this.direction);
 		this.#registerThumbListeners();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* @internal
@@ -245,6 +247,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	disconnectedCallback() {
 		this.setupListeners(true);
 		this.#unregisterThumbListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
 	}
 	/**
 	* Increment the value by the step
@@ -329,6 +332,9 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 		this.thumb.removeEventListener("mouseover", this.#onMouseOver);
 		this.thumb.removeEventListener("mouseout", this.#onMouseOut);
 	}
+	#onVisibilityChange = () => {
+		if (document.hidden && this.shadowRoot.activeElement !== null) this.#isNonVisibleFocus = true;
+	};
 	#onMouseOver = () => {
 		this._hoveringOnThumb = true;
 	};

package/unbundled/definition13.cjs

@@ -258,14 +258,9 @@ function handleEscapeKey(menu, event) {
 }
 var MenuTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
-	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
-	function handlePopupEvents(x, e, state) {
-		e.stopPropagation();
-		x.open = state;
-	}
 	return _microsoft_fast_element.html`
 		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
-			${anchorSlotTemplate}
+			${require_anchored.anchorSlotTemplateFactory()}
 			<${popupTag}
 				${(0, _microsoft_fast_element.ref)("_popupEl")}
 				:placement=${(x) => x.placement}
@@ -274,8 +269,6 @@ var MenuTemplate = (context) => {
 				:strategy="${(x) => x.positionStrategy}"
 				:offset=${(x) => x.offset || x._popupOffset}
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
-				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
-				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
 			>
 			<div class="${getClasses}">
 				<div class="header">

package/unbundled/definition13.js

@@ -257,14 +257,9 @@ function handleEscapeKey(menu, event) {
 }
 var MenuTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
-	const anchorSlotTemplate = anchorSlotTemplateFactory();
-	function handlePopupEvents(x, e, state) {
-		e.stopPropagation();
-		x.open = state;
-	}
 	return html`
 		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
-			${anchorSlotTemplate}
+			${anchorSlotTemplateFactory()}
 			<${popupTag}
 				${ref("_popupEl")}
 				:placement=${(x) => x.placement}
@@ -273,8 +268,6 @@ var MenuTemplate = (context) => {
 				:strategy="${(x) => x.positionStrategy}"
 				:offset=${(x) => x.offset || x._popupOffset}
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
-				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
-				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
 			>
 			<div class="${getClasses}">
 				<div class="header">

package/unbundled/definition14.cjs

@@ -220,9 +220,10 @@ var AudioPlayer = class extends require_localized.Localized(require_vivid_elemen
 		if (!this.paused && this.#sliderEl.isDragging) {
 			this.pause();
 			this.#dragInterval = window.setInterval(() => {
-				if (!this.#sliderEl.isDragging) {
+				/* v8 ignore else -- @preserve */
+				if (!this.#sliderEl.isDragging || !this.isConnected) {
 					clearInterval(this.#dragInterval);
-					this.play();
+					if (this.isConnected) this.play();
 				}
 			}, 0);
 		}

package/unbundled/definition14.js

@@ -219,9 +219,10 @@ var AudioPlayer = class extends Localized(VividElement) {
 		if (!this.paused && this.#sliderEl.isDragging) {
 			this.pause();
 			this.#dragInterval = window.setInterval(() => {
-				if (!this.#sliderEl.isDragging) {
+				/* v8 ignore else -- @preserve */
+				if (!this.#sliderEl.isDragging || !this.isConnected) {
 					clearInterval(this.#dragInterval);
-					this.play();
+					if (this.isConnected) this.play();
 				}
 			}, 0);
 		}

package/unbundled/definition2.cjs

@@ -1,86 +1,16 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
+const require_numberConverter = require("./numberConverter.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region ../icons/dist/index.mjs
-var version = "4.9.0";
-var ICONS_BASE_URL = "https://icon.resources.vonage.com";
-var ICONS_VERSION = version;
-`${ICONS_BASE_URL}${ICONS_VERSION}`;
-//#endregion
-//#region src/shared/utils/numberConverter.ts
-var numberConverter = {
-	toView(value) {
-		if (value === void 0) return null;
-		return value.toString();
-	},
-	fromView(value) {
-		if (typeof value === "string") value = parseFloat(value.toString());
-		if (typeof value !== "number") return;
-		return isNaN(value) || !isFinite(value) ? void 0 : value;
-	}
-};
-//#endregion
-//#region src/lib/icon/icon.placeholder.ts
-var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
-    <g>
-        <g stroke-width="6" stroke-linecap="round" fill="none">
-            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
-            </path>
-            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
-            </path>
-            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
-            </animateTransform>
-        </g>
-    </g>
-</svg>`;
-//#endregion
 //#region src/lib/icon/icon.ts
 var PLACEHOLDER_DELAY = 500;
 var PLACEHOLDER_TIMEOUT = 2e3;
-var baseUrlTemplate = (resource, version) => [
-	ICONS_BASE_URL,
-	`v${version}`,
-	resource
-].join("/");
-var assertIsValidResponse = ({ ok, headers }) => {
-	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
-};
-var extractSvg = (response) => {
-	assertIsValidResponse(response);
-	return response.text();
-};
-var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
-var normalizeKey = (iconId) => (iconId ?? "").trim();
-var iconCache = /* @__PURE__ */ new Map();
-var resolveIcon = (iconId, signal) => {
-	const key = normalizeKey(iconId);
-	if (!key) return Promise.resolve("");
-	const cached = iconCache.get(key);
-	if (cached && !cached.signal?.aborted) return cached.promise;
-	const promise = loadSvg(key, signal).then((svg) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise && signal.aborted) {
-			iconCache.delete(key);
-			throw signal.reason ?? new DOMException("Aborted", "AbortError");
-		}
-		return svg;
-	}).catch((err) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise) iconCache.delete(key);
-		throw err;
-	});
-	iconCache.set(key, {
-		promise,
-		signal
-	});
-	return promise;
-};
 /**
 * @public
 * @component icon
@@ -106,15 +36,15 @@ var Icon = class extends require_vivid_element.VividElement {
 		let timeout = setTimeout(() => {
 			/* v8 ignore else -- @preserve */
 			if (this.#currentRequestId === requestId) {
-				this._svg = PLACEHOLDER_ICON;
+				this._svg = require_numberConverter.PLACEHOLDER_ICON;
 				timeout = setTimeout(() => {
 					/* v8 ignore else -- @preserve */
-					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+					if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
 				}, PLACEHOLDER_TIMEOUT);
 			}
 		}, PLACEHOLDER_DELAY);
 		try {
-			const svg = await resolveIcon(this.name, this.#abortController.signal);
+			const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
 			/* v8 ignore else -- @preserve */
 			if (this.#currentRequestId === requestId) this._svg = svg;
 		} catch {
@@ -128,7 +58,7 @@ var Icon = class extends require_vivid_element.VividElement {
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: numberConverter })], Icon.prototype, "size", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);

package/unbundled/definition2.js

@@ -1,85 +1,15 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
 import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
 import { attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region ../icons/dist/index.mjs
-var version = "4.9.0";
-var ICONS_BASE_URL = "https://icon.resources.vonage.com";
-var ICONS_VERSION = version;
-`${ICONS_BASE_URL}${ICONS_VERSION}`;
-//#endregion
-//#region src/shared/utils/numberConverter.ts
-var numberConverter = {
-	toView(value) {
-		if (value === void 0) return null;
-		return value.toString();
-	},
-	fromView(value) {
-		if (typeof value === "string") value = parseFloat(value.toString());
-		if (typeof value !== "number") return;
-		return isNaN(value) || !isFinite(value) ? void 0 : value;
-	}
-};
-//#endregion
-//#region src/lib/icon/icon.placeholder.ts
-var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
-    <g>
-        <g stroke-width="6" stroke-linecap="round" fill="none">
-            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
-            </path>
-            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
-            </path>
-            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
-            </animateTransform>
-        </g>
-    </g>
-</svg>`;
-//#endregion
 //#region src/lib/icon/icon.ts
 var PLACEHOLDER_DELAY = 500;
 var PLACEHOLDER_TIMEOUT = 2e3;
-var baseUrlTemplate = (resource, version) => [
-	ICONS_BASE_URL,
-	`v${version}`,
-	resource
-].join("/");
-var assertIsValidResponse = ({ ok, headers }) => {
-	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
-};
-var extractSvg = (response) => {
-	assertIsValidResponse(response);
-	return response.text();
-};
-var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
-var normalizeKey = (iconId) => (iconId ?? "").trim();
-var iconCache = /* @__PURE__ */ new Map();
-var resolveIcon = (iconId, signal) => {
-	const key = normalizeKey(iconId);
-	if (!key) return Promise.resolve("");
-	const cached = iconCache.get(key);
-	if (cached && !cached.signal?.aborted) return cached.promise;
-	const promise = loadSvg(key, signal).then((svg) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise && signal.aborted) {
-			iconCache.delete(key);
-			throw signal.reason ?? new DOMException("Aborted", "AbortError");
-		}
-		return svg;
-	}).catch((err) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise) iconCache.delete(key);
-		throw err;
-	});
-	iconCache.set(key, {
-		promise,
-		signal
-	});
-	return promise;
-};
 /**
 * @public
 * @component icon

package/unbundled/definition21.cjs

@@ -5,7 +5,6 @@ const require_enums = require("./enums.cjs");
 const require_calendar_event = require("./calendar-event.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-let ramda = require("ramda");
 //#region src/lib/calendar/calendar.scss?inline
 var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
 //#endregion
@@ -67,7 +66,7 @@ var getEventContext = function(e) {
 		...day != void 0 && { day },
 		...hour != void 0 && { hour }
 	};
-	return (0, ramda.not)((0, ramda.isEmpty)(context)) ? context : null;
+	return Object.keys(context).length > 0 ? context : null;
 };
 //#endregion
 //#region src/lib/calendar/calendar.ts

package/unbundled/definition21.js

@@ -4,7 +4,6 @@ import { f as Sticky } from "./enums.js";
 import { t as CalendarEvent } from "./calendar-event.js";
 import { Updates, attr, html, repeat } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-import { isEmpty, not } from "ramda";
 //#region src/lib/calendar/calendar.scss?inline
 var calendar_default = ":host{block-size:inherit;max-block-size:inherit;display:block;overflow:auto}ol{margin:0;padding:0;list-style:none}[role=grid i]{z-index:0;grid-template-columns:min-content auto;grid-template-areas:\"filler column-headers\"\"row-headers calendar\";inline-size:max(100%,500px);min-inline-size:880px;margin:auto;display:grid;position:relative}.row-headers{grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px;display:grid}.row-headers>[role=rowheader i]{justify-content:flex-end;align-items:flex-end;display:flex}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);text-transform:uppercase;white-space:nowrap;font-size:small;line-height:1}.sticky-column .row-headers,.sticky-all .row-headers{z-index:1;background-color:var(--calendar-column-background-color,var(--vvd-color-canvas));margin-inline-end:3px;position:sticky;inset-inline-start:0}.calendar-row{display:contents}.calendar-grid-presentation{background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);border-radius:8px;grid-template:repeat(24,1fr)/repeat(7,1fr);grid-area:calendar;grid-auto-flow:column;gap:1px;display:grid;overflow:hidden}.hours{display:contents}.hours>[role=listitem i]{grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));pointer-events:none;position:relative}.hours>[role=listitem i]:not(:first-child):after{border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px;position:absolute}.hours>[role=listitem i]:nth-child(24n+1){--row:1}.hours>[role=listitem i]:nth-child(24n+2){--row:2}.hours>[role=listitem i]:nth-child(24n+3){--row:3}.hours>[role=listitem i]:nth-child(24n+4){--row:4}.hours>[role=listitem i]:nth-child(24n+5){--row:5}.hours>[role=listitem i]:nth-child(24n+6){--row:6}.hours>[role=listitem i]:nth-child(24n+7){--row:7}.hours>[role=listitem i]:nth-child(24n+8){--row:8}.hours>[role=listitem i]:nth-child(24n+9){--row:9}.hours>[role=listitem i]:nth-child(24n+10){--row:10}.hours>[role=listitem i]:nth-child(24n+11){--row:11}.hours>[role=listitem i]:nth-child(24n+12){--row:12}.hours>[role=listitem i]:nth-child(24n+13){--row:13}.hours>[role=listitem i]:nth-child(24n+14){--row:14}.hours>[role=listitem i]:nth-child(24n+15){--row:15}.hours>[role=listitem i]:nth-child(24n+16){--row:16}.hours>[role=listitem i]:nth-child(24n+17){--row:17}.hours>[role=listitem i]:nth-child(24n+18){--row:18}.hours>[role=listitem i]:nth-child(24n+19){--row:19}.hours>[role=listitem i]:nth-child(24n+20){--row:20}.hours>[role=listitem i]:nth-child(24n+21){--row:21}.hours>[role=listitem i]:nth-child(24n+22){--row:22}.hours>[role=listitem i]:nth-child(24n+23){--row:23}.hours>[role=listitem i]:nth-child(24n+24){--row:24}[role=gridcell i]{grid-auto-flow:column;gap:1px;display:grid}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";position:absolute;inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{grid-column:var(--column);grid-row:1/25;position:relative}.columns>[role=gridcell i]:first-child{--column:1}.columns>[role=gridcell i]:nth-child(2){--column:2}.columns>[role=gridcell i]:nth-child(3){--column:3}.columns>[role=gridcell i]:nth-child(4){--column:4}.columns>[role=gridcell i]:nth-child(5){--column:5}.columns>[role=gridcell i]:nth-child(6){--column:6}.columns>[role=gridcell i]:nth-child(7){--column:7}.columns>[role=gridcell i]:not(:first-child):after{border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";block-size:100%;margin-inline-start:-1px;position:absolute}.column-headers{grid-area:column-headers;grid-template-columns:repeat(7,1fr);display:grid}.column-headers [role=columnheader i] h2{font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr;align-items:baseline;margin:0;display:grid}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}.sticky-header .column-headers,.sticky-all .column-headers{z-index:1;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky;inset-block-start:0}.filler{background-color:#0000;grid-area:filler}.sticky-header .filler,.sticky-all .filler,.sticky-column .filler{z-index:2;background-color:var(--calendar-header-background-color,var(--vvd-color-canvas));margin-block-end:3px;position:sticky}.sticky-column .filler{inset-inline-start:0}.sticky-header .filler{inset-block-start:0}.sticky-all .filler{inset-block-start:0;inset-inline-start:0}";
 //#endregion
@@ -66,7 +65,7 @@ var getEventContext = function(e) {
 		...day != void 0 && { day },
 		...hour != void 0 && { hour }
 	};
-	return not(isEmpty(context)) ? context : null;
+	return Object.keys(context).length > 0 ? context : null;
 };
 //#endregion
 //#region src/lib/calendar/calendar.ts

package/unbundled/definition22.cjs

@@ -9,12 +9,13 @@ const require_definition$1 = require("./definition8.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/card/card.scss?inline
-var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 //#endregion
 //#region src/lib/card/card.ts
 /**
 * @public
 * @component card
+* @slot body - The body slot is for the main content of the card. Displayed between the header and footer content.
 * @slot graphic - The graphic slot overrides the icon property.
 * @slot media - The media slot is mainly for images or video content above the card header.
 * @slot meta - The meta slot is for action content in the card header.
@@ -38,12 +39,13 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
 	attribute: "clickable-card"
 })], Card.prototype, "clickableCard", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "bodySlottedContent", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "footerSlottedContent", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "graphicSlottedContent", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "hasMetaSlottedContent", void 0);
 //#endregion
 //#region src/lib/card/card.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
 function renderHeaderIcon(iconTag) {
 	return _microsoft_fast_element.html`
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
@@ -117,6 +119,9 @@ function renderCardContent(context) {
 								${renderHeader(iconTag)} ${renderMetaSlot()}
 							</div>
 							${(0, _microsoft_fast_element.when)((x) => x.text, text())}
+							<div class="body-wrapper">
+								<slot name="body" ${(0, _microsoft_fast_element.slotted)("bodySlottedContent")}></slot>
+							</div>
 						</div>
 					</slot>
 					<div class="footer">

package/unbundled/definition22.js

@@ -8,12 +8,13 @@ import { r as Elevation, t as elevationDefinition } from "./definition8.js";
 import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/card/card.scss?inline
-var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):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))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.body-wrapper{padding-top:16px}.hide-header .body-wrapper{padding-top:0}.hide-body .body-wrapper{display:none}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 //#endregion
 //#region src/lib/card/card.ts
 /**
 * @public
 * @component card
+* @slot body - The body slot is for the main content of the card. Displayed between the header and footer content.
 * @slot graphic - The graphic slot overrides the icon property.
 * @slot media - The media slot is mainly for images or video content above the card header.
 * @slot meta - The meta slot is for action content in the card header.
@@ -37,12 +38,13 @@ __decorate([attr({
 	mode: "boolean",
 	attribute: "clickable-card"
 })], Card.prototype, "clickableCard", void 0);
+__decorate([observable], Card.prototype, "bodySlottedContent", void 0);
 __decorate([observable], Card.prototype, "footerSlottedContent", void 0);
 __decorate([observable], Card.prototype, "graphicSlottedContent", void 0);
 __decorate([observable], Card.prototype, "hasMetaSlottedContent", void 0);
 //#endregion
 //#region src/lib/card/card.template.ts
-var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
+var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
 function renderHeaderIcon(iconTag) {
 	return html`
 		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
@@ -116,6 +118,9 @@ function renderCardContent(context) {
 								${renderHeader(iconTag)} ${renderMetaSlot()}
 							</div>
 							${when((x) => x.text, text())}
+							<div class="body-wrapper">
+								<slot name="body" ${slotted("bodySlottedContent")}></slot>
+							</div>
 						</div>
 					</slot>
 					<div class="footer">