@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition59.js

@@ -1,5 +1,16 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition27.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { T as TreeItem$1 } from './tree-item.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { I as Icon } from './icon.js';
+import { e as elements, s as slotted } from './slotted.js';
+import { c as children } from './children.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
+import { r as ref } from './ref.js';
+
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):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{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,36 +23,70 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Elevation extends FoundationElement {
+class TreeItem extends TreeItem$1 {
 }
 __decorateClass([
   attr
-], Elevation.prototype, "dp", 2);
-__decorateClass([
-  attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow", 2);
-
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
+], TreeItem.prototype, "text", 2);
+applyMixins(TreeItem, AffixIcon);
 
-const getClasses = ({
-  dp,
-  noShadow
-}) => classNames(
+const getClasses = ({ disabled, selected }) => classNames(
   "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)]
+  ["disabled", disabled],
+  ["selected", Boolean(selected)]
 );
-const elevationTemplate = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
+const expandCollapseButton = (context) => {
+  const iconTag = context.tagFor(Icon);
+  return html`
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(x, c) => x.handleExpandCollapseButtonClick(c.event)}"
+			${ref("expandCollapseButton")}
+	>
+		<${iconTag} class="expandCollapseIcon" name="${(x) => x.expanded ? "chevron-down-line" : "chevron-right-line"}"></${iconTag}>
+	</div>`;
+};
+const TreeItemTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html` <template
+		role="treeitem"
+		slot="${(x) => x.isNestedItem() ? "item" : void 0}"
+		tabindex="-1"
+		aria-expanded="${(x) => x.childItems && x.childItems.length > 0 ? x.expanded : void 0}"
+		aria-selected="${(x) => x.selected}"
+		aria-disabled="${(x) => x.disabled}"
+		@focusin="${(x, c) => x.handleFocus(c.event)}"
+		@focusout="${(x, c) => x.handleBlur(c.event)}"
+		${children({
+    property: "childItems",
+    filter: elements(context.tagFor(TreeItem))
+  })}
+	>
+		<div class="${getClasses}">
+			${when(
+    (x) => x.childItems && x.childItems.length > 0,
+    expandCollapseButton(context)
+  )}
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			${(x) => x.text}
+		</div>
+		${when(
+    (x) => x.childItems && x.childItems.length > 0 && x.expanded,
+    html` <div role="group" class="items">
+				<slot name="item" ${slotted("items")}></slot>
+			</div>`
+  )}
+	</template>`;
+};
 
-const elevationDefinition = Elevation.compose({
-  baseName: "elevation",
-  template: elevationTemplate,
-  styles
-});
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = registerFactory(elevationRegistries);
+const treeItemDefinition = TreeItem.compose(
+  {
+    baseName: "tree-item",
+    template: TreeItemTemplate,
+    styles
+  }
+);
+const treeItemRegistries = [treeItemDefinition(), ...iconRegistries];
+const registerTreeItem = registerFactory(treeItemRegistries);
 
-export { Elevation as E, elevationRegistries as e, registerElevation as r };
+export { treeItemRegistries as a, registerTreeItem as r, treeItemDefinition as t };

package/shared/definition6.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition26.cjs');
+const definition = require('./definition27.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_size);border-radius:var(--_avatar-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
+const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -61,13 +61,12 @@ function renderInitials() {
 }
 const AvatarTemplate = (context) => {
   const iconTag = context.tagFor(icon.Icon);
-  return index.html`
-	<span class="${getClasses}">
+  return index.html` <span class="${getClasses}">
 		<slot name="graphic">
 			${when.when((x) => x.initials, renderInitials())}
 			${when.when((x) => !x.initials, renderIcon(iconTag))}
 		</slot>
-</span>`;
+	</span>`;
 };
 
 const avatarDefinition = Avatar.compose({

package/shared/definition6.js

@@ -1,10 +1,10 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
+import { a as iconRegistries } from './definition27.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_size);border-radius:var(--_avatar-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
+const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -59,13 +59,12 @@ function renderInitials() {
 }
 const AvatarTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
-  return html`
-	<span class="${getClasses}">
+  return html` <span class="${getClasses}">
 		<slot name="graphic">
 			${when((x) => x.initials, renderInitials())}
 			${when((x) => !x.initials, renderIcon(iconTag))}
 		</slot>
-</span>`;
+	</span>`;
 };
 
 const avatarDefinition = Avatar.compose({