@vonage/vivid 3.0.0-next.23 → 3.0.0-next.24

package/accordion-item/index.js

@@ -16,7 +16,7 @@ import '../shared/_has.js';
 import '../shared/focus.js';
 import '../shared/object-keys.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.control {\n  display: flex;\n  flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n  display: none;\n}\n.control.open .toggle-open {\n  display: none;\n}\n.control.open .toggle-close {\n  display: initial;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  background: transparent;\n  cursor: pointer;\n  outline: 0 none;\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.control {\n  display: flex;\n  flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n  display: none;\n}\n.control.open .toggle-open {\n  display: none;\n}\n.control.open .toggle-close {\n  display: initial;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  outline: 0 none;\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class AccordionItem extends FoundationElement {

package/calendar/index.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView, F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, g as HTMLView, F as FoundationElement, c as __classPrivateFieldGet, _ 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 '../shared/web.dom-collections.iterator.js';
 import { C as CalendarEvent } from '../shared/calendar-event.js';

package/card/index.js

@@ -11,7 +11,7 @@ import '../shared/iterators.js';
 import '../shared/to-string.js';
 import '../shared/_has.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n  :host {\n    block-size: -moz-fit-content;\n    block-size: fit-content;\n    inline-size: -moz-fit-content;\n    inline-size: fit-content;\n  }\n}\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.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\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: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\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: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\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.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\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: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\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: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
 styleInject(css_248z);
 
 class Card extends FoundationElement {}
@@ -42,7 +42,7 @@ let _2 = t => t,
     _t7,
     _t8;
 
-const getClasses = _ => classNames('control', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
+const getClasses = _ => classNames('base', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
 
 function renderHeaderIcon() {
   return html(_t || (_t = _2`

package/checkbox/index.js

@@ -0,0 +1,176 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import { C as CheckableFormAssociated, k as keySpace$1 } from '../shared/form-associated.js';
+import { f as focusTemplateFactory } from '../shared/focus2.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/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/focus.js';
+import '../shared/object-keys.js';
+
+class _Checkbox extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual checkbox control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class Checkbox$1 extends FormAssociatedCheckbox {
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="checkbox"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * The indeterminate state of the control
+         */
+        this.indeterminate = false;
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace$1:
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            if (!this.disabled && !this.readOnly) {
+                this.checked = !this.checked;
+            }
+        };
+        this.proxy.setAttribute("type", "checkbox");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Checkbox$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], Checkbox$1.prototype, "indeterminate", void 0);
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  outline: 0 none;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-on-canvas);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-neutral-20);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:indeterminate, .indeterminate):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .base {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n\n.indicator {\n  font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\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-on-canvas);\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+styleInject(css_248z);
+
+const keySpace = ' ';
+class Checkbox extends Checkbox$1 {
+  constructor() {
+    super(...arguments);
+
+    this.keypressHandler = e => {
+      switch (e.key) {
+        case keySpace:
+          if (this.indeterminate) {
+            this.indeterminate = false;
+          }
+
+          this.checked = !this.checked;
+          break;
+      }
+    };
+
+    this.clickHandler = () => {
+      if (!this.disabled && !this.readOnly) {
+        if (this.indeterminate) {
+          this.indeterminate = false;
+        }
+
+        this.checked = !this.checked;
+      }
+    };
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], Checkbox.prototype, "label", void 0);
+
+let _ = t => t,
+    _t,
+    _t2;
+
+const getClasses = ({
+  readOnly,
+  checked,
+  disabled,
+  indeterminate
+}) => classNames('base', ['readonly', Boolean(readOnly)], ['checked', Boolean(checked)], ['disabled', Boolean(disabled)], ['indeterminate', Boolean(indeterminate)]);
+
+const CheckboxTemplate = context => {
+  const focusTemplate = focusTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
+  return html(_t || (_t = _`<span
+  role="checkbox"
+  aria-checked="${0}"
+  aria-required="${0}"
+  aria-disabled="${0}"
+  aria-readonly="${0}"
+  tabindex="${0}"
+  @keypress="${0}"
+  @click="${0}"
+  class="${0}"
+  >
+    <div class="control">
+      <${0} class="indicator checkmark" type="check-solid"></${0}>
+      <${0} class="indicator minus" type="minus-solid"></${0}>
+      ${0}
+    </div>
+
+    ${0}
+
+  </span>`), x => x.checked, x => x.required, x => x.disabled, x => x.readOnly, x => x.disabled ? null : 0, (x, c) => x.keypressHandler(c.event), x => x.clickHandler(), getClasses, iconTag, iconTag, iconTag, iconTag, () => focusTemplate, when(x => x.label, html(_t2 || (_t2 = _`<label>${0}</label>`), x => x.label)));
+};
+
+const vividCheckbox = Checkbox.compose({
+  baseName: 'checkbox',
+  template: CheckboxTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividCheckbox());
+
+export { vividCheckbox };

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 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\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}";
+var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\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/focus/index.js

@@ -2,7 +2,7 @@ import { h as html, d as designSystem } from '../shared/index.js';
 import { F as Focus } from '../shared/focus.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 
-var css_248z = ":host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: 0;\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-on-canvas));\n  outline-offset: -2px;\n}";
+var css_248z = ":host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-on-canvas));\n  outline-offset: -2px;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/header/index.js

@@ -0,0 +1,91 @@
+import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  --header-z-index: 7;\n}\n\n.control {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  z-index: var(--header-z-index);\n  display: flex;\n  width: 100%;\n  height: 64px;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\n  column-gap: 12px;\n}\n.control.fixed {\n  position: fixed;\n}\n.control.fixed.elevated {\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);\n  transition: all 0.15s linear;\n}\n.control .header-content {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n}\n.control .start {\n  justify-content: flex-start;\n}\n.control .start .heading {\n  padding-left: 20px;\n}\n.control .end {\n  justify-content: flex-end;\n}\n\n.control.fixed + .app-content {\n  padding-top: 64px;\n}\n.control.fixed + .app-content ::slotted(vwc-side-drawer) {\n  block-size: calc(100vh - 64px);\n}";
+styleInject(css_248z);
+
+var _Header_updateElevatedState;
+class Header extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.fixed = false;
+    this.alternate = false;
+    this._elevated = false;
+
+    _Header_updateElevatedState.set(this, () => {
+      this._elevated = !this._elevated;
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
+  }
+
+  get elevated() {
+    return this._elevated && false || this.fixed && window.pageYOffset > 0;
+  }
+
+}
+_Header_updateElevatedState = new WeakMap();
+
+__decorate([attr, __metadata("design:type", String)], Header.prototype, "heading", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "fixed", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
+
+__decorate([observable, __metadata("design:type", Object)], Header.prototype, "_elevated", void 0);
+
+__decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Header.prototype, "elevated", null);
+
+let _ = t => t,
+    _t,
+    _t2;
+
+const getClasses = ({
+  fixed,
+  alternate,
+  elevated
+}) => classNames('control', ['fixed', Boolean(fixed)], ['alternate', Boolean(alternate)], ['elevated', Boolean(elevated)]);
+
+const headerTemplate = () => {
+  return html(_t || (_t = _`
+    <header class="${0}" part="${0}">
+        <section class="header-content start" id="navigation">
+          <slot></slot>
+          ${0}
+        </section>
+        <section class="header-content end" id="actions" role="toolbar">
+          <slot name="actionItems"></slot>
+        </section>
+    </header>
+    <div class="app-content">
+		<slot name="app-content"></slot>
+	</div>
+	`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.heading, html(_t2 || (_t2 = _`<span class="heading">${0}</span>`), x => x.heading)));
+};
+
+const vividHeader = Header.compose({
+  baseName: 'header',
+  template: headerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividHeader());
+
+export { vividHeader };

package/index.js

@@ -22,6 +22,8 @@ export { vividSidenavItem } from './sidenav-item/index.js';
 export { vividText } from './text/index.js';
 export { vividTextfield } from './text-field/index.js';
 export { vividTooltip } from './tooltip/index.js';
+export { vividCheckbox } from './checkbox/index.js';
+export { vividHeader } from './header/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
 import './shared/style-inject.es.js';
 import './shared/class-names.js';

package/lib/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox as FastCheckbox } from '@microsoft/fast-foundation';
+export declare const keySpace: ' ';
+export declare class Checkbox extends FastCheckbox {
+    label?: string;
+}

package/lib/checkbox/checkbox.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { CheckboxOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Checkbox } from './checkbox';
+export declare const CheckboxTemplate: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions>;

package/lib/checkbox/index.d.ts

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

package/lib/components.d.ts

@@ -22,3 +22,5 @@ export * from './sidenav-item';
 export * from './text';
 export * from './text-field';
 export * from './tooltip';
+export * from './checkbox';
+export * from './header';

package/lib/header/header.d.ts

@@ -0,0 +1,11 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Header extends FoundationElement {
+    #private;
+    heading?: string;
+    fixed: boolean;
+    alternate: boolean;
+    _elevated: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get elevated(): boolean;
+}

package/lib/header/header.template.d.ts

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

package/lib/header/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividHeader: (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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.23",
+  "version": "3.0.0-next.24",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -28,7 +28,8 @@
     "./sidenav-item": "./sidenav-item",
     "./text": "./text",
     "./text-field": "./text-field",
-    "./tooltip": "./tooltip"
+    "./tooltip": "./tooltip",
+    "./checkbox": "./checkbox"
   },
   "typings": "./index.d.ts",
   "dependencies": {

package/popup/index.js

@@ -1,6 +1,6 @@
 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 { F as FoundationElement, c as __classPrivateFieldGet, i as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
 import { o as objectCreate } from '../shared/web.dom-collections.iterator.js';
 import '../shared/es.object.assign.js';

package/shared/form-associated.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, D as DOM, a as attr, o as observable } from './index.js';
+import { e as emptyArray, D as DOM, a as attr, o as observable, f as booleanConverter } from './index.js';
 
 /**
  * Key Code values
@@ -77,6 +77,7 @@ var KeyCodes;
     KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
 })(KeyCodes || (KeyCodes = {}));
 const keyEnter = "Enter";
+const keySpace = " ";
 
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";
@@ -456,5 +457,91 @@ function FormAssociated(BaseCtor) {
     observable(C.prototype, "value");
     return C;
 }
+/**
+ * @alpha
+ */
+function CheckableFormAssociated(BaseCtor) {
+    class C extends FormAssociated(BaseCtor) {
+    }
+    class D extends C {
+        constructor(...args) {
+            super(args);
+            /**
+             * Tracks whether the "checked" property has been changed.
+             * This is necessary to provide consistent behavior with
+             * normal input checkboxes
+             */
+            this.dirtyChecked = false;
+            /**
+             * Provides the default checkedness of the input element
+             * Passed down to proxy
+             *
+             * @public
+             * @remarks
+             * HTML Attribute: checked
+             */
+            this.checkedAttribute = false;
+            /**
+             * The checked state of the control.
+             *
+             * @public
+             */
+            this.checked = false;
+            // Re-initialize dirtyChecked because initialization of other values
+            // causes it to become true
+            this.dirtyChecked = false;
+        }
+        checkedAttributeChanged() {
+            this.defaultChecked = this.checkedAttribute;
+        }
+        /**
+         * @internal
+         */
+        defaultCheckedChanged() {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                this.checked = this.defaultChecked;
+                this.dirtyChecked = false;
+            }
+        }
+        checkedChanged(prev, next) {
+            if (!this.dirtyChecked) {
+                this.dirtyChecked = true;
+            }
+            this.currentChecked = this.checked;
+            this.updateForm();
+            if (this.proxy instanceof HTMLInputElement) {
+                this.proxy.checked = this.checked;
+            }
+            if (prev !== undefined) {
+                this.$emit("change");
+            }
+            this.validate();
+        }
+        currentCheckedChanged(prev, next) {
+            this.checked = this.currentChecked;
+        }
+        updateForm() {
+            const value = this.checked ? this.value : null;
+            this.setFormValue(value, value);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.updateForm();
+        }
+        formResetCallback() {
+            super.formResetCallback();
+            this.checked = !!this.checkedAttribute;
+            this.dirtyChecked = false;
+        }
+    }
+    attr({ attribute: "checked", mode: "boolean" })(D.prototype, "checkedAttribute");
+    attr({ attribute: "current-checked", converter: booleanConverter })(D.prototype, "currentChecked");
+    observable(D.prototype, "defaultChecked");
+    observable(D.prototype, "checked");
+    return D;
+}
 
-export { FormAssociated as F };
+export { CheckableFormAssociated as C, FormAssociated as F, keySpace as k };

package/shared/index.js

@@ -5011,4 +5011,4 @@ function provideVividDesignSystem(element) {
 }
 const designSystem = provideVividDesignSystem();
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, __classPrivateFieldSet as g, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p, volatile as v };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, booleanConverter as f, HTMLView as g, html as h, __classPrivateFieldSet as i, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p, volatile as v };

package/side-drawer/index.js

@@ -8601,7 +8601,7 @@ __decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "pos
 
 __decorate([observable, __metadata("design:type", Array)], SideDrawer.prototype, "headerSlottedContent", void 0);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n  block-size: 100vh;\n}\n\n:host([position=end]) {\n  flex-direction: row-reverse;\n}\n\n.control {\n  position: fixed;\n  z-index: var(--side-drawer-z-index, 6);\n  top: auto;\n  bottom: 0;\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n  inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n  transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar),\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar-fixed) {\n  --mdc-top-app-bar-width: calc(100% - var(--side-drawer-inline-size, 280px));\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-inline-size, 280px);\n  margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.side-drawer-header {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  height: 64px;\n  flex-shrink: 0;\n  align-items: center;\n  padding-inline-end: var(--side-drawer-padding-header, 16px);\n  padding-inline-start: var(--side-drawer-padding-header, 16px);\n}\n:not(.withHeader) .side-drawer-header {\n  display: none;\n}\n\n.side-drawer-content {\n  background-color: inherit;\n  margin-block: 12px;\n  overflow-y: auto;\n  padding-inline-end: var(--side-drawer-padding-body, 16px);\n  padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n  inset-inline-start: 0;\n}\n.modal.end {\n  inset-inline-end: 0;\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  z-index: calc(6 - 1);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n  block-size: 100vh;\n}\n\n:host([position=end]) {\n  flex-direction: row-reverse;\n}\n\n.control {\n  position: fixed;\n  z-index: var(--side-drawer-z-index, 6);\n  top: auto;\n  bottom: 0;\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n  inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n  transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-inline-size, 280px);\n  margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.side-drawer-header {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  height: 64px;\n  flex-shrink: 0;\n  align-items: center;\n  padding-inline-end: var(--side-drawer-padding-header, 16px);\n  padding-inline-start: var(--side-drawer-padding-header, 16px);\n}\n:not(.withHeader) .side-drawer-header {\n  display: none;\n}\n\n.side-drawer-content {\n  background-color: inherit;\n  margin-block: 12px;\n  overflow-y: auto;\n  padding-inline-end: var(--side-drawer-padding-body, 16px);\n  padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n  inset-inline-start: 0;\n}\n.modal.end {\n  inset-inline-end: 0;\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  z-index: calc(--side-drawer-z-index - 1);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 styleInject(css_248z);
 
 let _ = t => t,