@vonage/vivid 2.36.3 → 3.0.0-next.100

package/calendar-event/index.js

@@ -0,0 +1,112 @@
+import { h as html, d as designSystem } from '../shared/index.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, q as hasOwnProperty_1, i as isCallable$1, o as objectDefineProperty, Q 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 Tue, 15 Nov 2022 13:39:19 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-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-soft: var(--vvd-color-cta-100);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-success-800);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-alert-800);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-warning-800);\n  --_connotation-color-soft: var(--vvd-color-warning-100);\n}\n.base.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-announcement-800);\n  --_connotation-color-soft: var(--vvd-color-announcement-100);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-information-800);\n  --_connotation-color-soft: var(--vvd-color-information-100);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\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: transparent;\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  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
+
+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 thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
+  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
+  var regexp = /^Symbol\((.*)\)[^)]+$/;
+  var replace = uncurryThis(''.replace);
+  var stringSlice = uncurryThis(''.slice);
+
+  defineProperty(SymbolPrototype, 'description', {
+    configurable: true,
+    get: function description() {
+      var symbol = thisSymbolValue(this);
+      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
+      var string = symbolDescriptiveString(symbol);
+      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,114 @@
+import '../shared/index3.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 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/string-trim.js';
+import '../shared/_has.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\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-headline, .header-subtitle {\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-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\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}";
+
+class Card extends FoundationElement {}
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
+__decorate([attr, __metadata("design:type", String)], Card.prototype, "subtitle", 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('base', ['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 Headline() {
+  return html(_t2 || (_t2 = _2`
+		<div class="header-headline">${0}</div>
+	`), x => x.headline);
+}
+function Subtitle() {
+  return html(_t3 || (_t3 = _2`
+		<div class="header-subtitle">${0}</div>
+	`), x => x.subtitle);
+}
+function headerContent() {
+  return html(_t4 || (_t4 = _2`
+		<div class="header-content">
+			${0}
+			${0}
+		</div>
+	`), when(x => x.headline, Headline()), when(x => x.subtitle, Subtitle()));
+}
+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.headline || x.subtitle, headerContent()));
+}
+function shouldHideHeader(card) {
+  return !card.headline && !card.subtitle && !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/checkbox/index.js

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

package/dialog/index.js

@@ -0,0 +1,230 @@
+import '../icon/index.js';
+import '../shared/index2.js';
+import '../shared/index3.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';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.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/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.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 Tue, 15 Nov 2022 13:39:19 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 {
+      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="expanded" 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
+			  size="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,4 @@
+import '../shared/index.js';
+export { v as vividDivider } from '../shared/index4.js';
+import '../shared/aria.js';
+import '../shared/class-names.js';

package/elevation/index.js

@@ -0,0 +1,3 @@
+import '../shared/index.js';
+export { v as vividElevation } from '../shared/index3.js';
+import '../shared/class-names.js';