@vonage/vivid 3.0.0-next.11 → 3.0.0-next.14

package/lib/badge/badge.d.ts

@@ -1,16 +1,16 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import type { Appearance, Connotation, Density, Shape } from '../enums.js';
 declare type BadgeConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
 declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
 declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-declare type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
+declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
 export declare class Badge extends FoundationElement {
     connotation?: BadgeConnotation;
     shape?: BadgeShape;
     appearance?: BadgeAppearance;
-    size?: BadgeSize;
-    text: string;
+    density?: BadgeDensity;
+    text?: string;
 }
 export interface Badge extends AffixIconWithTrailing {
 }

package/lib/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
 export declare class BreadcrumbItem extends FastBreadcrumbItem {
-    text: string;
+    text?: string;
     constructor();
 }

package/lib/button/button.d.ts

@@ -1,16 +1,17 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import type { Appearance, Connotation, Density, Shape } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 declare type ButtonConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert>;
 export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
 declare type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-declare type ButtonSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
+declare type ButtonDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
 export declare class Button extends FoundationButton {
     connotation?: ButtonConnotation;
     shape?: ButtonShape;
     appearance?: ButtonAppearance;
-    size?: ButtonSize;
-    label: string;
+    density?: ButtonDensity;
+    stacked: boolean;
+    label?: string;
 }
 export interface Button extends AffixIconWithTrailing {
 }

package/lib/card/card.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Card extends FoundationElement {
+    heading?: string;
+    subheading?: string;
+    text?: string;
+    icon?: string;
+    elevation?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
+    graphicSlottedContent?: HTMLElement[];
+    hasMetaSlottedContent?: HTMLElement[];
+}

package/lib/card/card.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Card } from './card';
+export declare const CardTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Card>;

package/lib/card/index.d.ts

@@ -0,0 +1,5 @@
+import '../elevation';
+import '../icon';
+import '../button';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/enums.d.ts

@@ -24,10 +24,15 @@ export declare enum Appearance {
     Subtle = "subtle",
     Ghost = "ghost"
 }
+export declare enum Density {
+    Condensed = "condensed",
+    Normal = "normal",
+    Extended = "extended"
+}
 export declare enum Size {
-    BaseSmall = "base-small",
-    Base = "base",
-    BaseLarge = "base-large"
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
 }
 export declare enum Position {
     Top = "TOP",

package/lib/icon/icon.d.ts

@@ -1,10 +1,11 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation, Size } from '../enums';
 declare type IconConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
+declare type IconSize = Extract<Size, Size.Small | Size.Medium | Size.Large>;
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;
-    size?: Size;
-    svg: string;
+    size?: IconSize;
+    svg?: string;
     type?: string;
     typeChanged(): Promise<void>;
 }

package/lib/layout/layout.d.ts

@@ -4,9 +4,9 @@ export declare enum AUTO_SIZING {
     Fit = "fit",
     Fill = "fill"
 }
-declare type Gutters = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-declare type ColumnSpacing = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-declare type ColumnBasis = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge> | 'block';
+declare type Gutters = Extract<Size, Size.Small | Size.Medium | Size.Large>;
+declare type ColumnSpacing = Extract<Size, Size.Small | Size.Medium | Size.Large>;
+declare type ColumnBasis = Extract<Size, Size.Small | Size.Medium | Size.Large> | 'block';
 export declare class Layout extends FoundationElement {
     gutters?: Gutters;
     columnBasis?: ColumnBasis;

package/lib/text-anchor/text-anchor.d.ts

@@ -1,7 +1,7 @@
 import { Anchor } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
 export declare class TextAnchor extends Anchor {
-    text: string;
+    text?: string;
 }
 export interface TextAnchor extends AffixIcon {
 }

package/lib/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Placement } from '@floating-ui/dom';
 export declare class Tooltip extends FoundationElement {
-    text: string;
+    text?: string;
     open: boolean;
     corner?: Placement;
     anchor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.11",
+  "version": "3.0.0-next.14",
   "type": "module",
   "module": "./index.esm.js",
   "main": "index.js",

package/popup/index.js

@@ -2,8 +2,9 @@ import '../elevation/index.js';
 import '../button/index.js';
 import { F as FoundationElement, c as __classPrivateFieldGet, g as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { t as toString$3, s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
-import { m as anObject$3, p as fails$5, g as global$5, l as functionCall, f as functionUncurryThis, M as shared$1, N as objectCreate, E as internalState, _ as _export, w as wellKnownSymbol$2, r as redefine$1, O as createNonEnumerableProperty$1, z as isObject$1, h as classofRaw, F as requireObjectCoercible$2, P as toIntegerOrInfinity$1, Q as toPropertyKey$1, o as objectDefineProperty, R as createPropertyDescriptor$1, n as lengthOfArrayLike$1, S as toAbsoluteIndex$1, j as isCallable$1, T as toLength$1, k as getMethod$1 } from '../shared/web.dom-collections.iterator.js';
+import { a as objectCreate } from '../shared/web.dom-collections.iterator.js';
 import '../shared/es.object.assign.js';
+import { b as anObject$3, g as fails$5, i as global$5, x as functionCall, C as functionUncurryThis, T as shared$1, z as internalState, _ as _export, w as wellKnownSymbol$2, r as redefine$1, u as createNonEnumerableProperty$1, M as isObject$1, F as classofRaw, P as requireObjectCoercible$2, U as toIntegerOrInfinity$1, V as toPropertyKey$1, a as objectDefineProperty, m as createPropertyDescriptor$1, I as lengthOfArrayLike$1, W as toAbsoluteIndex$1, k as isCallable$1, X as toLength$1, G as getMethod$1 } from '../shared/object-set-prototype-of.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { w as when } from '../shared/when.js';
 import { r as ref } from '../shared/aria-global.js';
@@ -2052,7 +2053,7 @@ const popupTemplate = () => html(_t || (_t = _`
 				${0}
 			</div>
     </div>
-  </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button size="base-small" @click="${0}"
+  </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button density="condensed" @click="${0}"
 						class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
 
 const VIVIDPopup = Popup.compose({

package/progress/index.js

@@ -1,11 +1,12 @@
 import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
-import { h as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/web.dom-collections.iterator.js';
+import '../shared/web.dom-collections.iterator.js';
+import { F as classofRaw, _ as _export, C as functionUncurryThis } from '../shared/object-set-prototype-of.js';
 import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-pacific):not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
+var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
 styleInject(css_248z);
 
 var classof = classofRaw;

package/progress-ring/index.js

@@ -4,7 +4,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+var css_248z = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 styleInject(css_248z);
 
 class ProgressRing extends BaseProgress {}

package/shared/es.object.assign.js

@@ -1,4 +1,5 @@
-import { d as descriptors, f as functionUncurryThis, l as functionCall, p as fails$1, H as objectKeys$1, I as toObject$1, J as indexedObject, K as objectGetOwnPropertySymbols, L as objectPropertyIsEnumerable, _ as _export } from './web.dom-collections.iterator.js';
+import { d as descriptors, C as functionUncurryThis, x as functionCall, g as fails$1, l as toObject$1, Q as indexedObject, R as objectGetOwnPropertySymbols, S as objectPropertyIsEnumerable, _ as _export } from './object-set-prototype-of.js';
+import { o as objectKeys$1 } from './web.dom-collections.iterator.js';
 
 var DESCRIPTORS = descriptors;
 var uncurryThis = functionUncurryThis;

package/shared/icon.js

@@ -1,4 +1,4 @@
-import { g as global$e, r as redefine$3, w as wellKnownSymbol$8, a as getBuiltIn$4, o as objectDefineProperty, d as descriptors, b as objectIsPrototypeOf, f as functionUncurryThis, c as functionBindNative, e as aCallable$4, i as iterators, h as classofRaw$1, j as isCallable$5, k as getMethod$2, l as functionCall, m as anObject$5, t as tryToString$3, n as lengthOfArrayLike$1, p as fails$4, q as inspectSource$2, s as engineUserAgent, u as html$1, v as documentCreateElement, x as hasOwnProperty_1, y as objectGetOwnPropertyDescriptor, z as isObject$2, _ as _export, A as objectSetPrototypeOf, B as setToStringTag$1, C as isForced_1, D as engineV8Version, E as internalState, F as requireObjectCoercible$1, G as functionName } from './web.dom-collections.iterator.js';
+import { i as global$e, r as redefine$3, w as wellKnownSymbol$8, A as getBuiltIn$4, a as objectDefineProperty, d as descriptors, B as objectIsPrototypeOf, C as functionUncurryThis, D as functionBindNative, E as aCallable$4, p as iterators, F as classofRaw$1, k as isCallable$5, G as getMethod$2, x as functionCall, b as anObject$5, H as tryToString$3, I as lengthOfArrayLike$1, g as fails$4, J as inspectSource$2, K as engineUserAgent, c as html$1, f as documentCreateElement, j as hasOwnProperty_1, L as objectGetOwnPropertyDescriptor, M as isObject$2, _ as _export, q as objectSetPrototypeOf, n as setToStringTag$1, N as isForced_1, O as engineV8Version, z as internalState, P as requireObjectCoercible$1, y as functionName } from './object-set-prototype-of.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable } from './index.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
 
@@ -1356,25 +1356,20 @@ const loadSvg = iconId => fetch(baseUrlTemplate([iconId, 'svg'].join('.'), ICON_
 
 const resolveIcon = memoizeWith$1(identity$1, (iconId = '') => iconId.trim() ? loadSvg(iconId) : Promise.resolve(''));
 class Icon extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.svg = '';
-  }
-
   async typeChanged() {
-    this.svg = '';
+    this.svg = undefined;
     let timeout = setTimeout(() => {
       this.svg = PLACEHOLDER_ICON;
       timeout = setTimeout(() => {
         if (this.svg === PLACEHOLDER_ICON) {
-          this.svg = '';
+          this.svg = undefined;
         }
       }, PLACEHOLDER_TIMEOUT);
     }, PLACEHOLDER_DELAY);
     await resolveIcon(this.type).then(svg => {
       this.svg = svg;
     }).catch(() => {
-      this.svg = '';
+      this.svg = undefined;
     }).finally(() => {
       clearTimeout(timeout);
     });
@@ -1386,7 +1381,7 @@ __decorate([attr, __metadata("design:type", String)], Icon.prototype, "connotati
 
 __decorate([attr, __metadata("design:type", String)], Icon.prototype, "size", void 0);
 
-__decorate([observable, __metadata("design:type", Object)], Icon.prototype, "svg", void 0);
+__decorate([observable, __metadata("design:type", String)], Icon.prototype, "svg", void 0);
 
 __decorate([attr, __metadata("design:type", String)], Icon.prototype, "type", void 0);