@vonage/vivid 3.27.0 → 3.29.0

package/shared/definition21.js

@@ -229,10 +229,6 @@ __decorate([attr({
 }), __metadata("design:type", String)], ListboxOption.prototype, "_label", void 0);
 applyMixins(ListboxOption, AffixIconWithTrailing);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 const getClasses = ({
   icon,
   disabled,
@@ -242,26 +238,26 @@ const getClasses = ({
 const ListboxOptionTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context, false);
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
+  return html`
 	<template
-		aria-checked="${0}"
-		aria-disabled="${0}"
-		aria-posinset="${0}"
-		aria-selected="${0}"
-		aria-setsize="${0}"
+		aria-checked="${x => x.ariaChecked}"
+		aria-disabled="${x => x.ariaDisabled}"
+		aria-posinset="${x => x.ariaPosInSet}"
+		aria-selected="${x => x.ariaSelected}"
+		aria-setsize="${x => x.ariaSetSize}"
 		role="option">
-		<div class="${0}">
-			${0}
+		<div class="${getClasses}">
+			${() => focusTemplate}
 			<slot name="icon">
-				${0}
+				${when(x => x.icon, html`${x => affixIconTemplate(x.icon)}`)}
 			</slot>
-			${0}
+			${when(x => x.text, html`<div class="text">${x => x.text}</div>`)}
 		</div>
 	</template>
-	`), x => x.ariaChecked, x => x.ariaDisabled, x => x.ariaPosInSet, x => x.ariaSelected, x => x.ariaSetSize, getClasses, () => focusTemplate, when(x => x.icon, html(_t2 || (_t2 = _`${0}`), x => affixIconTemplate(x.icon))), when(x => x.text, html(_t3 || (_t3 = _`<div class="text">${0}</div>`), x => x.text)));
+	`;
 };
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  position: relative; /* this is needed for the focus */\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_option-appearance-color-text, var(--_appearance-color-text));\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.base {\n  /* @cssprop [--vvd-option-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-option-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-option-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-option-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-option-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-option-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-option-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\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  pointer-events: none;\n}\n.base .text {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.base:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n\n.focus-indicator {\n  --focus-stroke-color: var(--vvd-color-neutral-500);\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not([aria-checked=true])) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  position: relative; /* this is needed for the focus */\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_option-appearance-color-text, var(--_appearance-color-text));\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.base {\n  /* @cssprop [--vvd-option-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-option-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-option-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-option-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-option-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-option-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-option-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\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  pointer-events: none;\n}\n.base .text {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.base:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n\n.focus-indicator {\n  --focus-stroke-color: var(--vvd-color-neutral-500);\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not([aria-checked=true])) .focus-indicator {\n  display: none;\n}";
 
 const listboxOptionDefinition = ListboxOption.compose({
   baseName: 'option',

package/shared/definition22.js

@@ -1,13 +1,11 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, Y as DOM, h as html, v as aCallable$1, a2 as toObject$1, a3 as indexedObject, Q as lengthOfArrayLike$1, l as fails$1, G as _export, E as engineV8Version, V as __classPrivateFieldGet, b as __metadata, r as registerFactory } from './index.js';
 import { i as iconRegistries } from './definition3.js';
-import './es.string.includes.js';
-import './es.regexp.to-string.js';
-import { e as engineIsNode, I as Icon } from './icon.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, D as DOM, h as html, d as __classPrivateFieldGet, b as __metadata, r as registerFactory } from './index.js';
 import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d as keyEnter } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
 import { e as elements } from './node-observation.js';
 import { c as children } from './children.js';
 import { s as slotted } from './slotted.js';
+import { I as Icon } from './icon.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 
@@ -912,82 +910,9 @@ __decorate([
 
 var css_248z$2 = ":host {\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-block-size: 400px;\n}\n\n.base {\n  position: relative;\n  overflow: auto;\n  block-size: inherit;\n  inline-size: 100%;\n  max-block-size: inherit;\n}\n.base::-webkit-scrollbar {\n  display: none;\n}";
 
-var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
+var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-row-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-row-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-row-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-row-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-row-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-row-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-row-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-row-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-row-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 9;\n  top: 0;\n  background: var(--data-grid-row-background, var(--vvd-color-canvas));\n}\n:host([row-type=hidden-header]) .base {\n  display: none;\n}\n:host(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-400);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
-
-var aCallable = aCallable$1;
-var toObject = toObject$1;
-var IndexedObject = indexedObject;
-var lengthOfArrayLike = lengthOfArrayLike$1;
-
-var $TypeError = TypeError;
-
-// `Array.prototype.{ reduce, reduceRight }` methods implementation
-var createMethod = function (IS_RIGHT) {
-  return function (that, callbackfn, argumentsLength, memo) {
-    aCallable(callbackfn);
-    var O = toObject(that);
-    var self = IndexedObject(O);
-    var length = lengthOfArrayLike(O);
-    var index = IS_RIGHT ? length - 1 : 0;
-    var i = IS_RIGHT ? -1 : 1;
-    if (argumentsLength < 2) while (true) {
-      if (index in self) {
-        memo = self[index];
-        index += i;
-        break;
-      }
-      index += i;
-      if (IS_RIGHT ? index < 0 : length <= index) {
-        throw $TypeError('Reduce of empty array with no initial value');
-      }
-    }
-    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
-      memo = callbackfn(memo, self[index], index, O);
-    }
-    return memo;
-  };
-};
-
-var arrayReduce = {
-  // `Array.prototype.reduce` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduce
-  left: createMethod(false),
-  // `Array.prototype.reduceRight` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-  right: createMethod(true)
-};
-
-var fails = fails$1;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
-};
-
-var $ = _export;
-var $reduce = arrayReduce.left;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var CHROME_VERSION = engineV8Version;
-var IS_NODE = engineIsNode;
-
-var STRICT_METHOD = arrayMethodIsStrict('reduce');
-// Chrome 80-82 has a critical bug
-// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
-var CHROME_BUG = !IS_NODE && CHROME_VERSION > 79 && CHROME_VERSION < 83;
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-$({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
-  reduce: function reduce(callbackfn /* , initialValue */) {
-    var length = arguments.length;
-    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
-  }
-});
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n:host {\n  min-inline-size: 80px;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-400);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-data-grid-cell-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-data-grid-cell-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-data-grid-cell-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-data-grid-cell-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-data-grid-cell-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-data-grid-cell-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-data-grid-cell-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-data-grid-cell-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-data-grid-cell-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}\n:host(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.base:not(.active) > .focus-indicator {\n  display: none;\n}\n\nslot {\n  display: block;\n  overflow: hidden;\n  inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-icon {\n  margin-inline-start: auto;\n}";
 
 var _DataGrid_instances, _DataGrid_selectedRows_get, _DataGrid_selectedCells_get, _DataGrid_handleKeypress, _DataGrid_handleClick, _DataGrid_handleCellSelection, _DataGrid_handleRowSelection, _DataGrid_setSelectedState, _DataGrid_resetSelection, _DataGrid_initSelections;
 const DataGridSelectionMode = {
@@ -998,6 +923,13 @@ const DataGridSelectionMode = {
   multiCell: 'multi-cell'
 };
 class DataGrid extends DataGrid$1 {
+  selectionModeChanged(oldValue) {
+    if (oldValue === undefined) {
+      DOM.queueUpdate(__classPrivateFieldGet(this, _DataGrid_initSelections, "f"));
+      return;
+    }
+    __classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
+  }
   constructor() {
     super();
     _DataGrid_instances.add(this);
@@ -1095,13 +1027,6 @@ class DataGrid extends DataGrid$1 {
     this.addEventListener('click', __classPrivateFieldGet(this, _DataGrid_handleClick, "f"));
     this.addEventListener('keydown', __classPrivateFieldGet(this, _DataGrid_handleKeypress, "f"));
   }
-  selectionModeChanged(oldValue) {
-    if (oldValue === undefined) {
-      DOM.queueUpdate(__classPrivateFieldGet(this, _DataGrid_initSelections, "f"));
-      return;
-    }
-    __classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
-  }
   static generateColumns(rowData) {
     return Object.keys(rowData).map((property, index) => {
       return {
@@ -1156,18 +1081,15 @@ const DataGridCellRole = {
   default: 'gridcell'
 };
 
-let _2$2 = t => t,
-  _t$2,
-  _t2$2;
 function createRowItemTemplate(context) {
   const rowTag = context.tagFor(DataGridRow);
-  return html(_t$2 || (_t$2 = _2$2`
-    <${0}
-        :rowData="${0}"
-        :cellItemTemplate="${0}"
-        :headerCellItemTemplate="${0}"
-    ></${0}>
-`), rowTag, x => x, (_, c) => c.parent.cellItemTemplate, (_, c) => c.parent.headerCellItemTemplate, rowTag);
+  return html`
+    <${rowTag}
+        :rowData="${x => x}"
+        :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
+        :headerCellItemTemplate="${(_, c) => c.parent.headerCellItemTemplate}"
+    ></${rowTag}>
+`;
 }
 function getMultiSelectAriaState(x) {
   return x.selectionMode === undefined || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes('multi') ? 'true' : 'false';
@@ -1190,40 +1112,28 @@ function handleColumnSort(_, {
 const DataGridTemplate = context => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
-  return html(_t2$2 || (_t2$2 = _2$2`
+  return html`
         <template
-						aria-multiselectable="${0}"
+						aria-multiselectable="${getMultiSelectAriaState}"
             role="grid"
             tabindex="0"
-						@sort="${0}"
-            :rowElementTag="${0}"
-            :defaultRowItemTemplate="${0}"
-            ${0}
+						@sort="${handleColumnSort}"
+            :rowElementTag="${() => rowTag}"
+            :defaultRowItemTemplate="${rowItemTemplate}"
+            ${children({
+    property: 'rowElements',
+    filter: elements('[role=row]')
+  })}
         >
 					<div class="base">
-						${0}
+						${setHeaderRow}
             <slot></slot>
 					</div>
         </template>
-    `), getMultiSelectAriaState, handleColumnSort, () => rowTag, rowItemTemplate, children({
-    property: 'rowElements',
-    filter: elements('[role=row]')
-  }), setHeaderRow);
+    `;
 };
 
 class DataGridCell extends DataGridCell$1 {
-  constructor() {
-    super();
-    this.ariaSelected = null;
-    this.ariaSort = null;
-    this.updateCellStyle = () => {
-      if (this.gridColumn && !this.gridColumn.includes('undefined')) {
-        this.style.gridColumn = this.gridColumn;
-      } else {
-        this.style.removeProperty('grid-column');
-      }
-    };
-  }
   ariaSelectedChanged(_, selectedState) {
     var _a;
     (_a = this.shadowRoot.querySelector('.base')) === null || _a === void 0 ? void 0 : _a.classList.toggle('selected', selectedState === 'true');
@@ -1240,6 +1150,18 @@ class DataGridCell extends DataGridCell$1 {
     super.handleFocusout(e);
     this.shadowRoot.querySelector('.base').classList.remove('active');
   }
+  constructor() {
+    super();
+    this.ariaSelected = null;
+    this.ariaSort = null;
+    this.updateCellStyle = () => {
+      if (this.gridColumn && !this.gridColumn.includes('undefined')) {
+        this.style.gridColumn = this.gridColumn;
+      } else {
+        this.style.removeProperty('grid-column');
+      }
+    };
+  }
 }
 __decorate([attr({
   attribute: 'aria-selected',
@@ -1249,59 +1171,51 @@ __decorate([attr({
   attribute: 'aria-sort'
 }), __metadata("design:type", Object)], DataGridCell.prototype, "ariaSort", void 0);
 
-let _2$1 = t => t,
-  _t$1,
-  _t2$1,
-  _t3$1;
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return html(_t$1 || (_t$1 = _2$1`
-    <${0}
-        cell-type="${0}"
-        grid-column="${0}"
-        :rowData="${0}"
-        :columnDefinition="${0}"
-				selected="${0}"
-    ></${0}>
-`), cellTag, x => x.isRowHeader ? 'rowheader' : undefined, (_, c) => c.index + 1, (_, c) => c.parent.rowData, x => x, (_, c) => c.parent.ariaSelected === 'true' ? true : null, cellTag);
+  return html`
+    <${cellTag}
+        cell-type="${x => x.isRowHeader ? 'rowheader' : undefined}"
+        grid-column="${(_, c) => c.index + 1}"
+        :rowData="${(_, c) => c.parent.rowData}"
+        :columnDefinition="${x => x}"
+				selected="${(_, c) => c.parent.ariaSelected === 'true' ? true : null}"
+    ></${cellTag}>
+`;
 }
 function createHeaderCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
-  return html(_t2$1 || (_t2$1 = _2$1`
-    <${0}
+  return html`
+    <${cellTag}
         cell-type="columnheader"
-        grid-column="${0}"
-        :columnDefinition="${0}"
-    ></${0}>
-`), cellTag, (_, c) => c.index + 1, x => x, cellTag);
+        grid-column="${(_, c) => c.index + 1}"
+        :columnDefinition="${x => x}"
+    ></${cellTag}>
+`;
 }
 const DataGridRowTemplate = context => {
   const cellItemTemplate = createCellItemTemplate(context);
   const headerCellItemTemplate = createHeaderCellItemTemplate(context);
-  return html(_t3$1 || (_t3$1 = _2$1`
+  return html`
         <template
             role="row"
-            class="${0}"
-            :defaultCellItemTemplate="${0}"
-            :defaultHeaderCellItemTemplate="${0}"
-            ${0}
+            class="${x => x.rowType !== 'default' ? x.rowType : ''}"
+            :defaultCellItemTemplate="${cellItemTemplate}"
+            :defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
+            ${children({
+    property: 'cellElements',
+    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
+  })}
         >
-					<div class="base ${0}"
-							 style="grid-template-columns: ${0};"
+					<div class="base ${x => x.ariaSelected === 'true' ? 'selected' : ''}"
+							 style="grid-template-columns: ${x => x.gridTemplateColumns};"
 					>
-            <slot ${0}></slot>
+            <slot ${slotted('slottedCellElements')}></slot>
 					</div>
         </template>
-    `), x => x.rowType !== 'default' ? x.rowType : '', cellItemTemplate, headerCellItemTemplate, children({
-    property: 'cellElements',
-    filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
-  }), x => x.ariaSelected === 'true' ? 'selected' : '', x => x.gridTemplateColumns, slotted('slottedCellElements'));
+    `;
 };
 
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3;
 function shouldShowSortIcons(x) {
   if (x.columnDefinition) {
     x.ariaSort = !x.columnDefinition.sortable ? null : x.columnDefinition.sortDirection ? x.columnDefinition.sortDirection : DataGridCellSortStates.none;
@@ -1313,11 +1227,11 @@ function getSortIcon(x) {
 }
 function renderSortIcons(c) {
   const iconTag = c.tagFor(Icon);
-  return html(_t || (_t = _2`
-			${0}
-		`), when(shouldShowSortIcons, html(_t2 || (_t2 = _2`
-				<${0} class="header-icon" name="${0}"></${0}>
-			`), iconTag, getSortIcon, iconTag)));
+  return html`
+			${when(shouldShowSortIcons, html`
+				<${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
+			`)}
+		`;
 }
 function handleClick(x) {
   if (x.cellType === 'columnheader' && x.ariaSort !== null) {
@@ -1329,23 +1243,23 @@ function handleClick(x) {
 }
 function DataGridCellTemplate(context) {
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t3 || (_t3 = _2`
+  return html`
         <template
             tabindex="-1"
-            role="${0}"
-						@click="${0}"
+            role="${x => {
+    var _a;
+    return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
+  }}"
+						@click="${handleClick}"
         >
 					<div class="base">
 							<slot></slot>
-							${0}
-							${0}
+							${() => focusTemplate}
+							${_ => renderSortIcons(context)}
 					</div>
 
         </template>
-    `), x => {
-    var _a;
-    return (_a = DataGridCellRole[x.cellType]) !== null && _a !== void 0 ? _a : DataGridCellRole.default;
-  }, handleClick, () => focusTemplate, _ => renderSortIcons(context));
+    `;
 }
 
 const dataGrid = DataGrid.compose({

package/shared/definition23.js

@@ -1,15 +1,15 @@
-import { F as FoundationElement, V as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, W as __classPrivateFieldSet, h as html, r as registerFactory } from './index.js';
+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 { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
+import { s as slotted } from './slotted.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}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40: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 css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 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);
@@ -140,12 +140,6 @@ __decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "bo
 __decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "footerSlottedContent", void 0);
 __decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "actionItemsSlottedContent", void 0);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
 const getClasses = ({
   iconPlacement,
   bodySlottedContent,
@@ -153,34 +147,34 @@ const getClasses = ({
   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(_t || (_t = _`
-		<${0} class="icon" name="${0}"></${0}>
-	`), iconTag, x => x.icon, iconTag);
+  return html`
+		<${iconTag} class="icon" name="${x => x.icon}"></${iconTag}>
+	`;
 }
 function headline() {
-  return html(_t2 || (_t2 = _`
+  return html`
 	  <div class="headline">
-		  ${0}
+		  ${x => x.headline}
 	  </div>
-	`), x => x.headline);
+	`;
 }
 function subtitle() {
-  return html(_t3 || (_t3 = _`
+  return html`
 	  <div class="subtitle">
-		  ${0}
+		  ${x => x.subtitle}
 	  </div>
-	`), x => x.subtitle);
+	`;
 }
 function renderDismissButton(buttonTag) {
-  return html(_t4 || (_t4 = _`
-	  <${0}
+  return html`
+	  <${buttonTag}
 			  size="condensed"
 			  class="dismiss-button"
 			  icon="close-line"
-			  @click="${0}">
-	  </${0}>`), buttonTag, x => {
+			  @click="${x => {
     x.open = false;
-  }, buttonTag);
+  }}">
+	  </${buttonTag}>`;
 }
 function handleEscapeKey(dialog, event) {
   if (event.key === 'Escape' && dialog.modal) {
@@ -192,40 +186,40 @@ const DialogTemplate = context => {
   const elevationTag = context.tagFor(Elevation);
   const iconTag = context.tagFor(Icon);
   const buttonTag = context.tagFor(Button);
-  return html(_t5 || (_t5 = _`
-	<${0} dp="8">
-		<dialog class="${0}"
-				@keydown="${0}"
-				returnValue="${0}"
-				aria-labelledby="${0}"
-				aria-label="${0}"
-				aria-describedby="${0}"
+  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 ${0}">
+					<div class="header ${x => x.subtitle ? 'border' : ''}">
 							<slot name="graphic">
-								${0}
+								${when(x => x.icon, icon(iconTag))}
 							</slot>
-							${0}
-							${0}
-							${0}
+							${when(x => x.headline, headline())}
+							${when(x => x.subtitle, subtitle())}
+							${renderDismissButton(buttonTag)}
 					</div>
-					<div class="body ${0}" >
-						<slot name="body" ${0}></slot>
+					<div class="body ${x => x.fullWidthBody ? 'full-width' : ''}" >
+						<slot name="body" ${slotted('bodySlottedContent')}></slot>
 					</div>
 					<div class="footer">
 						<div>
-							<slot name="footer" ${0}></slot>
+							<slot name="footer" ${slotted('footerSlottedContent')}></slot>
 						</div>
 						<div class="actions">
-							<slot name="action-items" ${0}></slot>
+							<slot name="action-items" ${slotted('actionItemsSlottedContent')}></slot>
 						</div>
 					</div>
 				</div>
 			</slot>
 		</dialog>
-	</${0}>`), elevationTag, getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, x => x.subtitle ? 'border' : '', when(x => x.icon, icon(iconTag)), when(x => x.headline, headline()), when(x => x.subtitle, subtitle()), renderDismissButton(buttonTag), x => x.fullWidthBody ? 'full-width' : '', slotted('bodySlottedContent'), slotted('footerSlottedContent'), slotted('actionItemsSlottedContent'), elevationTag);
+	</${elevationTag}>`;
 };
 
 const dialogDefinition = Dialog.compose({

package/shared/definition24.js

@@ -51,21 +51,19 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40: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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
 
 class Divider extends Divider$1 {}
 
-let _ = t => t,
-  _t;
 const getClasses = ({
   orientation
 }) => classNames('base', [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => html(_t || (_t = _` 
+const DividerTemplate = () => html` 
   <span
-  class="${0}"
-  	orientation="${0}"
-  	role="${0}"
-  ></span>`), getClasses, x => x.orientation, x => x.role);
+  class="${getClasses}"
+  	orientation="${x => x.orientation}"
+  	role="${x => x.role}"
+  ></span>`;
 
 const dividerDefinition = Divider.compose({
   baseName: 'divider',