@vonage/vivid 3.0.0-next.2 → 3.0.0-next.22

package/calendar-event/index.js

@@ -0,0 +1,117 @@
+import { h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { C as CalendarEvent } from '../shared/calendar-event.js';
+import '../shared/es.object.assign.js';
+import { _ as _export, d as descriptors, g as global$1, f as functionUncurryThis, p as hasOwnProperty_1, i as isCallable$1, o as objectDefineProperty, P as copyConstructorProperties$1, b as objectIsPrototypeOf } from '../shared/export.js';
+import { t as toString$1 } from '../shared/to-string.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.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:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n  --_connotation-color-on-primary: var(--vvd-color-on-warning);\n  --_connotation-color-contrast: var(--vvd-color-warning-90);\n  --_connotation-color-soft: var(--vvd-color-warning-20);\n}\n.base.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n  --_connotation-color-on-primary: var(--vvd-color-on-announcement);\n  --_connotation-color-contrast: var(--vvd-color-announcement-90);\n  --_connotation-color-soft: var(--vvd-color-announcement-20);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  --_connotation-color-primary: var(--vvd-color-info);\n  --_connotation-color-on-primary: var(--vvd-color-on-info);\n  --_connotation-color-contrast: var(--vvd-color-info-90);\n  --_connotation-color-soft: var(--vvd-color-info-20);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin: 0;\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin: 0;\n}";
+styleInject(css_248z);
+
+var $ = _export;
+var DESCRIPTORS = descriptors;
+var global = global$1;
+var uncurryThis = functionUncurryThis;
+var hasOwn = hasOwnProperty_1;
+var isCallable = isCallable$1;
+var isPrototypeOf = objectIsPrototypeOf;
+var toString = toString$1;
+var defineProperty = objectDefineProperty.f;
+var copyConstructorProperties = copyConstructorProperties$1;
+
+var NativeSymbol = global.Symbol;
+var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
+
+if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
+  // Safari 12 bug
+  NativeSymbol().description !== undefined
+)) {
+  var EmptyStringDescriptionStore = {};
+  // wrap Symbol constructor for correct work with undefined description
+  var SymbolWrapper = function Symbol() {
+    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
+    var result = isPrototypeOf(SymbolPrototype, this)
+      ? new NativeSymbol(description)
+      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
+      : description === undefined ? NativeSymbol() : NativeSymbol(description);
+    if (description === '') EmptyStringDescriptionStore[result] = true;
+    return result;
+  };
+
+  copyConstructorProperties(SymbolWrapper, NativeSymbol);
+  SymbolWrapper.prototype = SymbolPrototype;
+  SymbolPrototype.constructor = SymbolWrapper;
+
+  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
+  var symbolToString = uncurryThis(SymbolPrototype.toString);
+  var symbolValueOf = uncurryThis(SymbolPrototype.valueOf);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis(''.replace);
+  var stringSlice = uncurryThis(''.slice);
+
+  defineProperty(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = symbolValueOf(this);
+      var string = symbolToString(symbol);
+      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
+      return desc === '' ? undefined : desc;
+    }
+  });
+
+  $({ global: true, constructor: true, forced: true }, {
+    Symbol: SymbolWrapper
+  });
+}
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+
+const getClasses = ({
+  connotation,
+  appearance
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
+
+const getStyles = ({
+  start,
+  duration,
+  overlapCount
+}) => {
+  const stylesObj = Object.assign(Object.assign(Object.assign({}, overlapCount && {
+    '--vvd-calendar-event--overlap-count': overlapCount
+  }), start && {
+    '--vvd-calendar-event--start': start
+  }), duration && {
+    '--vvd-calendar-event--duration': duration
+  });
+  return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
+};
+
+const CalendarEventTemplate = () => html(_t || (_t = _`
+<div
+  style="${0}"
+  class="${0}"
+  role="button"
+  tabindex="0"
+>
+  ${0}
+  ${0}
+</div>`), getStyles, getClasses, when(x => x.heading, html(_t2 || (_t2 = _`<h2><strong>${0}</strong></h2>`), x => x.heading)), when(x => x.description, html(_t3 || (_t3 = _`<p>${0}</p>`), x => x.description)));
+
+const vividCalendarEvent = CalendarEvent.compose({
+  baseName: 'calendar-event',
+  template: CalendarEventTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividCalendarEvent());
+
+export { vividCalendarEvent };

package/card/index.js

@@ -0,0 +1,134 @@
+import '../elevation/index.js';
+import '../icon/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { s as slotted } from '../shared/slotted.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+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}";
+styleInject(css_248z);
+
+class Card extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "heading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "subheading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "icon", void 0);
+
+__decorate([attr, __metadata("design:type", Number)], Card.prototype, "elevation", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "footerSlottedContent", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
+
+__decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5,
+    _t6,
+    _t7,
+    _t8;
+
+const getClasses = _ => classNames('control', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
+
+function renderHeaderIcon() {
+  return html(_t || (_t = _2`
+	  <vwc-icon class="icon" inline type="${0}"></vwc-icon>`), x => x.icon);
+}
+
+function heading() {
+  return html(_t2 || (_t2 = _2`
+		<div class="header-title">${0}</div>
+	`), x => x.heading);
+}
+
+function subheading() {
+  return html(_t3 || (_t3 = _2`
+		<div class="header-subheading">${0}</div>
+	`), x => x.subheading);
+}
+
+function headerContent() {
+  return html(_t4 || (_t4 = _2`
+		<div class="header-content">
+			${0}
+			${0}
+		</div>
+	`), when(x => x.heading, heading()), when(x => x.subheading, subheading()));
+}
+
+function renderHeader() {
+  return html(_t5 || (_t5 = _2`
+		<header class="header">
+			<slot name="graphic" ${0}>${0}</slot>
+			${0}
+		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.heading || x.subheading, headerContent()));
+}
+
+function shouldHideHeader(card) {
+  return !card.heading && !card.subheading && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+
+function renderMetaSlot() {
+  return html(_t6 || (_t6 = _2`
+		<slot name="meta" ${0}></slot>
+	`), slotted('metaSlottedContent'));
+}
+
+function text() {
+  return html(_t7 || (_t7 = _2`
+		<div class="text">${0}</div>
+	`), x => x.text);
+}
+
+const CardTemplate = () => html(_t8 || (_t8 = _2`
+	<vwc-elevation dp=${0}>
+
+		<div class="${0}">
+			<div class="wrapper">
+				<div class="vwc-card-media">
+					<slot name="media"></slot>
+				</div>
+				<slot name="main">
+					<div class="main-content">
+						<div class="header-wrapper">
+							${0}
+							${0}
+						</div>
+						${0}
+					</div>
+				</slot>
+				<div class="footer">
+					<slot name="footer" ${0}></slot>
+				</div>
+			</div>
+		</div>
+
+	</vwc-elevation>
+`), x => {
+  var _a;
+
+  return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
+}, getClasses, renderHeader(), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'));
+
+const vividCard = Card.compose({
+  baseName: 'card',
+  template: CardTemplate,
+  styles: css_248z
+});
+designSystem.register(vividCard());
+
+export { vividCard };

package/elevation/index.js

@@ -1,19 +1,12 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
-import '../shared/web.dom-collections.iterator.js';
+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 {
-  constructor() {
-    super(...arguments);
-    this.dp = 2;
-  }
+class Elevation extends FoundationElement {}
 
-}
+__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
 
-__decorate([attr, __metadata("design:type", Object)], Elevation.prototype, "dp", void 0);
-
-var css_248z = ".dp-0:not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-0dp);\n  filter: var(--vvd-shadow-surface-0dp);\n}\n\n.dp-2:not(.dp-0):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}\n\n.dp-4:not(.dp-0):not(.dp-2):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-4dp);\n  filter: var(--vvd-shadow-surface-4dp);\n}\n\n.dp-8:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-8dp);\n  filter: var(--vvd-shadow-surface-8dp);\n}\n\n.dp-12:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-12dp);\n  filter: var(--vvd-shadow-surface-12dp);\n}\n\n.dp-16:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-24) {\n  background-color: var(--vvd-color-surface-16dp);\n  filter: var(--vvd-shadow-surface-16dp);\n}\n\n.dp-24:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16) {\n  background-color: var(--vvd-color-surface-24dp);\n  filter: var(--vvd-shadow-surface-24dp);\n}\n\n.control {\n  --elevation-border-radius: 6px;\n  border-radius: var(--elevation-border-radius);\n}";
+var css_248z = ".control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-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,
@@ -24,15 +17,15 @@ const getClasses = ({
 }) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
 
 const elevationTemplate = () => html(_t || (_t = _`
-        <div class="${0}">
+        <div class="${0}" part="base">
 			<slot></slot>
 		</div>`), getClasses);
 
-const VIVIDElevation = Elevation.compose({
+const vividElevation = Elevation.compose({
   baseName: 'elevation',
   template: elevationTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDElevation());
+designSystem.register(vividElevation());
 
-export { VIVIDElevation };
+export { vividElevation };

package/fab/index.js

@@ -0,0 +1,99 @@
+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 { s as styleInject } from '../shared/style-inject.es.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 Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_fab-block-size: 40px;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_fab-block-size);\n  border-radius: 24px;\n  color: var(--_appearance-color-text);\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control:not(.connotation-cta) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\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-on-primary);\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-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\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):active {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+styleInject(css_248z);
+
+class Fab extends Button {}
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
+
+applyMixins(Fab, AffixIconWithTrailing);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  connotation,
+  icon,
+  label,
+  iconTrailing,
+  disabled
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], ['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,20 @@
-import '../shared/index2.js';
-export { V as VIVIDFocus } from '../shared/index3.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';
+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  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 2px var(--focus-stroke-color, var(--vvd-color-on-canvas)), inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: 0;\n}";
+styleInject(css_248z);
+
+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/icon/index.js

@@ -1,5 +1,40 @@
-import '../shared/index2.js';
-export { v as vividIcon } from '../shared/index.js';
-import '../shared/style-inject.es.js';
-import '../shared/web.dom-collections.iterator.js';
-import '../shared/class-names.js';
+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/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-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.control.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-basis);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-small):not(.size-medium):not(.size-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-medium {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _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;
+}
+
+const vividIcon = Icon.compose({
+  baseName: 'icon',
+  template: iconTemplate,
+  styles: css_248z
+});
+designSystem.register(vividIcon());
+
+export { vividIcon };

package/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/components';
+export * from './shared/design-system';

package/index.js

@@ -1,16 +1,53 @@
-export { vividTextAnchor } from './text-anchor/index.js';
-export { VIVIDBadge } from './badge/index.js';
+export { vividAccordion } from './accordion/index.js';
+export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
+export { vividBadge } from './badge/index.js';
+export { vividBanner } from './banner/index.js';
+export { vividBreadcrumb } from './breadcrumb/index.js';
+export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
 export { vividButton } from './button/index.js';
-export { V as VIVIDFocus } from './shared/index3.js';
-export { v as vividIcon } from './shared/index.js';
-export { VIVIDLayout } from './layout/index.js';
-export { VIVIDElevation } from './elevation/index.js';
-import './shared/index2.js';
-import './shared/text-anchor.template.js';
+export { vividCalendar } from './calendar/index.js';
+export { vividCalendarEvent } from './calendar-event/index.js';
+export { vividCard } from './card/index.js';
+export { vividElevation } from './elevation/index.js';
+export { vividFab } from './fab/index.js';
+export { vividIcon } from './icon/index.js';
+export { vividLayout } from './layout/index.js';
+export { vividNote } from './note/index.js';
+export { vividPopup } from './popup/index.js';
+export { vividProgress } from './progress/index.js';
+export { vividProgressRing } from './progress-ring/index.js';
+export { vividSideDrawer } from './side-drawer/index.js';
+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 { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
+import './shared/style-inject.es.js';
+import './shared/class-names.js';
+import './focus/index.js';
+import './shared/focus.js';
 import './shared/web.dom-collections.iterator.js';
-import './shared/anchor.js';
+import './shared/export.js';
+import './shared/object-keys.js';
+import './shared/iterators.js';
+import './shared/affix.js';
+import './shared/icon.js';
+import './shared/to-string.js';
+import './shared/_has.js';
 import './shared/apply-mixins.js';
+import './shared/focus2.js';
+import './shared/when.js';
+import './shared/enums.js';
+import './shared/button.js';
+import './shared/form-associated.js';
 import './shared/aria-global.js';
-import './shared/class-names.js';
-import './shared/affix.js';
-import './shared/style-inject.es.js';
+import './shared/ref.js';
+import './shared/breadcrumb-item.js';
+import './shared/anchor.js';
+import './shared/slotted.js';
+import './shared/text-anchor.template.js';
+import './shared/calendar-event.js';
+import './shared/es.object.assign.js';
+import './shared/base-progress.js';
+import './shared/text-anchor.js';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } 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 { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 
@@ -25,7 +25,7 @@ __decorate([attr({
   attribute: 'auto-sizing'
 }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-base-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-base-small):not(.column-basis-base):not(.column-basis-base-large):not(.column-basis-block), .control.column-basis-base {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-base-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-base-small {\n  gap: 16px;\n}\n.control:not(.column-spacing-base-small):not(.column-spacing-base):not(.column-spacing-base-large), .control.column-spacing-base {\n  gap: 24px;\n}\n.control.column-spacing-base-large {\n  gap: 32px;\n}\n.control.gutters-base-small {\n  margin: 16px;\n}\n.control.gutters-base {\n  margin: 24px;\n}\n.control.gutters-base-large {\n  margin: 32px;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control:not(.column-spacing-small):not(.column-spacing-medium):not(.column-spacing-large), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -43,11 +43,11 @@ const layoutTemplate = () => html(_t || (_t = _`
 			<slot></slot>
 		</div>`), getClasses);
 
-const VIVIDLayout = Layout.compose({
+const vividLayout = Layout.compose({
   baseName: 'layout',
   template: layoutTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDLayout());
+designSystem.register(vividLayout());
 
-export { VIVIDLayout };
+export { vividLayout };

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Accordion extends FoundationElement {
+    private accordionItems;
+    multi: boolean;
+    constructor();
+    connectedCallback(): void;
+    private handleOpened;
+    closeAll(): void;
+}

package/lib/accordion/accordion.template.d.ts

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

package/lib/accordion/index.d.ts

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

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

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

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

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

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