@vonage/vivid 3.0.0-next.83 → 3.0.0-next.85

package/dialog/index.js

@@ -1,7 +1,7 @@
 import '../icon/index.js';
 import '../shared/index2.js';
 import '../shared/index3.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 { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, j as __classPrivateFieldSet, 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';
@@ -25,72 +25,55 @@ 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 Sat, 29 Oct 2022 09:46:17 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-typography-heading-4);\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-typography-base);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 02 Nov 2022 12:59:38 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-typography-heading-4);\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-typography-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 {
@@ -99,113 +82,82 @@ class Dialog extends FoundationElement {
       }
     }
   }
-
   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;
-
+  _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">
@@ -213,7 +165,6 @@ function headline() {
 	  </div>
 	`), x => x.headline);
 }
-
 function renderDismissButton() {
   return html(_t3 || (_t3 = _2`
 	  <vwc-button
@@ -225,13 +176,11 @@ function renderDismissButton() {
     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">
@@ -239,7 +188,6 @@ function content() {
 	  </div>
 	`), x => x.text);
 }
-
 const DialogTemplate = () => html(_t5 || (_t5 = _2`
 	<vwc-elevation dp="12">
 		<div>

package/fab/index.js

@@ -21,21 +21,16 @@ import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 29 Oct 2022 09:46:17 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-typography-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: transparent;\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: transparent;\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: transparent;\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: transparent;\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 02 Nov 2022 12:59:38 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-typography-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: transparent;\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: transparent;\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: transparent;\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: transparent;\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;
-
+  _t;
 const getClasses = ({
   connotation,
   density,
@@ -44,7 +39,6 @@ const getClasses = ({
   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);

package/focus/index.js

@@ -1,10 +1,10 @@
 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 Sat, 29 Oct 2022 09:46:17 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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 02 Nov 2022 12:59:38 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;
+  _t;
 const focusTemplate = () => html(_t || (_t = _`
         <span class="control"></span>`));
 

package/header/index.js

@@ -6,7 +6,7 @@ import '../shared/export.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 29 Oct 2022 09:46:17 GMT\n */\n.base {\n  z-index: 1;\n  block-size: var(--_header-block-size);\n  font: var(--vvd-typography-heading-4);\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 02 Nov 2022 12:59:38 GMT\n */\n.base {\n  z-index: 1;\n  block-size: var(--_header-block-size);\n  font: var(--vvd-typography-heading-4);\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() {
@@ -14,25 +14,20 @@ class Header extends FoundationElement {
     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;
-
+  _t;
 const getPartAlternate = ({
   alternate
 }) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
-
 const headerTemplate = context => {
   const elevationTag = context.tagFor(Elevation);
   return html(_t || (_t = _`

package/icon/index.js

@@ -10,20 +10,17 @@ 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-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,
-    _t2;
-
+  _t,
+  _t2;
 const getClasses = ({
   connotation,
   size
 }) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-
 const iconTemplate = () => html(_t || (_t = _`
   <figure class="${0}">
 		${0}
   </figure>
 	`), getClasses, when(x => isValidString(x.svg), x => html(_t2 || (_t2 = _`${0}`), x.svg)));
-
 function isValidString(value) {
   return typeof value === 'string' && value.length > 0;
 }

package/index.js

@@ -17,6 +17,7 @@ export { v as vividDivider } from './shared/index4.js';
 export { vividFab } from './fab/index.js';
 export { vividIcon } from './icon/index.js';
 export { vividLayout } from './layout/index.js';
+export { vividListboxOption } from './listbox-option/index.js';
 export { vividMenu } from './menu/index.js';
 export { v as vividMenuItem } from './shared/index6.js';
 export { vividNav } from './nav/index.js';
@@ -61,7 +62,6 @@ import './shared/text-anchor.template.js';
 import './shared/calendar-event.js';
 import './shared/es.object.assign.js';
 import './shared/aria.js';
-import './shared/regexp-flags.js';
 import './shared/direction.js';
 import './shared/text-anchor.js';
 import './shared/base-progress.js';

package/layout/index.js

@@ -2,24 +2,18 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
 import { c as classNames } from '../shared/class-names.js';
 
 var AUTO_SIZING;
-
 (function (AUTO_SIZING) {
   AUTO_SIZING["Fit"] = "fit";
   AUTO_SIZING["Fill"] = "fill";
 })(AUTO_SIZING || (AUTO_SIZING = {}));
-
 class Layout extends FoundationElement {}
-
 __decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
-
 __decorate([attr({
   attribute: 'column-basis'
 }), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
-
 __decorate([attr({
   attribute: 'column-spacing'
 }), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
-
 __decorate([attr({
   attribute: 'auto-sizing'
 }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
@@ -27,15 +21,13 @@ __decorate([attr({
 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(160px, 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(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 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.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\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}";
 
 let _ = t => t,
-    _t;
-
+  _t;
 const getClasses = ({
   columnBasis,
   gutters,
   columnSpacing,
   autoSizing
 }) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-
 const layoutTemplate = () => html(_t || (_t = _`
         <div class="${0}">
 			<slot></slot>

package/lib/badge/badge.d.ts

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

package/lib/components.d.ts

@@ -17,6 +17,7 @@ export * from './divider';
 export * from './fab';
 export * from './icon';
 export * from './layout';
+export * from './listbox-option';
 export * from './menu';
 export * from './menu-item';
 export * from './nav';

package/lib/listbox-option/index.d.ts

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividListboxOption: (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/listbox-option/listbox-option.d.ts

@@ -0,0 +1,7 @@
+import { ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+export declare class ListboxOption extends FoundationListboxOption {
+    optionText?: string;
+}
+export interface ListboxOption extends AffixIconWithTrailing {
+}

package/lib/listbox-option/listbox-option.template.d.ts

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