@vonage/vivid 3.27.0 → 3.29.0

package/shared/definition25.js

@@ -1,42 +1,38 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, r as registerFactory } from './index.js';
 import { i as iconRegistries } from './definition3.js';
 import { I as Icon } from './icon.js';
-import { 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 = "/**\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: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
+var 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: 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 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,
-  _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 = _`
-		<div class="${0}">
+  return html`
+		<div class="${getClasses}">
 			<slot name="graphic">
-				${0}
+				${when(x => x.icon, html`<div class="icon-container">
+					<${iconTag} class="icon" name="${x => x.icon}" size="5"></${iconTag}>
+				</div>`)}
 			</slot>
 			<div class="content">
-				${0}
+				${when(x => x.headline, html`<header>${x => x.headline}</header>`)}
 				<slot></slot>
 			</div>
 			<div class="actions">
-				<slot name="action-items" ${0}></slot>
+				<slot name="action-items" ${slotted('slottedActionItems')}></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'));
+		</div>`;
 };
 
 const emptyStateDefinition = EmptyState.compose({

package/shared/definition26.js

@@ -8,7 +8,7 @@ import { f as focusTemplateFactory } from './focus2.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 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-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\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, 09 Aug 2023 13:23:44 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-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\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}";
 
 class Fab extends Button {}
 __decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
@@ -16,8 +16,6 @@ __decorate([attr, __metadata("design:type", String)], Fab.prototype, "size", voi
 __decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
 applyMixins(Fab, AffixIconWithTrailing);
 
-let _ = t => t,
-  _t;
 const getClasses = ({
   connotation,
   size,
@@ -29,48 +27,48 @@ const getClasses = ({
 const FabTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
+  return html`
         <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}
+            class="${getClasses} "
+            ?autofocus="${x => x.autofocus}"
+            ?disabled="${x => x.disabled}"
+            form="${x => x.formId}"
+            formaction="${x => x.formaction}"
+            formenctype="${x => x.formenctype}"
+            formmethod="${x => x.formmethod}"
+            formnovalidate="${x => x.formnovalidate}"
+            formtarget="${x => x.formtarget}"
+            name="${x => x.name}"
+            type="${x => x.type}"
+            value="${x => x.value}"
+            aria-atomic="${x => x.ariaAtomic}"
+            aria-busy="${x => x.ariaBusy}"
+            aria-controls="${x => x.ariaControls}"
+            aria-current="${x => x.ariaCurrent}"
+            aria-describedby="${x => x.ariaDescribedby}"
+            aria-details="${x => x.ariaDetails}"
+            aria-disabled="${x => x.ariaDisabled}"
+            aria-errormessage="${x => x.ariaErrormessage}"
+            aria-expanded="${x => x.ariaExpanded}"
+            aria-flowto="${x => x.ariaFlowto}"
+            aria-haspopup="${x => x.ariaHaspopup}"
+            aria-hidden="${x => x.ariaHidden}"
+            aria-invalid="${x => x.ariaInvalid}"
+            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+            aria-label="${x => x.ariaLabel}"
+            aria-labelledby="${x => x.ariaLabelledby}"
+            aria-live="${x => x.ariaLive}"
+            aria-owns="${x => x.ariaOwns}"
+            aria-pressed="${x => x.ariaPressed}"
+            aria-relevant="${x => x.ariaRelevant}"
+            aria-roledescription="${x => x.ariaRoledescription}"
+            ${ref('control')}
         >
-            ${0}
-            ${0}
-            ${0}
+            ${() => focusTemplate}
+            ${x => affixIconTemplate(x.icon)}
+            ${x => x.label}
         </button>
-`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+`;
 };
 
 const fabDefinition = Fab.compose({

package/shared/definition27.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, V as __classPrivateFieldGet, W as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, d as __classPrivateFieldGet, f as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { i as iconRegistries } from './definition3.js';
 import { f as focusRegistries } from './definition4.js';
 import { C as Connotation, B as Button, b as buttonRegistries } from './definition7.js';
@@ -10,7 +10,7 @@ import { f as focusTemplateFactory } from './focus2.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 Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  display: block;\n  max-inline-size: 400px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  border: 1px dashed var(--vvd-color-neutral-400);\n  background-color: var(--vvd-color-cta-50);\n  border-radius: 6px;\n  color: var(--vvd-color-neutral-600);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  min-block-size: 52px;\n  outline: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:not(.size-expanded) {\n  min-block-size: 52px;\n}\n.control.size-expanded {\n  min-block-size: 120px;\n}\n\n.main {\n  pointer-events: none;\n}\n\n.dz-preview {\n  display: grid;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  border-radius: 6px;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n.dz-preview .dz-details {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n  overflow: hidden;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n  color: var(--vvd-color-alert-500);\n  font: var(--vvd-typography-base-condensed);\n  margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n  display: none;\n}\n.dz-preview.dz-error {\n  border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n  display: none;\n}\n.dz-preview .remove-btn {\n  display: inline;\n  align-self: center;\n  grid-column: 2/-1;\n  grid-row: 1/-1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-block-start: 12px;\n  overflow-y: auto;\n}\n.preview-list:empty {\n  display: none;\n}\n\n.control:not(:focus-visible) .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:host {\n  display: block;\n  max-inline-size: 400px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  border: 1px dashed var(--vvd-color-neutral-400);\n  background-color: var(--vvd-color-cta-50);\n  border-radius: 6px;\n  color: var(--vvd-color-neutral-600);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  min-block-size: 52px;\n  outline: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:not(.size-expanded) {\n  min-block-size: 52px;\n}\n.control.size-expanded {\n  min-block-size: 120px;\n}\n\n.main {\n  pointer-events: none;\n}\n\n.dz-preview {\n  display: grid;\n  box-sizing: border-box;\n  padding: 6px 12px;\n  border-radius: 6px;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n}\n.dz-preview .dz-details {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  max-inline-size: 100%;\n}\n.dz-preview .dz-details .dz-filename {\n  overflow: hidden;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dz-preview .dz-details .dz-size {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base-condensed);\n}\n.dz-preview .dz-error-message {\n  color: var(--vvd-color-alert-500);\n  font: var(--vvd-typography-base-condensed);\n  margin-block-start: 4px;\n}\n.dz-preview:not(.dz-error) .dz-error-message {\n  display: none;\n}\n.dz-preview.dz-error {\n  border: 1px solid var(--vvd-color-alert-500);\n}\n.dz-preview.dz-error .dz-details .dz-size,\n.dz-preview.dz-error .dz-progress {\n  display: none;\n}\n.dz-preview .remove-btn {\n  display: inline;\n  align-self: center;\n  grid-column: 2/-1;\n  grid-row: 1/-1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n\n.preview-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-block-start: 12px;\n  overflow-y: auto;\n}\n.preview-list:empty {\n  display: none;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 var objectExtend = extend;
 
@@ -2140,14 +2140,6 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
 
 var _FilePicker_instances, _FilePicker_dropzone, _FilePicker_chooseFile, _FilePicker_updateHiddenFileInput, _FilePicker_handleFilesChanged;
 class FilePicker extends FoundationElement {
-  constructor() {
-    super();
-    _FilePicker_instances.add(this);
-    _FilePicker_dropzone.set(this, void 0);
-    this.maxFileSize = 256;
-    this.buttonTag = 'vwc-button';
-    $3ed269f2f0fb224b$export$2e2bcd8739ae039.autoDiscover = false;
-  }
   get files() {
     var _a, _b;
     return (_b = (_a = __classPrivateFieldGet(this, _FilePicker_dropzone, "f")) === null || _a === void 0 ? void 0 : _a.getAcceptedFiles()) !== null && _b !== void 0 ? _b : [];
@@ -2171,6 +2163,14 @@ class FilePicker extends FoundationElement {
     }
     __classPrivateFieldGet(this, _FilePicker_dropzone, "f").options.acceptedFiles = newValue;
   }
+  constructor() {
+    super();
+    _FilePicker_instances.add(this);
+    _FilePicker_dropzone.set(this, void 0);
+    this.maxFileSize = 256;
+    this.buttonTag = 'vwc-button';
+    $3ed269f2f0fb224b$export$2e2bcd8739ae039.autoDiscover = false;
+  }
   connectedCallback() {
     var _a;
     super.connectedCallback();
@@ -2256,32 +2256,29 @@ __decorate([attr, __metadata("design:type", String)], FilePicker.prototype, "acc
 __decorate([attr, __metadata("design:type", String)], FilePicker.prototype, "size", void 0);
 applyMixins(FilePicker, FormElementHelperText);
 
-let _ = t => t,
-  _t,
-  _t2;
 const getClasses = ({
   size
 }) => classNames('control', 'dz-default', 'dz-message', [`size-${size}`, Boolean(size)]);
 const FilePickerTemplate = context => {
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
-		${0}
-		<div class="base" aria-label="${0}">
-			${0}
-			<div class="${0}" tabindex="0" role="button"
-					 @keydown="${0}">
+  return html`
+		${x => {
+    x.setButtonTag(context.tagFor(Button));
+  }}
+		<div class="base" aria-label="${x => x.label}">
+			${when(x => x.label, html`<label>${x => x.label}</label>`)}
+			<div class="${getClasses}" tabindex="0" role="button"
+					 @keydown="${(x, c) => x.handleKeydown(c.event)}">
 				<slot class="main"></slot>
-				${0}
+				${() => focusTemplate}
 			</div>
-			${0}
-			<div class="preview-list"></div>
-		</div>
-	`), x => {
-    x.setButtonTag(context.tagFor(Button));
-  }, x => x.label, when(x => x.label, html(_t2 || (_t2 = _`<label>${0}</label>`), x => x.label)), getClasses, (x, c) => x.handleKeydown(c.event), () => focusTemplate, when(x => {
+			${when(x => {
     var _a;
     return (_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length;
-  }, getFeedbackTemplate('helper', context)));
+  }, getFeedbackTemplate('helper', context))}
+			<div class="preview-list"></div>
+		</div>
+	`;
 };
 
 const filePickerDefinition = FilePicker.compose({

package/shared/definition28.js

@@ -2,7 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
 import { E as Elevation, e as elevationRegistries } from './definition8.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
 
 class Header extends FoundationElement {
   constructor() {
@@ -19,19 +19,17 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
 
-let _ = t => t,
-  _t;
 const getPartAlternate = ({
   alternate
 }) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
 const headerTemplate = context => {
   const elevationTag = context.tagFor(Elevation);
-  return html(_t || (_t = _`
-    <${0} dp="4" ?no-shadow=${0}>
+  return html`
+    <${elevationTag} dp="4" ?no-shadow=${x => !x.elevationShadow}>
       <header class="base" part="base">
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${0}">
+        <div class="container" part="${getPartAlternate}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -40,11 +38,11 @@ const headerTemplate = context => {
           </section>
         </div>
       </header>
-    </${0}>
+    </${elevationTag}>
     <div class="app-content">
       <slot name="app-content"></slot>
     </div>
-	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
+	`;
 };
 
 const headerDefinition = Header.compose({

package/shared/definition29.js

@@ -23,8 +23,6 @@ __decorate([attr({
 
 var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: var(--layout-grid-template-rows, min-content);\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-inline {\n  column-gap: var(--layout-column-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-block {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.column-spacing-large {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.row-spacing-small {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-inline {\n  row-gap: var(--layout-row-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-block {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block), .control.row-spacing-medium {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.row-spacing-large {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 
-let _ = t => t,
-  _t;
 const getClasses = ({
   columnBasis,
   gutters,
@@ -32,10 +30,10 @@ const getClasses = ({
   autoSizing,
   rowSpacing
 }) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-const layoutTemplate = () => html(_t || (_t = _`
-        <div class="${0}">
+const layoutTemplate = () => html`
+        <div class="${getClasses}">
 			<slot></slot>
-		</div>`), getClasses);
+		</div>`;
 
 const layoutDefinition = Layout.compose({
   baseName: 'layout',

package/shared/definition3.js

@@ -5,24 +5,20 @@ import { w as when } from './when.js';
 
 var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-icon-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-icon-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-icon-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-icon-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-icon-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500));\n}\n.control.connotation-information {\n  /* @cssprop [--vvd-icon-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500));\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 const getClasses = ({
   connotation,
   size
 }) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-const iconTemplate = () => html(_t || (_t = _`
+const iconTemplate = () => html`
 
-	<figure class="${0}">
+	<figure class="${getClasses}">
 		<slot>
-			${0}
-			${0}
+			${when(x => !x.iconLoaded, html`<img alt="${x => x.name}" src="${x => x.iconUrl}"/>`)}
+			${when(x => x.iconLoaded && x._svg, x => html`${x._svg}`)}
 		</slot>
 	</figure>
 
-`), getClasses, when(x => !x.iconLoaded, html(_t2 || (_t2 = _`<img alt="${0}" src="${0}"/>`), x => x.name, x => x.iconUrl)), when(x => x.iconLoaded && x._svg, x => html(_t3 || (_t3 = _`${0}`), x._svg)));
+`;
 
 const iconDefinition = Icon.compose({
   baseName: 'icon',

package/shared/definition30.js

@@ -1,10 +1,9 @@
-import { F as FoundationElement, Y as DOM, _ as __decorate, o as observable, V as __classPrivateFieldGet, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, D as DOM, _ as __decorate, o as observable, f as __classPrivateFieldSet, d as __classPrivateFieldGet, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { P as Popup, p as popupRegistries } from './definition20.js';
 import { M as MenuItem, a as MenuItemRole, r as roleForMenuItem, m as menuItemRegistries } from './definition31.js';
 import { i as isHTMLElement } from './dom.js';
 import { a as keyHome, k as keyEnd, c as keyArrowUp, b as keyArrowDown } from './key-codes.js';
 import { s as slotted } from './slotted.js';
-import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 /**
@@ -293,56 +292,101 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 8px;\n  max-block-size: var(--menu-block-size, 408px);\n  max-inline-size: var(--menu-max-inline-size, 100%);\n  min-inline-size: var(--menu-min-inline-size);\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-block: 8px;\n}\n\n::slotted(a) {\n  color: var(--vvd-color-canvas-text);\n  text-decoration: none;\n}\n\n::slotted(a[role=menuitem]:focus) {\n  display: block;\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 3px currentColor;\n  outline: 2px solid currentColor;\n  outline-offset: -2px;\n}\n\n.header {\n  padding-block-start: 8px;\n  padding-inline: 16px;\n}\n.hide-header .header {\n  display: none;\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-inline: 8px;\n}\n.hide-actions .action-items {\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  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 8px;\n  max-block-size: var(--menu-block-size, 408px);\n  max-inline-size: var(--menu-max-inline-size, 100%);\n  min-inline-size: var(--menu-min-inline-size);\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-block: 8px;\n}\n\n::slotted(a) {\n  color: var(--vvd-color-canvas-text);\n  text-decoration: none;\n}\n\n::slotted(a[role=menuitem]:focus) {\n  display: block;\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 3px currentColor;\n  outline: 2px solid currentColor;\n  outline-offset: -2px;\n}\n\n.header {\n  padding-block-start: 8px;\n  padding-inline: 16px;\n}\n.hide-header .header {\n  display: none;\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-inline: 8px;\n}\n.hide-actions .action-items {\n  display: none;\n}";
 
-var _Menu_dismissOnClickOutside;
+var _Menu_instances, _Menu_observer, _Menu_anchorEl, _Menu_observeMissingAnchor, _Menu_setupAnchor, _Menu_cleanupAnchor, _Menu_openIfClosed, _Menu_closeOnClickOutside;
 class Menu extends Menu$1 {
   constructor() {
     super(...arguments);
-    _Menu_dismissOnClickOutside.set(this, e => {
-      const popup = this._popup;
-      if (popup.open && !this.contains(e.target)) {
-        popup.open = false;
-      }
+    _Menu_instances.add(this);
+    _Menu_observer.set(this, void 0);
+    _Menu_anchorEl.set(this, null);
+    _Menu_observeMissingAnchor.set(this, anchorId => {
+      __classPrivateFieldSet(this, _Menu_observer, new MutationObserver(() => {
+        const anchor = document.getElementById(anchorId);
+        if (anchor) {
+          __classPrivateFieldSet(this, _Menu_anchorEl, anchor, "f");
+          __classPrivateFieldGet(this, _Menu_instances, "m", _Menu_setupAnchor).call(this, __classPrivateFieldGet(this, _Menu_anchorEl, "f"));
+          __classPrivateFieldGet(this, _Menu_observer, "f").disconnect();
+          __classPrivateFieldSet(this, _Menu_observer, undefined, "f");
+        }
+      }), "f");
+      __classPrivateFieldGet(this, _Menu_observer, "f").observe(document.body, {
+        childList: true,
+        subtree: true
+      });
     });
-    this.open = false;
+    this.placement = 'bottom';
+    this.anchor = '';
     this.autoDismiss = false;
+    this.open = false;
+    _Menu_openIfClosed.set(this, () => {
+      if (!this.open) DOM.queueUpdate(() => this.open = true);
+    });
+    _Menu_closeOnClickOutside.set(this, e => {
+      if (!this.contains(e.target)) this.open = false;
+    });
   }
-  anchorChanged(prevAnchor, newAnchor) {
-    const prevAnchorEl = document.getElementById(prevAnchor);
-    const newAnchorEl = document.getElementById(newAnchor);
-    prevAnchorEl === null || prevAnchorEl === void 0 ? void 0 : prevAnchorEl.removeAttribute('aria-haspopup');
-    newAnchorEl === null || newAnchorEl === void 0 ? void 0 : newAnchorEl.setAttribute('aria-haspopup', 'menu');
+  anchorChanged(_, newValue) {
+    var _a;
+    if (__classPrivateFieldGet(this, _Menu_anchorEl, "f")) __classPrivateFieldGet(this, _Menu_instances, "m", _Menu_cleanupAnchor).call(this, __classPrivateFieldGet(this, _Menu_anchorEl, "f"));
+    (_a = __classPrivateFieldGet(this, _Menu_observer, "f")) === null || _a === void 0 ? void 0 : _a.disconnect();
+    __classPrivateFieldSet(this, _Menu_anchorEl, newValue instanceof HTMLElement ? newValue : document.getElementById(newValue), "f");
+    if (__classPrivateFieldGet(this, _Menu_anchorEl, "f")) {
+      __classPrivateFieldGet(this, _Menu_instances, "m", _Menu_setupAnchor).call(this, __classPrivateFieldGet(this, _Menu_anchorEl, "f"));
+    } else {
+      __classPrivateFieldGet(this, _Menu_observeMissingAnchor, "f").call(this, newValue);
+    }
   }
-  autoDismissChanged() {
-    if (this.autoDismiss) {
-      document.addEventListener('click', __classPrivateFieldGet(this, _Menu_dismissOnClickOutside, "f"));
+  autoDismissChanged(oldValue, newValue) {
+    if (oldValue === undefined) return;
+    if (newValue) {
+      document.addEventListener('click', __classPrivateFieldGet(this, _Menu_closeOnClickOutside, "f"));
     } else {
-      document.removeEventListener('click', __classPrivateFieldGet(this, _Menu_dismissOnClickOutside, "f"));
+      document.removeEventListener('click', __classPrivateFieldGet(this, _Menu_closeOnClickOutside, "f"));
+    }
+  }
+  openChanged(_, newValue) {
+    newValue ? this.$emit('open', undefined, {
+      bubbles: false
+    }) : this.$emit('close', undefined, {
+      bubbles: false
+    });
+    if (__classPrivateFieldGet(this, _Menu_anchorEl, "f")) {
+      __classPrivateFieldGet(this, _Menu_anchorEl, "f").ariaExpanded = this.open.toString();
     }
   }
   disconnectedCallback() {
+    var _a;
     super.disconnectedCallback();
-    if (this.autoDismiss) {
-      document.removeEventListener('click', __classPrivateFieldGet(this, _Menu_dismissOnClickOutside, "f"));
-    }
+    if (__classPrivateFieldGet(this, _Menu_anchorEl, "f")) __classPrivateFieldGet(this, _Menu_instances, "m", _Menu_cleanupAnchor).call(this, __classPrivateFieldGet(this, _Menu_anchorEl, "f"));
+    (_a = __classPrivateFieldGet(this, _Menu_observer, "f")) === null || _a === void 0 ? void 0 : _a.disconnect();
+    document.removeEventListener('click', __classPrivateFieldGet(this, _Menu_closeOnClickOutside, "f"));
   }
 }
-_Menu_dismissOnClickOutside = new WeakMap();
+_Menu_observer = new WeakMap(), _Menu_anchorEl = new WeakMap(), _Menu_observeMissingAnchor = new WeakMap(), _Menu_openIfClosed = new WeakMap(), _Menu_closeOnClickOutside = new WeakMap(), _Menu_instances = new WeakSet(), _Menu_setupAnchor = function _Menu_setupAnchor(a) {
+  a.addEventListener('click', __classPrivateFieldGet(this, _Menu_openIfClosed, "f"), true);
+  a.setAttribute('aria-haspopup', 'menu');
+}, _Menu_cleanupAnchor = function _Menu_cleanupAnchor(a) {
+  a.removeEventListener('click', __classPrivateFieldGet(this, _Menu_openIfClosed, "f"), true);
+  a.removeAttribute('aria-hasPopup');
+};
 __decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Menu.prototype, "open", void 0);
-__decorate([attr, __metadata("design:type", String)], Menu.prototype, "placement", void 0);
-__decorate([attr, __metadata("design:type", String)], Menu.prototype, "anchor", void 0);
+  mode: 'fromView'
+}), __metadata("design:type", String)], Menu.prototype, "placement", void 0);
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", Object)], Menu.prototype, "anchor", void 0);
 __decorate([attr({
   mode: 'boolean',
   attribute: 'auto-dismiss'
 }), __metadata("design:type", Object)], Menu.prototype, "autoDismiss", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Menu.prototype, "open", void 0);
 __decorate([observable, __metadata("design:type", Array)], Menu.prototype, "headerSlottedContent", void 0);
 __decorate([observable, __metadata("design:type", Array)], Menu.prototype, "actionItemsSlottedContent", void 0);
 
-let _ = t => t,
-  _t;
 const getClasses = ({
   headerSlottedContent,
   actionItemsSlottedContent
@@ -352,32 +396,31 @@ const MenuTemplate = context => {
   function handlePopupEvents(x, state) {
     x.open = state;
   }
-  return html(_t || (_t = _`
+  return html`
 		<template>
-			<${0}
-				:placement=${0}
-				:open=${0}
-				:anchor=${0}
-				@vwc-popup:open="${0}"
-				@vwc-popup:close="${0}"
-				${0}
+			<${popupTag}
+				:placement=${x => x.placement}
+				:open=${x => x.open}
+				:anchor=${x => x.anchor}
+				@vwc-popup:open="${x => handlePopupEvents(x, true)}"
+				@vwc-popup:close="${x => handlePopupEvents(x, false)}"
 			>
-			<div class="${0}">
+			<div class="${getClasses}">
 				<div class="header">
-					<slot name="header" ${0}></slot>
+					<slot name="header" ${slotted('headerSlottedContent')}></slot>
 				</div>
 				<div
 					class="body"
 					role="menu"
-					@keydown="${0}"
-					@focusout="${0}"
+					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>
-					<slot ${0}></slot>
+					<slot ${slotted('items')}></slot>
 				</div>
-				<footer class="action-items"><slot name="action-items"  ${0}></slot></footer>
+				<footer class="action-items"><slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot></footer>
 			</div>
-		</${0}>
-	</template>`), popupTag, x => x.placement, x => x.open, x => x.anchor, x => handlePopupEvents(x, true), x => handlePopupEvents(x, false), ref('_popup'), getClasses, slotted('headerSlottedContent'), (x, c) => x.handleMenuKeyDown(c.event), (x, c) => x.handleFocusOut(c.event), slotted('items'), slotted('actionItemsSlottedContent'), popupTag);
+		</${popupTag}>
+	</template>`;
 };
 
 const menuDefinition = Menu.compose({