@vonage/vivid 5.5.0 → 5.7.0

package/file-picker/index.js

@@ -12,60 +12,60 @@ import { w as H } from "../bundled/when.js";
 import { s as O } from "../bundled/slotted.js";
 import { r as u } from "../bundled/ref.js";
 import { r as I } from "../bundled/repeat.js";
-import { c as f } from "../bundled/class-names.js";
-const L = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
-async function j(a) {
-  return a.items?.[0]?.webkitGetAsEntry != null ? await M(a.items) : Array.from(a.files);
-}
+import { c as m } from "../bundled/class-names.js";
+const L = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control: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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
 async function M(a) {
+  return a.items?.[0]?.webkitGetAsEntry != null ? await R(a.items) : Array.from(a.files);
+}
+async function R(a) {
   const r = [];
-  for (const t of a) {
-    const e = t.getAsFile();
+  for (const o of a) {
+    const e = o.getAsFile();
     if (e)
       r.push(Promise.resolve([e]));
     else {
-      const o = t.webkitGetAsEntry();
-      o && r.push(h(o, !1));
+      const t = o.webkitGetAsEntry();
+      t && r.push(h(t, !1));
     }
   }
   return (await Promise.all(r)).flat();
 }
 const h = (a, r) => {
-  const t = (o) => new Promise((i, n) => {
-    o.file((c) => {
+  const o = (t) => new Promise((i, n) => {
+    t.file((c) => {
       r && c.name.substring(0, 1) === "." ? i([]) : i([c]);
     }, n);
-  }), e = a.isFile ? t(a) : a.isDirectory ? R(a) : Promise.resolve([]);
+  }), e = a.isFile ? o(a) : a.isDirectory ? W(a) : Promise.resolve([]);
   return e.catch(() => null), e;
-}, R = async (a) => new Promise((r, t) => {
-  const e = [], o = a.createReader(), i = () => {
-    o.readEntries((n) => {
+}, W = async (a) => new Promise((r, o) => {
+  const e = [], t = a.createReader(), i = () => {
+    t.readEntries((n) => {
       for (const c of n)
         e.push(h(c, !0));
       n.length ? i() : r(Promise.all(e).then((c) => c.flat()));
-    }, t);
+    }, o);
   };
   i();
 });
-function W(a, r) {
+function j(a, r) {
   if (!r)
     return !0;
-  const t = r.split(","), e = (i) => /\/\*$/.test(i), o = (i) => i.replace(/\/.*$/, "");
-  for (let i of t)
+  const o = r.split(","), e = (i) => /\/\*$/.test(i), t = (i) => i.replace(/\/.*$/, "");
+  for (let i of o)
     if (i = i.trim(), i.charAt(0) === ".") {
       if (a.name.toLowerCase().endsWith(i.toLowerCase()))
         return !0;
     } else if (e(i)) {
-      if (o(a.type) === o(i))
+      if (t(a.type) === t(i))
         return !0;
     } else if (a.type === i)
       return !0;
   return !1;
 }
-var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, t, e) => {
-  for (var o = e > 1 ? void 0 : e ? G(r, t) : r, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (o = (e ? n(r, t, o) : n(o)) || o);
-  return e && o && N(r, t, o), o;
+var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, o, e) => {
+  for (var t = e > 1 ? void 0 : e ? G(r, o) : r, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (t = (e ? n(r, o, t) : n(t)) || t);
+  return e && t && N(r, o, t), t;
 };
 class l extends V(
   $(
@@ -75,10 +75,10 @@ class l extends V(
   )
 ) {
   constructor() {
-    super(...arguments), this.singleFile = !1, this.maxFileSize = 256, this.valueChanged = (r, t) => {
-      super.valueChanged(r, t), t === "" && this.files.length && this.removeAllFiles();
-    }, this.proxy = document.createElement("input"), this.setFormValue = (r, t) => {
-      typeof r != "string" && super.setFormValue(r, t);
+    super(...arguments), this.singleFile = !1, this.maxFileSize = 256, this.valueChanged = (r, o) => {
+      super.valueChanged(r, o), o === "" && this.files.length && this.removeAllFiles();
+    }, this.proxy = document.createElement("input"), this.setFormValue = (r, o) => {
+      typeof r != "string" && super.setFormValue(r, o);
     }, this._customValidationError = null, this.#e = {
       handleChange: () => {
         this._customValidationError = this.#r.observe(
@@ -91,18 +91,18 @@ class l extends V(
   /**
    * @internal
    */
-  nameChanged(r, t) {
-    super.nameChanged(r, t), this.#t();
+  nameChanged(r, o) {
+    super.nameChanged(r, o), this.#o();
   }
-  #t() {
+  #o() {
     const r = this.files;
     if (!this.name)
       this.setFormValue(null);
     else {
-      const t = new FormData();
+      const o = new FormData();
       for (const e of r)
-        t.append(this.name, e);
-      this.setFormValue(t);
+        o.append(this.name, e);
+      this.setFormValue(o);
     }
     this.#i();
   }
@@ -126,6 +126,7 @@ class l extends V(
    * @internal
    */
   _customValidationErrorChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy && this.proxy.setCustomValidity(this._customValidationError ?? ""), this.validate();
   }
   #e;
@@ -158,21 +159,22 @@ class l extends V(
   _onDragOver(r) {
     if (!r.dataTransfer)
       return !0;
-    const t = r.dataTransfer.effectAllowed;
-    return r.dataTransfer.dropEffect = t === "move" || t === "linkMove" ? "move" : "copy", !1;
+    const o = r.dataTransfer.effectAllowed;
+    return r.dataTransfer.dropEffect = o === "move" || o === "linkMove" ? "move" : "copy", !1;
   }
   /**
    * @internal
    */
   _onDragLeave(r) {
+    /* v8 ignore else -- @preserve */
     return r.currentTarget === r.target && (this._dragHover = !1), !0;
   }
   /**
    * @internal
    */
   _onDrop(r) {
-    return this._dragHover = !1, r.dataTransfer ? (j(r.dataTransfer).then((t) => this.#o(t)).catch((t) => {
-      console.error(t);
+    return this._dragHover = !1, r.dataTransfer ? (M(r.dataTransfer).then((o) => this.#t(o)).catch((o) => {
+      console.error(o);
     }), !1) : !0;
   }
   /**
@@ -191,16 +193,21 @@ class l extends V(
    * @internal
    */
   _onRemoveFileClick(r) {
-    this._allFiles = this._allFiles.filter((t) => t !== r), this.$emit("change");
+    this._allFiles = this._allFiles.filter((o) => o !== r), this.$emit("change");
   }
   /**
    * @internal
    */
   _allFilesChanged() {
-    this.#t();
+    this.#o();
   }
-  #o(r) {
-    this.singleFile ? r.length > 0 && (this._allFiles = [r[r.length - 1]]) : this._allFiles = [...this._allFiles, ...r], this.$emit("change");
+  #t(r) {
+    if (this.singleFile) {
+      /* v8 ignore else -- @preserve */
+      r.length > 0 && (this._allFiles = [r[r.length - 1]]);
+    } else
+      this._allFiles = [...this._allFiles, ...r];
+    this.$emit("change");
   }
   /**
    * Removes all files from the File Picker.
@@ -209,19 +216,19 @@ class l extends V(
     this._allFiles = [];
   }
   get _validatedFiles() {
-    const r = (o, i) => this.maxFileSize && o.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
+    const r = (t, i) => this.maxFileSize && t.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
       "{{filesize}}",
-      this._formatNumber(Math.round(o.size / 1024 / 10.24) / 100)
-    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : W(o, this.accept) ? typeof this.maxFiles == "number" && i >= this.maxFiles ? (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles)) : null : this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError, t = [];
+      this._formatNumber(Math.round(t.size / 1024 / 10.24) / 100)
+    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : j(t, this.accept) ? typeof this.maxFiles == "number" && i >= this.maxFiles ? (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles)) : null : this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError, o = [];
     let e = 0;
-    for (const o of this._allFiles) {
+    for (const t of this._allFiles) {
       const i = {
-        file: o,
-        validationError: r(o, e)
+        file: t,
+        validationError: r(t, e)
       };
-      t.push(i), i.validationError || e++;
+      o.push(i), i.validationError || e++;
     }
-    return t;
+    return o;
   }
   /**
    * Files that have been added to the file picker and passed validation.
@@ -243,14 +250,14 @@ class l extends V(
    * @internal
    */
   _onHiddenInputChange(r) {
-    this.#o(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
+    this.#t(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
   }
   /**
    * @internal
    */
   _formatNumber(r) {
-    const t = String(r);
-    return this.locale.common.useCommaAsDecimalSeparator ? t.replace(".", ",") : t;
+    const o = String(r);
+    return this.locale.common.useCommaAsDecimalSeparator ? o.replace(".", ",") : o;
   }
 }
 s([
@@ -289,27 +296,28 @@ s([
 s([
   _
 ], l.prototype, "_validatedFiles", 1);
-const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r) => {
-  let t = 0, e = "b";
+const f = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r) => {
+  let o = 0, e = "b";
+  /* v8 ignore else -- @preserve */
   if (r > 0) {
-    const o = ["tb", "gb", "mb", "kb", "b"];
-    for (let i = 0; i < o.length; i++) {
-      const n = o[i], c = Math.pow(m, 4 - i) / 10;
+    const t = ["tb", "gb", "mb", "kb", "b"];
+    for (let i = 0; i < t.length; i++) {
+      const n = t[i], c = Math.pow(f, 4 - i) / 10;
       if (r >= c) {
-        t = r / Math.pow(m, 4 - i), e = n;
+        o = r / Math.pow(f, 4 - i), e = n;
         break;
       }
     }
-    t = Math.round(10 * t) / 10;
+    o = Math.round(10 * o) / 10;
   }
-  return p`<strong>${a._formatNumber(t)}</strong>
+  return p`<strong>${a._formatNumber(o)}</strong>
 		${Y[e]}`;
-}, K = ({ size: a, _dragHover: r }) => f(
+}, K = ({ size: a, _dragHover: r }) => m(
   "control",
   [`size-${a}`, !!a],
   ["drag-hover", r]
 ), q = (a) => {
-  const r = a.tagFor(b), t = a.tagFor(x);
+  const r = a.tagFor(b), o = a.tagFor(x);
   return p`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
@@ -325,11 +333,12 @@ const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r
 					${u("control")}
 					class="${K}"
 					@click="${(e) => e._onControlClick()}"
-					@keydown"${() => !1}"
+					@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
+  () => !1}"
 					@dragenter="${(e) => e._onDragEnter()}"
-					@dragover="${(e, o) => e._onDragOver(o.event)}"
-					@dragleave="${(e, o) => e._onDragLeave(o.event)}"
-					@drop="${(e, o) => e._onDrop(o.event)}"
+					@dragover="${(e, t) => e._onDragOver(t.event)}"
+					@dragleave="${(e, t) => e._onDragLeave(t.event)}"
+					@drop="${(e, t) => e._onDrop(t.event)}"
 					@dragend="${(e) => e._onDragEnd()}"
 					aria-describedby="${(e) => e._feedbackDescribedBy}"
 					${P()}
@@ -348,19 +357,19 @@ const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r
 				${I(
     (e) => e._validatedFiles,
     p`
-				<div class="${(e) => f("preview", ["has-error", !!e.validationError])}">
+				<div class="${(e) => m("preview", ["has-error", !!e.validationError])}">
 					<div class="details">
 						<div class="filename">${(e) => e.file.name}</div>
-						<div class="size">${(e, o) => U(o.parent, e.file.size)}</div>
+						<div class="size">${(e, t) => U(t.parent, e.file.size)}</div>
 					</div>
 					<div class="error-message">
 						<${r} name="info-line" size="-6"></${r}>
 						${(e) => e.validationError}
 					</div>
-					<${t}
+					<${o}
 						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(e, o) => o.parent.locale.filePicker.removeFileLabel}"
-						@click="${(e, o) => o.parent._onRemoveFileClick(e.file)}"></${t}>
+						aria-label="${(e, t) => t.parent.locale.filePicker.removeFileLabel}"
+						@click="${(e, t) => t.parent._onRemoveFileClick(e.file)}"></${o}>
 				</div>`
   )}
 			</div>
@@ -373,7 +382,7 @@ const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r
 			?multiple="${(e) => !e.singleFile && (!e.maxFiles || e.maxFiles > 1)}"
 			accept="${(e) => e.accept || null}"
 			tabindex="-1"
-			@change="${(e, o) => e._onHiddenInputChange(o.event)}"
+			@change="${(e, t) => e._onHiddenInputChange(t.event)}"
 		/>
 	`;
 }, J = C(

package/icon/definition.cjs

@@ -44,13 +44,12 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 </svg>`;
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;
@@ -102,10 +101,6 @@ class Icon extends vividElement.VividElement {
     this.#abortController = null;
   }
   #currentRequestId;
-  get iconUrl() {
-    const key = normalizeKey(this.name);
-    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
-  }
   #abortController;
   async nameChanged() {
     const requestId = ++this.#currentRequestId;
@@ -116,9 +111,11 @@ class Icon extends vividElement.VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
+      /* v8 ignore else -- @preserve */
       if (this.#currentRequestId === requestId) {
         this._svg = PLACEHOLDER_ICON;
         timeout = setTimeout(() => {
+          /* v8 ignore else -- @preserve */
           if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
             this._svg = void 0;
           }
@@ -127,6 +124,7 @@ class Icon extends vividElement.VividElement {
     }, PLACEHOLDER_DELAY);
     try {
       const svg = await resolveIcon(this.name, this.#abortController.signal);
+      /* v8 ignore else -- @preserve */
       if (this.#currentRequestId === requestId) {
         this._svg = svg;
       }
@@ -144,25 +142,22 @@ class Icon extends vividElement.VividElement {
 }
 __decorateClass([
   fastElement.attr
-], Icon.prototype, "connotation", 2);
+], Icon.prototype, "connotation");
 __decorateClass([
   fastElement.attr({ converter: numberConverter })
-], Icon.prototype, "size", 2);
+], Icon.prototype, "size");
 __decorateClass([
   fastElement.observable
-], Icon.prototype, "_svg", 2);
+], Icon.prototype, "_svg");
 __decorateClass([
   fastElement.observable
-], Icon.prototype, "iconLoaded", 2);
+], Icon.prototype, "iconLoaded");
 __decorateClass([
   fastElement.attr
-], Icon.prototype, "label", 2);
+], Icon.prototype, "label");
 __decorateClass([
   fastElement.attr
-], Icon.prototype, "name", 2);
-__decorateClass([
-  fastElement.volatile
-], Icon.prototype, "iconUrl", 1);
+], Icon.prototype, "name");
 
 const getClasses = ({ connotation, size }) => fastWebUtilities.classNames(
   "control",
@@ -180,10 +175,6 @@ const iconTemplate = (context) => {
 		>
 			<slot>
 				${fastElement.when(
-    (x) => !x?.iconLoaded,
-    fastElement.html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
-  )}
-				${fastElement.when(
     (x) => x?.iconLoaded && x?._svg,
     (x) => fastElement.html`${fastElement.html.partial(x._svg)}`
   )}

package/icon/definition.js

@@ -1,6 +1,6 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { attr, observable, volatile, when, html } from '@microsoft/fast-element';
+import { attr, observable, when, html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ":host{display:inline-block;vertical-align:sub}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
@@ -40,13 +40,12 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 </svg>`;
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const PLACEHOLDER_DELAY = 500;
@@ -98,10 +97,6 @@ class Icon extends VividElement {
     this.#abortController = null;
   }
   #currentRequestId;
-  get iconUrl() {
-    const key = normalizeKey(this.name);
-    return key ? baseUrlTemplate(`${key}.svg`, ICONS_VERSION) : this._svg;
-  }
   #abortController;
   async nameChanged() {
     const requestId = ++this.#currentRequestId;
@@ -112,9 +107,11 @@ class Icon extends VividElement {
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
+      /* v8 ignore else -- @preserve */
       if (this.#currentRequestId === requestId) {
         this._svg = PLACEHOLDER_ICON;
         timeout = setTimeout(() => {
+          /* v8 ignore else -- @preserve */
           if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
             this._svg = void 0;
           }
@@ -123,6 +120,7 @@ class Icon extends VividElement {
     }, PLACEHOLDER_DELAY);
     try {
       const svg = await resolveIcon(this.name, this.#abortController.signal);
+      /* v8 ignore else -- @preserve */
       if (this.#currentRequestId === requestId) {
         this._svg = svg;
       }
@@ -140,25 +138,22 @@ class Icon extends VividElement {
 }
 __decorateClass([
   attr
-], Icon.prototype, "connotation", 2);
+], Icon.prototype, "connotation");
 __decorateClass([
   attr({ converter: numberConverter })
-], Icon.prototype, "size", 2);
+], Icon.prototype, "size");
 __decorateClass([
   observable
-], Icon.prototype, "_svg", 2);
+], Icon.prototype, "_svg");
 __decorateClass([
   observable
-], Icon.prototype, "iconLoaded", 2);
+], Icon.prototype, "iconLoaded");
 __decorateClass([
   attr
-], Icon.prototype, "label", 2);
+], Icon.prototype, "label");
 __decorateClass([
   attr
-], Icon.prototype, "name", 2);
-__decorateClass([
-  volatile
-], Icon.prototype, "iconUrl", 1);
+], Icon.prototype, "name");
 
 const getClasses = ({ connotation, size }) => classNames(
   "control",
@@ -176,10 +171,6 @@ const iconTemplate = (context) => {
 		>
 			<slot>
 				${when(
-    (x) => !x?.iconLoaded,
-    html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
-  )}
-				${when(
     (x) => x?.iconLoaded && x?._svg,
     (x) => html`${html.partial(x._svg)}`
   )}

package/index.cjs

@@ -228,6 +228,27 @@ exports.registerRadio = radio_definition.registerRadio;
 exports.VwcRangeSliderElement = rangeSlider_definition.VwcRangeSliderElement;
 exports.rangeSliderDefinition = rangeSlider_definition.rangeSliderDefinition;
 exports.registerRangeSlider = rangeSlider_definition.registerRangeSlider;
+exports.RteAlignmentFeature = richTextEditor_definition.RteAlignmentFeature;
+exports.RteBase = richTextEditor_definition.RteBase;
+exports.RteBoldFeature = richTextEditor_definition.RteBoldFeature;
+exports.RteConfig = richTextEditor_definition.RteConfig;
+exports.RteDropHandlerFeature = richTextEditor_definition.RteDropHandlerFeature;
+exports.RteFileHandlerFeature = richTextEditor_definition.RteFileHandlerFeature;
+exports.RteFontSizePickerFeature = richTextEditor_definition.RteFontSizePickerFeature;
+exports.RteHardBreakFeature = richTextEditor_definition.RteHardBreakFeature;
+exports.RteHtmlParser = richTextEditor_definition.RteHtmlParser;
+exports.RteHtmlSerializer = richTextEditor_definition.RteHtmlSerializer;
+exports.RteInlineImageFeature = richTextEditor_definition.RteInlineImageFeature;
+exports.RteItalicFeature = richTextEditor_definition.RteItalicFeature;
+exports.RteLinkFeature = richTextEditor_definition.RteLinkFeature;
+exports.RteListFeature = richTextEditor_definition.RteListFeature;
+exports.RteMonospaceFeature = richTextEditor_definition.RteMonospaceFeature;
+exports.RtePlaceholderFeature = richTextEditor_definition.RtePlaceholderFeature;
+exports.RteStrikethroughFeature = richTextEditor_definition.RteStrikethroughFeature;
+exports.RteTextBlockPickerFeature = richTextEditor_definition.RteTextBlockPickerFeature;
+exports.RteTextColorPickerFeature = richTextEditor_definition.RteTextColorPickerFeature;
+exports.RteToolbarFeature = richTextEditor_definition.RteToolbarFeature;
+exports.RteUnderlineFeature = richTextEditor_definition.RteUnderlineFeature;
 exports.VwcRichTextEditorElement = richTextEditor_definition.VwcRichTextEditorElement;
 exports.registerRichTextEditor = richTextEditor_definition.registerRichTextEditor;
 exports.richTextEditorDefinition = richTextEditor_definition.richTextEditorDefinition;

package/index.js

@@ -47,7 +47,7 @@ export { VwcProgressElement, progressDefinition, registerProgress } from './prog
 export { VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup } from './radio-group/definition.js';
 export { VwcRadioElement, radioDefinition, registerRadio } from './radio/definition.js';
 export { VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider } from './range-slider/definition.js';
-export { VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
+export { RteAlignmentFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteItalicFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarFeature, RteUnderlineFeature, VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition } from './rich-text-editor/definition.js';
 export { VwcSearchableSelectElement, registerSearchableSelect } from './searchable-select/definition.js';
 export { VwcSelectElement, registerSelect, selectDefinition } from './select/definition.js';
 export { VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition } from './selectable-box/definition.js';

package/lib/data-grid/locale.d.ts

@@ -1,6 +1,11 @@
+import type { DataGridCellSortStates } from './data-grid.options';
+type SortAnnouncements = Record<DataGridCellSortStates, string>;
 export interface DataGridLocale {
     cell: {
         selected: string;
         button: string;
+        sortStatus: SortAnnouncements;
+        sortInstruction: SortAnnouncements;
     };
 }
+export {};