@vonage/vivid 3.27.0 → 3.28.2

package/shared/definition17.js

@@ -2,11 +2,11 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o
 import { i as iconRegistries } from './definition3.js';
 import { E as Elevation, e as elevationRegistries } from './definition8.js';
 import { I as Icon } from './icon.js';
-import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
+import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n  text-align: start;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: 100%;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Aug 2023 18:00:27 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n  text-align: start;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: 100%;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
 
 class Card extends FoundationElement {}
 __decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
@@ -18,65 +18,59 @@ __decorate([observable, __metadata("design:type", Array)], Card.prototype, "foot
 __decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
 __decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
 
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8;
 const getClasses = _ => classNames('base', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
 function renderHeaderIcon(iconTag) {
-  return html(_t || (_t = _2`
-	  <${0} class="icon" inline name="${0}"></${0}>`), iconTag, x => x.icon, iconTag);
+  return html`
+	  <${iconTag} class="icon" inline name="${x => x.icon}"></${iconTag}>`;
 }
 function Headline() {
-  return html(_t2 || (_t2 = _2`
-		<div class="header-headline">${0}</div>
-	`), x => x.headline);
+  return html`
+		<div class="header-headline">${x => x.headline}</div>
+	`;
 }
 function Subtitle() {
-  return html(_t3 || (_t3 = _2`
-		<div class="header-subtitle">${0}</div>
-	`), x => x.subtitle);
+  return html`
+		<div class="header-subtitle">${x => x.subtitle}</div>
+	`;
 }
 function headerContent() {
-  return html(_t4 || (_t4 = _2`
+  return html`
 		<div class="header-content">
-			${0}
-			${0}
+			${when(x => x.headline, Headline())}
+			${when(x => x.subtitle, Subtitle())}
 		</div>
-	`), when(x => x.headline, Headline()), when(x => x.subtitle, Subtitle()));
+	`;
 }
 function renderHeader(iconTag) {
-  return html(_t5 || (_t5 = _2`
+  return html`
 		<header class="header">
-			<slot name="graphic" ${0}>${0}</slot>
-			${0}
-		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon(iconTag)), when(x => x.headline || x.subtitle, headerContent()));
+			<slot name="graphic" ${slotted('graphicSlottedContent')}>${when(x => x.icon, renderHeaderIcon(iconTag))}</slot>
+			${when(x => x.headline || x.subtitle, headerContent())}
+		</header>`;
 }
 function shouldHideHeader(card) {
   return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
 }
 function renderMetaSlot() {
-  return html(_t6 || (_t6 = _2`
-		<slot name="meta" ${0}></slot>
-	`), slotted('metaSlottedContent'));
+  return html`
+		<slot name="meta" ${slotted('metaSlottedContent')}></slot>
+	`;
 }
 function text() {
-  return html(_t7 || (_t7 = _2`
-		<div class="text">${0}</div>
-	`), x => x.text);
+  return html`
+		<div class="text">${x => x.text}</div>
+	`;
 }
 const CardTemplate = context => {
   const elevationTag = context.tagFor(Elevation);
   const iconTag = context.tagFor(Icon);
-  return html(_t8 || (_t8 = _2`
-	<${0} dp=${0}>
+  return html`
+	<${elevationTag} dp=${x => {
+    var _a;
+    return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
+  }}>
 
-		<div class="${0}">
+		<div class="${getClasses}">
 			<div class="wrapper">
 				<div class="vwc-card-media">
 					<slot name="media"></slot>
@@ -84,23 +78,20 @@ const CardTemplate = context => {
 				<slot name="main">
 					<div class="main-content">
 						<div class="header-wrapper">
-							${0}
-							${0}
+							${renderHeader(iconTag)}
+							${renderMetaSlot()}
 						</div>
-						${0}
+						${when(x => x.text, text())}
 					</div>
 				</slot>
 				<div class="footer">
-					<slot name="footer" ${0}></slot>
+					<slot name="footer" ${slotted('footerSlottedContent')}></slot>
 				</div>
 			</div>
 		</div>
 
-	</${0}>
-`), elevationTag, x => {
-    var _a;
-    return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
-  }, getClasses, renderHeader(iconTag), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'), elevationTag);
+	</${elevationTag}>
+`;
 };
 
 const cardDefinition = Card.compose({

package/shared/definition18.js

@@ -98,7 +98,7 @@ __decorate([
     observable
 ], Checkbox$1.prototype, "indeterminate", 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: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base: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: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 5px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n  line-height: 1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Aug 2023 18:00:27 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base: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: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 5px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n  line-height: 1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}";
 
 const keySpace = ' ';
 let Checkbox = class Checkbox extends Checkbox$1 {
@@ -128,11 +128,6 @@ __decorate([attr, __metadata("design:type", String)], Checkbox.prototype, "conno
 Checkbox = __decorate([errorText, formElements], Checkbox);
 applyMixins(Checkbox, FormElementHelperText, FormElementSuccessText);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 const getClasses = ({
   connotation,
   readOnly,
@@ -145,34 +140,34 @@ const getClasses = ({
 const CheckboxTemplate = context => {
   const focusTemplate = focusTemplateFactory(context);
   const iconTag = context.tagFor(Icon);
-  return html(_t || (_t = _`<div
+  return html`<div
   role="checkbox"
-  aria-checked="${0}"
-  aria-required="${0}"
-  aria-disabled="${0}"
-  aria-readonly="${0}"
-  tabindex="${0}"
-  @keypress="${0}"
-  @click="${0}"
-  class="${0}"
+  aria-checked="${x => x.checked}"
+  aria-required="${x => x.required}"
+  aria-disabled="${x => x.disabled}"
+  aria-readonly="${x => x.readOnly}"
+  tabindex="${x => x.disabled ? null : 0}"
+  @keypress="${(x, c) => x.keypressHandler(c.event)}"
+  @click="${x => x.clickHandler()}"
+  class="${getClasses}"
   >
     <div class="control">
-			${0}
-			${0}
-      ${0}
+			${when(x => x.checked, html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
+			${when(x => x.indeterminate, html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+      ${() => focusTemplate}
     </div>
 
-    ${0}
+    ${when(x => x.label, html`<label>${x => x.label}</label>`)}
 
   </div>
 
-	${0}
-	${0}
-	${0}
-	`), x => x.checked, x => x.required, x => x.disabled, x => x.readOnly, x => x.disabled ? null : 0, (x, c) => x.keypressHandler(c.event), x => x.clickHandler(), getClasses, when(x => x.checked, html(_t2 || (_t2 = _`<${0} name="check-solid" class="icon"></${0}>`), iconTag, iconTag)), when(x => x.indeterminate, html(_t3 || (_t3 = _`<${0} name="minus-solid" class="icon"></${0}>`), iconTag, iconTag)), () => focusTemplate, when(x => x.label, html(_t4 || (_t4 = _`<label>${0}</label>`), x => x.label)), when(x => {
+	${when(x => {
     var _a;
     return (_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length;
-  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
+  }, getFeedbackTemplate('helper', context))}
+	${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
+	${when(x => x.successText, getFeedbackTemplate('success', context))}
+	`;
 };
 
 const checkboxDefinition = Checkbox.compose({

package/shared/definition19.js

@@ -1,4 +1,4 @@
-import { Y as DOM, O as Observable, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { D as DOM, O as Observable, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { i as iconRegistries } from './definition3.js';
 import { P as Popup, p as popupRegistries } from './definition20.js';
 import { f as focusRegistries } from './definition4.js';
@@ -15,8 +15,8 @@ import { F as FormAssociated } from './form-associated.js';
 import { l as limit } from './numbers.js';
 import { u as uniqueId } from './strings.js';
 import { f as focusTemplateFactory } from './focus2.js';
-import { s as slotted } from './slotted.js';
 import { r as ref } from './ref.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
@@ -622,7 +622,7 @@ __decorate([
 applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
 applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  position: relative;\n}\n\n.control {\n  display: flex;\n  padding-inline-end: 44px;\n}\n\n.icon {\n  inset-inline-end: 16px;\n  inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n  cursor: pointer;\n}\n.disabled .icon {\n  cursor: not-allowed;\n}\n\n.listbox {\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n}\n.listbox {\n  /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.listbox.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.listbox: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: var(--vvd-color-neutral-300);\n}\n.listbox:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n::part(popup-base) {\n  inline-size: 100%;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Aug 2023 18:00:27 GMT\n */\n:host {\n  position: relative;\n}\n\n.control {\n  display: flex;\n  padding-inline-end: 44px;\n}\n\n.icon {\n  inset-inline-end: 16px;\n  inset-inline-start: unset;\n}\n:not(.disabled) .icon {\n  cursor: pointer;\n}\n.disabled .icon {\n  cursor: not-allowed;\n}\n\n.listbox {\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n}\n.listbox {\n  /* @cssprop [--vvd-combobox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-combobox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-combobox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-combobox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-combobox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-combobox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-combobox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-combobox-accent-soft, var(--vvd-color-neutral-100));\n}\n.listbox {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.listbox.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.listbox: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: var(--vvd-color-neutral-300);\n}\n.listbox:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n::part(popup-base) {\n  inline-size: 100%;\n}";
 
 let Combobox = class Combobox extends Combobox$1 {
   connectedCallback() {
@@ -634,15 +634,11 @@ __decorate([attr, __metadata("design:type", String)], Combobox.prototype, "place
 Combobox = __decorate([formElements], Combobox);
 applyMixins(Combobox, AffixIcon);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 function renderLabel() {
-  return html(_t || (_t = _`
+  return html`
 	  <label for="control" class="label">
-		  ${0}
-	  </label>`), x => x.label);
+		  ${x => x.label}
+	  </label>`;
 }
 const getStateClasses = ({
   disabled,
@@ -652,65 +648,65 @@ const getStateClasses = ({
 function renderInput(context) {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t2 || (_t2 = _`
-		<div class="${0}" ${0}>
-			${0}
+  return html`
+		<div class="${getStateClasses}" ${ref('_anchor')}>
+			${when(x => x.label, renderLabel())}
 			<div class="fieldset">
 				<input
 					id="control"
 					class="control"
-					aria-activedescendant="${0}"
-					aria-autocomplete="${0}"
-					aria-controls="${0}"
-					aria-disabled="${0}"
-					aria-expanded="${0}"
+					aria-activedescendant="${x => x.open ? x.ariaActiveDescendant : null}"
+					aria-autocomplete="${x => x.ariaAutoComplete}"
+					aria-controls="${x => x.ariaControls}"
+					aria-disabled="${x => x.ariaDisabled}"
+					aria-expanded="${x => x.ariaExpanded}"
 					aria-haspopup="listbox"
-					placeholder="${0}"
+					placeholder="${x => x.placeholder}"
 					role="combobox"
 					type="text"
-					?disabled="${0}"
-					:value="${0}"
-					@input="${0}"
-					@keyup="${0}"
-					${0}
+					?disabled="${x => x.disabled}"
+					:value="${x => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					@keyup="${(x, c) => x.keyupHandler(c.event)}"
+					${ref('control')}
 				/>
-				${0}
-				${0}
+				${() => affixIconTemplate('chevron-down-line')}
+				${() => focusTemplate}
 			</div>
-		</div>`), getStateClasses, ref('_anchor'), when(x => x.label, renderLabel()), x => x.open ? x.ariaActiveDescendant : null, x => x.ariaAutoComplete, x => x.ariaControls, x => x.ariaDisabled, x => x.ariaExpanded, x => x.placeholder, x => x.disabled, x => x.value, (x, c) => x.inputHandler(c.event), (x, c) => x.keyupHandler(c.event), ref('control'), () => affixIconTemplate('chevron-down-line'), () => focusTemplate);
+		</div>`;
 }
 const comboboxTemplate = context => {
   const popupTag = context.tagFor(Popup);
-  return html(_t3 || (_t3 = _`
+  return html`
         <template
-            aria-disabled="${0}"
-            autocomplete="${0}"
-            tabindex="${0}"
-            @click="${0}"
-            @focusout="${0}"
-            @keydown="${0}"
+            aria-disabled="${x => x.ariaDisabled}"
+            autocomplete="${x => x.autocomplete}"
+            tabindex="${x => !x.disabled ? '0' : null}"
+            @click="${(x, c) => x.clickHandler(c.event)}"
+            @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+            @keydown="${(x, c) => x.keydownHandler(c.event)}"
         >
-			${0}
-			<${0} class="popup"
-				?open="${0}"
-				placement="${0}"
+			${() => renderInput(context)}
+			<${popupTag} class="popup"
+				?open="${x => x.open}"
+				placement="${x => x.placement}"
 				strategy="absolute"
-				${0}>
-				<div id="${0}"
+				${ref('_popup')}>
+				<div id="${x => x.listboxId}"
 					class="listbox"
 					role="listbox"
-					?disabled="${0}"
-					${0}>
-					<slot ${0}>
-					</slot>
-				</div>
-			</${0}>
-        </template>
-		`), x => x.ariaDisabled, x => x.autocomplete, x => !x.disabled ? '0' : null, (x, c) => x.clickHandler(c.event), (x, c) => x.focusoutHandler(c.event), (x, c) => x.keydownHandler(c.event), () => renderInput(context), popupTag, x => x.open, x => x.placement, ref('_popup'), x => x.listboxId, x => x.disabled, ref('listbox'), slotted({
+					?disabled="${x => x.disabled}"
+					${ref('listbox')}>
+					<slot ${slotted({
     filter: Listbox$1.slottedOptionFilter,
     flatten: true,
     property: 'slottedOptions'
-  }), popupTag);
+  })}>
+					</slot>
+				</div>
+			</${popupTag}>
+        </template>
+		`;
 };
 
 const combobox = Combobox.compose({

package/shared/definition2.js

@@ -5,8 +5,8 @@ import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './aff
 import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { f as focusTemplateFactory } from './focus2.js';
-import { w as when } from './when.js';
 import { r as ref } from './ref.js';
+import { w as when } from './when.js';
 
 /**
  * An individual item in an {@link @microsoft/fast-foundation#(Accordion:class) }.
@@ -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 Thu, 03 Aug 2023 09:40:18 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.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\n.icon {\n  color: var(--vvd-color-neutral-600);\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:host(:not([icon-trailing])) .icon:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 07 Aug 2023 18:00:27 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.region:not(.size-condensed).padded {\n  padding-inline-start: 52px;\n}\n:host([expanded]) .region {\n  display: block;\n}\n.region.size-condensed.padded {\n  padding-inline-start: 44px;\n}\n\n.icon {\n  color: var(--vvd-color-neutral-600);\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:host(:not([icon-trailing])) .icon:last-of-type {\n  color: var(--_appearance-color-text);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
 class AccordionItem extends AccordionItem$1 {
   constructor() {
@@ -93,49 +93,45 @@ __decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "
 __decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "size", void 0);
 applyMixins(AccordionItem, AffixIconWithTrailing);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 const header = (context, hTag) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
-		<${0} class="heading-container">
+  return html`
+		<${hTag} class="heading-container">
 			<button
-				class="heading-button ${0}"
-				id="${0}"
-				aria-expanded="${0}"
-				aria-controls="${0}-panel"
-				@click="${0}"
-				${0}
+				class="heading-button ${x => x.size ? `size-${x.size}` : ''}"
+				id="${x => x.id}"
+				aria-expanded="${x => x.expanded}"
+				aria-controls="${x => x.id}-panel"
+				@click="${(x, c) => x.clickHandler(c.event)}"
+				${ref('expandbutton')}
 			>
-				${0}
+				${() => focusTemplate}
 
-				${0}
+				${x => x.icon && !x.iconTrailing ? affixIconTemplate(x.icon) : null}
 
-				<span class="heading-content">${0}</span>
+				<span class="heading-content">${x => x.heading}</span>
 
-				${0}
+				${when(x => x.meta, html`<span class="meta">${x => x.meta}</span>`)}
 
-				${0}
-				${0}
+				${x => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${x => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null}
 
 			</button>
-		</${0}>
-	`), hTag, x => x.size ? `size-${x.size}` : '', x => x.id, x => x.expanded, x => x.id, (x, c) => x.clickHandler(c.event), ref('expandbutton'), () => focusTemplate, x => x.icon && !x.iconTrailing ? affixIconTemplate(x.icon) : null, x => x.heading, when(x => x.meta, html(_t2 || (_t2 = _`<span class="meta">${0}</span>`), x => x.meta)), x => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null, x => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null, hTag);
+		</${hTag}>
+	`;
 };
-const AccordionItemTemplate = context => html(_t3 || (_t3 = _`
-	${0}
+const AccordionItemTemplate = context => html`
+	${x => header(context, 'h' + x.headinglevel)}
 	<div
-		id="${0}-panel"
-		aria-labelledby="${0}"
+		id="${x => x.id}-panel"
+		aria-labelledby="${x => x.id}"
 		role="region"
-		class="region ${0} ${0}"
+		class="region ${x => x.icon && !x.iconTrailing ? 'padded' : ''} ${x => x.size ? `size-${x.size}` : ''}"
 	>
 		<slot></slot>
 	</div>
-`), x => header(context, 'h' + x.headinglevel), x => x.id, x => x.id, x => x.icon && !x.iconTrailing ? 'padded' : '', x => x.size ? `size-${x.size}` : '');
+`;
 
 const accordionItemDefinition = AccordionItem.compose({
   baseName: 'accordion-item',