@vonage/vivid 3.31.0 → 3.34.0

package/shared/definition23.js

@@ -1,233 +1,71 @@
-import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, f as __classPrivateFieldSet, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { B as Button, b as buttonRegistries } from './definition7.js';
-import { E as Elevation, e as elevationRegistries } from './definition8.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { E as Elevation, e as elevationRegistries } from './definition56.js';
 import { c as classNames } from './class-names.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}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\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  background-color: var(--header-bg-color, var(--vvd-color-canvas));\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  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\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, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
-
-var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
-const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
-let dialogPolyfill;
-(async () => {
-  if (!isDialogSupported) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await import('./dialog-polyfill.esm.js');
-  }
-})();
-class Dialog extends FoundationElement {
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Header extends FoundationElement {
   constructor() {
     super(...arguments);
-    _Dialog_instances.add(this);
-    this.open = false;
-    this.fullWidthBody = 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.$emit('close', this.returnValue, {
-        bubbles: false
-      });
-    }
-    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, "m", _Dialog_handleModal).call(this, true);
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
-    this.open = 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"));
+    this.elevationShadow = false;
+    this.alternate = false;
   }
 }
-_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({
-  attribute: 'icon-placement'
-}), __metadata("design:type", String)], Dialog.prototype, "iconPlacement", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "subtitle", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "headline", void 0);
-__decorate([attr({
-  attribute: 'full-width-body',
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Dialog.prototype, "fullWidthBody", 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);
-__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "bodySlottedContent", void 0);
-__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "footerSlottedContent", void 0);
-__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "actionItemsSlottedContent", void 0);
+__decorateClass([
+  attr({
+    attribute: "elevation-shadow",
+    mode: "boolean"
+  })
+], Header.prototype, "elevationShadow", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], Header.prototype, "alternate", 2);
 
-const getClasses = ({
-  iconPlacement,
-  bodySlottedContent,
-  footerSlottedContent,
-  actionItemsSlottedContent
-}) => classNames('base', [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)], ['hide-body', !(bodySlottedContent === null || bodySlottedContent === void 0 ? void 0 : bodySlottedContent.length)], ['hide-footer', !((footerSlottedContent === null || footerSlottedContent === void 0 ? void 0 : footerSlottedContent.length) || (actionItemsSlottedContent === null || actionItemsSlottedContent === void 0 ? void 0 : actionItemsSlottedContent.length))]);
-function icon(iconTag) {
-  return html`
-		<${iconTag} class="icon" name="${x => x.icon}"></${iconTag}>
-	`;
-}
-function headline() {
-  return html`
-	  <div class="headline">
-		  ${x => x.headline}
-	  </div>
-	`;
-}
-function subtitle() {
-  return html`
-	  <div class="subtitle">
-		  ${x => x.subtitle}
-	  </div>
-	`;
-}
-function renderDismissButton(buttonTag) {
-  return html`
-	  <${buttonTag}
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${x => {
-    x.open = false;
-  }}">
-	  </${buttonTag}>`;
-}
-function handleEscapeKey(dialog, event) {
-  if (event.key === 'Escape' && dialog.modal) {
-    dialog.open = false;
-  }
-  return true;
-}
-const DialogTemplate = context => {
+const getPartAlternate = ({ alternate }) => classNames(
+  ["vvd-theme-alternate", Boolean(alternate)]
+);
+const headerTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
   return html`
-	<${elevationTag} dp="8">
-		<dialog class="${getClasses}"
-				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
-				returnValue="${x => x.returnValue}"
-				aria-labelledby="${x => x.ariaLabelledBy}"
-				aria-label="${x => x.ariaLabel}"
-				aria-describedby="${x => x.ariaDescribedBy}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header ${x => x.subtitle ? 'border' : ''}">
-							<slot name="graphic">
-								${when(x => x.icon, icon(iconTag))}
-							</slot>
-							${when(x => x.headline, headline())}
-							${when(x => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
-					</div>
-					<div class="body ${x => x.fullWidthBody ? 'full-width' : ''}" >
-						<slot name="body" ${slotted('bodySlottedContent')}></slot>
-					</div>
-					<div class="footer">
-						<div>
-							<slot name="footer" ${slotted('footerSlottedContent')}></slot>
-						</div>
-						<div class="actions">
-							<slot name="action-items" ${slotted('actionItemsSlottedContent')}></slot>
-						</div>
-					</div>
-				</div>
-			</slot>
-		</dialog>
-	</${elevationTag}>`;
+    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${getPartAlternate}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${elevationTag}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`;
 };
 
-const dialogDefinition = Dialog.compose({
-  baseName: 'dialog',
-  template: DialogTemplate,
-  styles: isDialogSupported ? [css_248z] : [css_248z, css_248z$1]
+const headerDefinition = Header.compose({
+  baseName: "header",
+  template: headerTemplate,
+  styles
 });
-const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
-const registerDialog = registerFactory(dialogRegistries);
+const headerRegistries = [headerDefinition(), ...elevationRegistries];
+const registerHeader = registerFactory(headerRegistries);
 
-export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };
+export { headerRegistries as a, headerDefinition as h, registerHeader as r };

package/shared/definition24.js

@@ -1,76 +1,35 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria.js';
+import { h as html, r as registerFactory } from './index.js';
+import { I as Icon } from './icon.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-    /**
-     * The divider semantically separates content
-     */
-    separator: "separator",
-    /**
-     * The divider has no semantic value and is for visual presentation only.
-     */
-    presentation: "presentation",
-};
+const styles = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-icon-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-icon-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-icon-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-icon-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-icon-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500));\n}\n.control.connotation-information {\n  /* @cssprop [--vvd-icon-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500));\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
 
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-class Divider$1 extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The role of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: role
-         */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-    }
-}
-__decorate([
-    attr
-], Divider$1.prototype, "role", void 0);
-__decorate([
-    attr
-], Divider$1.prototype, "orientation", void 0);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+const getClasses = ({
+  connotation,
+  size
+}) => classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)]
+);
+const iconTemplate = () => html`
 
-class Divider extends Divider$1 {}
+	<figure class="${getClasses}">
+		<slot>
+			${when((x) => !x.iconLoaded, html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}"/>`)}
+			${when((x) => x.iconLoaded && x._svg, (x) => html`${x._svg}`)}
+		</slot>
+	</figure>
 
-const getClasses = ({
-  orientation
-}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${x => x.orientation}"
-  	role="${x => x.role}"
-  ></span>`;
+`;
 
-const dividerDefinition = Divider.compose({
-  baseName: 'divider',
-  template: DividerTemplate,
-  styles: css_248z
+const iconDefinition = Icon.compose({
+  baseName: "icon",
+  template: iconTemplate,
+  styles
 });
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = registerFactory(dividerRegistries);
+const iconRegistries = [iconDefinition()];
+const registerIcon = registerFactory(iconRegistries);
 
-export { Divider as D, dividerDefinition as a, dividerRegistries as d, registerDivider as r };
+export { iconRegistries as a, iconDefinition as i, registerIcon as r };

package/shared/definition25.js

@@ -1,46 +1,62 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Layout extends FoundationElement {
+}
+__decorateClass([
+  attr
+], Layout.prototype, "gutters", 2);
+__decorateClass([
+  attr({ attribute: "column-basis" })
+], Layout.prototype, "columnBasis", 2);
+__decorateClass([
+  attr({ attribute: "column-spacing" })
+], Layout.prototype, "columnSpacing", 2);
+__decorateClass([
+  attr({ attribute: "row-spacing" })
+], Layout.prototype, "rowSpacing", 2);
+__decorateClass([
+  attr({ attribute: "auto-sizing" })
+], Layout.prototype, "autoSizing", 2);
 
-class EmptyState extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "headline", void 0);
-__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "icon", void 0);
-__decorate([observable, __metadata("design:type", Array)], EmptyState.prototype, "slottedActionItems", void 0);
+const styles = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: var(--layout-grid-template-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  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-inline {\n  column-gap: var(--layout-column-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-block {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 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  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.column-spacing-large {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.row-spacing-small {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-inline {\n  row-gap: var(--layout-row-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-block {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block), .control.row-spacing-medium {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.row-spacing-large {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 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}";
 
-const getClasses = x => {
-  var _a;
-  return classNames('base', ['no-actions', ((_a = x.slottedActionItems) === null || _a === void 0 ? void 0 : _a.length) === 0]);
-};
-const EmptyStateTemplate = context => {
-  const iconTag = context.tagFor(Icon);
-  return html`
-		<div class="${getClasses}">
-			<slot name="graphic">
-				${when(x => x.icon, html`<div class="icon-container">
-					<${iconTag} class="icon" name="${x => x.icon}" size="5"></${iconTag}>
-				</div>`)}
-			</slot>
-			<div class="content">
-				${when(x => x.headline, html`<header>${x => x.headline}</header>`)}
-				<slot></slot>
-			</div>
-			<div class="actions">
-				<slot name="action-items" ${slotted('slottedActionItems')}></slot>
-			</div>
+const getClasses = ({
+  columnBasis,
+  gutters,
+  columnSpacing,
+  autoSizing,
+  rowSpacing
+}) => classNames(
+  "control",
+  [`column-basis-${columnBasis}`, Boolean(columnBasis)],
+  [`gutters-${gutters}`, Boolean(gutters)],
+  [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
+  [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)],
+  [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
+);
+const layoutTemplate = () => html`
+        <div class="${getClasses}">
+			<slot></slot>
 		</div>`;
-};
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: 'empty-state',
-  template: EmptyStateTemplate,
-  styles: css_248z
+const layoutDefinition = Layout.compose({
+  baseName: "layout",
+  template: layoutTemplate,
+  styles
 });
-const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
-const registerEmptyState = registerFactory(emptyStateRegistries);
+const layoutRegistries = [layoutDefinition()];
+const registerLayout = registerFactory(layoutRegistries);
 
-export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };
+export { layoutRegistries as a, layoutDefinition as l, registerLayout as r };