@vonage/vivid 3.0.0-next.9 → 3.0.0

package/accordion-item/index.js

@@ -6,6 +6,7 @@ import { a as applyMixins } from '../shared/apply-mixins.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../icon/index.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 
@@ -15,9 +16,7 @@ styleInject(css_248z);
 class AccordionItem extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.heading = '';
     this.noIndicator = false;
-    this.meta = '';
     this.open = false;
   }
 
@@ -40,9 +39,7 @@ class AccordionItem extends FoundationElement {
 
 }
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "heading", void 0);
+__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "heading", void 0);
 
 __decorate([attr({
   attribute: 'heading-level'
@@ -53,9 +50,7 @@ __decorate([attr({
   attribute: 'no-indicator'
 }), __metadata("design:type", Object)], AccordionItem.prototype, "noIndicator", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], AccordionItem.prototype, "meta", void 0);
+__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "meta", void 0);
 
 __decorate([attr({
   mode: 'boolean'

package/badge/index.js

@@ -1,21 +1,16 @@
 import '../icon/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 import '../shared/when.js';
+import '../shared/web.dom-collections.iterator.js';
 
-class Badge extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
+class Badge extends FoundationElement {}
 
 __decorate([attr, __metadata("design:type", String)], Badge.prototype, "connotation", void 0);
 
@@ -25,9 +20,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearan
 
 __decorate([attr, __metadata("design:type", String)], Badge.prototype, "size", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Badge.prototype, "text", void 0);
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
 
 applyMixins(Badge, AffixIconWithTrailing);
 

package/banner/index.js

@@ -7,6 +7,7 @@ import '../button/index.js';
 import '../text-anchor/index.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/icon.js';
 import '../shared/_has.js';
 import '../icon/index.js';

package/breadcrumb-item/index.js

@@ -6,27 +6,25 @@ import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
 import '../shared/affix.js';
+import '../shared/web.dom-collections.iterator.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  font: inherit;\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-on-canvas);\n  font-size: 12px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-on-canvas);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  font: inherit;\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-70);\n  font-size: 12px;\n}";
 styleInject(css_248z);
 
 class BreadcrumbItem extends BreadcrumbItem$1 {
   constructor() {
     super();
-    this.text = '';
   }
 
 }
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
+__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
 
 let _2 = t => t,
     _t,
@@ -43,7 +41,7 @@ const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
   ${0}
 
         ${0}
-      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-line"></vwc-icon>`))));
+      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-solid"></vwc-icon>`))));
 
 const vividBreadcrumbItem = BreadcrumbItem.compose({
   baseName: 'breadcrumb-item',

package/button/index.js

@@ -1,15 +1,16 @@
 import '../icon/index.js';
 import { F as Focus } from '../shared/index2.js';
 import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 import '../shared/when.js';
+import '../shared/web.dom-collections.iterator.js';
 
 /**
  * Key Code values
@@ -650,13 +651,7 @@ __decorate([
 applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
 applyMixins(Button$1, StartEnd, DelegatesARIAButton);
 
-class Button extends Button$1 {
-  constructor() {
-    super(...arguments);
-    this.label = '';
-  }
-
-}
+class Button extends Button$1 {}
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
 
@@ -666,13 +661,11 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "appeara
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
 
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Button.prototype, "label", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
 
 applyMixins(Button, AffixIconWithTrailing);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  outline: 0 none;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-basis-increment: var(--vvd-color-neutral-90);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-firm: var(--vvd-color-primary);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-basis: var(--vvd-color-cta);\n  --connotation-basis-increment: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-firm: var(--vvd-color-cta-70);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-basis: var(--vvd-color-success);\n  --connotation-basis-increment: var(--vvd-color-success-70);\n  --connotation-contrast: var(--vvd-color-success-90);\n  --connotation-fierce: var(--vvd-color-success-80);\n  --connotation-firm: var(--vvd-color-success-70);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-basis: var(--vvd-color-alert);\n  --connotation-basis-increment: var(--vvd-color-alert-70);\n  --connotation-contrast: var(--vvd-color-alert-90);\n  --connotation-fierce: var(--vvd-color-alert-80);\n  --connotation-firm: var(--vvd-color-alert-70);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-basis-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--button-block-size);\n  }\n}\n\n/* Size */\n.control.size-base-small {\n  --button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-base-small .icon {\n  font-size: 16px;\n}\n\n.control.size-base-large {\n  --button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n  --button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.size-base-large .icon {\n  font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n  --button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n  order: 1;\n  margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  outline: 0 none;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-basis-increment: var(--vvd-color-neutral-90);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-firm: var(--vvd-color-primary);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-basis: var(--vvd-color-cta);\n  --connotation-basis-increment: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-firm: var(--vvd-color-cta-70);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-basis: var(--vvd-color-success);\n  --connotation-basis-increment: var(--vvd-color-success-70);\n  --connotation-contrast: var(--vvd-color-success-90);\n  --connotation-fierce: var(--vvd-color-success-80);\n  --connotation-firm: var(--vvd-color-success-70);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-basis: var(--vvd-color-alert);\n  --connotation-basis-increment: var(--vvd-color-alert-70);\n  --connotation-contrast: var(--vvd-color-alert-90);\n  --connotation-fierce: var(--vvd-color-alert-80);\n  --connotation-firm: var(--vvd-color-alert-70);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-basis-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation-firm);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: var(--connotation-firm);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--button-block-size);\n  }\n}\n\n/* Size */\n.control.size-base-small {\n  --button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-base-small .icon {\n  font-size: 16px;\n}\n\n.control.size-base-large {\n  --button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n  --button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.size-base-large .icon {\n  font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n  --button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n  order: 1;\n  margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/calendar/index.js

@@ -5,6 +5,7 @@ import '../shared/web.dom-collections.iterator.js';
 import '../shared/es.object.assign.js';
 import { b as _has, _ as _curry1, a as _curry2 } from '../shared/_has.js';
 import '../shared/class-names.js';
+import '../shared/object-set-prototype-of.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/card/index.js

@@ -0,0 +1,136 @@
+import '../elevation/index.js';
+import '../icon/index.js';
+import '../button/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { s as slotted } from '../shared/slotted.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
+import '../shared/_has.js';
+import '../shared/index2.js';
+import '../shared/affix.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
+styleInject(css_248z);
+
+class Card extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "heading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "subheading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "icon", void 0);
+
+__decorate([attr, __metadata("design:type", Number)], Card.prototype, "elevation", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "footerSlottedContent", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5,
+    _t6,
+    _t7,
+    _t8;
+
+const getClasses = _ => classNames('control', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
+
+function renderHeaderIcon() {
+  return html(_t || (_t = _2`
+	  <vwc-icon class="icon" inline type="${0}"></vwc-icon>`), x => x.icon);
+}
+
+function heading() {
+  return html(_t2 || (_t2 = _2`
+		<div class="header-title">${0}</div>
+	`), x => x.heading);
+}
+
+function subheading() {
+  return html(_t3 || (_t3 = _2`
+		<div class="header-subheading">${0}</div>
+	`), x => x.subheading);
+}
+
+function headerContent() {
+  return html(_t4 || (_t4 = _2`
+		<div class="header-content">
+			${0}
+			${0}
+		</div>
+	`), when(x => x.heading, heading()), when(x => x.subheading, subheading()));
+}
+
+function renderHeader() {
+  return html(_t5 || (_t5 = _2`
+		<header class="header">
+			<slot name="graphic" ${0}>${0}</slot>
+			${0}
+		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.heading || x.subheading, headerContent()));
+}
+
+function shouldHideHeader(card) {
+  return !card.heading && !card.subheading && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+
+function renderMetaSlot() {
+  return html(_t6 || (_t6 = _2`
+		<slot name="meta" ${0}></slot>
+	`), slotted('metaSlottedContent'));
+}
+
+function text() {
+  return html(_t7 || (_t7 = _2`
+		<div class="text">${0}</div>
+	`), x => x.text);
+}
+
+const CardTemplate = () => html(_t8 || (_t8 = _2`
+	<vwc-elevation dp=${0}>
+		<div class="${0}">
+			<div class="wrapper">
+				<div class="vwc-card-media">
+					<slot name="media"></slot>
+				</div>
+				<div class="content">
+					<slot name="content">
+						<div class="content-container">
+							${0}
+							${0}
+						</div>
+						${0}
+					</slot>
+				</div>
+				<div class="footer">
+					<slot name="footer" ${0}></slot>
+				</div>
+			</div>
+		</div>
+	</vwc-elevation>
+`), x => {
+  var _a;
+
+  return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
+}, getClasses, renderHeader(), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'));
+
+const vividCard = Card.compose({
+  baseName: 'card',
+  template: CardTemplate,
+  styles: css_248z
+});
+designSystem.register(vividCard());
+
+export { vividCard };

package/icon/index.js

@@ -3,7 +3,7 @@ import { s as styleInject } from '../shared/style-inject.es.js';
 import { I as Icon } from '../shared/icon.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
 
 var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  color: currentColor;\n  contain: strict;\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-announcement {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n}\n\n.control[class*=connotation] {\n  color: var(--connotation);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base):not(.size-base-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-base-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-base {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-base-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
@@ -22,7 +22,11 @@ const iconTemplate = () => html(_t || (_t = _`
   <figure class="${0}">
 		${0}
   </figure>
-	`), getClasses, when(x => x.svg, x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+	`), getClasses, when(x => isValidString(x.svg), x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+
+function isValidString(value) {
+  return typeof value === 'string' && value.length > 0;
+}
 
 const vividIcon = Icon.compose({
   baseName: 'icon',

package/index.js

@@ -16,8 +16,9 @@ export { vividAccordionItem } from './accordion-item/index.js';
 export { vividAccordion } from './accordion/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
 import './shared/text-anchor.js';
-import './shared/web.dom-collections.iterator.js';
 import './shared/affix.js';
+import './shared/web.dom-collections.iterator.js';
+import './shared/object-set-prototype-of.js';
 import './shared/icon.js';
 import './shared/_has.js';
 import './shared/anchor.js';

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

@@ -1,10 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 export declare class AccordionItem extends FoundationElement {
-    heading: string;
+    heading?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     noIndicator: boolean;
-    meta: string;
+    meta?: string;
     open: boolean;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private emitEvent;

package/lib/badge/badge.d.ts

@@ -10,7 +10,7 @@ export declare class Badge extends FoundationElement {
     shape?: BadgeShape;
     appearance?: BadgeAppearance;
     size?: BadgeSize;
-    text: string;
+    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

@@ -10,7 +10,7 @@ export declare class Button extends FoundationButton {
     shape?: ButtonShape;
     appearance?: ButtonAppearance;
     size?: ButtonSize;
-    label: string;
+    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/icon/icon.d.ts

@@ -4,7 +4,7 @@ declare type IconConnotation = Extract<Connotation, Connotation.Primary | Connot
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;
     size?: Size;
-    svg: string;
+    svg?: string;
     type?: string;
     typeChanged(): Promise<void>;
 }

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.9",
+  "version": "3.0.0",
   "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';

package/progress/index.js

@@ -1,6 +1,7 @@
 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';

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);