@vonage/vivid 5.23.1-preview.0 → 5.23.1

package/unbundled/definition21.js

@@ -1,285 +1,158 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-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 { n as delegateAria } from "./delegates-aria.js";
+import { t as Linkable } from "./linkable.js";
+import { t as Appearance } from "./enums.js";
+import { r as Elevation, t as elevationDefinition } from "./definition7.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#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}";
+//#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}.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/calendar/helpers/calendar.keyboard-interactions.ts
-var ARROW_UP = "ArrowUp";
-var ARROW_RIGHT = "ArrowRight";
-var ARROW_DOWN = "ArrowDown";
-var ARROW_LEFT = "ArrowLeft";
-function isCellOrHeader(el) {
-	return el instanceof HTMLElement && (el.matches("[role=\"gridcell\"i]") || el.matches("[role=\"columnheader\"i]"));
-}
-var getCellOrHeader = (f) => f.matches("[role=\"columnheader\"i]") ? "[role=\"gridcell\"i]" : "[role=\"columnheader\"i]";
-function getNextFocusableGridElement(key, activeElement) {
-	/* v8 ignore else -- @preserve */
-	if (activeElement.parentNode instanceof HTMLElement) switch (key) {
-		case ARROW_RIGHT: return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
-		case ARROW_LEFT: return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
-		case ARROW_UP:
-		case ARROW_DOWN: {
-			const { children } = activeElement.parentNode;
-			const i = Array.from(children).indexOf(activeElement);
-			return this.shadowRoot.querySelector(`${getCellOrHeader(activeElement)}:nth-child(${i + 1})`);
-		}
-	}
-}
-function getHeaderDescendantGridCell(key, activeElement) {
-	if (key !== "ArrowDown") return;
-	const header = activeElement.closest("[role=\"columnheader\"i]");
-	const columnHeaders = this.shadowRoot.querySelectorAll("[role=\"columnheader\"i]");
-	const i = Array.from(columnHeaders).indexOf(header);
-	return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
-}
-//#endregion
-//#region src/lib/calendar/helpers/calendar.event-context.ts
-function getDay(el) {
-	const cellOrHeader = el.closest("[role=\"gridcell\"i], [role=\"columnheader\"i]");
-	if (cellOrHeader) {
-		const { parentElement } = cellOrHeader;
-		/* v8 ignore else -- @preserve */
-		if (parentElement) return Array.from(parentElement.children).indexOf(cellOrHeader);
-	}
-}
-function getHour(e, el, hours) {
-	const rowHeaderOrCell = el.closest("[role=\"rowheader\"], [role=\"gridcell\"i]");
-	if (rowHeaderOrCell) {
-		const DOMRect = rowHeaderOrCell.getBoundingClientRect();
-		const hour = (e.clientY - DOMRect.y) / (DOMRect.height / hours);
-		return Math.round((hour + Number.EPSILON) * 100) / 100;
-	}
-}
-var getEventContext = function(e) {
-	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
-	const [el] = e.composedPath();
-	if (!(el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
-	const day = getDay(el);
-	let hour;
-	if (e instanceof MouseEvent) hour = getHour(e, el, this._hours);
-	const context = {
-		...day != void 0 && { day },
-		...hour != void 0 && { hour }
-	};
-	return Object.keys(context).length > 0 ? context : null;
-};
-//#endregion
-//#region src/lib/calendar/calendar.ts
-var isScrollable = (node) => {
-	const overflowY = window.getComputedStyle(node).overflowY;
-	const overflowX = window.getComputedStyle(node).overflowX;
-	return {
-		vertical: (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight,
-		horizontal: (overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth
-	};
-};
+//#region src/lib/card/card.ts
 /**
 * @public
-* @component calendar
-* @slot - Default slot.
-* @slot day-0 - Assign elements to corresponding day column using this slot.
-* @slot day-1 - Assign elements to corresponding day column using this slot.
-* @slot day-2 - Assign elements to corresponding day column using this slot.
-* @slot day-3 - Assign elements to corresponding day column using this slot.
-* @slot day-4 - Assign elements to corresponding day column using this slot.
-* @slot day-5 - Assign elements to corresponding day column using this slot.
-* @slot day-6 - Assign elements to corresponding day column using this slot.
+* @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.
+* @slot footer - The footer slot is for content in the card footer.
+* @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
+* @testQuery headline headline
 */
-var Calendar = class extends VividElement {
+var Card = class extends Linkable(VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.hour12 = false;
-		this.stickyMode = Sticky.All;
-		this._hours = 24;
-		this._days = 7;
-		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(i + 1)));
-		this._generateDaysArr = (dateArr) => {
-			if (dateArr.length == this._days) return dateArr;
-			const lastDate = new Date(dateArr[dateArr.length - 1]);
-			lastDate.setDate(lastDate.getDate() + 1);
-			return this._generateDaysArr([...dateArr, lastDate]);
-		};
-		this.getEventContext = getEventContext;
-	}
-	get #activeCalendarEvent() {
-		const { activeElement } = document;
-		return activeElement instanceof CalendarEvent ? activeElement : null;
-	}
-	getCalendarEventContainingCell(calendarEvent) {
-		const slotName = calendarEvent.getAttribute("slot");
-		return this.shadowRoot.querySelector(`slot[name="${slotName}"i]`).parentElement;
-	}
-	arrowKeysInteractions(key) {
-		const { activeElement } = this.shadowRoot;
-		let focusNext;
-		if (isCellOrHeader(activeElement)) focusNext = getNextFocusableGridElement.call(this, key, activeElement);
-		else if (this.#activeCalendarEvent) focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
-		else if (activeElement?.matches("em[role=\"button\"i]")) focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
-		else focusNext = this.shadowRoot.querySelector("[role=\"columnheader\"i]");
-		this.activateElement(focusNext);
-	}
-	activateElement(el) {
-		const onBlur = ({ target }) => target.setAttribute("tabindex", "-1");
-		el?.addEventListener("blur", onBlur, { once: true });
-		el?.setAttribute("tabindex", "0");
-		el?.focus();
-	}
-	/**
-	* @internal
-	*/
-	onKeydown({ key }) {
-		const isArrow = [
-			ARROW_UP,
-			ARROW_RIGHT,
-			ARROW_DOWN,
-			ARROW_LEFT
-		].some((predefinedKey) => predefinedKey == key);
-		if (isArrow) this.arrowKeysInteractions(key);
-		return !isArrow;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.initializeScrollPosition();
-	}
-	initializeScrollPosition() {
-		if (!isScrollable(this).vertical) return;
-		const scrollPosition = this.scrollHeight / this._hours * 7;
-		Updates.enqueue(() => {
-			this.scrollTo({ top: scrollPosition });
-		});
+		this.clickableCard = false;
 	}
 };
-__decorate([attr], Calendar.prototype, "datetime", void 0);
-__decorate([attr({ attribute: "start-day" })], Calendar.prototype, "startDay", void 0);
-__decorate([attr], Calendar.prototype, "locales", void 0);
-__decorate([attr({ mode: "boolean" })], Calendar.prototype, "hour12", void 0);
+__decorate([attr], Card.prototype, "appearance", void 0);
+__decorate([attr], Card.prototype, "headline", void 0);
+__decorate([attr], Card.prototype, "subtitle", void 0);
+__decorate([attr], Card.prototype, "text", void 0);
+__decorate([attr], Card.prototype, "icon", void 0);
+__decorate([attr], Card.prototype, "elevation", void 0);
 __decorate([attr({
-	attribute: "sticky-mode",
-	mode: "fromView"
-})], Calendar.prototype, "stickyMode", void 0);
+	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/calendar/helpers/calendar.date-functions.ts
-/**
-* Returns a valid date string from date object e.g. 2020-01-01
-*
-* @remarks
-* This method returns valid date string to be used as html time tag datetime value
-* @param date - js date object
-* @returns a date as a string value in ISO format.
-*/
-function getValidDateString(date) {
-	const twoDigit = (num) => `0${num}`.slice(-2);
-	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+//#region src/lib/card/card.template.ts
+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}>`;
 }
-var weekdaysMap = new Map([["sunday", 0], ["monday", 1]]);
-function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
-	date = new Date(date);
-	let num = weekdaysMap.get(startDay);
-	num ??= 1;
-	const day = date.getDate() - (date.getDay() + 7 - num) % 7;
-	return new Date(date.setDate(day));
+function Headline() {
+	return html`
+		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
+	`;
+}
+function Subtitle() {
+	return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
+}
+function headerContent() {
+	return html`
+		<div class="header-content">
+			${when((x) => x.headline, Headline())}
+			${when((x) => x.subtitle, Subtitle())}
+		</div>
+	`;
 }
-//#endregion
-//#region src/lib/calendar/calendar.template.ts
-var getClasses = ({ stickyMode }) => classNames([`sticky-${stickyMode}`, Boolean(stickyMode)]);
-/**
-* the html days markup
-*
-* @internal
-*/
-var HoursTemplate = () => {
-	return html` <div class="row-headers" role="row">
-		${repeat((x) => x.hoursAsDatetime, html`<span role="rowheader">
-				<time
-					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-		hour: "numeric",
-		minute: "numeric",
-		hour12: false
-	}).format(x)}"
-				>
-					${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-		hour: "numeric",
-		hour12: c.parent.hour12
-	}).format(x)}
-				</time>
-			</span>`)}
-	</div>`;
-};
 /**
-* The html days markup
-*
-* @internal
+header
 */
-var DaysTemplate = () => {
-	return html` <div class="column-headers" role="row">
-		${repeat((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html` <div role="columnheader" tabindex="-1">
-				<time datetime=${(x) => getValidDateString(x)}>
-					<h2>
-						<!-- TODO add to column aria-labelledby or describedby to count
-                  events and related day e.g. "3 events, Sunday, March 8" -->
-						<em
-							tabindex="0"
-							role="button"
-							aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
-		weekday: "long",
-		month: "long",
-		day: "2-digit"
-	}).format(x)}
-						>
-							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { day: "2-digit" }).format(x)}
-						</em>
-						<small aria-hidden="true">
-							${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: "short" }).format(x)}
-						</small>
-					</h2>
-				</time>
-			</div>`)}
+function renderHeader(iconTag) {
+	return html` <div class="header">
+		<slot name="graphic" ${slotted("graphicSlottedContent")}
+			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${when((x) => x.headline || x.subtitle, headerContent())}
 	</div>`;
-};
-var ColumnTemplate = html`
-	<div role="gridcell" tabindex="-1">
-		<slot name="day-${(_, c) => c.index}"></slot>
-	</div>
-`;
-//#endregion
-//#region src/lib/calendar/definition.ts
-/**
-* @internal
-*/
-var calendarDefinition = defineVividComponent("calendar", Calendar, html`
-	<div
-		role="grid"
+}
+function shouldHideHeader(card) {
+	return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+function renderMetaSlot() {
+	return html` <slot name="meta" ${slotted("metaSlottedContent")}></slot> `;
+}
+function text() {
+	return html` <div class="text">${(x) => x.text}</div> `;
+}
+function renderButtonElement(content) {
+	return html`<button
 		class="${getClasses}"
-		@keydown=${(x, c) => x.onKeydown(c.event)}
+		type="button"
+		${delegateAria({ ariaLabelledBy: (x) => x.headline ? "card-headline" : null })}
 	>
-		<div class="filler"></div>
-		${DaysTemplate}
-		<div class="calendar-row" role="rowgroup">
-			${HoursTemplate}
-			<div class="calendar-grid-presentation" role="presentation">
-				<div class="hours" role="list">
-					${repeat((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), html` <div role="listitem"></div>`)}
-				</div>
-				<div class="columns" role="row">
-					${repeat((x) => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
-				</div>
-				<slot></slot>
-			</div>
-		</div>
-	</div>
-`, [], {
-	styles: calendar_default,
-	shadowOptions: { delegatesFocus: true }
-});
+		${content}
+	</button>`;
+}
+function renderCardBaseElement(x, content) {
+	if (x.href) return x._renderLinkElement(content, getClasses);
+	else if (x.clickableCard) return renderButtonElement(content);
+	else return html`<div
+			class="${getClasses}"
+			aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
+		>
+			${content}
+		</div>`;
+}
+function renderCardContent(context) {
+	const iconTag = context.tagFor(Icon);
+	return html`
+		${(x) => renderCardBaseElement(x, html`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${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">
+						<slot name="footer" ${slotted("footerSlottedContent")}></slot>
+					</div>
+				</div> `)}
+	`;
+}
+var CardTemplate = (context) => {
+	const elevationTag = context.tagFor(Elevation);
+	return html`
+		${when((x) => x.appearance !== Appearance.Ghost && x.appearance !== Appearance.Outlined, html`
+			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${when((x) => x.appearance === Appearance.Outlined, html`
+			<${elevationTag} dp='0')}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${when((x) => x.appearance === Appearance.Ghost, html` ${renderCardContent(context)} `)}
+	`;
+};
+//#endregion
+//#region src/lib/card/definition.ts
+/** @internal */
+var cardDefinition = defineVividComponent("card", Card, CardTemplate, [iconDefinition, elevationDefinition], { styles: card_default });
 /**
-* Registers the calendar elements with the design system.
+* Registers the card elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCalendar = createRegisterFunction(calendarDefinition);
+var registerCard = createRegisterFunction(cardDefinition);
 //#endregion
-export { registerCalendar as n, Calendar as r, calendarDefinition as t };
+export { registerCard as n, Card as r, cardDefinition as t };

package/unbundled/definition22.cjs

@@ -1,178 +1,40 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
-const require_decorate = require("./decorate.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
-const require_linkable = require("./linkable.cjs");
-const require_enums = require("./enums.cjs");
-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}.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}";
+//#region src/lib/visually-hidden/visually-hidden.scss?inline
+var visually_hidden_default = ":host{display:contents}slot:not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;display:inline;position:absolute;overflow:hidden}";
 //#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.
-* @slot footer - The footer slot is for content in the card footer.
-* @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-* @testQuery headline headline
-*/
-var Card = class extends require_linkable.Linkable(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.clickableCard = false;
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "headline", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "subtitle", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "text", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "icon", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "elevation", void 0);
-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);
+//#region src/lib/visually-hidden/visually-hidden.ts
+/** @component visually-hidden */
+var VisuallyHidden = class extends require_vivid_element.VividElement {};
 //#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(_)], ["hide-body", !_.bodySlottedContent || !_.bodySlottedContent.length]);
-function renderHeaderIcon(iconTag) {
-	return _microsoft_fast_element.html`
-		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
-}
-function Headline() {
-	return _microsoft_fast_element.html`
-		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
-	`;
-}
-function Subtitle() {
-	return _microsoft_fast_element.html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
-}
-function headerContent() {
-	return _microsoft_fast_element.html`
-		<div class="header-content">
-			${(0, _microsoft_fast_element.when)((x) => x.headline, Headline())}
-			${(0, _microsoft_fast_element.when)((x) => x.subtitle, Subtitle())}
-		</div>
-	`;
-}
-/**
-header
-*/
-function renderHeader(iconTag) {
-	return _microsoft_fast_element.html` <div class="header">
-		<slot name="graphic" ${(0, _microsoft_fast_element.slotted)("graphicSlottedContent")}
-			>${(0, _microsoft_fast_element.when)((x) => x.icon, renderHeaderIcon(iconTag))}</slot
-		>
-		${(0, _microsoft_fast_element.when)((x) => x.headline || x.subtitle, headerContent())}
-	</div>`;
-}
-function shouldHideHeader(card) {
-	return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
-}
-function renderMetaSlot() {
-	return _microsoft_fast_element.html` <slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot> `;
-}
-function text() {
-	return _microsoft_fast_element.html` <div class="text">${(x) => x.text}</div> `;
-}
-function renderButtonElement(content) {
-	return _microsoft_fast_element.html`<button
-		class="${getClasses}"
-		type="button"
-		${require_delegates_aria.delegateAria({ ariaLabelledBy: (x) => x.headline ? "card-headline" : null })}
-	>
-		${content}
-	</button>`;
-}
-function renderCardBaseElement(x, content) {
-	if (x.href) return x._renderLinkElement(content, getClasses);
-	else if (x.clickableCard) return renderButtonElement(content);
-	else return _microsoft_fast_element.html`<div
-			class="${getClasses}"
-			aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
-		>
-			${content}
-		</div>`;
-}
-function renderCardContent(context) {
-	const iconTag = context.tagFor(require_definition.Icon);
-	return _microsoft_fast_element.html`
-		${(x) => renderCardBaseElement(x, _microsoft_fast_element.html`<div class="wrapper">
-					<div class="vwc-card-media">
-						<slot name="media"></slot>
-					</div>
-					<slot name="main">
-						<div class="main-content">
-							<div class="header-wrapper">
-								${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">
-						<slot name="footer" ${(0, _microsoft_fast_element.slotted)("footerSlottedContent")}></slot>
-					</div>
-				</div> `)}
-	`;
-}
-var CardTemplate = (context) => {
-	const elevationTag = context.tagFor(require_definition$1.Elevation);
-	return _microsoft_fast_element.html`
-		${(0, _microsoft_fast_element.when)((x) => x.appearance !== require_enums.Appearance.Ghost && x.appearance !== require_enums.Appearance.Outlined, _microsoft_fast_element.html`
-			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`)}
-		${(0, _microsoft_fast_element.when)((x) => x.appearance === require_enums.Appearance.Outlined, _microsoft_fast_element.html`
-			<${elevationTag} dp='0')}>
-			  ${renderCardContent(context)}
-			</${elevationTag}>
-		`)}
-		${(0, _microsoft_fast_element.when)((x) => x.appearance === require_enums.Appearance.Ghost, _microsoft_fast_element.html` ${renderCardContent(context)} `)}
-	`;
-};
+//#region src/lib/visually-hidden/visually-hidden.template.ts
+var VisuallyHiddenTemplate = () => _microsoft_fast_element.html`<slot></slot>`;
 //#endregion
-//#region src/lib/card/definition.ts
-/**
-* @internal
-*/
-var cardDefinition = require_vivid_element.defineVividComponent("card", Card, CardTemplate, [require_definition.iconDefinition, require_definition$1.elevationDefinition], { styles: card_default });
+//#region src/lib/visually-hidden/definition.ts
+var visuallyHiddenDefinition = require_vivid_element.defineVividComponent("visually-hidden", VisuallyHidden, VisuallyHiddenTemplate, [], { styles: visually_hidden_default });
 /**
-* Registers the card elements with the design system.
+* Registers the visually-hidden element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCard = require_vivid_element.createRegisterFunction(cardDefinition);
+var registerVisuallyHidden = require_vivid_element.createRegisterFunction(visuallyHiddenDefinition);
 //#endregion
-Object.defineProperty(exports, "Card", {
+Object.defineProperty(exports, "VisuallyHidden", {
 	enumerable: true,
 	get: function() {
-		return Card;
+		return VisuallyHidden;
 	}
 });
-Object.defineProperty(exports, "cardDefinition", {
+Object.defineProperty(exports, "registerVisuallyHidden", {
 	enumerable: true,
 	get: function() {
-		return cardDefinition;
+		return registerVisuallyHidden;
 	}
 });
-Object.defineProperty(exports, "registerCard", {
+Object.defineProperty(exports, "visuallyHiddenDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerCard;
+		return visuallyHiddenDefinition;
 	}
 });