@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/definition25.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_definition$1 = require("./definition24.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -21,10 +21,10 @@ var ContextualHelp = class extends require_vivid_element.VividElement {
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
 //#endregion
 //#region src/lib/contextual-help/contextual-help.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control", "connotation-accent", "appearance-ghost", "with-idle", "with-hover", "with-active");
 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">
@@ -39,7 +39,7 @@ var ContextualHelpTemplate = (context) => {
 //#endregion
 //#region src/lib/contextual-help/definition.ts
 /** @internal */
-var contextualHelpDefinition = require_vivid_element.defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [require_definition.iconDefinition, require_definition$1.toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
+var contextualHelpDefinition = require_vivid_element.defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [require_definition.iconDefinition, require_definition$1.toggletipDefinition], { styles: ".control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
 /**
 * Registers the contextual-help element with the design system.
 *

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";
@@ -20,7 +21,7 @@ var ContextualHelp = class extends VividElement {
 __decorate([attr({ mode: "fromView" })], ContextualHelp.prototype, "placement", void 0);
 //#endregion
 //#region src/lib/contextual-help/contextual-help.template.ts
-var getClasses = (_) => classNames("control");
+var getClasses = (_) => classNames("control", "connotation-accent", "appearance-ghost", "with-idle", "with-hover", "with-active");
 var ContextualHelpTemplate = (context) => {
 	const toggletipTag = context.tagFor(Toggletip);
 	const iconTag = context.tagFor(Icon);
@@ -38,7 +39,7 @@ var ContextualHelpTemplate = (context) => {
 //#endregion
 //#region src/lib/contextual-help/definition.ts
 /** @internal */
-var contextualHelpDefinition = defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [iconDefinition, toggletipDefinition], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
+var contextualHelpDefinition = defineVividComponent("contextual-help", ContextualHelp, ContextualHelpTemplate, [iconDefinition, toggletipDefinition], { styles: ".control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control: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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" });
 /**
 * Registers the contextual-help element with the design system.
 *

package/unbundled/definition26.cjs

@@ -1,16 +1,17 @@
-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");
 const require_delegates_aria = require("./delegates-aria.cjs");
 const require_form_associated = require("./form-associated.cjs");
 const require_definition$1 = require("./definition22.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_randomId = require("./randomId.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_definition$2 = require("./definition25.cjs");
 const require_char_count = require("./char-count.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
@@ -18,12 +19,15 @@ const require_text_field = require("./text-field.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/text-field/text-field.ts
+var textFieldAppearance = require_component_enum.componentEnum(["fieldset", "ghost"], "fieldset");
 /** Text field sub-types */
 var TextFieldType = {
 	/** An email TextField */
 	email: "email",
 	/** A password TextField */
 	password: "password",
+	/** A search TextField */
+	search: "search",
 	/** A telephone TextField */
 	tel: "tel",
 	/** A text TextField */
@@ -46,9 +50,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 +179,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 +194,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();
 	}
@@ -226,7 +231,7 @@ var TextfieldTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`
 		<div
-			class="base ${(x) => (0, _microsoft_fast_web_utilities.classNames)(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+			class="base ${(x) => (0, _microsoft_fast_web_utilities.classNames)(`connotation-accent`, `appearance-${textFieldAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
 		>
 			${(0, _microsoft_fast_element.when)((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div
@@ -303,7 +308,7 @@ var TextfieldTemplate = (context) => {
 /** @internal */
 var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
 	require_definition.iconDefinition,
-	require_mixins.feedbackMessageDefinition,
+	require_feedback_message.feedbackMessageDefinition,
 	require_definition$1.visuallyHiddenDefinition,
 	require_definition$2.contextualHelpDefinition
 ], {

package/unbundled/definition26.js

@@ -2,14 +2,16 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { n as FormAssociated } from "./form-associated.js";
 import { n as visuallyHiddenDefinition } from "./definition22.js";
-import { n as WithLightDOMFeedback, r as feedbackMessageDefinition } 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 { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
+import { n as WithLightDOMFeedback } from "./mixins.js";
 import { t as contextualHelpDefinition } from "./definition25.js";
 import { t as WithCharCount } from "./char-count.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
@@ -17,12 +19,15 @@ import { t as text_field_default } from "./text-field.js";
 import { ElementStyles, Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/text-field/text-field.ts
+var textFieldAppearance = componentEnum(["fieldset", "ghost"], "fieldset");
 /** Text field sub-types */
 var TextFieldType = {
 	/** An email TextField */
 	email: "email",
 	/** A password TextField */
 	password: "password",
+	/** A search TextField */
+	search: "search",
 	/** A telephone TextField */
 	tel: "tel",
 	/** A text TextField */
@@ -45,9 +50,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 +179,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 +194,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();
 	}
@@ -225,7 +231,7 @@ var TextfieldTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`
 		<div
-			class="base ${(x) => classNames(["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
+			class="base ${(x) => classNames(`connotation-accent`, `appearance-${textFieldAppearance.parse(x.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", Boolean(x.errorValidationMessage)], ["disabled", x.disabled], ["has-value", Boolean(x.value)], ["readonly", x.readOnly], ["placeholder", Boolean(x.placeholder)], [`shape-${x.shape}`, Boolean(x.shape)], ["no-label", !x.label], ["has-icon", !!x.icon], ["success", Boolean(x.successText)], ["action-items", !!x.actionItemsSlottedContent?.length], ["leading-action-items", !!x.leadingActionItemsSlottedContent?.length], ["no-leading", !(x.leadingActionItemsSlottedContent?.length || x.icon)], [`size-${x.scale}`, Boolean(x.scale)])}"
 		>
 			${when((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
 			<div

package/unbundled/definition27.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_dialog = require("./dialog.cjs");
@@ -9,12 +8,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 +25,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 +39,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 +61,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 +88,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 +110,18 @@ 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);
+	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
 	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>`)}
+${anchorSlotTemplate}
+${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",

package/unbundled/definition27.js

@@ -5,15 +5,16 @@ import { i as Popup, t as popupDefinition } from "./definition9.js";
 import { t as WithKbdShortcut } from "./kbd-shortcut.js";
 import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
-import { DOM, attr, elements, html, slotted } from "@microsoft/fast-element";
+import { DOM, attr, elements, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@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
@@ -24,6 +25,8 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		super(..._args);
 		this.open = false;
 		this._descriptionId = `vwc-tooltip-desc-${generateRandomId()}`;
+		this._descriptionSecondaryId = `vwc-tooltip-desc-secondary-${generateRandomId()}`;
+		this._defaultSlotContent = [];
 		this.#show = () => {
 			this.open = true;
 		};
@@ -36,6 +39,11 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		};
 	}
 	/** @internal */
+	_defaultSlotContentChanged() {
+		for (const el of this._defaultSlotContent) if (!el.id) el.id = `vwc-tooltip-content-${generateRandomId()}`;
+		if (this._anchorEl) this.#syncDescribedBy(this._anchorEl);
+	}
+	/** @internal */
 	_kbdAriaShortcutsValueChanged() {
 		if (!this._anchorEl) return;
 		DOM.setAttribute(this._anchorEl, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
@@ -53,13 +61,26 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		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);
 		DOM.setAttribute(a, "aria-keyshortcuts", this._kbdAriaShortcutsValue);
 	}
 	#cleanupAnchor(a) {
@@ -67,7 +88,9 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 		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")) DOM.setAttribute(a, "aria-describedby", newDescribedBy);
 		else a.ariaDescribedBy = newDescribedBy;
@@ -87,15 +110,18 @@ var Tooltip = class extends WithKbdShortcut(Anchored(VividElement)) {
 	}
 };
 __decorate([attr], Tooltip.prototype, "text", void 0);
+__decorate([attr({ attribute: "text-secondary" })], Tooltip.prototype, "textSecondary", void 0);
 __decorate([attr({ mode: "fromView" })], Tooltip.prototype, "placement", void 0);
 __decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
+__decorate([observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
+	const anchorSlotTemplate = anchorSlotTemplateFactory();
 	return html`
-${anchorSlotTemplateFactory()}
-${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span>`)}
+${anchorSlotTemplate}
+${renderInLightDOM(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) => classNames("control", ["open", x.open])}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
@@ -106,6 +132,15 @@ ${renderInLightDOM(html`<span slot="_description" id="${(x) => x._descriptionId}
   exportparts="vvd-theme-alternate">
   <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
 		<span class="text"><slot name="_description"></slot></span>
+		${when((x) => x.textSecondary, html`<span class="text-secondary"
+				><slot name="_description-secondary"></slot
+			></span>`)}
+		<slot
+			${slotted({
+		property: "_defaultSlotContent",
+		filter: elements()
+	})}
+		></slot>
 		<slot name="kbd-shortcut"
 			${slotted({
 		property: "_kbdShortcutSlotted",

package/unbundled/definition28.cjs

@@ -1,14 +1,15 @@
-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_definition$1 = require("./definition6.cjs");
 const require_dialog = require("./dialog.cjs");
 const require_definition$2 = require("./definition9.cjs");
-const require_mixins = require("./mixins.cjs");
+const require_feedback_message = require("./feedback-message.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");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_definition$3 = require("./definition26.cjs");
 const require_definition$4 = require("./definition27.cjs");
@@ -43,9 +44,9 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 /**
 * @public
 * @component color-picker
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Color Picker. Alternative to the `helper-text` attribute.
 * @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
-* @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
+* @slot swatches-text - Overrides the default "Saved colors" text above color swatches.
 * @event {CustomEvent<undefined>} change - Fires when the value changes
 * @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
@@ -430,7 +431,7 @@ function renderSwatchesCount() {
 }
 var ColorPickerTemplate = (context) => {
 	const textFieldTag = context.tagFor(require_definition$3.TextField);
-	const iconTag = context.tagFor(require_definition.Icon);
+	const iconTag = context.tagFor(require_icon.Icon);
 	const popupTag = context.tagFor(require_definition$2.Popup);
 	const buttonTag = context.tagFor(require_definition$1.Button);
 	const tooltipTag = context.tagFor(require_definition$4.Tooltip);
@@ -466,7 +467,7 @@ var colorPickerDefinition = require_vivid_element.defineVividComponent("color-pi
 	require_definition$3.textFieldDefinition,
 	require_definition$1.buttonDefinition,
 	require_definition$4.tooltipDefinition,
-	require_mixins.feedbackMessageDefinition
+	require_feedback_message.feedbackMessageDefinition
 ], { styles: color_picker_default });
 /**
 * Registers the color-picker element with the design system.

package/unbundled/definition28.js

@@ -1,13 +1,15 @@
 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 { i as Button, t as buttonDefinition } from "./definition6.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition9.js";
-import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { n as feedbackMessageDefinition } from "./feedback-message.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 { t as WithContextualHelp } from "./with-contextual-help.js";
 import { n as textFieldDefinition, r as TextField } from "./definition26.js";
 import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
@@ -42,9 +44,9 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 /**
 * @public
 * @component color-picker
-* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @slot helper-text - Describes how to use the Color Picker. Alternative to the `helper-text` attribute.
 * @slot popup-text - Overrides the default "Color Picker" title of the Popup window.
-* @slot swatches-text -  Overrides the default "Saved colors:" text above color swatches.
+* @slot swatches-text - Overrides the default "Saved colors" text above color swatches.
 * @event {CustomEvent<undefined>} change - Fires when the value changes
 * @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`