@vonage/vivid 5.15.1 → 5.16.0

package/header/definition.cjs

@@ -1,78 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const elevation_definition = require('../unbundled/definition6.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-const styles = ".base{z-index:1;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)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-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))) }";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Header extends delegatesAria.DelegatesAria(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.elevationShadow = false;
-    this.alternate = false;
-  }
-}
-__decorateClass([
-  fastElement.attr({
-    attribute: "elevation-shadow",
-    mode: "boolean"
-  })
-], Header.prototype, "elevationShadow");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], Header.prototype, "alternate");
-
-const getPartAlternate = ({ alternate }) => fastWebUtilities.classNames(["vvd-theme-alternate", Boolean(alternate)]);
-const headerTemplate = (context) => {
-  const elevationTag = context.tagFor(elevation_definition.Elevation);
-  return fastElement.html`
-    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
-      <header class="base" part="base" ${delegatesAria.delegateAria()}>
-        <!-- a container is needed to distinguish the surface background color of the
-        element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
-          <section class="header-content">
-            <slot></slot>
-          </section>
-          <section class="header-content">
-            <slot name="action-items"></slot>
-          </section>
-        </div>
-      </header>
-    </${elevationTag}>
-    <div class="app-content">
-      <slot name="app-content"></slot>
-    </div>
-	`;
-};
-
-const headerDefinition = vividElement.defineVividComponent(
-  "header",
-  Header,
-  headerTemplate,
-  [elevation_definition.elevationDefinition],
-  {
-    styles
-  }
-);
-const registerHeader = vividElement.createRegisterFunction(headerDefinition);
-
-exports.VwcHeaderElement = Header;
-exports.headerDefinition = headerDefinition;
-exports.registerHeader = registerHeader;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition43.cjs");
+exports.VwcHeaderElement = require_definition.Header;
+exports.headerDefinition = require_definition.headerDefinition;
+exports.registerHeader = require_definition.registerHeader;

package/header/definition.js

@@ -1,72 +1,2 @@
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, html } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-const styles = ".base{z-index:1;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)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-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))) }";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Header extends DelegatesAria(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.elevationShadow = false;
-    this.alternate = false;
-  }
-}
-__decorateClass([
-  attr({
-    attribute: "elevation-shadow",
-    mode: "boolean"
-  })
-], Header.prototype, "elevationShadow");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], Header.prototype, "alternate");
-
-const getPartAlternate = ({ alternate }) => classNames(["vvd-theme-alternate", Boolean(alternate)]);
-const headerTemplate = (context) => {
-  const elevationTag = context.tagFor(Elevation);
-  return html`
-    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
-      <header class="base" part="base" ${delegateAria()}>
-        <!-- a container is needed to distinguish the surface background color of the
-        element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
-          <section class="header-content">
-            <slot></slot>
-          </section>
-          <section class="header-content">
-            <slot name="action-items"></slot>
-          </section>
-        </div>
-      </header>
-    </${elevationTag}>
-    <div class="app-content">
-      <slot name="app-content"></slot>
-    </div>
-	`;
-};
-
-const headerDefinition = defineVividComponent(
-  "header",
-  Header,
-  headerTemplate,
-  [elevationDefinition],
-  {
-    styles
-  }
-);
-const registerHeader = createRegisterFunction(headerDefinition);
-
+import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition43.js";
 export { Header as VwcHeaderElement, headerDefinition, registerHeader };

package/header/index.cjs

@@ -1,9 +1,9 @@
-"use strict";const l=require("../bundled/definition4.cjs"),a=require("../bundled/vivid-element.cjs"),c=require("../bundled/delegates-aria.cjs"),v=require("../bundled/class-names.cjs"),p=".base{z-index:1;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)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-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))) }";var h=Object.defineProperty,d=(e,n,o,f)=>{for(var t=void 0,i=e.length-1,r;i>=0;i--)(r=e[i])&&(t=r(n,o,t)||t);return t&&h(n,o,t),t};class s extends c.DelegatesAria(a.VividElement){constructor(){super(...arguments),this.elevationShadow=!1,this.alternate=!1}}d([a.attr({attribute:"elevation-shadow",mode:"boolean"})],s.prototype,"elevationShadow");d([a.attr({mode:"boolean"})],s.prototype,"alternate");const m=({alternate:e})=>v.classNames(["vvd-theme-alternate",!!e]),g=e=>{const n=e.tagFor(l.Elevation);return a.html`
-    <${n} dp="4" ?no-shadow=${o=>!o.elevationShadow}>
-      <header class="base" part="base" ${c.delegateAria()}>
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.l({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.l({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=({alternate:e})=>n.t([`vvd-theme-alternate`,!!e]),c=e.o(`header`,o,t=>{let n=t.tagFor(i.r);return e.d`
+    <${n} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
+      <header class="base" part="base" ${r.n()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${m}">
+        <div class="container" part="${s}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -16,4 +16,4 @@
     <div class="app-content">
       <slot name="app-content"></slot>
     </div>
-	`},u=a.defineVividComponent("header",s,g,[l.elevationDefinition],{styles:p}),b=a.createRegisterFunction(u);b();
+	`},[i.t],{styles:a});e.s(c)();

package/header/index.js

@@ -1,37 +1,31 @@
-import { E as c, e as d } from "../bundled/definition4.js";
-import { V as v, a as r, h as p, c as h, d as m } from "../bundled/vivid-element.js";
-import { D as f, d as g } from "../bundled/delegates-aria.js";
-import { c as b } from "../bundled/class-names.js";
-const u = ".base{z-index:1;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)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-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))) }";
-var x = Object.defineProperty, l = (e, t, o, $) => {
-  for (var a = void 0, n = e.length - 1, i; n >= 0; n--)
-    (i = e[n]) && (a = i(t, o, a) || a);
-  return a && x(t, o, a), a;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/decorate.js";
+import { t as o } from "../bundled/class-names.js";
+import { n as s, t as c } from "../bundled/delegates-aria.js";
+import { r as l, t as u } from "../bundled/definition7.js";
+//#region src/lib/header/header.scss?inline
+var d = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}", f = class extends c(i) {
+	constructor(...e) {
+		super(...e), this.elevationShadow = !1, this.alternate = !1;
+	}
 };
-class s extends f(v) {
-  constructor() {
-    super(...arguments), this.elevationShadow = !1, this.alternate = !1;
-  }
-}
-l([
-  r({
-    attribute: "elevation-shadow",
-    mode: "boolean"
-  })
-], s.prototype, "elevationShadow");
-l([
-  r({
-    mode: "boolean"
-  })
-], s.prototype, "alternate");
-const y = ({ alternate: e }) => b(["vvd-theme-alternate", !!e]), z = (e) => {
-  const t = e.tagFor(c);
-  return p`
-    <${t} dp="4" ?no-shadow=${(o) => !o.elevationShadow}>
-      <header class="base" part="base" ${g()}>
+a([t({
+	attribute: "elevation-shadow",
+	mode: "boolean"
+})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0);
+//#endregion
+//#region src/lib/header/header.template.ts
+var p = ({ alternate: e }) => o(["vvd-theme-alternate", !!e]);
+//#endregion
+//#region src/lib/header/index.ts
+r(n("header", f, (t) => {
+	let n = t.tagFor(l);
+	return e`
+    <${n} dp="4" ?no-shadow=${(e) => !e.elevationShadow}>
+      <header class="base" part="base" ${s()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${y}">
+        <div class="container" part="${p}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -40,18 +34,10 @@ const y = ({ alternate: e }) => b(["vvd-theme-alternate", !!e]), z = (e) => {
           </section>
         </div>
       </header>
-    </${t}>
+    </${n}>
     <div class="app-content">
       <slot name="app-content"></slot>
     </div>
 	`;
-}, w = m(
-  "header",
-  s,
-  z,
-  [d],
-  {
-    styles: u
-  }
-), k = h(w);
-k();
+}, [u], { styles: d }))();
+//#endregion

package/icon/definition.cjs

@@ -1,202 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@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}";
-
-//#region package.json
-var version = "4.9.0";
-
-//#endregion
-//#region src/icons.legacy.ts
-const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = version;
-
-const 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 void 0;
-    }
-    return isNaN(value) || !isFinite(value) ? void 0 : value;
-  }
-};
-
-const 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>`;
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const PLACEHOLDER_DELAY = 500;
-const PLACEHOLDER_TIMEOUT = 2e3;
-const baseUrlTemplate = (resource, version) => [ICONS_BASE_URL, `v${version}`, resource].join("/");
-const assertIsValidResponse = ({ ok, headers }) => {
-  if (!ok || headers.get("content-type") !== "image/svg+xml") {
-    throw new Error("Something went wrong");
-  }
-};
-const extractSvg = (response) => {
-  assertIsValidResponse(response);
-  return response.text();
-};
-const loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(
-  extractSvg
-);
-const normalizeKey = (iconId) => (iconId ?? "").trim();
-const iconCache = /* @__PURE__ */ new Map();
-const 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;
-};
-class Icon extends vividElement.VividElement {
-  constructor() {
-    super(...arguments);
-    this.iconLoaded = false;
-    this.#currentRequestId = 0;
-    this.#abortController = null;
-  }
-  #currentRequestId;
-  #abortController;
-  async nameChanged() {
-    const requestId = ++this.#currentRequestId;
-    if (this.#abortController) {
-      this.#abortController.abort();
-    }
-    this.#abortController = new AbortController();
-    this._svg = void 0;
-    this.iconLoaded = false;
-    let timeout = setTimeout(() => {
-      if (this.#currentRequestId === requestId) {
-        this._svg = PLACEHOLDER_ICON;
-        timeout = setTimeout(() => {
-          if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) {
-            this._svg = void 0;
-          }
-        }, PLACEHOLDER_TIMEOUT);
-      }
-    }, PLACEHOLDER_DELAY);
-    try {
-      const svg = await resolveIcon(this.name, this.#abortController.signal);
-      if (this.#currentRequestId === requestId) {
-        this._svg = svg;
-      }
-    } catch {
-      if (this.#currentRequestId === requestId) {
-        this._svg = void 0;
-      }
-    } finally {
-      if (this.#currentRequestId === requestId) {
-        clearTimeout(timeout);
-        this.iconLoaded = true;
-      }
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Icon.prototype, "connotation");
-__decorateClass([
-  fastElement.attr({ converter: numberConverter })
-], Icon.prototype, "size");
-__decorateClass([
-  fastElement.observable
-], Icon.prototype, "_svg");
-__decorateClass([
-  fastElement.observable
-], Icon.prototype, "iconLoaded");
-__decorateClass([
-  fastElement.attr
-], Icon.prototype, "label");
-__decorateClass([
-  fastElement.attr
-], Icon.prototype, "name");
-
-const getClasses = ({ connotation, size }) => fastWebUtilities.classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, typeof size === "number"]
-);
-const iconTemplate = (context) => {
-  const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
-  const isDecorative = (x) => !x.label || x.label.trim().length === 0;
-  return fastElement.html`
-		<figure
-			class="${getClasses}"
-			?aria-hidden="${(x) => isDecorative(x)}"
-			?aria-busy="${(x) => !x?.iconLoaded}"
-		>
-			<slot>
-				${fastElement.when(
-    (x) => x?.iconLoaded && x?._svg,
-    (x) => fastElement.html`${fastElement.html.partial(x._svg)}`
-  )}
-			</slot>
-			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
-		</figure>
-	`;
-};
-
-const iconDefinition = vividElement.defineVividComponent(
-  "icon",
-  Icon,
-  iconTemplate,
-  [visuallyHidden_definition.visuallyHiddenDefinition],
-  {
-    styles
-  }
-);
-const registerIcon = vividElement.createRegisterFunction(iconDefinition);
-
-exports.VwcIconElement = Icon;
-exports.iconDefinition = iconDefinition;
-exports.registerIcon = registerIcon;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition2.cjs");
+exports.VwcIconElement = require_definition.Icon;
+exports.iconDefinition = require_definition.iconDefinition;
+exports.registerIcon = require_definition.registerIcon;