@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition2.js

@@ -212,17 +212,22 @@ class Accordion extends Accordion$1 {
 
 const getClasses = (_) => classNames("base");
 const AccordionTemplate = () => html`
-	<div class="${getClasses}">
-		<slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
-	</div>
-`;
+		<div class="${getClasses}">
+			<slot
+				${slotted({ property: "accordionItems", filter: elements() })}
+			></slot>
+		</div>
+	`;
 
 const accordionDefinition = Accordion.compose({
   baseName: "accordion",
   template: AccordionTemplate,
   styles
 });
-const accordionRegistries = [accordionDefinition(), ...accordionItemRegistries];
+const accordionRegistries = [
+  accordionDefinition(),
+  ...accordionItemRegistries
+];
 const registerAccordion = registerFactory(accordionRegistries);
 
 export { accordionDefinition as a, accordionRegistries as b, registerAccordion as r };

package/shared/definition20.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition$2 = require('./definition26.cjs');
 const definition$1 = require('./definition11.cjs');
-const definition = require('./definition59.cjs');
+const definition = require('./definition60.cjs');
 require('./affix.cjs');
 require('./index2.cjs');
 const localized = require('./localized.cjs');
@@ -15,7 +15,7 @@ const classNames = require('./class-names.cjs');
 
 const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}\n";
 
-const styles = ".base{box-sizing:border-box;padding:0;border:none;background-color:transparent;border-radius:8px;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px));max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (min-width: 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (min-width: 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline-end:-8px;margin-inline-start:4px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
+const styles = ".base{box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px));max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -28,7 +28,9 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal);
+const isDialogSupported = Boolean(
+  window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
+);
 let dialogPolyfill;
 (async () => {
   if (!isDialogSupported) {
@@ -76,7 +78,9 @@ class Dialog extends index.FoundationElement {
   #dialogElement;
   get #dialog() {
     if (!this.#dialogElement) {
-      this.#dialogElement = this.shadowRoot.querySelector("dialog");
+      this.#dialogElement = this.shadowRoot.querySelector(
+        "dialog"
+      );
       if (this.#dialogElement) {
         this.#dialogElement.open = this.open;
         if (dialogPolyfill) {
@@ -194,18 +198,10 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return index.html`
-	  <div class="headline">
-		  ${(x) => x.headline}
-	  </div>
-	`;
+  return index.html` <div class="headline">${(x) => x.headline}</div> `;
 }
 function subtitle() {
-  return index.html`
-	  <div class="subtitle">
-		  ${(x) => x.subtitle}
-	  </div>
-	`;
+  return index.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
 function renderDismissButton(buttonTag) {
   return index.html`
@@ -267,7 +263,12 @@ const dialogDefinition = Dialog.compose({
   template: DialogTemplate,
   styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
 });
-const dialogRegistries = [dialogDefinition(), ...definition$2.iconRegistries, ...definition$1.buttonRegistries, ...definition.elevationRegistries];
+const dialogRegistries = [
+  dialogDefinition(),
+  ...definition$2.iconRegistries,
+  ...definition$1.buttonRegistries,
+  ...definition.elevationRegistries
+];
 const registerDialog = index.registerFactory(dialogRegistries);
 
 exports.dialogDefinition = dialogDefinition;

package/shared/definition20.js

@@ -1,7 +1,7 @@
 import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition59.js';
+import { E as Elevation, e as elevationRegistries } from './definition60.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -13,7 +13,7 @@ import { c as classNames } from './class-names.js';
 
 const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}\n";
 
-const styles = ".base{box-sizing:border-box;padding:0;border:none;background-color:transparent;border-radius:8px;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px));max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (min-width: 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (min-width: 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline-end:-8px;margin-inline-start:4px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
+const styles = ".base{box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px));max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,7 +26,9 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal);
+const isDialogSupported = Boolean(
+  window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
+);
 let dialogPolyfill;
 (async () => {
   if (!isDialogSupported) {
@@ -74,7 +76,9 @@ class Dialog extends FoundationElement {
   #dialogElement;
   get #dialog() {
     if (!this.#dialogElement) {
-      this.#dialogElement = this.shadowRoot.querySelector("dialog");
+      this.#dialogElement = this.shadowRoot.querySelector(
+        "dialog"
+      );
       if (this.#dialogElement) {
         this.#dialogElement.open = this.open;
         if (dialogPolyfill) {
@@ -192,18 +196,10 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return html`
-	  <div class="headline">
-		  ${(x) => x.headline}
-	  </div>
-	`;
+  return html` <div class="headline">${(x) => x.headline}</div> `;
 }
 function subtitle() {
-  return html`
-	  <div class="subtitle">
-		  ${(x) => x.subtitle}
-	  </div>
-	`;
+  return html` <div class="subtitle">${(x) => x.subtitle}</div> `;
 }
 function renderDismissButton(buttonTag) {
   return html`
@@ -265,7 +261,12 @@ const dialogDefinition = Dialog.compose({
   template: DialogTemplate,
   styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
 });
-const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+const dialogRegistries = [
+  dialogDefinition(),
+  ...iconRegistries,
+  ...buttonRegistries,
+  ...elevationRegistries
+];
 const registerDialog = registerFactory(dialogRegistries);
 
 export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };

package/shared/definition21.cjs

@@ -58,16 +58,12 @@ const styles = ":host{display:block}.base{display:block;background-color:var(--v
 class Divider extends Divider$1 {
 }
 
-const getClasses = ({ orientation }) => classNames.classNames(
-  "base",
-  [`${orientation}`, Boolean(orientation)]
-);
-const DividerTemplate = () => index.html` 
-  <span
-  class="${getClasses}"
-  	orientation="${(x) => x.orientation}"
-  	role="${(x) => x.role}"
-  ></span>`;
+const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => index.html` <span
+	class="${getClasses}"
+	orientation="${(x) => x.orientation}"
+	role="${(x) => x.role}"
+></span>`;
 
 const dividerDefinition = Divider.compose({
   baseName: "divider",

package/shared/definition21.js

@@ -56,16 +56,12 @@ const styles = ":host{display:block}.base{display:block;background-color:var(--v
 class Divider extends Divider$1 {
 }
 
-const getClasses = ({ orientation }) => classNames(
-  "base",
-  [`${orientation}`, Boolean(orientation)]
-);
-const DividerTemplate = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${(x) => x.orientation}"
-  	role="${(x) => x.role}"
-  ></span>`;
+const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => html` <span
+	class="${getClasses}"
+	orientation="${(x) => x.orientation}"
+	role="${(x) => x.role}"
+></span>`;
 
 const dividerDefinition = Divider.compose({
   baseName: "divider",

package/shared/definition22.cjs

@@ -7,7 +7,7 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block}.base{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;background-color:var(--vvd-color-neutral-100);block-size:120px;border-radius:50%;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+const styles = ":host{display:block}.base{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -32,33 +32,29 @@ __decorateClass([
   index.observable
 ], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = (x) => classNames.classNames(
-  "base",
-  ["no-actions", x.slottedActionItems?.length === 0]
-);
+const getClasses = (x) => classNames.classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
 const EmptyStateTemplate = (context) => {
   const iconTag = context.tagFor(icon.Icon);
-  return index.html`
-		<div class="${getClasses}">
-			<slot name="graphic">
-				${when.when(
+  return index.html` <div class="${getClasses}">
+		<slot name="graphic">
+			${when.when(
     (x) => x.icon,
     index.html`<div class="icon-container">
 					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
 				</div>`
   )}
-			</slot>
-			<div class="content">
-				${when.when(
+		</slot>
+		<div class="content">
+			${when.when(
     (x) => x.headline,
     index.html`<header>${(x) => x.headline}</header>`
   )}
-				<slot></slot>
-			</div>
-			<div class="actions">
-				<slot name="action-items" ${slotted.slotted("slottedActionItems")}></slot>
-			</div>
-		</div>`;
+			<slot></slot>
+		</div>
+		<div class="actions">
+			<slot name="action-items" ${slotted.slotted("slottedActionItems")}></slot>
+		</div>
+	</div>`;
 };
 
 const emptyStateDefinition = EmptyState.compose({

package/shared/definition22.js

@@ -5,7 +5,7 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block}.base{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;background-color:var(--vvd-color-neutral-100);block-size:120px;border-radius:50%;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
+const styles = ":host{display:block}.base{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,33 +30,29 @@ __decorateClass([
   observable
 ], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = (x) => classNames(
-  "base",
-  ["no-actions", x.slottedActionItems?.length === 0]
-);
+const getClasses = (x) => classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
 const EmptyStateTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
-  return html`
-		<div class="${getClasses}">
-			<slot name="graphic">
-				${when(
+  return html` <div class="${getClasses}">
+		<slot name="graphic">
+			${when(
     (x) => x.icon,
     html`<div class="icon-container">
 					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
 				</div>`
   )}
-			</slot>
-			<div class="content">
-				${when(
+		</slot>
+		<div class="content">
+			${when(
     (x) => x.headline,
     html`<header>${(x) => x.headline}</header>`
   )}
-				<slot></slot>
-			</div>
-			<div class="actions">
-				<slot name="action-items" ${slotted("slottedActionItems")}></slot>
-			</div>
-		</div>`;
+			<slot></slot>
+		</div>
+		<div class="actions">
+			<slot name="action-items" ${slotted("slottedActionItems")}></slot>
+		</div>
+	</div>`;
 };
 
 const emptyStateDefinition = EmptyState.compose({

package/shared/definition23.cjs

@@ -8,7 +8,7 @@ const button = require('./button.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);border-radius:var(--_fab-border-radius);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{border-radius:50%;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px;padding-inline:20px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}\n";
+const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -53,40 +53,39 @@ const getClasses = ({
 const FabTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   return index.html`
-        <button
-            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-current="${(x) => x.ariaCurrent}"
-            aria-details="${(x) => x.ariaDetails}"
-            aria-disabled="${(x) => x.ariaDisabled}"
-            aria-expanded="${(x) => x.ariaExpanded}"
-            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-live="${(x) => x.ariaLive}"
-            aria-pressed="${(x) => x.ariaPressed}"
-            aria-relevant="${(x) => x.ariaRelevant}"
-            aria-roledescription="${(x) => x.ariaRoledescription}"
-            ${ref.ref("control")}
-        >
-					  ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-            ${(x) => x.label}
-        </button>
-`;
+		<button
+			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-current="${(x) => x.ariaCurrent}"
+			aria-details="${(x) => x.ariaDetails}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			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-live="${(x) => x.ariaLive}"
+			aria-pressed="${(x) => x.ariaPressed}"
+			aria-relevant="${(x) => x.ariaRelevant}"
+			aria-roledescription="${(x) => x.ariaRoledescription}"
+			${ref.ref("control")}
+		>
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
+		</button>
+	`;
 };
 
 const fabDefinition = Fab.compose({

package/shared/definition23.js

@@ -6,7 +6,7 @@ import { B as Button$1 } from './button.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);border-radius:var(--_fab-border-radius);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{border-radius:50%;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px;padding-inline:20px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}\n";
+const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -51,40 +51,39 @@ const getClasses = ({
 const FabTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
-        <button
-            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-current="${(x) => x.ariaCurrent}"
-            aria-details="${(x) => x.ariaDetails}"
-            aria-disabled="${(x) => x.ariaDisabled}"
-            aria-expanded="${(x) => x.ariaExpanded}"
-            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-live="${(x) => x.ariaLive}"
-            aria-pressed="${(x) => x.ariaPressed}"
-            aria-relevant="${(x) => x.ariaRelevant}"
-            aria-roledescription="${(x) => x.ariaRoledescription}"
-            ${ref("control")}
-        >
-					  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-            ${(x) => x.label}
-        </button>
-`;
+		<button
+			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-current="${(x) => x.ariaCurrent}"
+			aria-details="${(x) => x.ariaDetails}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			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-live="${(x) => x.ariaLive}"
+			aria-pressed="${(x) => x.ariaPressed}"
+			aria-relevant="${(x) => x.ariaRelevant}"
+			aria-roledescription="${(x) => x.ariaRoledescription}"
+			${ref("control")}
+		>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
+		</button>
+	`;
 };
 
 const fabDefinition = Fab.compose({