@vonage/vivid 5.23.1 → 5.25.0

package/unbundled/definition17.cjs

@@ -1,19 +1,24 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
+const require_icon = require("./icon.cjs");
 const require_breadcrumb_item = require("./breadcrumb-item.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/breadcrumb-item/breadcrumb-item.scss?inline
-var breadcrumb_item_default = ".base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}";
+var breadcrumb_item_default = ":host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}";
 //#endregion
 //#region src/lib/breadcrumb-item/breadcrumb-item.template.ts
 var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base");
 var BreadcrumbItemTemplate = (context) => {
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html` <div role="listitem" class="${getClasses}">
-		${(0, _microsoft_fast_element.when)((x) => x.text && !x.href, _microsoft_fast_element.html`${(x) => x.text}`)}
-		${(0, _microsoft_fast_element.when)((x) => x.text && x.href && x.href.length > 0, _microsoft_fast_element.html`${(x) => x._renderLinkElement(_microsoft_fast_element.html`${(x) => x.text}`, "control")}`)}
+		${(0, _microsoft_fast_element.when)((x) => x.text && !x.href, _microsoft_fast_element.html`<span class="text" title="${(x) => x.text}"
+				>${(x) => x.text}</span
+			>`)}
+		${(0, _microsoft_fast_element.when)((x) => x.text && x.href && x.href.length > 0, _microsoft_fast_element.html`${(x) => x._renderLinkElement(_microsoft_fast_element.html`<span class="text" title="${(x) => x.text}"
+						>${(x) => x.text}</span
+					>`, "control")}`)}
 		${(0, _microsoft_fast_element.when)((x) => x.separator, _microsoft_fast_element.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`)}
 	</div>`;
 };

package/unbundled/definition17.js

@@ -1,18 +1,23 @@
 import { d as createRegisterFunction, 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 Icon } from "./icon.js";
 import { t as BreadcrumbItem } from "./breadcrumb-item.js";
 import { html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/breadcrumb-item/breadcrumb-item.scss?inline
-var breadcrumb_item_default = ".base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}";
+var breadcrumb_item_default = ":host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}";
 //#endregion
 //#region src/lib/breadcrumb-item/breadcrumb-item.template.ts
 var getClasses = (_) => classNames("base");
 var BreadcrumbItemTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	return html` <div role="listitem" class="${getClasses}">
-		${when((x) => x.text && !x.href, html`${(x) => x.text}`)}
-		${when((x) => x.text && x.href && x.href.length > 0, html`${(x) => x._renderLinkElement(html`${(x) => x.text}`, "control")}`)}
+		${when((x) => x.text && !x.href, html`<span class="text" title="${(x) => x.text}"
+				>${(x) => x.text}</span
+			>`)}
+		${when((x) => x.text && x.href && x.href.length > 0, html`${(x) => x._renderLinkElement(html`<span class="text" title="${(x) => x.text}"
+						>${(x) => x.text}</span
+					>`, "control")}`)}
 		${when((x) => x.separator, html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`)}
 	</div>`;
 };

package/unbundled/definition2.cjs

@@ -6,7 +6,7 @@ const require_affix = require("./affix.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:auto}.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,.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)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
 /**
@@ -48,6 +48,12 @@ require_decorate.__decorate([_microsoft_fast_element.attr], AccordionItem.protot
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
 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",
@@ -75,8 +81,13 @@ var header = (context, hTagName) => {
 				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, require_affix.IconWrapper.Slot) : null}
 
 				<span class="heading-content">
-					<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 class="heading-primary">
+						<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.textSecondary), _microsoft_fast_element.html`<span class="heading-secondary"
+							>${(x) => x.textSecondary}</span
+						>`)}
 				</span>
 
 				<span class="meta">

package/unbundled/definition2.js

@@ -1,11 +1,11 @@
-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 { 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:auto}.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,.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)}";
 //#endregion
 //#region src/lib/accordion-item/accordion-item.ts
 /**
@@ -47,6 +47,12 @@ __decorate([attr], AccordionItem.prototype, "appearance", void 0);
 __decorate([attr({ mode: "boolean" })], AccordionItem.prototype, "expanded", void 0);
 __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",
@@ -74,8 +80,13 @@ var header = (context, hTagName) => {
 				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
 
 				<span class="heading-content">
-					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
-					${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
+					<span class="heading-primary">
+						<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
+						${when((x) => x.heading && !x._headingSlottedContent?.length, html`${(x) => x.heading}`)}
+					</span>
+					${when((x) => Boolean(x.textSecondary), html`<span class="heading-secondary"
+							>${(x) => x.textSecondary}</span
+						>`)}
 				</span>
 
 				<span class="meta">

package/unbundled/definition21.cjs

@@ -2,6 +2,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");
@@ -106,7 +107,7 @@ 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">
 					<div class="vwc-card-media">

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";

package/unbundled/definition23.cjs

@@ -2,6 +2,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_form_associated = require("./form-associated.cjs");
 const require_mixins = require("./mixins.cjs");
@@ -91,9 +92,10 @@ 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);
 	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])}"
 			${require_delegates_aria.delegateAria({
 		role: "checkbox",

package/unbundled/definition23.js

@@ -1,13 +1,14 @@
 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, 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 { 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 { attr, html, observable, slotted, when } from "@microsoft/fast-element";
+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}";
@@ -93,6 +94,7 @@ var CheckboxTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	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])}"
 			${delegateAria({
 		role: "checkbox",

package/unbundled/definition24.cjs

@@ -8,15 +8,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
@@ -93,6 +93,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);
@@ -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

@@ -7,15 +7,15 @@ import { n as anchorSlotTemplateFactory, 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
@@ -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);
@@ -117,6 +118,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>

package/unbundled/definition25.cjs

@@ -2,6 +2,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_definition$1 = require("./definition24.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -24,7 +25,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
 var ContextualHelpTemplate = (context) => {
 	const toggletipTag = context.tagFor(require_definition$1.Toggletip);
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
 		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
 			<button class="${getClasses}" slot="anchor">

package/unbundled/definition25.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 toggletipDefinition, r as Toggletip } from "./definition24.js";
 import { attr, html } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";

package/unbundled/definition26.cjs

@@ -24,6 +24,8 @@ var TextFieldType = {
 	email: "email",
 	/** A password TextField */
 	password: "password",
+	/** A search TextField */
+	search: "search",
 	/** A telephone TextField */
 	tel: "tel",
 	/** A text TextField */
@@ -46,9 +48,9 @@ var installSafariWorkaroundStyleIfNeeded = (forElement) => {
 *
 * @public
 * @component text-field
-* @slot leading-action-items - Used to add action items to the start of the text-field.
-* @slot action-items - Used to add action items to the end of the text-field.
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot leading-action-items - Used to add action items to the start of the Text Field.
+* @slot action-items - Used to add action items to the end of the Text Field.
+* @slot helper-text - Describes how to use the Text Field. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value has changed
 * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
@@ -175,7 +177,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 	handleChange() {
 		this.$emit("change");
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the Text Field against its constraints (e.g. `pattern`, `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}
@@ -190,6 +192,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 		installSafariWorkaroundStyleIfNeeded(this);
 		this._renderCharCountRemaining();
 	}
+	/** Moves focus to the Text Field's input element. */
 	focus() {
 		this.control?.focus();
 	}

package/unbundled/definition26.js

@@ -23,6 +23,8 @@ var TextFieldType = {
 	email: "email",
 	/** A password TextField */
 	password: "password",
+	/** A search TextField */
+	search: "search",
 	/** A telephone TextField */
 	tel: "tel",
 	/** A text TextField */
@@ -45,9 +47,9 @@ var installSafariWorkaroundStyleIfNeeded = (forElement) => {
 *
 * @public
 * @component text-field
-* @slot leading-action-items - Used to add action items to the start of the text-field.
-* @slot action-items - Used to add action items to the end of the text-field.
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot leading-action-items - Used to add action items to the start of the Text Field.
+* @slot action-items - Used to add action items to the end of the Text Field.
+* @slot helper-text - Describes how to use the Text Field. Alternative to the `helper-text` attribute.
 * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value has changed
 * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
@@ -174,7 +176,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 	handleChange() {
 		this.$emit("change");
 	}
-	/** {@inheritDoc (FormAssociated:interface).validate} */
+	/** Validates the Text Field against its constraints (e.g. `pattern`, `required`) and updates its validity state. */
 	validate() {
 		super.validate(this.control);
 	}
@@ -189,6 +191,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 		installSafariWorkaroundStyleIfNeeded(this);
 		this._renderCharCountRemaining();
 	}
+	/** Moves focus to the Text Field's input element. */
 	focus() {
 		this.control?.focus();
 	}

package/unbundled/definition27.cjs

@@ -9,12 +9,13 @@ const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
 * @public
 * @component tooltip
+* @slot - Content for the Tooltip. An alternative to the `text` attribute for cases that require custom, non-interactive markup.
 * @slot anchor - Used to set the anchor element for the tooltip.
 * @testSelector byText byText
 * @testQuery open open true
@@ -25,6 +26,8 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		super(..._args);
 		this.open = false;
 		this._descriptionId = `vwc-tooltip-desc-${require_randomId.generateRandomId()}`;
+		this._descriptionSecondaryId = `vwc-tooltip-desc-secondary-${require_randomId.generateRandomId()}`;
+		this._defaultSlotContent = [];
 		this.#show = () => {
 			this.open = true;
 		};
@@ -37,6 +40,11 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		};
 	}
 	/** @internal */
+	_defaultSlotContentChanged() {
+		for (const el of this._defaultSlotContent) if (!el.id) el.id = `vwc-tooltip-content-${require_randomId.generateRandomId()}`;
+		if (this._anchorEl) this.#syncDescribedBy(this._anchorEl);
+	}
+	/** @internal */
 	_kbdAriaShortcutsValueChanged() {
 		if (!this._anchorEl) return;
 		_microsoft_fast_element.DOM.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
@@ -54,13 +62,26 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		if (oldValue) this.#cleanupAnchor(oldValue);
 		if (newValue) this.#setupAnchor(newValue);
 	}
+	/** @internal */
+	#descriptionIds() {
+		return [
+			this._descriptionId,
+			this._descriptionSecondaryId,
+			...this._defaultSlotContent.map((el) => el.id).filter(Boolean)
+		];
+	}
+	#syncDescribedBy(a) {
+		const existing = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "";
+		const ownedIds = new Set(this.#descriptionIds());
+		const otherTokens = existing.split(" ").filter((t) => t && !ownedIds.has(t));
+		a.setAttribute("aria-describedby", [...otherTokens, ...this.#descriptionIds()].join(" "));
+	}
 	#setupAnchor(a) {
 		a.addEventListener("mouseover", this.#show);
 		a.addEventListener("mouseout", this.#hide);
 		a.addEventListener("focusin", this.#show);
 		a.addEventListener("focusout", this.#hide);
-		const existing = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy;
-		a.setAttribute("aria-describedby", existing ? `${existing} ${this._descriptionId}` : this._descriptionId);
+		this.#syncDescribedBy(a);
 		_microsoft_fast_element.DOM.setAttribute(a, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	#cleanupAnchor(a) {
@@ -68,7 +89,9 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 		a.removeEventListener("mouseout", this.#hide);
 		a.removeEventListener("focusin", this.#show);
 		a.removeEventListener("focusout", this.#hide);
-		const tokens = (a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "").split(" ").filter((t) => t !== this._descriptionId);
+		const describedBy = a.getAttribute("aria-describedby") ?? a.ariaDescribedBy ?? "";
+		const ownedIds = new Set(this.#descriptionIds());
+		const tokens = describedBy.split(" ").filter((t) => t && !ownedIds.has(t));
 		const newDescribedBy = tokens.length ? tokens.join(" ") : null;
 		if (a.hasAttribute("aria-describedby")) _microsoft_fast_element.DOM.setAttribute(a, "aria-describedby", newDescribedBy);
 		else a.ariaDescribedBy = newDescribedBy;
@@ -88,15 +111,17 @@ var Tooltip = class extends require_kbd_shortcut.WithKbdShortcut(require_anchore
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Tooltip.prototype, "text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], Tooltip.prototype, "textSecondary", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Tooltip.prototype, "placement", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html`
 ${require_anchored.anchorSlotTemplateFactory()}
-${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
+${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span><span slot="_description-secondary" id="${(x) => x._descriptionSecondaryId}">${(x) => x.textSecondary}</span>`)}
 <${popupTag} class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open])}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
@@ -107,6 +132,15 @@ ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_de
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
 		<span class="text"><slot name="_description"></slot></span>
+		${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary"
+				><slot name="_description-secondary"></slot
+			></span>`)}
+		<slot
+			${(0, _microsoft_fast_element.slotted)({
+		property: "_defaultSlotContent",
+		filter: (0, _microsoft_fast_element.elements)()
+	})}
+		></slot>
 		<slot name="kbd-shortcut"
 			${(0, _microsoft_fast_element.slotted)({
 		property: "_kbdShortcutSlotted",