@vonage/vivid 3.0.0-next.12 → 3.0.0-next.13

package/README.md

@@ -1,7 +1,52 @@
-# components
+<div class="home-page-hero">
+  <a href="https://github.com/vonage/vivid-3">
+    <img src="/vivid-logo.svg" style="" alt="Vivid Logo" width="120">
+  </a>
+  <h1>Welcome to Vivid</h1>
 
-This library was generated with [Nx](https://nx.dev).
+[![codecov][codecov-shield]][codecov-url]
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![Apache 2.0 License][license-shield]][license-url]
 
-## Running unit tests
 
-Run `nx test components` to execute the unit tests via [Jest](https://jestjs.io).
+  <h6>
+    Vonage's design system platform targeted to provide </br>incorporated, battery-charged web components.
+  </h6>
+  <a class="home-page-hero-docs-btn" href="https://vivid.deno.dev"><strong>Explore the docs</strong></a>
+  <div class="home-page-hero-docs-links">
+    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
+    <span>|</span>    
+    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>
+  </div>
+</div>
+
+### Installation
+
+run:
+
+```
+npm install codemirror
+```
+
+use:
+
+```js
+import '@vonage/vivid/button';
+```
+
+```html
+<vwc-button label="Click me"></vwc-button>
+```
+
+## Roadmap
+
+[view components status](https://github.com/orgs/Vonage/projects/6)
+
+Follow our API planning on the [Vivid project components' view](https://github.com/orgs/Vonage/projects/3/views/13)
+
+We publish a _next_ release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
+
+See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).

package/badge/index.js

@@ -24,7 +24,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", v
 
 applyMixins(Badge, AffixIconWithTrailing);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-neutral-90);\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-soft: var(--vvd-color-cta-20);\n  --connotation-contrast: var(--vvd-color-cta-90);\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-soft: var(--vvd-color-success-20);\n  --connotation-contrast: var(--vvd-color-success-90);\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-soft: var(--vvd-color-alert-20);\n  --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n  --connotation-basis: var(--vvd-color-warning);\n  --connotation-soft: var(--vvd-color-warning-20);\n  --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n  --connotation-basis: var(--vvd-color-info);\n  --connotation-soft: var(--vvd-color-info-20);\n  --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n  --_appearance-color-text: var(--connotation-contrast);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation-basis);\n}\n.control.appearance-subtle {\n  --_appearance-color-text: var(--connotation-contrast);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n  block-size: 24px;\n  padding-inline: 10px;\n}\n\n.control.size-base-small {\n  block-size: 20px;\n  padding-inline: 8px;\n}\n\n.control.size-base-large {\n  block-size: 28px;\n  padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-neutral-90);\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-soft: var(--vvd-color-cta-20);\n  --connotation-contrast: var(--vvd-color-cta-90);\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-soft: var(--vvd-color-success-20);\n  --connotation-contrast: var(--vvd-color-success-90);\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-soft: var(--vvd-color-alert-20);\n  --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n  --connotation-basis: var(--vvd-color-warning);\n  --connotation-soft: var(--vvd-color-warning-20);\n  --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n  --connotation-basis: var(--vvd-color-info);\n  --connotation-soft: var(--vvd-color-info-20);\n  --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n  --_appearance-color-text: var(--connotation-contrast);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation-basis);\n}\n.control.appearance-subtle {\n  --_appearance-color-text: var(--connotation-contrast);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-condensed):not(.size-extended) {\n  block-size: 24px;\n  padding-inline: 10px;\n}\n\n.control.size-condensed {\n  block-size: 20px;\n  padding-inline: 8px;\n}\n\n.control.size-extended {\n  block-size: 28px;\n  padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/banner/index.js

@@ -58,12 +58,20 @@ var Appearance;
   Appearance["Ghost"] = "ghost";
 })(Appearance || (Appearance = {}));
 
+var BlockSize;
+
+(function (BlockSize) {
+  BlockSize["Condensed"] = "condensed";
+  BlockSize["Normal"] = "normal";
+  BlockSize["Extended"] = "extended";
+})(BlockSize || (BlockSize = {}));
+
 var Size;
 
 (function (Size) {
-  Size["BaseSmall"] = "base-small";
-  Size["Base"] = "base";
-  Size["BaseLarge"] = "base-large";
+  Size["Small"] = "small";
+  Size["Medium"] = "medium";
+  Size["Large"] = "large";
 })(Size || (Size = {}));
 
 var Position;
@@ -176,7 +184,7 @@ const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !
 function renderDismissButton() {
   return html(_t || (_t = _2`
 	  <vwc-button
-			  size="base-small"
+			  size="condensed"
 			  class="dismiss-button"
 			  icon="close-line"
 			  @click="${0}">

package/button/index.js

@@ -1,6 +1,7 @@
 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';
@@ -10,7 +11,6 @@ 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
@@ -651,7 +651,13 @@ __decorate([
 applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
 applyMixins(Button$1, StartEnd, DelegatesARIAButton);
 
-class Button extends Button$1 {}
+class Button extends Button$1 {
+  constructor() {
+    super(...arguments);
+    this.stacked = false;
+  }
+
+}
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
 
@@ -661,11 +667,16 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "appeara
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
 
+__decorate([attr({
+  mode: 'boolean',
+  attribute: 'stacked'
+}), __metadata("design:type", Object)], Button.prototype, "stacked", 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  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}";
+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  /* Size */\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  contain: size;\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.control:not(.stacked).size-condensed {\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:not(.stacked).size-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).size-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).size-extended {\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:not(.stacked).size-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).size-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.size-condensed, .size-extended) {\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(.stacked):not(.size-condensed, .size-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.size-condensed, .size-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n:not(.stacked):not(.icon-trailing) .icon {\n  margin-inline-end: var(--_button-icon-gap);\n}\n:not(.stacked).icon-trailing .icon {\n  margin-inline-start: var(--_button-icon-gap);\n}\n.stacked:not(.icon-trailing) .icon {\n  margin-block-end: var(--_button-icon-gap);\n}\n.stacked.icon-trailing .icon {\n  margin-block-start: var(--_button-icon-gap);\n}\n.icon-trailing .icon {\n  order: 1;\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,
@@ -683,11 +694,12 @@ const getClasses = ({
   appearance,
   shape,
   size,
+  iconTrailing,
   icon,
   label,
   disabled,
-  iconTrailing
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing]);
+  stacked
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['stacked', Boolean(stacked)]);
 
 const focusTemplate = context => {
   const focusTag = context.tagFor(Focus);

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/web.dom-collections.iterator.js';
+import '../shared/affix.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/elevation/index.js

@@ -6,7 +6,7 @@ class Elevation extends FoundationElement {}
 
 __decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
 
-var css_248z = ".control.dp-0 ::slotted(*) {\n  background-color: var(--vvd-color-surface-0dp);\n  filter: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-2 ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}\n.control.dp-4 ::slotted(*) {\n  background-color: var(--vvd-color-surface-4dp);\n  filter: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 ::slotted(*) {\n  background-color: var(--vvd-color-surface-8dp);\n  filter: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 ::slotted(*) {\n  background-color: var(--vvd-color-surface-12dp);\n  filter: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 ::slotted(*) {\n  background-color: var(--vvd-color-surface-16dp);\n  filter: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 ::slotted(*) {\n  background-color: var(--vvd-color-surface-24dp);\n  filter: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}";
+var css_248z = ".control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-2 {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background-color: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/icon/index.js

@@ -6,7 +6,7 @@ import { c as classNames } from '../shared/class-names.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}";
+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-small):not(.size-medium):not(.size-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-medium {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/layout/index.js

@@ -25,7 +25,7 @@ __decorate([attr({
   attribute: 'auto-sizing'
 }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-base-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-base-small):not(.column-basis-base):not(.column-basis-base-large):not(.column-basis-block), .control.column-basis-base {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-base-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-base-small {\n  gap: 16px;\n}\n.control:not(.column-spacing-base-small):not(.column-spacing-base):not(.column-spacing-base-large), .control.column-spacing-base {\n  gap: 24px;\n}\n.control.column-spacing-base-large {\n  gap: 32px;\n}\n.control.gutters-base-small {\n  margin: 16px;\n}\n.control.gutters-base {\n  margin: 24px;\n}\n.control.gutters-base-large {\n  margin: 32px;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control:not(.column-spacing-small):not(.column-spacing-medium):not(.column-spacing-large), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/lib/badge/badge.d.ts

@@ -1,10 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import type { Appearance, BlockSize, Connotation, 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 BadgeSize = Extract<BlockSize, BlockSize.Condensed | BlockSize.Normal | BlockSize.Extended>;
 export declare class Badge extends FoundationElement {
     connotation?: BadgeConnotation;
     shape?: BadgeShape;

package/lib/button/button.d.ts

@@ -1,15 +1,16 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import type { Appearance, BlockSize, Connotation, 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 ButtonSize = Extract<BlockSize, BlockSize.Condensed | BlockSize.Normal | BlockSize.Extended>;
 export declare class Button extends FoundationButton {
     connotation?: ButtonConnotation;
     shape?: ButtonShape;
     appearance?: ButtonAppearance;
     size?: ButtonSize;
+    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 BlockSize {
+    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,9 +1,10 @@
 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;
+    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/package.json

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

package/popup/index.js

@@ -2053,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 size="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({