@vonage/vivid 5.17.0 → 5.19.0

package/unbundled/definition2.js

@@ -1,85 +1,15 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { n as visuallyHiddenDefinition, r as VisuallyHidden } from "./definition.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
 import { t as __decorate } from "./decorate.js";
 import { attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/icon/icon.scss?inline
 var icon_default = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
-//#region ../icons/dist/index.mjs
-var version = "4.10.0";
-var ICONS_BASE_URL = "https://icon.resources.vonage.com";
-var ICONS_VERSION = version;
-`${ICONS_BASE_URL}${ICONS_VERSION}`;
-//#endregion
-//#region src/shared/utils/numberConverter.ts
-var numberConverter = {
-	toView(value) {
-		if (value === void 0) return null;
-		return value.toString();
-	},
-	fromView(value) {
-		if (typeof value === "string") value = parseFloat(value.toString());
-		if (typeof value !== "number") return;
-		return isNaN(value) || !isFinite(value) ? void 0 : value;
-	}
-};
-//#endregion
-//#region src/lib/icon/icon.placeholder.ts
-var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
-    <g>
-        <g stroke-width="6" stroke-linecap="round" fill="none">
-            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
-            </path>
-            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
-            </path>
-            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
-            </animateTransform>
-        </g>
-    </g>
-</svg>`;
-//#endregion
 //#region src/lib/icon/icon.ts
 var PLACEHOLDER_DELAY = 500;
 var PLACEHOLDER_TIMEOUT = 2e3;
-var baseUrlTemplate = (resource, version) => [
-	ICONS_BASE_URL,
-	`v${version}`,
-	resource
-].join("/");
-var assertIsValidResponse = ({ ok, headers }) => {
-	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
-};
-var extractSvg = (response) => {
-	assertIsValidResponse(response);
-	return response.text();
-};
-var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
-var normalizeKey = (iconId) => (iconId ?? "").trim();
-var iconCache = /* @__PURE__ */ new Map();
-var resolveIcon = (iconId, signal) => {
-	const key = normalizeKey(iconId);
-	if (!key) return Promise.resolve("");
-	const cached = iconCache.get(key);
-	if (cached && !cached.signal?.aborted) return cached.promise;
-	const promise = loadSvg(key, signal).then((svg) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise && signal.aborted) {
-			iconCache.delete(key);
-			throw signal.reason ?? new DOMException("Aborted", "AbortError");
-		}
-		return svg;
-	}).catch((err) => {
-		const entry = iconCache.get(key);
-		if (entry && entry.promise === promise) iconCache.delete(key);
-		throw err;
-	});
-	iconCache.set(key, {
-		promise,
-		signal
-	});
-	return promise;
-};
 /**
 * @public
 * @component icon
@@ -90,9 +20,11 @@ var Icon = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
 		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
 	}
-	#currentRequestId = 0;
-	#abortController = null;
+	#currentRequestId;
+	#abortController;
 	/**
 	* @internal
 	*/

package/unbundled/definition20.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
 import { n as delegateAria } from "./delegates-aria.js";
 import { t as CalendarEvent } from "./calendar-event.js";
 import { html, when } from "@microsoft/fast-element";

package/unbundled/definition21.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { f as Sticky } from "./enums.js";
 import { t as CalendarEvent } from "./calendar-event.js";

package/unbundled/definition22.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria } from "./delegates-aria.js";

package/unbundled/definition23.cjs

@@ -11,7 +11,7 @@ const require_mixins = require("./mixins.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/checkbox/checkbox.scss?inline
-var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_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}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.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}@supports (user-select: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}";
 /**
 * @public
 * @component checkbox

package/unbundled/definition23.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
@@ -10,7 +10,7 @@ import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
 import { attr, html, observable, 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-300);--_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}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.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}@supports (user-select: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}";
 /**
 * @public
 * @component checkbox

package/unbundled/definition24.cjs

@@ -24,11 +24,24 @@ var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host
 var Toggletip = class extends require_localized.Localized(require_anchored.Anchored(require_vivid_element.VividElement)) {
 	constructor(..._args) {
 		super(..._args);
+		this.#originalAriaLabel = null;
 		this.alternate = false;
 		this.placement = "right";
 		this.open = false;
+		this.#openIfClosed = () => {
+			if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
+		};
+		this.#closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
 	}
-	#originalAriaLabel = null;
+	#originalAriaLabel;
 	/**
 	* @internal
 	*/
@@ -71,9 +84,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
-	#openIfClosed = () => {
-		if (!this.open) _microsoft_fast_element.Updates.enqueue(() => this.open = true);
-	};
+	#openIfClosed;
 	#updateListeners() {
 		document.removeEventListener("click", this.#closeOnClickOutside);
 		document.removeEventListener("keydown", this.#closeOnEscape);
@@ -82,15 +93,8 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 			document.addEventListener("keydown", this.#closeOnEscape);
 		}
 	}
-	#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 (e.key === "Escape") this.open = false;
-	};
+	#closeOnClickOutside;
+	#closeOnEscape;
 };
 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);

package/unbundled/definition24.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
@@ -23,11 +23,24 @@ var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host
 var Toggletip = class extends Localized(Anchored(VividElement)) {
 	constructor(..._args) {
 		super(..._args);
+		this.#originalAriaLabel = null;
 		this.alternate = false;
 		this.placement = "right";
 		this.open = false;
+		this.#openIfClosed = () => {
+			if (!this.open) Updates.enqueue(() => this.open = true);
+		};
+		this.#closeOnClickOutside = (e) => {
+			const clickedOutside = !this.contains(e.target);
+			const clickedOnAnchor = this._anchorEl?.contains(e.target);
+			if (clickedOutside || clickedOnAnchor) this.open = false;
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.open = false;
+		};
 	}
-	#originalAriaLabel = null;
+	#originalAriaLabel;
 	/**
 	* @internal
 	*/
@@ -70,9 +83,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 		/* v8 ignore else -- @preserve */
 		if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
 	}
-	#openIfClosed = () => {
-		if (!this.open) Updates.enqueue(() => this.open = true);
-	};
+	#openIfClosed;
 	#updateListeners() {
 		document.removeEventListener("click", this.#closeOnClickOutside);
 		document.removeEventListener("keydown", this.#closeOnEscape);
@@ -81,15 +92,8 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 			document.addEventListener("keydown", this.#closeOnEscape);
 		}
 	}
-	#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 (e.key === "Escape") this.open = false;
-	};
+	#closeOnClickOutside;
+	#closeOnEscape;
 };
 __decorate([attr], Toggletip.prototype, "headline", void 0);
 __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "alternate", void 0);

package/unbundled/definition25.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { n as toggletipDefinition, r as Toggletip } from "./definition24.js";

package/unbundled/definition26.cjs

@@ -22,10 +22,25 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 * @public
 */
 var TextFieldType = {
+	/**
+	* An email TextField
+	*/
 	email: "email",
+	/**
+	* A password TextField
+	*/
 	password: "password",
+	/**
+	* A telephone TextField
+	*/
 	tel: "tel",
+	/**
+	* A text TextField
+	*/
 	text: "text",
+	/**
+	* A URL TextField
+	*/
 	url: "url"
 };
 var safariWorkaroundStyles = new _microsoft_fast_element.ElementStyles([`
@@ -59,6 +74,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 		super(..._args);
 		this.proxy = document.createElement("input");
 		this.type = TextFieldType.text;
+		this.#randomId = require_mixins.generateRandomId();
 	}
 	/**
 	* @internal
@@ -215,7 +231,7 @@ var TextField = class extends require_with_contextual_help.WithContextualHelp(re
 	focus() {
 		this.control?.focus();
 	}
-	#randomId = require_mixins.generateRandomId();
+	#randomId;
 	/**
 	* @internal
 	*/

package/unbundled/definition26.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { n as visuallyHiddenDefinition } from "./definition.js";
 import { t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
@@ -21,10 +21,25 @@ import { classNames } from "@microsoft/fast-web-utilities";
 * @public
 */
 var TextFieldType = {
+	/**
+	* An email TextField
+	*/
 	email: "email",
+	/**
+	* A password TextField
+	*/
 	password: "password",
+	/**
+	* A telephone TextField
+	*/
 	tel: "tel",
+	/**
+	* A text TextField
+	*/
 	text: "text",
+	/**
+	* A URL TextField
+	*/
 	url: "url"
 };
 var safariWorkaroundStyles = new ElementStyles([`
@@ -58,6 +73,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 		super(..._args);
 		this.proxy = document.createElement("input");
 		this.type = TextFieldType.text;
+		this.#randomId = generateRandomId();
 	}
 	/**
 	* @internal
@@ -214,7 +230,7 @@ var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCo
 	focus() {
 		this.control?.focus();
 	}
-	#randomId = generateRandomId();
+	#randomId;
 	/**
 	* @internal
 	*/

package/unbundled/definition27.cjs

@@ -22,6 +22,18 @@ var Tooltip = class extends require_anchored.Anchored(require_vivid_element.Vivi
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this.#show = () => {
+			this.open = true;
+			this.#updateAnchorExpanded();
+		};
+		this.#hide = () => {
+			this.open = false;
+			this.#updateAnchorExpanded();
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.#hide();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -54,14 +66,8 @@ var Tooltip = class extends require_anchored.Anchored(require_vivid_element.Vivi
 		a.removeAttribute("aria-haspopup");
 		a.removeAttribute("aria-expanded");
 	}
-	#show = () => {
-		this.open = true;
-		this.#updateAnchorExpanded();
-	};
-	#hide = () => {
-		this.open = false;
-		this.#updateAnchorExpanded();
-	};
+	#show;
+	#hide;
 	#updateAnchorExpanded() {
 		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
 	}
@@ -69,10 +75,7 @@ var Tooltip = class extends require_anchored.Anchored(require_vivid_element.Vivi
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.#hide();
-	};
+	#closeOnEscape;
 	/**
 	* @internal
 	*/

package/unbundled/definition27.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup, t as popupDefinition } from "./definition10.js";
@@ -21,6 +21,18 @@ var Tooltip = class extends Anchored(VividElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.open = false;
+		this.#show = () => {
+			this.open = true;
+			this.#updateAnchorExpanded();
+		};
+		this.#hide = () => {
+			this.open = false;
+			this.#updateAnchorExpanded();
+		};
+		this.#closeOnEscape = (e) => {
+			/* v8 ignore else -- @preserve */
+			if (e.key === "Escape") this.#hide();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -53,14 +65,8 @@ var Tooltip = class extends Anchored(VividElement) {
 		a.removeAttribute("aria-haspopup");
 		a.removeAttribute("aria-expanded");
 	}
-	#show = () => {
-		this.open = true;
-		this.#updateAnchorExpanded();
-	};
-	#hide = () => {
-		this.open = false;
-		this.#updateAnchorExpanded();
-	};
+	#show;
+	#hide;
 	#updateAnchorExpanded() {
 		if (this._anchorEl) this._anchorEl.setAttribute("aria-expanded", String(this.open));
 	}
@@ -68,10 +74,7 @@ var Tooltip = class extends Anchored(VividElement) {
 		document.removeEventListener("keydown", this.#closeOnEscape);
 		if (this.open && this.isConnected) document.addEventListener("keydown", this.#closeOnEscape);
 	}
-	#closeOnEscape = (e) => {
-		/* v8 ignore else -- @preserve */
-		if (e.key === "Escape") this.#hide();
-	};
+	#closeOnEscape;
 	/**
 	* @internal
 	*/

package/unbundled/definition28.cjs

@@ -47,6 +47,7 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 * @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
+* @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 */
 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))))))) {
@@ -55,7 +56,12 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -204,7 +210,8 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -238,10 +245,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -251,7 +255,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/

package/unbundled/definition28.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
@@ -46,6 +46,7 @@ var vcInputTag = VC_HEX_INPUT_TAG;
 * @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
+* @event {Event} input - Fires when the value of the element changes.
 * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
 */
 var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(WithSuccessText(DelegatesAria(TrappedFocus(BaseColorPicker(VividElement))))))) {
@@ -54,7 +55,12 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		this.disableSavedColors = false;
 		this.savedColors = [];
 		this.maxSwatches = 6;
+		this.#closeOnPointerOutside = (e) => {
+			if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
+			this.open = false;
+		};
 		this.copyIconName = "copy-2-line";
+		this.#iconResetTimer = null;
 		this._copyValueToClipboard = async (value) => {
 			try {
 				await navigator.clipboard.writeText(value);
@@ -203,7 +209,8 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this.value = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this.value = textField.value;
 	}
 	/**
 	* @internal
@@ -237,10 +244,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	/**
 	* @internal
 	*/
-	#closeOnPointerOutside = (e) => {
-		if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) return;
-		this.open = false;
-	};
+	#closeOnPointerOutside;
 	connectedCallback() {
 		super.connectedCallback();
 		this.savedColors = this._loadSavedColors();
@@ -250,7 +254,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		super.disconnectedCallback();
 		document.removeEventListener("mousedown", this.#closeOnPointerOutside, true);
 	}
-	#iconResetTimer = null;
+	#iconResetTimer;
 	/**
 	* @internal
 	*/

package/unbundled/definition29.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { r as Icon, t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";

package/unbundled/definition3.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as iconDefinition } from "./definition2.js";
 import { t as __decorate } from "./decorate.js";
 import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";