@vonage/vivid 3.0.0-next.6 → 3.0.0-next.60

package/dialog/index.js

@@ -0,0 +1,279 @@
+import '../icon/index.js';
+import '../button/index.js';
+import '../shared/index2.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 '../shared/icon.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/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../focus/index.js';
+import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/aria-global.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/object-keys.js';
+
+var css_248z$1 = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size);\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: 24px;\n  gap: 8px;\n}\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n  inline-size: 100%;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  margin-top: -8px;\n  margin-right: -8px;\n}\n\n.headline {\n  font: var(--vvd-font-heading4);\n}\n.headline-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: 24px;\n}\n\n.content {\n  font: var(--vvd-font-base);\n}";
+
+var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
+let dialogPolyfill;
+
+(async () => {
+  if (!HTMLDialogElement || !HTMLDialogElement.prototype.showModal) {
+    delete window.HTMLDialogElement;
+    dialogPolyfill = await import('../shared/dialog-polyfill.esm.js');
+  }
+})();
+
+class Dialog extends FoundationElement {
+  constructor() {
+    super(...arguments);
+
+    _Dialog_instances.add(this);
+
+    this.open = false;
+    this.ariaLabelledBy = null;
+    this.ariaLabel = null;
+    this.ariaDescribedBy = null;
+
+    _Dialog_modal.set(this, false);
+
+    _Dialog_dialogElement.set(this, void 0);
+
+    _Dialog_handleScrimClick.set(this, event => {
+      if (event.target !== __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
+        return;
+      }
+
+      const rect = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).getBoundingClientRect();
+
+      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+      this.open = clickedInDialog;
+    });
+
+    _Dialog_handleInternalFormSubmit.set(this, event => {
+      if (event.target.method !== 'dialog') {
+        return;
+      }
+
+      this.open = false;
+    });
+  }
+
+  set returnValue(value) {
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).returnValue = value;
+  }
+
+  get returnValue() {
+    var _a;
+
+    return (_a = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) === null || _a === void 0 ? void 0 : _a.returnValue;
+  }
+
+  get modal() {
+    return __classPrivateFieldGet(this, _Dialog_modal, "f");
+  }
+
+  openChanged(oldValue, newValue) {
+    if (oldValue === undefined) {
+      return;
+    }
+
+    if (!newValue) {
+      this.close();
+    } else {
+      if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
+        __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open = true;
+      }
+    }
+  }
+
+  close() {
+    if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open) {
+      __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).close();
+
+      this.dispatchEvent(new CustomEvent('close', {
+        bubbles: true,
+        composed: true,
+        detail: this.returnValue
+      }));
+    }
+
+    this.open = false;
+
+    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, false);
+  }
+
+  show() {
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).show();
+
+    this.open = true;
+  }
+
+  showModal() {
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
+
+    this.open = true;
+
+    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
+
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
+
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
+  }
+
+}
+_Dialog_modal = new WeakMap(), _Dialog_dialogElement = new WeakMap(), _Dialog_handleScrimClick = new WeakMap(), _Dialog_handleInternalFormSubmit = new WeakMap(), _Dialog_instances = new WeakSet(), _Dialog_dialog_get = function _Dialog_dialog_get() {
+  if (!__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
+    __classPrivateFieldSet(this, _Dialog_dialogElement, this.shadowRoot.querySelector('dialog'), "f");
+
+    if (__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
+      __classPrivateFieldGet(this, _Dialog_dialogElement, "f").open = this.open;
+
+      if (dialogPolyfill) {
+        dialogPolyfill.registerDialog(__classPrivateFieldGet(this, _Dialog_dialogElement, "f"));
+      }
+    }
+  }
+
+  return __classPrivateFieldGet(this, _Dialog_dialogElement, "f");
+}, _Dialog_handleModal = function _Dialog_handleModal(show) {
+  __classPrivateFieldSet(this, _Dialog_modal, show, "f");
+
+  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).toggleAttribute('aria-modal', show);
+
+  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).classList.toggle('modal', show);
+};
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Dialog.prototype, "open", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "icon", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "text", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "headline", void 0);
+
+__decorate([attr({
+  attribute: 'aria-labelledby'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabelledBy", void 0);
+
+__decorate([attr({
+  attribute: 'aria-label'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabel", void 0);
+
+__decorate([attr({
+  attribute: 'aria-describedby'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaDescribedBy", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5;
+
+const getClasses = _ => classNames('base');
+
+function icon() {
+  return html(_t || (_t = _2`
+		<vwc-icon class="icon" size="large" type="${0}"></vwc-icon>
+	`), x => x.icon);
+}
+
+function headline() {
+  return html(_t2 || (_t2 = _2`
+	  <div class="headline">
+		  ${0}
+	  </div>
+	`), x => x.headline);
+}
+
+function renderDismissButton() {
+  return html(_t3 || (_t3 = _2`
+	  <vwc-button
+			  density="condensed"
+			  class="dismiss-button"
+			  icon="close-line"
+			  @click="${0}">
+	  </vwc-button>`), x => {
+    x.open = false;
+  });
+}
+
+function handleEscapeKey(dialog, event) {
+  if (event.key === 'Escape' && dialog.modal) {
+    dialog.open = false;
+  }
+}
+
+function content() {
+  return html(_t4 || (_t4 = _2`
+	  <div class="content">
+		  ${0}
+	  </div>
+	`), x => x.text);
+}
+
+const DialogTemplate = () => html(_t5 || (_t5 = _2`
+	<vwc-elevation dp="12">
+		<div>
+			<dialog class="${0}"
+					@keydown="${0}"
+					returnValue="${0}"
+					aria-labelledby="${0}"
+					aria-label="${0}"
+					aria-describedby="${0}"
+			>
+				<slot name="main">
+					<div class="main-wrapper">
+						<div class="header">
+							<div class="headline-wrapper">
+								<slot name="graphic">
+									${0}
+								</slot>
+								${0}
+							</div>
+						${0}
+						</div>
+						<slot name="content">
+							${0}
+						</slot>
+						<slot name="footer"></slot>
+					</div>
+				</slot>
+			</dialog>
+		</div>
+	</vwc-elevation>`), getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, when(x => x.icon, icon()), when(x => x.headline, headline()), renderDismissButton(), when(x => x.text, content()));
+
+const vividDialog = Dialog.compose({
+  baseName: 'dialog',
+  template: DialogTemplate,
+  styles: [css_248z, css_248z$1]
+});
+designSystem.register(vividDialog());
+
+export { vividDialog };

package/divider/index.js

@@ -0,0 +1,86 @@
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, d as designSystem } from '../shared/index.js';
+import { c as classNames } from '../shared/class-names.js';
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
+
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+class Divider$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
+}
+__decorate([
+    attr
+], Divider$1.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider$1.prototype, "orientation", void 0);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+
+class Divider extends Divider$1 {}
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
+
+const vividDivider = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividDivider());
+
+export { vividDivider };

package/elevation/index.js

@@ -1,31 +1,3 @@
-import { F as FoundationElement, _ 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 { c as classNames } from '../shared/class-names.js';
-
-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}";
-styleInject(css_248z);
-
-let _ = t => t,
-    _t;
-
-const getClasses = ({
-  dp
-}) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
-
-const elevationTemplate = () => html(_t || (_t = _`
-        <div class="${0}" part="base">
-			<slot></slot>
-		</div>`), getClasses);
-
-const VIVIDElevation = Elevation.compose({
-  baseName: 'elevation',
-  template: elevationTemplate,
-  styles: css_248z
-});
-designSystem.register(VIVIDElevation());
-
-export { VIVIDElevation };
+import '../shared/index.js';
+export { v as vividElevation } from '../shared/index2.js';
+import '../shared/class-names.js';

package/fab/index.js

@@ -0,0 +1,100 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { B as Button } from '../shared/button.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
+import { r as ref } from '../shared/ref.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/form-associated.js';
+import '../shared/aria-global.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\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: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-font-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-fierce: var(--vvd-color-cta-700);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\n}\n.control.icon-only {\n  border-radius: 50%;\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(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n.density-extended .icon {\n  font-size: 24px;\n}\n.icon:not(.density-extended) .icon {\n  font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+
+class Fab extends Button {}
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "density", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
+
+applyMixins(Fab, AffixIconWithTrailing);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  connotation,
+  density,
+  icon,
+  label,
+  iconTrailing,
+  disabled
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`density-${density}`, Boolean(density)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
+
+const FabTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+        <button
+            class="${0} "
+            ?autofocus="${0}"
+            ?disabled="${0}"
+            form="${0}"
+            formaction="${0}"
+            formenctype="${0}"
+            formmethod="${0}"
+            formnovalidate="${0}"
+            formtarget="${0}"
+            name="${0}"
+            type="${0}"
+            value="${0}"
+            aria-atomic="${0}"
+            aria-busy="${0}"
+            aria-controls="${0}"
+            aria-current="${0}"
+            aria-describedby="${0}"
+            aria-details="${0}"
+            aria-disabled="${0}"
+            aria-errormessage="${0}"
+            aria-expanded="${0}"
+            aria-flowto="${0}"
+            aria-haspopup="${0}"
+            aria-hidden="${0}"
+            aria-invalid="${0}"
+            aria-keyshortcuts="${0}"
+            aria-label="${0}"
+            aria-labelledby="${0}"
+            aria-live="${0}"
+            aria-owns="${0}"
+            aria-pressed="${0}"
+            aria-relevant="${0}"
+            aria-roledescription="${0}"
+            ${0}
+        >
+            ${0}
+            ${0}
+            ${0}
+        </button>
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+};
+
+const vividFab = Fab.compose({
+  baseName: 'fab',
+  template: FabTemplate,
+  styles: css_248z
+});
+designSystem.register(vividFab());
+
+export { vividFab };

package/focus/index.js

@@ -1,3 +1,18 @@
-import '../shared/index.js';
-export { V as VIVIDFocus } from '../shared/index2.js';
-import '../shared/style-inject.es.js';
+import { h as html, d as designSystem } from '../shared/index.js';
+import { F as Focus } from '../shared/focus.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n: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-canvas-text));\n  outline-offset: -2px;\n}";
+
+let _ = t => t,
+    _t;
+const focusTemplate = () => html(_t || (_t = _`
+        <span class="control"></span>`));
+
+const vividFocus = Focus.compose({
+  baseName: 'focus',
+  template: focusTemplate,
+  styles: css_248z
+});
+designSystem.register(vividFocus());
+
+export { vividFocus };

package/header/index.js

@@ -0,0 +1,66 @@
+import { E as Elevation } from '../shared/index2.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 { 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 Thu, 15 Sep 2022 09:43:08 GMT\n */\n.base {\n  z-index: 1;\n  block-size: var(--_header-block-size);\n  font: var(--vvd-font-heading4);\n  inline-size: 100%;\n  --_header-block-size: 64px;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --_header-block-size: 64px;\n}";
+
+class Header extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.elevationShadow = false;
+    this.alternate = false;
+  }
+
+}
+
+__decorate([attr({
+  attribute: 'elevation-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
+
+let _ = t => t,
+    _t;
+
+const getPartAlternate = ({
+  alternate
+}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
+
+const headerTemplate = context => {
+  const elevationTag = context.tagFor(Elevation);
+  return html(_t || (_t = _`
+    <${0} dp="4" ?no-shadow=${0}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${0}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content" role="toolbar">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${0}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
+};
+
+const vividHeader = Header.compose({
+  baseName: 'header',
+  template: headerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividHeader());
+
+export { vividHeader };

package/icon/index.js

@@ -1,13 +1,13 @@
 import { h as html, d as designSystem } from '../shared/index.js';
-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/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.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}";
-styleInject(css_248z);
+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-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.control.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\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}";
 
 let _ = t => t,
     _t,
@@ -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',