@vonage/vivid 3.14.0 → 3.16.0

package/shared/definition2.js

@@ -76,7 +76,7 @@ __decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins(AccordionItem$1, StartEnd);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button: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.heading-button: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.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\n.icon {\n  color: var(--vvd-color-neutral-600);\n}\n:host(:not([icon-trailing])) .icon:last-of-type {\n  color: var(--_appearance-color-text);\n}\n.heading-button:not(.size-condensed) .icon {\n  font: inherit;\n}\n.heading-button.size-condensed .icon {\n  font: var(--vvd-typography-base-extended);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 GMT\n */\n:host {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.heading-container {\n  margin: 0;\n}\n\n.heading-button {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  text-align: left;\n}\n.heading-button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.heading-button: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.heading-button: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.heading-button {\n  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .heading-button:focus {\n    outline: none;\n  }\n}\n.heading-button.size-condensed {\n  font: var(--vvd-typography-base-bold);\n  gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n  font: var(--vvd-typography-heading-4);\n  gap: 16px;\n}\n\n.heading-content {\n  flex: auto;\n}\n\n.meta {\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-600);\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n  font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n  display: none;\n  padding: 8px 32px 24px 16px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\n.icon {\n  color: var(--vvd-color-neutral-600);\n}\n:host(:not([icon-trailing])) .icon:last-of-type {\n  color: var(--_appearance-color-text);\n}\n.heading-button:not(.size-condensed) .icon {\n  font: inherit;\n}\n.heading-button.size-condensed .icon {\n  font: var(--vvd-typography-base-extended);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 class AccordionItem extends AccordionItem$1 {
   constructor() {

package/shared/definition21.js

@@ -258,7 +258,7 @@ const ListboxOptionTemplate = context => {
 	`), x => x.ariaChecked, x => x.ariaDisabled, x => x.ariaPosInSet, x => x.ariaSelected, x => x.ariaSetSize, getClasses, () => focusTemplate, x => affixIconTemplate(x.icon), when(x => x.text, html(_t2 || (_t2 = _`<div class="text">${0}</div>`), x => x.text)));
 };
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 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-400);\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\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.base:not(.disabled, .selected) .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, 07 Jun 2023 09:55:04 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-400);\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\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}\n.base:not(.disabled, .selected) .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

@@ -910,9 +910,9 @@ __decorate([
 
 var css_248z$2 = ":host {\n  position: relative;\n  display: block;\n}\n\n:host([generate-header=sticky]) {\n  max-height: var(--data-grid-max-height, 200px);\n  overflow-y: auto;\n}";
 
-var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n:host {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n  position: sticky;\n  z-index: 999;\n  top: 0;\n  background: var(--vvd-color-canvas);\n}";
+var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 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(:is([aria-selected]):not([row-type=header])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n:host([row-type=sticky-header]) .base {\n  position: sticky;\n  z-index: 999;\n  top: 0;\n  background: var(--vvd-color-canvas);\n}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.base {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\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  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\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}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 GMT\n */\n.base {\n  position: relative;\n  display: flex;\n  overflow: hidden;\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  outline: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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(:is([aria-selected]):not([cell-type=columnheader])) .base {\n  background-color: var(--_appearance-color-fill);\n}\n:host([cell-type=columnheader]) .base {\n  border-color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\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}";
 
 var aCallable = aCallable$1;
 var toObject = toObject$1;
@@ -987,7 +987,7 @@ $({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var _DataGrid_instances, _DataGrid_selectedCells_get, _DataGrid_handleKeypress, _DataGrid_handleClick, _DataGrid_handleSelection, _DataGrid_setCellSelectedState, _DataGrid_resetSelection;
+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 = {
   none: 'none',
   singleRow: 'single-row',
@@ -995,9 +995,6 @@ const DataGridSelectionMode = {
   singleCell: 'single-cell',
   multiCell: 'multi-cell'
 };
-function isTargetRoleHeader(target) {
-  return target.getAttribute('role') === 'columnheader';
-}
 class DataGrid extends DataGrid$1 {
   constructor() {
     super();
@@ -1013,62 +1010,119 @@ class DataGrid extends DataGrid$1 {
       shiftKey,
       metaKey
     }) => {
-      __classPrivateFieldGet(this, _DataGrid_handleSelection, "f").call(this, {
-        target,
-        ctrlKey,
-        shiftKey,
-        metaKey
-      });
+      if (target.getAttribute('role') !== 'gridcell') return;
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        __classPrivateFieldGet(this, _DataGrid_handleCellSelection, "f").call(this, {
+          target,
+          ctrlKey,
+          shiftKey,
+          metaKey
+        });
+        return;
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        __classPrivateFieldGet(this, _DataGrid_handleRowSelection, "f").call(this, {
+          target,
+          ctrlKey,
+          shiftKey,
+          metaKey
+        });
+      }
     });
-    _DataGrid_handleSelection.set(this, ({
+    _DataGrid_handleCellSelection.set(this, ({
       target,
       ctrlKey,
       shiftKey,
       metaKey
     }) => {
-      const targetAsCell = target;
-      if (isTargetRoleHeader(targetAsCell)) {
-        return;
+      const cell = target;
+      if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
+        __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, cell, !__classPrivateFieldGet(this, _DataGrid_instances, "a", _DataGrid_selectedCells_get).includes(cell));
+      } else {
+        const cacheTargetSelection = cell.getAttribute('aria-selected') === 'true';
+        __classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
+        __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, cell, !cacheTargetSelection);
       }
-      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-        if (this.selectionMode === DataGridSelectionMode.multiCell && (ctrlKey || shiftKey || metaKey)) {
-          __classPrivateFieldGet(this, _DataGrid_setCellSelectedState, "f").call(this, targetAsCell, !__classPrivateFieldGet(this, _DataGrid_instances, "a", _DataGrid_selectedCells_get).includes(targetAsCell));
-        } else {
-          const cacheTargetSelection = targetAsCell.getAttribute('aria-selected') === 'true';
-          __classPrivateFieldGet(this, _DataGrid_instances, "m", _DataGrid_resetSelection).call(this);
-          __classPrivateFieldGet(this, _DataGrid_setCellSelectedState, "f").call(this, targetAsCell, !cacheTargetSelection);
-        }
+    });
+    _DataGrid_handleRowSelection.set(this, ({
+      target,
+      ctrlKey,
+      shiftKey,
+      metaKey
+    }) => {
+      const row = target.parentNode;
+      if (this.selectionMode === DataGridSelectionMode.multiRow && (ctrlKey || shiftKey || metaKey)) {
+        __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, row, !__classPrivateFieldGet(this, _DataGrid_instances, "a", _DataGrid_selectedRows_get).includes(row));
+      } else {
+        const cacheTargetSelection = row.getAttribute('aria-selected') === 'true';
+        __classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
+        __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, row, !cacheTargetSelection);
       }
     });
-    _DataGrid_setCellSelectedState.set(this, (cell, selectedState) => {
+    _DataGrid_setSelectedState.set(this, (cell, selectedState) => {
       cell.setAttribute('aria-selected', selectedState.toString());
     });
+    _DataGrid_resetSelection.set(this, () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.setAttribute('aria-selected', 'false'));
+      }
+    });
+    _DataGrid_initSelections.set(this, () => {
+      if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => !cell.hasAttribute('aria-selected') && __classPrivateFieldGet(this, _DataGrid_setSelectedState, "f").call(this, cell, false));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+      }
+      if (this.selectionMode === DataGridSelectionMode.none) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => row.removeAttribute('aria-selected'));
+      }
+      if (this.selectionMode === DataGridSelectionMode.singleRow || this.selectionMode === DataGridSelectionMode.multiRow) {
+        Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
+        Array.from(this.querySelectorAll('[role="row"]')).forEach(row => !row.hasAttribute('aria-selected') && row.setAttribute('aria-selected', 'false'));
+      }
+    });
     this.addEventListener('click', __classPrivateFieldGet(this, _DataGrid_handleClick, "f"));
     this.addEventListener('keydown', __classPrivateFieldGet(this, _DataGrid_handleKeypress, "f"));
   }
-  selectionModeChanged() {
-    __classPrivateFieldGet(this, _DataGrid_instances, "m", _DataGrid_resetSelection).call(this);
+  selectionModeChanged(oldValue) {
+    if (oldValue === undefined) {
+      DOM.queueUpdate(__classPrivateFieldGet(this, _DataGrid_initSelections, "f"));
+      return;
+    }
+    __classPrivateFieldGet(this, _DataGrid_resetSelection, "f").call(this);
   }
 }
-_DataGrid_handleKeypress = new WeakMap(), _DataGrid_handleClick = new WeakMap(), _DataGrid_handleSelection = new WeakMap(), _DataGrid_setCellSelectedState = new WeakMap(), _DataGrid_instances = new WeakSet(), _DataGrid_selectedCells_get = function _DataGrid_selectedCells_get() {
+_DataGrid_handleKeypress = new WeakMap(), _DataGrid_handleClick = new WeakMap(), _DataGrid_handleCellSelection = new WeakMap(), _DataGrid_handleRowSelection = new WeakMap(), _DataGrid_setSelectedState = new WeakMap(), _DataGrid_resetSelection = new WeakMap(), _DataGrid_initSelections = new WeakMap(), _DataGrid_instances = new WeakSet(), _DataGrid_selectedRows_get = function _DataGrid_selectedRows_get() {
+  return this.rowElements.filter(row => row.getAttribute('aria-selected') === 'true');
+}, _DataGrid_selectedCells_get = function _DataGrid_selectedCells_get() {
   return this.rowElements.reduce((acc, row) => {
     const rowChildren = Array.from(row.children);
     const selectedCells = rowChildren.filter(cell => cell.getAttribute('aria-selected') === 'true');
     return acc.concat(selectedCells);
   }, []);
-}, _DataGrid_resetSelection = function _DataGrid_resetSelection() {
-  if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
-    Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => __classPrivateFieldGet(this, _DataGrid_setCellSelectedState, "f").call(this, cell, false));
-  }
-  if (this.selectionMode === DataGridSelectionMode.none) {
-    Array.from(this.querySelectorAll('[role="gridcell"]')).forEach(cell => cell.removeAttribute('aria-selected'));
-  }
 };
 __decorate([attr({
   attribute: 'selection-mode'
 }), __metadata("design:type", String)], DataGrid.prototype, "selectionMode", void 0);
 
-class DataGridRow extends DataGridRow$1 {}
+class DataGridRow extends DataGridRow$1 {
+  constructor() {
+    super(...arguments);
+    this.ariaSelected = null;
+  }
+}
+__decorate([attr({
+  attribute: 'aria-selected'
+}), __metadata("design:type", Object)], DataGridRow.prototype, "ariaSelected", void 0);
 
 let _2$1 = t => t,
   _t$2,
@@ -1083,11 +1137,15 @@ function createRowItemTemplate(context) {
     ></${0}>
 `), rowTag, x => x, (_, c) => c.parent.cellItemTemplate, (_, c) => c.parent.headerCellItemTemplate, rowTag);
 }
+function getMultiSelectAriaState(x) {
+  return x.selectionMode === undefined || x.selectionMode === DataGridSelectionMode.none ? null : x.selectionMode.includes('multi') ? 'true' : 'false';
+}
 const DataGridTemplate = context => {
   const rowItemTemplate = createRowItemTemplate(context);
   const rowTag = context.tagFor(DataGridRow);
   return html(_t2$1 || (_t2$1 = _2$1`
         <template
+						aria-multiselectable="${0}"
             role="grid"
             tabindex="0"
             :rowElementTag="${0}"
@@ -1096,7 +1154,7 @@ const DataGridTemplate = context => {
         >
             <slot></slot>
         </template>
-    `), () => rowTag, rowItemTemplate, children({
+    `), getMultiSelectAriaState, () => rowTag, rowItemTemplate, children({
     property: 'rowElements',
     filter: elements('[role=row]')
   }));
@@ -1104,13 +1162,24 @@ const DataGridTemplate = context => {
 
 class DataGridCell extends DataGridCell$1 {
   constructor() {
-    super(...arguments);
+    super();
     this.ariaSelected = 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');
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ariaSelectedChanged(null, this.ariaSelected);
+  }
   handleFocusin(e) {
     super.handleFocusin(e);
     this.shadowRoot.querySelector('.base').classList.add('active');
@@ -1137,8 +1206,9 @@ function createCellItemTemplate(context) {
         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, cellTag);
+`), cellTag, x => x.isRowHeader ? 'rowheader' : undefined, (_, c) => c.index + 1, (_, c) => c.parent.rowData, x => x, (_, c) => c.parent.ariaSelected === 'true' ? true : null, cellTag);
 }
 function createHeaderCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
@@ -1161,12 +1231,16 @@ const DataGridRowTemplate = context => {
             :defaultHeaderCellItemTemplate="${0}"
             ${0}
         >
+					<div class="base ${0}"
+							 style="grid-template-columns: ${0};"
+					>
             <slot ${0}></slot>
+					</div>
         </template>
     `), x => x.rowType !== 'default' ? x.rowType : '', cellItemTemplate, headerCellItemTemplate, children({
     property: 'cellElements',
     filter: elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"]')
-  }), slotted('slottedCellElements'));
+  }), x => x.ariaSelected === 'true' ? 'selected' : '', x => x.gridTemplateColumns, slotted('slottedCellElements'));
 };
 
 const DataGridCellRole = {

package/shared/definition23.js

@@ -9,7 +9,7 @@ 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 Tue, 30 May 2023 12:49:14 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  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  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\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, 07 Jun 2023 09:55:04 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  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  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\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;
 let dialogPolyfill;

package/shared/definition24.js

@@ -51,7 +51,7 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 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, 07 Jun 2023 09:55:04 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 {}
 

package/shared/definition25.js

@@ -1,87 +1,50 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+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 { f as focusRegistries } from './definition4.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
-import { B as Button } from './button.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { r as ref } from './ref.js';
+import { I as Icon } from './icon.js';
+import { s as slotted } from './slotted.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control.size-extended .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 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}";
 
-class Fab extends Button {}
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "size", void 0);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
-applyMixins(Fab, AffixIconWithTrailing);
+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);
 
 let _ = t => t,
-  _t;
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
-const FabTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
+  _t,
+  _t2,
+  _t3;
+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(_t || (_t = _`
-        <button
-            class="${0} "
-            ?autofocus="${0}"
-            ?disabled="${0}"
-            form="${0}"
-            formaction="${0}"
-            formenctype="${0}"
-            formmethod="${0}"
-            formnovalidate="${0}"
-            formtarget="${0}"
-            name="${0}"
-            type="${0}"
-            value="${0}"
-            aria-atomic="${0}"
-            aria-busy="${0}"
-            aria-controls="${0}"
-            aria-current="${0}"
-            aria-describedby="${0}"
-            aria-details="${0}"
-            aria-disabled="${0}"
-            aria-errormessage="${0}"
-            aria-expanded="${0}"
-            aria-flowto="${0}"
-            aria-haspopup="${0}"
-            aria-hidden="${0}"
-            aria-invalid="${0}"
-            aria-keyshortcuts="${0}"
-            aria-label="${0}"
-            aria-labelledby="${0}"
-            aria-live="${0}"
-            aria-owns="${0}"
-            aria-pressed="${0}"
-            aria-relevant="${0}"
-            aria-roledescription="${0}"
-            ${0}
-        >
-            ${0}
-            ${0}
-            ${0}
-        </button>
-`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+		<div class="${0}">
+			<slot name="graphic">
+				${0}
+			</slot>
+			<div class="content">
+				${0}
+				<slot></slot>
+			</div>
+			<div class="actions">
+				<slot name="action-items" ${0}></slot>
+			</div>
+		</div>`), getClasses, when(x => x.icon, html(_t2 || (_t2 = _`<div class="icon-container">
+					<${0} class="icon" name="${0}" size="5"></${0}>
+				</div>`), iconTag, x => x.icon, iconTag)), when(x => x.headline, html(_t3 || (_t3 = _`<header>${0}</header>`), x => x.headline)), slotted('slottedActionItems'));
 };
 
-const fabDefinition = Fab.compose({
-  baseName: 'fab',
-  template: FabTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const emptyStateDefinition = EmptyState.compose({
+  baseName: 'empty-state',
+  template: EmptyStateTemplate,
+  styles: css_248z
 });
-const fabRegistries = [fabDefinition(), ...iconRegistries, ...focusRegistries];
-const registerFab = registerFactory(fabRegistries);
+const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
+const registerEmptyState = registerFactory(emptyStateRegistries);
 
-export { fabRegistries as a, fabDefinition as f, registerFab as r };
+export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };