@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition19.js

@@ -1,10 +1,10 @@
 import { d as createRegisterFunction, u as defineVividComponent } from "./vivid-element.js";
 import { n as delegateAria } from "./delegates-aria.js";
-import { t as CalendarEvent } from "./calendar-event.js";
+import { n as calendarEventAppearance, r as calendarEventConnotation, t as CalendarEvent } from "./calendar-event.js";
 import { html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/calendar-event/calendar-event.scss?inline
-var calendar_event_default = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary:var(--vvd-calendar-event-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-calendar-event-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-calendar-event-accent-soft,var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary:var(--vvd-calendar-event-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-calendar-event-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-soft:var(--vvd-calendar-event-cta-soft,var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary:var(--vvd-calendar-event-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-calendar-event-success-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-success-contrast,var(--vvd-color-success-800));--_connotation-color-soft:var(--vvd-calendar-event-success-soft,var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-calendar-event-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-calendar-event-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-soft:var(--vvd-calendar-event-alert-soft,var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-calendar-event-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-calendar-event-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--vvd-calendar-event-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-soft:var(--vvd-calendar-event-warning-soft,var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-calendar-event-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-calendar-event-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-soft:var(--vvd-calendar-event-announcement-soft,var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary:var(--vvd-calendar-event-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-calendar-event-information-primary-text,var(--vvd-color-canvas));--_connotation-color-contrast:var(--vvd-calendar-event-information-contrast,var(--vvd-color-information-800));--_connotation-color-soft:var(--vvd-calendar-event-information-soft,var(--vvd-color-information-100))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}";
+var calendar_event_default = ":host{display:contents}.base{--vvd-calendar-event--indent:calc(0px + var(--vvd-calendar-event--overlap-count,0) * 8px);--focus-stroke-gap-color:transparent;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0)));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration,1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration,1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent), 32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start,0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start,0))) - 4px);border-radius:8px;padding:4px 8px;position:absolute;overflow:hidden}@supports (contain:content){.base{contain:strict}}@supports not (contain:content){.base{overflow:hidden}}.base:focus{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));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color:var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{font:var(--vvd-typography-base-condensed-bold);margin:0}h2>strong{font:inherit}p{font:var(--vvd-typography-base-condensed);margin:0}";
 //#endregion
 //#region src/lib/calendar-event/calendar-event.template.ts
 var getStyles = ({ start, duration, overlapCount }) => {
@@ -15,18 +15,19 @@ var getStyles = ({ start, duration, overlapCount }) => {
 	};
 	return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-//#endregion
-//#region src/lib/calendar-event/definition.ts
-/** @internal */
-var calendarEventDefinition = defineVividComponent("calendar-event", CalendarEvent, html` <div
+var CalendarEventTemplate = html` <div
 	style="${getStyles}"
-	class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+	class="${(x) => classNames("base", `connotation-${calendarEventConnotation.parse(x.connotation)}`, `appearance-${calendarEventAppearance.parse(x.appearance)}`, "with-idle")}"
 	tabindex="0"
 	${delegateAria({ role: "button" })}
 >
 	${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
 	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
-</div>`, [], {
+</div>`;
+//#endregion
+//#region src/lib/calendar-event/definition.ts
+/** @internal */
+var calendarEventDefinition = defineVividComponent("calendar-event", CalendarEvent, CalendarEventTemplate, [], {
 	styles: calendar_event_default,
 	shadowOptions: { delegatesFocus: true }
 });

package/unbundled/definition2.cjs

@@ -1,14 +1,19 @@
-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_affix = require("./affix.cjs");
+const require_component_enum = require("./component-enum.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/accordion-item/accordion-item.scss?inline
-var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
+var accordionItemAppearance = require_component_enum.componentEnum([
+	"ghost",
+	"filled",
+	"ghost-light"
+], "ghost");
 /**
 * @public
 * @component accordion-item
@@ -49,6 +54,11 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "id", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.prototype, "heading", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "secondary-text" })], AccordionItem.prototype, "secondaryText", void 0);
+require_decorate.__decorate([require_vivid_element.replaces({
+	deprecatedPropertyName: "secondaryText",
+	fromDeprecated: (v) => v,
+	toDeprecated: (v) => v
+}), (0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], AccordionItem.prototype, "textSecondary", void 0);
 require_decorate.__decorate([_microsoft_fast_element.observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
@@ -65,7 +75,7 @@ var header = (context, hTagName) => {
 	return _microsoft_fast_element.html`
 		<${hTag} class="heading-container">
 			<button
-				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("heading-button", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
+				class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("heading-button", "connotation-accent", `appearance-${accordionItemAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-active", [`size-${x.size}`, Boolean(x.size)])}"
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
@@ -80,8 +90,8 @@ var header = (context, hTagName) => {
 						<slot name="heading" ${(0, _microsoft_fast_element.slotted)("_headingSlottedContent")}></slot>
 						${(0, _microsoft_fast_element.when)((x) => x.heading && !x._headingSlottedContent?.length, _microsoft_fast_element.html`${(x) => x.heading}`)}
 					</span>
-					${(0, _microsoft_fast_element.when)((x) => Boolean(x.secondaryText), _microsoft_fast_element.html`<span class="heading-secondary"
-							>${(x) => x.secondaryText}</span
+					${(0, _microsoft_fast_element.when)((x) => Boolean(x.textSecondary), _microsoft_fast_element.html`<span class="heading-secondary"
+							>${(x) => x.textSecondary}</span
 						>`)}
 				</span>
 

package/unbundled/definition2.js

@@ -1,13 +1,19 @@
-import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { d as createRegisterFunction, n as replaces, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
 import { attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/accordion-item/accordion-item.scss?inline
-var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+var accordion_item_default = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
+var accordionItemAppearance = componentEnum([
+	"ghost",
+	"filled",
+	"ghost-light"
+], "ghost");
 /**
 * @public
 * @component accordion-item
@@ -48,6 +54,11 @@ __decorate([attr({ mode: "boolean" })], AccordionItem.prototype, "expanded", voi
 __decorate([attr], AccordionItem.prototype, "id", void 0);
 __decorate([attr], AccordionItem.prototype, "heading", void 0);
 __decorate([attr({ attribute: "secondary-text" })], AccordionItem.prototype, "secondaryText", void 0);
+__decorate([replaces({
+	deprecatedPropertyName: "secondaryText",
+	fromDeprecated: (v) => v,
+	toDeprecated: (v) => v
+}), attr({ attribute: "text-secondary" })], AccordionItem.prototype, "textSecondary", void 0);
 __decorate([observable], AccordionItem.prototype, "_headingSlottedContent", void 0);
 __decorate([attr({
 	mode: "boolean",
@@ -64,7 +75,7 @@ var header = (context, hTagName) => {
 	return html`
 		<${hTag} class="heading-container">
 			<button
-				class="${(x) => classNames("heading-button", [`appearance-${x.appearance}`, Boolean(x.appearance)], [`size-${x.size}`, Boolean(x.size)])}"
+				class="${(x) => classNames("heading-button", "connotation-accent", `appearance-${accordionItemAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-active", [`size-${x.size}`, Boolean(x.size)])}"
 				id="${(x) => x.id}"
 				aria-expanded="${(x) => x.expanded}"
 				aria-controls="${(x) => x.id}-panel"
@@ -79,8 +90,8 @@ var header = (context, hTagName) => {
 						<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
 						${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
 					</span>
-					${when((x) => Boolean(x.secondaryText), html`<span class="heading-secondary"
-							>${(x) => x.secondaryText}</span
+					${when((x) => Boolean(x.textSecondary), html`<span class="heading-secondary"
+							>${(x) => x.textSecondary}</span
 						>`)}
 				</span>
 

package/unbundled/definition20.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_enums = require("./enums.cjs");
@@ -174,7 +173,7 @@ function getValidDateString(date) {
 	const twoDigit = (num) => `0${num}`.slice(-2);
 	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
 }
-var weekdaysMap = new Map([["sunday", 0], ["monday", 1]]);
+var weekdaysMap = /* @__PURE__ */ new Map([["sunday", 0], ["monday", 1]]);
 function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
 	date = new Date(date);
 	let num = weekdaysMap.get(startDay);

package/unbundled/definition20.js

@@ -173,7 +173,7 @@ function getValidDateString(date) {
 	const twoDigit = (num) => `0${num}`.slice(-2);
 	return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
 }
-var weekdaysMap = new Map([["sunday", 0], ["monday", 1]]);
+var weekdaysMap = /* @__PURE__ */ new Map([["sunday", 0], ["monday", 1]]);
 function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
 	date = new Date(date);
 	let num = weekdaysMap.get(startDay);
@@ -242,10 +242,7 @@ var ColumnTemplate = html`
 		<slot name="day-${(_, c) => c.index}"></slot>
 	</div>
 `;
-//#endregion
-//#region src/lib/calendar/definition.ts
-/** @internal */
-var calendarDefinition = defineVividComponent("calendar", Calendar, html`
+var CalendarTemplate = html`
 	<div
 		role="grid"
 		class="${(x) => classNames([`sticky-${x.stickyMode}`, Boolean(x.stickyMode)])}"
@@ -266,7 +263,11 @@ var calendarDefinition = defineVividComponent("calendar", Calendar, html`
 			</div>
 		</div>
 	</div>
-`, [], {
+`;
+//#endregion
+//#region src/lib/calendar/definition.ts
+/** @internal */
+var calendarDefinition = defineVividComponent("calendar", Calendar, CalendarTemplate, [], {
 	styles: calendar_default,
 	shadowOptions: { delegatesFocus: true }
 });

package/unbundled/definition21.cjs

@@ -1,7 +1,7 @@
-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_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_linkable = require("./linkable.cjs");
 const require_enums = require("./enums.cjs");
@@ -9,7 +9,7 @@ const require_definition$1 = require("./definition7.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}";
+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);flex-flow:column;display:flex;overflow:hidden}@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
 /**
@@ -106,9 +106,11 @@ function renderCardBaseElement(x, content) {
 		</div>`;
 }
 function renderCardContent(context) {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
-		${(x) => renderCardBaseElement(x, _microsoft_fast_element.html`<div class="wrapper">
+		${(x) => renderCardBaseElement(x, _microsoft_fast_element.html`<div
+					class="wrapper connotation-cta appearance-ghost with-idle with-hover with-active"
+				>
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>

package/unbundled/definition21.js

@@ -1,6 +1,7 @@
 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 iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
 import { n as delegateAria } from "./delegates-aria.js";
 import { t as Linkable } from "./linkable.js";
 import { t as Appearance } from "./enums.js";
@@ -8,7 +9,7 @@ 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/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}";
+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);flex-flow:column;display:flex;overflow:hidden}@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
 /**
@@ -107,7 +108,9 @@ function renderCardBaseElement(x, content) {
 function renderCardContent(context) {
 	const iconTag = context.tagFor(Icon);
 	return html`
-		${(x) => renderCardBaseElement(x, html`<div class="wrapper">
+		${(x) => renderCardBaseElement(x, html`<div
+					class="wrapper connotation-cta appearance-ghost with-idle with-hover with-active"
+				>
 					<div class="vwc-card-media">
 						<slot name="media"></slot>
 					</div>

package/unbundled/definition22.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/lib/visually-hidden/visually-hidden.scss?inline

package/unbundled/definition23.cjs

@@ -1,17 +1,20 @@
-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_icon = require("./icon.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_feedback_message = require("./feedback-message.cjs");
 const require_form_element = require("./form-element.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
 const require_with_success_text = require("./with-success-text.cjs");
+const require_mixins = require("./mixins.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/checkbox/checkbox.scss?inline
-var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkboxConnotation = require_component_enum.componentEnum(["accent", "cta"], "accent");
 /**
 * @public
 * @component checkbox
@@ -46,7 +49,6 @@ var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins
 				case " ":
 					if (this.indeterminate) this.indeterminate = false;
 					this.checked = !this.checked;
-					break;
 			}
 			return false;
 		};
@@ -91,11 +93,16 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Checkbox.proto
 //#endregion
 //#region src/lib/checkbox/checkbox.template.ts
 var CheckboxTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
+	const getConnotation = (x) => {
+		if (x.errorValidationMessage) return "alert";
+		if (x.successText) return "success";
+		return checkboxConnotation.parse(x.connotation);
+	};
 	return _microsoft_fast_element.html`<template>
 		<div
 			${(0, _microsoft_fast_element.ref)("control")}
-			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error connotation-alert", Boolean(x.errorValidationMessage)], ["success connotation-success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${getConnotation(x)}`, "appearance-fieldset", "with-idle", "with-hover", "with-checked", "with-checkedAndHover", "with-disabled", "with-readonly", ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
 			${require_delegates_aria.delegateAria({
 		role: "checkbox",
 		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
@@ -122,7 +129,7 @@ var CheckboxTemplate = (context) => {
 //#endregion
 //#region src/lib/checkbox/definition.ts
 /** @internal */
-var checkboxDefinition = require_vivid_element.defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [require_definition.iconDefinition, require_mixins.feedbackMessageDefinition], {
+var checkboxDefinition = require_vivid_element.defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [require_definition.iconDefinition, require_feedback_message.feedbackMessageDefinition], {
 	styles: checkbox_default,
 	shadowOptions: { delegatesFocus: true }
 });

package/unbundled/definition23.js

@@ -1,16 +1,20 @@
 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 iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
+import { t as componentEnum } from "./component-enum.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { t as CheckableFormAssociated } from "./form-associated.js";
-import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { n as feedbackMessageDefinition } from "./feedback-message.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithErrorText } from "./with-error-text.js";
 import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithFeedback } from "./mixins.js";
 import { attr, html, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/checkbox/checkbox.scss?inline
-var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkboxConnotation = componentEnum(["accent", "cta"], "accent");
 /**
 * @public
 * @component checkbox
@@ -45,7 +49,6 @@ var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSucces
 				case " ":
 					if (this.indeterminate) this.indeterminate = false;
 					this.checked = !this.checked;
-					break;
 			}
 			return false;
 		};
@@ -91,10 +94,15 @@ __decorate([observable], Checkbox.prototype, "slottedContent", void 0);
 //#region src/lib/checkbox/checkbox.template.ts
 var CheckboxTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
+	const getConnotation = (x) => {
+		if (x.errorValidationMessage) return "alert";
+		if (x.successText) return "success";
+		return checkboxConnotation.parse(x.connotation);
+	};
 	return html`<template>
 		<div
 			${ref("control")}
-			class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error connotation-alert", Boolean(x.errorValidationMessage)], ["success connotation-success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
+			class="${(x) => classNames("base", `connotation-${getConnotation(x)}`, "appearance-fieldset", "with-idle", "with-hover", "with-checked", "with-checkedAndHover", "with-disabled", "with-readonly", ["readonly", x.readOnly], ["checked", x.checked || x.indeterminate], ["disabled", x.disabled], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["hide-label", !x.label && !x.slottedContent?.length])}"
 			${delegateAria({
 		role: "checkbox",
 		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,

package/unbundled/definition24.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_localized = require("./localized.cjs");
@@ -8,15 +7,15 @@ const require_anchored = require("./anchored.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/toggletip/toggletip.scss?inline
-var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
 //#endregion
 //#region src/lib/toggletip/toggletip.ts
 /**
 * @public
 * @component toggletip
-* @slot - The content to display in the toggletip.
-* @slot anchor - Used to set the anchor element for the toggletip.
-* @slot action-items - The content to display in the toggletip action items.
+* @slot - The content to display in the Toggletip.
+* @slot anchor - Used to set the anchor element for the Toggletip.
+* @slot action-items - The content to display in the Toggletip action items.
 * @testSelector byHeadline byHeadline
 * @testQuery open open true
 * @testQuery closed open false
@@ -71,12 +70,12 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 	}
 	#updateAnchor(a) {
 		a.setAttribute("aria-expanded", this.open.toString());
-		a.setAttribute("data-expanded", this.open.toString());
+		require_anchored.setAnchorExpanded(a, this.open);
 	}
 	#cleanupAnchor(a) {
 		a.removeEventListener("click", this.#openIfClosed, true);
 		a.removeAttribute("aria-expanded");
-		a.removeAttribute("data-expanded");
+		require_anchored.clearAnchorExpanded(a);
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
@@ -93,6 +92,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 	#closeOnEscape;
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Toggletip.prototype, "headline", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], Toggletip.prototype, "textSecondary", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Toggletip.prototype, "placement", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
@@ -101,8 +101,9 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
 var ToggletipTemplate = (context) => {
 	const popup = context.tagFor(require_definition.Popup);
+	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
 	return _microsoft_fast_element.html`
-		${require_anchored.anchorSlotTemplateFactory()}
+		${anchorSlotTemplate}
 		<${popup}
 			@keydown="${(x, { event }) => {
 		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) return false;
@@ -118,6 +119,7 @@ var ToggletipTemplate = (context) => {
 		>
 			<div class="content-wrapper">
 				${(0, _microsoft_fast_element.when)((x) => x.headline, _microsoft_fast_element.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<p class="text-secondary">${(x) => x.textSecondary}</p>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>

package/unbundled/definition24.js

@@ -3,19 +3,19 @@ import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition9.js";
-import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
+import { i as setAnchorExpanded, n as anchorSlotTemplateFactory, r as clearAnchorExpanded, t as Anchored } from "./anchored.js";
 import { Updates, attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/toggletip/toggletip.scss?inline
-var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
 //#endregion
 //#region src/lib/toggletip/toggletip.ts
 /**
 * @public
 * @component toggletip
-* @slot - The content to display in the toggletip.
-* @slot anchor - Used to set the anchor element for the toggletip.
-* @slot action-items - The content to display in the toggletip action items.
+* @slot - The content to display in the Toggletip.
+* @slot anchor - Used to set the anchor element for the Toggletip.
+* @slot action-items - The content to display in the Toggletip action items.
 * @testSelector byHeadline byHeadline
 * @testQuery open open true
 * @testQuery closed open false
@@ -70,12 +70,12 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 	}
 	#updateAnchor(a) {
 		a.setAttribute("aria-expanded", this.open.toString());
-		a.setAttribute("data-expanded", this.open.toString());
+		setAnchorExpanded(a, this.open);
 	}
 	#cleanupAnchor(a) {
 		a.removeEventListener("click", this.#openIfClosed, true);
 		a.removeAttribute("aria-expanded");
-		a.removeAttribute("data-expanded");
+		clearAnchorExpanded(a);
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
@@ -92,6 +92,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 	#closeOnEscape;
 };
 __decorate([attr], Toggletip.prototype, "headline", void 0);
+__decorate([attr({ attribute: "text-secondary" })], Toggletip.prototype, "textSecondary", void 0);
 __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);
 __decorate([attr({ mode: "fromView" })], Toggletip.prototype, "placement", void 0);
 __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
@@ -100,8 +101,9 @@ __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
 var getClasses = (_) => classNames("control");
 var ToggletipTemplate = (context) => {
 	const popup = context.tagFor(Popup);
+	const anchorSlotTemplate = anchorSlotTemplateFactory();
 	return html`
-		${anchorSlotTemplateFactory()}
+		${anchorSlotTemplate}
 		<${popup}
 			@keydown="${(x, { event }) => {
 		if (x.open && handleEscapeKeyAndStopPropogation(event)) return false;
@@ -117,6 +119,7 @@ var ToggletipTemplate = (context) => {
 		>
 			<div class="content-wrapper">
 				${when((x) => x.headline, html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				${when((x) => x.textSecondary, html`<p class="text-secondary">${(x) => x.textSecondary}</p>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>