@vonage/vivid 5.16.0 → 5.17.0

package/unbundled/definition24.cjs

@@ -1,1038 +1,157 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition2.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_delegates_aria = require("./delegates-aria.cjs");
-const require_with_success_text = require("./with-success-text.cjs");
-const require_with_error_text = require("./with-error-text.cjs");
-const require_with_contextual_help = require("./with-contextual-help.cjs");
-const require_trapped_focus = require("./trapped-focus.cjs");
-const require_definition$1 = require("./definition7.cjs");
+const require_localized = require("./localized.cjs");
 const require_dialog = require("./dialog.cjs");
-const require_definition$2 = require("./definition10.cjs");
-const require_mixins = require("./mixins.cjs");
-const require_base_color_picker = require("./base-color-picker.cjs");
-const require_definition$3 = require("./definition25.cjs");
-const require_definition$4 = require("./definition26.cjs");
+const require_definition = require("./definition10.cjs");
+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/color-picker/color-picker.scss?inline
-var color_picker_default$1 = ".palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch: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:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host{--_low-ink-color:var(--vvd-color-neutral-600);display:inline-block}.base{min-inline-size:var(--_color-picker-min-inline-size,280px);display:inline-block}.control{inline-size:100%}.button{box-sizing:border-box;background-color:var(--button-color,var(--vvd-color-canvas-text));block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));color:var(--vvd-color-canvas);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4);vertical-align:middle;border:0;border-radius:4px;align-items:center;margin:0;text-decoration:none;display:inline-flex}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color:transparent;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))}.button [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.dialog{min-inline-size:var(--_color-picker-popup-min-inline-size,264px);flex-direction:column;display:flex}.dialog .header{justify-content:space-between;align-items:center;padding-block:8px;padding-inline:16px;display:inline-flex}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px;display:flex}.dialog .hex-input-wrapper{align-items:stretch;gap:8px;display:flex}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:none}.dialog .footer{border-top:1px solid var(--vvd-color-neutral-200);padding:16px}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap,8px)}vvd-hex-input{flex:auto;min-width:0}vvd-hex-input::part(input),vvd-hex-input>input{box-sizing:border-box;background-color:var(--vvd-color-canvas);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);border:0;border-radius:8px;outline:#0000}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input: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));--focus-stroke-gap-color:transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){border-radius:8px;flex:0 0 8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size,264px);min-inline-size:var(--_color-picker-popup-min-inline-size,264px)}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+//#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}";
 //#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/math.js
-var clamp = (number, min = 0, max = 1) => {
-	return number > max ? max : number < min ? min : number;
-};
-var round = (number, digits = 0, base = Math.pow(10, digits)) => {
-	return Math.round(base * number) / base;
-};
-360 / (Math.PI * 2);
-var hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
-var hexToRgba = (hex) => {
-	if (hex[0] === "#") hex = hex.substring(1);
-	if (hex.length < 6) return {
-		r: parseInt(hex[0] + hex[0], 16),
-		g: parseInt(hex[1] + hex[1], 16),
-		b: parseInt(hex[2] + hex[2], 16),
-		a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
-	};
-	return {
-		r: parseInt(hex.substring(0, 2), 16),
-		g: parseInt(hex.substring(2, 4), 16),
-		b: parseInt(hex.substring(4, 6), 16),
-		a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
-	};
-};
-var hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
-var hsvaToHsla = ({ h, s, v, a }) => {
-	const hh = (200 - s) * v / 100;
-	return {
-		h: round(h),
-		s: round(hh > 0 && hh < 200 ? s * v / 100 / (hh <= 100 ? hh : 200 - hh) * 100 : 0),
-		l: round(hh / 2),
-		a: round(a, 2)
-	};
-};
-var hsvaToHslString = (hsva) => {
-	const { h, s, l } = hsvaToHsla(hsva);
-	return `hsl(${h}, ${s}%, ${l}%)`;
-};
-var hsvaToRgba = ({ h, s, v, a }) => {
-	h = h / 360 * 6;
-	s = s / 100;
-	v = v / 100;
-	const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
-	return {
-		r: round([
-			v,
-			c,
-			b,
-			b,
-			d,
-			v
-		][module] * 255),
-		g: round([
-			d,
-			v,
-			v,
-			c,
-			b,
-			b
-		][module] * 255),
-		b: round([
-			b,
-			b,
-			d,
-			v,
-			v,
-			c
-		][module] * 255),
-		a: round(a, 2)
-	};
-};
-var format = (number) => {
-	const hex = number.toString(16);
-	return hex.length < 2 ? "0" + hex : hex;
-};
-var rgbaToHex = ({ r, g, b, a }) => {
-	const alphaHex = a < 1 ? format(round(a * 255)) : "";
-	return "#" + format(r) + format(g) + format(b) + alphaHex;
-};
-var rgbaToHsva = ({ r, g, b, a }) => {
-	const max = Math.max(r, g, b);
-	const delta = max - Math.min(r, g, b);
-	const hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
-	return {
-		h: round(60 * (hh < 0 ? hh + 6 : hh)),
-		s: round(max ? delta / max * 100 : 0),
-		v: round(max / 255 * 100),
-		a
-	};
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/compare.js
-var equalColorObjects = (first, second) => {
-	if (first === second) return true;
-	for (const prop in first) if (first[prop] !== second[prop]) return false;
-	return true;
-};
-var equalHex = (first, second) => {
-	if (first.toLowerCase() === second.toLowerCase()) return true;
-	return equalColorObjects(hexToRgba(first), hexToRgba(second));
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/dom.js
-var cache = {};
-var tpl = (html) => {
-	let template = cache[html];
-	if (!template) {
-		template = document.createElement("template");
-		template.innerHTML = html;
-		cache[html] = template;
-	}
-	return template;
-};
-var fire = (target, type, detail) => {
-	target.dispatchEvent(new CustomEvent(type, {
-		bubbles: true,
-		detail
-	}));
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/slider.js
-var hasTouched = false;
-var isTouch = (e) => "touches" in e;
-var isValid = (event) => {
-	if (hasTouched && !isTouch(event)) return false;
-	if (!hasTouched) hasTouched = isTouch(event);
-	return true;
-};
-var pointerMove = (target, event) => {
-	const pointer = isTouch(event) ? event.touches[0] : event;
-	const rect = target.el.getBoundingClientRect();
-	fire(target.el, "move", target.getMove({
-		x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-		y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
-	}));
-};
-var keyMove = (target, event) => {
-	const keyCode = event.keyCode;
-	if (keyCode > 40 || target.xy && keyCode < 37 || keyCode < 33) return;
-	event.preventDefault();
-	fire(target.el, "move", target.getMove({
-		x: keyCode === 39 ? .01 : keyCode === 37 ? -.01 : keyCode === 34 ? .05 : keyCode === 33 ? -.05 : keyCode === 35 ? 1 : keyCode === 36 ? -1 : 0,
-		y: keyCode === 40 ? .01 : keyCode === 38 ? -.01 : 0
-	}, true));
-};
-var Slider = class {
-	constructor(root, part, aria, xy) {
-		const template = tpl(`<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`);
-		root.appendChild(template.content.cloneNode(true));
-		const el = root.querySelector(`[part=${part}]`);
-		el.addEventListener("mousedown", this);
-		el.addEventListener("touchstart", this);
-		el.addEventListener("keydown", this);
-		this.el = el;
-		this.xy = xy;
-		this.nodes = [el.firstChild, el];
-	}
-	set dragging(state) {
-		const toggleEvent = state ? document.addEventListener : document.removeEventListener;
-		toggleEvent(hasTouched ? "touchmove" : "mousemove", this);
-		toggleEvent(hasTouched ? "touchend" : "mouseup", this);
-	}
-	handleEvent(event) {
-		switch (event.type) {
-			case "mousedown":
-			case "touchstart":
-				event.preventDefault();
-				if (!isValid(event) || !hasTouched && event.button != 0) return;
-				this.el.focus();
-				pointerMove(this, event);
-				this.dragging = true;
-				break;
-			case "mousemove":
-			case "touchmove":
-				event.preventDefault();
-				pointerMove(this, event);
-				break;
-			case "mouseup":
-			case "touchend":
-				this.dragging = false;
-				break;
-			case "keydown":
-				keyMove(this, event);
-				break;
-		}
-	}
-	style(styles) {
-		styles.forEach((style, i) => {
-			for (const p in style) this.nodes[i].style.setProperty(p, style[p]);
-		});
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/hue.js
-var Hue = class extends Slider {
-	constructor(root) {
-		super(root, "hue", "aria-label=\"Hue\" aria-valuemin=\"0\" aria-valuemax=\"360\"", false);
-	}
-	update({ h }) {
-		this.h = h;
-		this.style([{
-			left: `${h / 360 * 100}%`,
-			color: hsvaToHslString({
-				h,
-				s: 100,
-				v: 100,
-				a: 1
-			})
-		}]);
-		this.el.setAttribute("aria-valuenow", `${round(h)}`);
-	}
-	getMove(offset, key) {
-		return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/saturation.js
-var Saturation = class extends Slider {
-	constructor(root) {
-		super(root, "saturation", "aria-label=\"Color\"", true);
-	}
-	update(hsva) {
-		this.hsva = hsva;
-		this.style([{
-			top: `${100 - hsva.v}%`,
-			left: `${hsva.s}%`,
-			color: hsvaToHslString(hsva)
-		}, { "background-color": hsvaToHslString({
-			h: hsva.h,
-			s: 100,
-			v: 100,
-			a: 1
-		}) }]);
-		this.el.setAttribute("aria-valuetext", `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
-	}
-	getMove(offset, key) {
-		return {
-			s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
-			v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
-		};
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/color-picker.js
-var color_picker_default = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/hue.js
-var hue_default = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/styles/saturation.js
-var saturation_default = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/components/color-picker.js
-var $isSame = Symbol("same");
-var $color$1 = Symbol("color");
-var $hsva = Symbol("hsva");
-var $update$1 = Symbol("update");
-var $parts = Symbol("parts");
-var $css = Symbol("css");
-var $sliders = Symbol("sliders");
-var ColorPicker$1 = class extends HTMLElement {
-	static get observedAttributes() {
-		return ["color"];
-	}
-	get [$css]() {
-		return [
-			color_picker_default,
-			hue_default,
-			saturation_default
-		];
-	}
-	get [$sliders]() {
-		return [Saturation, Hue];
-	}
-	get color() {
-		return this[$color$1];
-	}
-	set color(newColor) {
-		if (!this[$isSame](newColor)) {
-			const newHsva = this.colorModel.toHsva(newColor);
-			this[$update$1](newHsva);
-			this[$color$1] = newColor;
-		}
-	}
-	constructor() {
-		super();
-		const template = tpl(`<style>${this[$css].join("")}</style>`);
-		const root = this.attachShadow({ mode: "open" });
-		root.appendChild(template.content.cloneNode(true));
-		root.addEventListener("move", this);
-		this[$parts] = this[$sliders].map((slider) => new slider(root));
-	}
-	connectedCallback() {
-		if (this.hasOwnProperty("color")) {
-			const value = this.color;
-			delete this["color"];
-			this.color = value;
-		} else if (!this.color) this.color = this.colorModel.defaultColor;
-	}
-	attributeChangedCallback(_attr, _oldVal, newVal) {
-		const color = this.colorModel.fromAttr(newVal);
-		if (!this[$isSame](color)) this.color = color;
-	}
-	handleEvent(event) {
-		const oldHsva = this[$hsva];
-		const newHsva = {
-			...oldHsva,
-			...event.detail
-		};
-		this[$update$1](newHsva);
-		let newColor;
-		if (!equalColorObjects(newHsva, oldHsva) && !this[$isSame](newColor = this.colorModel.fromHsva(newHsva))) {
-			this[$color$1] = newColor;
-			fire(this, "color-changed", { value: newColor });
-		}
-	}
-	[$isSame](color) {
-		return this.color && this.colorModel.equal(color, this.color);
-	}
-	[$update$1](hsva) {
-		this[$hsva] = hsva;
-		this[$parts].forEach((part) => part.update(hsva));
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex.js
-var colorModel = {
-	defaultColor: "#000",
-	toHsva: hexToHsva,
-	fromHsva: ({ h, s, v }) => hsvaToHex({
-		h,
-		s,
-		v,
-		a: 1
-	}),
-	equal: equalHex,
-	fromAttr: (color) => color
-};
-var HexBase = class extends ColorPicker$1 {
-	get colorModel() {
-		return colorModel;
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-color-picker.js
-/**
-* A color picker custom element that uses HEX format.
-*
-* @element hex-color-picker
-*
-* @prop {string} color - Selected color in HEX format.
-* @attr {string} color - Selected color in HEX format.
-*
-* @fires color-changed - Event fired when color property changes.
-*
-* @csspart hue - A hue selector container.
-* @csspart saturation - A saturation selector container
-* @csspart hue-pointer - A hue pointer element.
-* @csspart saturation-pointer - A saturation pointer element.
-*/
-var HexColorPicker = class extends HexBase {};
-customElements.define("hex-color-picker", HexColorPicker);
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/utils/validate.js
-var matcher = /^#?([0-9A-F]{3,8})$/i;
-var validHex = (value, alpha) => {
-	const match = matcher.exec(value);
-	const length = match ? match[1].length : 0;
-	return length === 3 || length === 6 || !!alpha && length === 4 || !!alpha && length === 8;
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/lib/entrypoints/hex-input.js
-var template = tpl("<slot><input part=\"input\" spellcheck=\"false\"></slot>");
-var escape = (hex, alpha) => hex.replace(/([^0-9A-F]+)/gi, "").substring(0, alpha ? 8 : 6);
-var $alpha = Symbol("alpha");
-var $color = Symbol("color");
-var $saved = Symbol("saved");
-var $input = Symbol("input");
-var $init = Symbol("init");
-var $prefix = Symbol("prefix");
-var $update = Symbol("update");
-var HexInputBase = class extends HTMLElement {
-	static get observedAttributes() {
-		return [
-			"alpha",
-			"color",
-			"prefixed"
-		];
-	}
-	get color() {
-		return this[$color];
-	}
-	set color(hex) {
-		this[$color] = hex;
-		this[$update](hex);
-	}
-	get alpha() {
-		return this[$alpha];
-	}
-	set alpha(alpha) {
-		this[$alpha] = alpha;
-		this.toggleAttribute("alpha", alpha);
-		const color = this.color;
-		if (color && !validHex(color, alpha)) this.color = color.startsWith("#") ? color.substring(0, color.length === 5 ? 4 : 7) : color.substring(0, color.length === 4 ? 3 : 6);
-	}
-	get prefixed() {
-		return this[$prefix];
-	}
-	set prefixed(prefixed) {
-		this[$prefix] = prefixed;
-		this.toggleAttribute("prefixed", prefixed);
-		this[$update](this.color);
-	}
-	constructor() {
-		super();
-		const root = this.attachShadow({ mode: "open" });
-		root.appendChild(template.content.cloneNode(true));
-		root.firstElementChild.addEventListener("slotchange", () => this[$init](root));
-	}
-	connectedCallback() {
-		this[$init](this.shadowRoot);
-		if (this.hasOwnProperty("alpha")) {
-			const value = this.alpha;
-			delete this["alpha"];
-			this.alpha = value;
-		} else this.alpha = this.hasAttribute("alpha");
-		if (this.hasOwnProperty("prefixed")) {
-			const value = this.prefixed;
-			delete this["prefixed"];
-			this.prefixed = value;
-		} else this.prefixed = this.hasAttribute("prefixed");
-		if (this.hasOwnProperty("color")) {
-			const value = this.color;
-			delete this["color"];
-			this.color = value;
-		} else if (this.color == null) this.color = this.getAttribute("color") || "";
-		else if (this[$color]) this[$update](this[$color]);
-	}
-	handleEvent(event) {
-		const { value } = event.target;
-		switch (event.type) {
-			case "input":
-				const hex = escape(value, this.alpha);
-				this[$saved] = this.color;
-				if (validHex(hex, this.alpha) || value === "") {
-					this.color = hex;
-					this.dispatchEvent(new CustomEvent("color-changed", {
-						bubbles: true,
-						detail: { value: hex ? "#" + hex : "" }
-					}));
-				}
-				break;
-			case "blur": if (value && !validHex(value, this.alpha)) this.color = this[$saved];
-		}
-	}
-	attributeChangedCallback(attr, _oldVal, newVal) {
-		if (attr === "color" && this.color !== newVal) this.color = newVal;
-		const hasBooleanAttr = newVal != null;
-		if (attr === "alpha") {
-			if (this.alpha !== hasBooleanAttr) this.alpha = hasBooleanAttr;
-		}
-		if (attr === "prefixed") {
-			if (this.prefixed !== hasBooleanAttr) this.prefixed = hasBooleanAttr;
-		}
-	}
-	[$init](root) {
-		let input = this.querySelector("input");
-		if (!input) {
-			let c;
-			while (c = this.firstChild) c.remove();
-			input = root.querySelector("input");
-		}
-		input.addEventListener("input", this);
-		input.addEventListener("blur", this);
-		this[$input] = input;
-		this[$update](this.color);
-	}
-	[$update](hex) {
-		if (this[$input]) this[$input].value = hex == null || hex == "" ? "" : (this.prefixed ? "#" : "") + escape(hex, this.alpha);
-	}
-};
-//#endregion
-//#region ../../node_modules/.pnpm/vanilla-colorful@0.7.2/node_modules/vanilla-colorful/hex-input.js
-/**
-* A custom element for entering color in HEX format.
-*
-* @element hex-input
-*
-* @prop {string} color - Color in HEX format.
-* @attr {string} color - Selected color in HEX format.
-* @prop {boolean} alpha - When true, `#rgba` and `#rrggbbaa` color formats are allowed.
-* @attr {boolean} alpha - Allows `#rgba` and `#rrggbbaa` color formats.
-* @prop {boolean} prefixed - When true, `#` prefix is displayed in the input.
-* @attr {boolean} prefixed - Enables `#` prefix displaying.
-*
-* @fires color-changed - Event fired when color is changed.
-*
-* @csspart input - A native input element.
-*/
-var HexInput = class extends HexInputBase {};
-customElements.define("hex-input", HexInput);
-//#endregion
-//#region src/lib/color-picker/color-picker.ts
-var VC_HEX_PICKER_TAG = "vvd-hex-picker";
-var VC_HEX_INPUT_TAG = "vvd-hex-input";
-var VvdHexPicker = class extends HexColorPicker {
-	static {
-		this.displayName = "VvdHexPicker";
-	}
-};
-var VvdHexInput = class extends HexInput {
-	static {
-		this.displayName = "VvdHexInput";
-	}
-};
-/* v8 ignore if -- @preserve */
-if (!customElements.get(VC_HEX_PICKER_TAG)) customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
-/* v8 ignore if -- @preserve */
-if (!customElements.get(VC_HEX_INPUT_TAG)) customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
-var vcPickerTag = VC_HEX_PICKER_TAG;
-var vcInputTag = VC_HEX_INPUT_TAG;
+//#region src/lib/toggletip/toggletip.ts
 /**
 * @public
-* @component color-picker
-* @slot helper-text - Describes how to use the text-field. 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.
-* @event {CustomEvent<undefined>} change - Fires when the value changes
-* @vueModel modelValue value input `event.currentTarget.value`
+* @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.
+* @testSelector byHeadline byHeadline
+* @testQuery open open true
+* @testQuery closed open false
 */
-var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_delegates_aria.DelegatesAria(require_trapped_focus.TrappedFocus(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement))))))) {
+var Toggletip = class extends require_localized.Localized(require_anchored.Anchored(require_vivid_element.VividElement)) {
 	constructor(..._args) {
 		super(..._args);
-		this.disableSavedColors = false;
-		this.savedColors = [];
-		this.maxSwatches = 6;
-		this.copyIconName = "copy-2-line";
-		this._copyValueToClipboard = async (value) => {
-			try {
-				await navigator.clipboard.writeText(value);
-				this._setTemporaryCopyIcon("check-circle-line");
-				this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(value);
-			} catch {
-				alert(this.locale.colorPicker.copyErrorText);
-				this._setTemporaryCopyIcon("error-line");
-				this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
-			}
-		};
-		this._ariaLiveDescription = "";
-	}
-	static {
-		this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
-	}
-	/**
-	* @internal
-	*/
-	placeholderChanged() {
-		/* v8 ignore if -- @preserve */
-		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
-	}
-	/**
-	* Change event handler for inner control.
-	* @remarks
-	* @internal
-	*/
-	handleChange() {
-		this.$emit("change");
-	}
-	/**
-	* @internal
-	*/
-	openChanged(_oldValue, newValue) {
-		if (newValue && this.isConnected) requestAnimationFrame(() => {
-			this._refreshCanvasColor();
-		});
-	}
-	/**
-	* @internal
-	*/
-	savedColorsKeyChanged() {
-		this.savedColors = this._loadSavedColors();
-	}
-	/**
-	* @internal
-	*/
-	get _savedColorsStorageKey() {
-		if (this.savedColorsKey) return this.savedColorsKey;
-		return `vvd-saved-colors:${this.tagName.toLowerCase()}`;
-	}
-	/**
-	* @internal
-	*/
-	_handleColorSaving() {
-		this._saveCurrentColor();
-	}
-	/**
-	* @internal
-	*/
-	_saveCurrentColor() {
-		const value = this.value;
-		if (typeof value !== "string" || !require_base_color_picker.isValidHexColor(value)) return;
-		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-		const idx = swatches.findIndex((s) => s?.value === value);
-		if (idx !== -1) swatches.splice(idx, 1);
-		swatches.unshift({ value });
-		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
-		this._setSavedColors(this.savedColors);
-	}
-	/**
-	* @internal
-	*/
-	_loadSavedColors() {
-		try {
-			const savedColors = localStorage.getItem(this._savedColorsStorageKey);
-			if (!savedColors) return [];
-			const parsed = JSON.parse(savedColors);
-			if (!Array.isArray(parsed)) return [];
-			return parsed.filter((x) => x && typeof x.value === "string" && require_base_color_picker.isValidHexColor(x.value)).map((x) => ({
-				value: x.value,
-				label: typeof x.label === "string" ? x.label : void 0
-			}));
-		} catch {
-			return [];
-		}
-	}
-	/**
-	* @internal
-	*/
-	_setSavedColors(swatches) {
-		try {
-			localStorage.setItem(this._savedColorsStorageKey, JSON.stringify(swatches));
-		} catch {}
-	}
-	/**
-	* Get all color swatches combined, both from swatches property and saved colors
-	* @internal
-	*/
-	get allSwatches() {
-		const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
-		const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
-		const seen = /* @__PURE__ */ new Set();
-		const merged = [];
-		const appendIfUniqueAndValid = (swatch) => {
-			if (!swatch || typeof swatch.value !== "string") return;
-			if (!require_base_color_picker.isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
-			seen.add(swatch.value);
-			merged.push(swatch);
-		};
-		if (!this.disableSavedColors) savedColors.forEach(appendIfUniqueAndValid);
-		predefinedColors.forEach(appendIfUniqueAndValid);
-		return merged.slice(0, this._maxSwatchesNormalized);
-	}
-	/**
-	* @internal
-	*/
-	get _maxSwatchesNormalized() {
-		return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
-	}
-	/**
-	* @internal
-	*/
-	maxSwatchesChanged() {
-		const maxCount = this._maxSwatchesNormalized;
-		if (this.savedColors?.length > maxCount) {
-			this.savedColors = this.savedColors.slice(0, maxCount);
-			this._setSavedColors(this.savedColors);
-		}
-	}
-	/**
-	* @internal
-	*/
-	_onPickerColorChanged(e) {
-		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
-	}
-	/**
-	* @internal
-	*/
-	valueChanged(_oldVal, newVal) {
-		if (this._vcHexPickerEl && typeof newVal === "string") this._vcHexPickerEl.color = newVal;
-		if (this._vcHexInputEl && typeof newVal === "string") this._vcHexInputEl.color = newVal;
-	}
-	/**
-	* @internal
-	*/
-	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
-	}
-	/**
-	* @internal
-	*/
-	get _buttonColor() {
-		/* v8 ignore else -- @preserve */
-		if (!this._canvasColor) this._refreshCanvasColor();
-		if (this.value && require_base_color_picker.isValidHexColor(this.value)) return this.value;
-		return "var(--vvd-color-canvas-text)";
-	}
-	/**
-	* @internal
-	*/
-	_onButtonClick() {
-		this.open = !this.open;
-	}
-	/**
-	* @internal
-	*/
-	_handleCloseRequest() {
+		this.alternate = false;
+		this.placement = "right";
 		this.open = false;
 	}
+	#originalAriaLabel = null;
 	/**
 	* @internal
 	*/
-	_isInPath(e, el) {
-		if (!el) return false;
-		const path = e.composedPath?.();
-		return !!(path && path.includes(el));
+	openChanged(oldValue, newValue) {
+		if (oldValue === void 0) return;
+		if (newValue) this.setAttribute("role", "status");
+		else this.removeAttribute("role");
+		this.#updateListeners();
+		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
-	/**
-	* @internal
-	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
 	connectedCallback() {
 		super.connectedCallback();
-		this.savedColors = this._loadSavedColors();
-		document.addEventListener("mousedown", this.#closeOnPointerOutside, true);
+		this.#updateListeners();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
+		this.#updateListeners();
 	}
-	#iconResetTimer = null;
 	/**
 	* @internal
 	*/
-	_setTemporaryCopyIcon(name, ms = 2e3) {
-		this.copyIconName = name;
-		if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
-		this.#iconResetTimer = setTimeout(() => {
-			this.copyIconName = "copy-2-line";
-			this.#iconResetTimer = null;
-		}, ms);
+	_anchorElChanged(oldValue, newValue) {
+		if (oldValue) this.#cleanupAnchor(oldValue);
+		if (newValue) this.#setupAnchor(newValue);
 	}
-	/**
-	* @internal
-	*/
-	_onBaseKeydown(event) {
-		if (this.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) {
-			this.open = false;
-			return false;
-		}
-		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
-		return true;
+	#setupAnchor(a) {
+		a.addEventListener("click", this.#openIfClosed, true);
+		this.#originalAriaLabel = a.ariaLabel;
+		a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
+		this.#updateAnchor(a);
 	}
-	/**
-	* @internal
-	*/
-	_focusableElsWithinDialog() {
-		return this._popupEl.querySelectorAll("button:not([role=\"gridcell\"]), [data-vvd-component=\"button\"], vwc-button:not([role=\"gridcell\"])");
+	#updateAnchor(a) {
+		a.setAttribute("aria-expanded", this.open.toString());
+		a.setAttribute("data-expanded", this.open.toString());
 	}
-	/**
-	* @internal
-	*/
-	_handleCellKeydown(event, value, index, isSaveCell) {
-		if (event.key === "Tab") {
-			event.preventDefault();
-			const focusableEls = this._focusableElsWithinDialog();
-			const idx = Array.prototype.indexOf.call(focusableEls, event.currentTarget);
-			focusableEls[event.shiftKey ? (idx - 1 + focusableEls.length) % focusableEls.length : (idx + 1) % focusableEls.length]?.focus();
-			return false;
+	#cleanupAnchor(a) {
+		a.removeEventListener("click", this.#openIfClosed, true);
+		a.removeAttribute("aria-expanded");
+		a.removeAttribute("data-expanded");
+		/* v8 ignore else -- @preserve */
+		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
+	}
+	#openIfClosed = () => {
+		if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
+	};
+	#updateListeners() {
+		document.removeEventListener("click", this.#closeOnClickOutside);
+		document.removeEventListener("keydown", this.#closeOnEscape);
+		if (this.open && this.isConnected) {
+			document.addEventListener("click", this.#closeOnClickOutside);
+			document.addEventListener("keydown", this.#closeOnEscape);
 		}
-		return super._handleCellKeydown(event, value, index, isSaveCell);
 	}
-	/**
-	* @internal
-	*/
-	_handleSwatchSelection(value) {
+	#closeOnClickOutside = (e) => {
+		const clickedOutside = !this.contains(e.target);
+		const clickedOnAnchor = this._anchorEl?.contains(e.target);
+		if (clickedOutside || clickedOnAnchor) this.open = false;
+	};
+	#closeOnEscape = (e) => {
 		/* v8 ignore else -- @preserve */
-		if (this.value !== value) this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
-		super._handleSwatchSelection(value);
-	}
+		if (e.key === "Escape") this.open = false;
+	};
 };
-require_decorate.__decorate([_microsoft_fast_element.attr], ColorPicker.prototype, "placeholder", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "saved-colors-key" })], ColorPicker.prototype, "savedColorsKey", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	mode: "boolean",
-	attribute: "disable-saved-colors"
-})], ColorPicker.prototype, "disableSavedColors", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "savedColors", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "max-swatches",
-	mode: "fromView",
-	converter: _microsoft_fast_element.nullableNumberConverter
-})], ColorPicker.prototype, "maxSwatches", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "copyIconName", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.prototype, "_ariaLiveDescription", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Toggletip.prototype, "headline", 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);
 //#endregion
-//#region src/lib/color-picker/color-picker.template.ts
-function renderTextField(textFieldTag, iconTag) {
-	const getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+//#region src/lib/toggletip/toggletip.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var ToggletipTemplate = (context) => {
+	const popup = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html`
-		<${textFieldTag} 
-			id="text-field"
-			class="${getClasses}"
-			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
-			maxlength="7"
-			label="${(x) => x.label}"
-			:value="${(x) => x.value}"
-			placeholder="${(x) => x.placeholder}"
-			helper-text="${(x) => x.helperText}"
-			error-text="${(x) => x.errorValidationMessage}"
-			success-text="${(x) => x.successText}"
-			?disabled="${(x) => x.disabled}"
-			?required="${(x) => x.required}"
-			@input='${(x, c) => x._onTextFieldInput(c.event)}'
-			@change="${(x) => x.handleChange()}"
-			@blur="${(x) => {
-		x.$emit("blur", void 0, { bubbles: false });
-	}}"
-			@focus="${(x) => {
-		x.$emit("focus", void 0, { bubbles: false });
+		${require_anchored.anchorSlotTemplateFactory()}
+		<${popup}
+			@keydown="${(x, { event }) => {
+		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) return false;
+		return true;
 	}}"
-			${require_delegates_aria.delegateAria()}
-			${(0, _microsoft_fast_element.ref)("_textFieldEl")}
+			class="${getClasses}"
+			arrow
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			?alternate="${(x) => !x.alternate}"
+			placement="${(x) => x.placement}"
+			exportparts="vvd-theme-alternate"
 		>
-			<button 
-				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
-				aria-expanded="${(x) => x.open}"
-  			aria-haspopup="dialog"
-				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
-				?disabled="${(x) => x.disabled}"
-				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
-				${(0, _microsoft_fast_element.ref)("_buttonEl")}>
-				<${iconTag} name="edit-line"></${iconTag}>
-			</button>
-			<slot
-				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
-				name="helper-text"
-				${(0, _microsoft_fast_element.slotted)("_helperTextSlottedContent")}
-			></slot>
-			<slot
-				slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
-				name='contextual-help'
-				${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
-			></slot>
-		</${textFieldTag}>
-	`;
-}
-function renderPopupHeader(buttonTag, iconTag) {
-	return _microsoft_fast_element.html`
-		<div class="header">
-			<h2 class="header-title" id="color-picker-title">
-				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
-			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
-				@click="${(x) => x._handleCloseRequest()}">
-				<${iconTag} slot="icon" name="close-line"></${iconTag}>
-			</${buttonTag}>
-		</div>
-	`;
-}
-function renderPopupBody(buttonTag, iconTag, tooltipTag) {
-	return _microsoft_fast_element.html`
-		<div class="body">
-			<${_microsoft_fast_element.html.partial(vcPickerTag)}
-				part="hex-picker"
-				color="${(x) => x.value}"
-				@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
-				${(0, _microsoft_fast_element.ref)("_vcHexPickerEl")}
-			></${_microsoft_fast_element.html.partial(vcPickerTag)}>
-			<div class="hex-input-wrapper">
-				<${_microsoft_fast_element.html.partial(vcInputTag)}
-					part="hex-input"
-					prefixed
-					color="${(x) => x.value}"
-					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
-					${(0, _microsoft_fast_element.ref)("_vcHexInputEl")}
-				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
-						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
-						part="input">
-				</${_microsoft_fast_element.html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
-					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
-						@click="${(x) => x._copyValueToClipboard(x.value)}">
-						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
-					</${buttonTag}>
-				</${tooltipTag}>
-			</div>
-		</div>
-	`;
-}
-function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
-	return _microsoft_fast_element.html`
-		<div class="footer">
-			<div class="footer-header">
-				<span class="footer-title" id="color-picker-footer-title"
-					><slot name="swatches-text"
-						>${(x) => x.locale.colorPicker.swatchesLabel}</slot
-					></span
-				>
-				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, renderSwatchesCount())}
-			</div>
-			<div
-				class="palette"
-				role="grid"
-				aria-rowcount="${(x) => Math.ceil(x.allSwatches.length / x._getRowLength())}"
-				aria-colcount="${(x) => x._getRowLength()}"
-				style="--swatches-per-row: ${(x) => x._getRowLength()};"
-				aria-labelledby="color-picker-footer-title"
-			>
-				${(0, _microsoft_fast_element.repeat)((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
-				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, _microsoft_fast_element.html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
-							exportparts="vvd-theme-alternate">
-							<${buttonTag}
-								slot="anchor"
-								appearance="outlined"
-								size="super-condensed"
-								role="gridcell"
-								tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
-								aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
-								@click="${(x) => x._saveCurrentColor()}"
-								@keydown="${(x, c) => x._handleCellKeydown(c.event, x.value, x.allSwatches.length, true)}">
-								<${iconTag} slot="icon" name="plus-line"></${iconTag}>
-							</${buttonTag}>
-						</${tooltipTag}>
-					`)}
+			<div class="content-wrapper">
+				${(0, _microsoft_fast_element.when)((x) => x.headline, _microsoft_fast_element.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
-		</div>
-	`;
-}
-function renderSwatchesCount() {
-	return _microsoft_fast_element.html`
-		<span
-			id="swatches-count"
-			class="swatches-count"
-			aria-label="${(x) => x.locale.colorPicker.maxSwatchesMessage(x.allSwatches.length, x.maxSwatches)}"
-			>${(x) => `${x.allSwatches.length}/${x.maxSwatches}`}</span
-		>
-	`;
-}
-var ColorPickerTemplate = (context) => {
-	const textFieldTag = context.tagFor(require_definition$3.TextField);
-	const iconTag = context.tagFor(require_definition.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);
-	return _microsoft_fast_element.html`
-		<div class="base" @keydown="${(x, { event }) => x._onBaseKeydown(event)}">
-			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
-				${(x) => x._ariaLiveDescription}
-			</span>
-			${renderTextField(textFieldTag, iconTag)}
-			<${popupTag}
-				:open="${(x) => x.open}"
-				:anchor="${(x) => x._buttonEl}"
-				placement="top"
-				offset="10" 
-				${(0, _microsoft_fast_element.ref)("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
-					aria-labelledby="color-picker-title">
-					${renderPopupHeader(buttonTag, iconTag)}
-					${renderPopupBody(buttonTag, iconTag, tooltipTag)}
-					${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors || x.allSwatches.length > 0, renderPopupFooter(buttonTag, iconTag, tooltipTag))}
-				</div>
-			</${popupTag}>
-		</div>
+		</${popup}>
 	`;
 };
 //#endregion
-//#region src/lib/color-picker/definition.ts
-var colorPickerDefinition = require_vivid_element.defineVividComponent("color-picker", ColorPicker, ColorPickerTemplate, [
-	require_definition$2.popupDefinition,
-	require_definition.iconDefinition,
-	require_definition$3.textFieldDefinition,
-	require_definition$1.buttonDefinition,
-	require_definition$4.tooltipDefinition,
-	require_mixins.feedbackMessageDefinition
-], { styles: color_picker_default$1 });
+//#region src/lib/toggletip/definition.ts
+/**
+* @internal
+*/
+var toggletipDefinition = require_vivid_element.defineVividComponent("toggletip", Toggletip, ToggletipTemplate, [require_definition.popupDefinition], { styles: toggletip_default });
 /**
-* Registers the color-picker element with the design system.
+* Registers the toggletip element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerColorPicker = require_vivid_element.createRegisterFunction(colorPickerDefinition);
+var registerToggletip = require_vivid_element.createRegisterFunction(toggletipDefinition);
 //#endregion
-Object.defineProperty(exports, "ColorPicker", {
+Object.defineProperty(exports, "Toggletip", {
 	enumerable: true,
 	get: function() {
-		return ColorPicker;
+		return Toggletip;
 	}
 });
-Object.defineProperty(exports, "colorPickerDefinition", {
+Object.defineProperty(exports, "registerToggletip", {
 	enumerable: true,
 	get: function() {
-		return colorPickerDefinition;
+		return registerToggletip;
 	}
 });
-Object.defineProperty(exports, "registerColorPicker", {
+Object.defineProperty(exports, "toggletipDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerColorPicker;
+		return toggletipDefinition;
 	}
 });