@vonage/vivid 3.27.0 → 3.29.0

package/lib/toggletip/toggletip.template.d.ts

@@ -1,4 +1,4 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Toggletip } from './toggletip';
-export declare const ToggletipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Toggletip>;
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Toggletip } from './toggletip';
+export declare const ToggletipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Toggletip>;

package/lib/tooltip/definition.d.ts

@@ -1,3 +1,3 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const tooltipDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTooltip: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const tooltipDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const registerTooltip: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/tooltip/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/lib/tooltip/tooltip.d.ts

@@ -1,14 +1,14 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import type { Placement } from '@floating-ui/dom';
-declare type anchorType = string | HTMLElement;
-export declare class Tooltip extends FoundationElement {
-    #private;
-    text?: string;
-    placement?: Placement;
-    open: boolean;
-    anchor?: anchorType;
-    anchorChanged(_: anchorType, newValue: anchorType): void;
-    disconnectedCallback(): void;
-    openChanged(_: boolean, newValue: boolean): void;
-}
-export {};
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Placement } from '@floating-ui/dom';
+type anchorType = string | HTMLElement;
+export declare class Tooltip extends FoundationElement {
+    #private;
+    text?: string;
+    placement?: Placement;
+    open: boolean;
+    anchor?: anchorType;
+    anchorChanged(_: anchorType, newValue: anchorType): void;
+    disconnectedCallback(): void;
+    openChanged(_: boolean, newValue: boolean): void;
+}
+export {};

package/lib/tooltip/tooltip.template.d.ts

@@ -1,4 +1,4 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Tooltip } from './tooltip';
-export declare const TooltipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Tooltip>;
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Tooltip } from './tooltip';
+export declare const TooltipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Tooltip>;

package/lib/tree-item/definition.d.ts

@@ -1,3 +1,3 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const treeItemDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTreeItem: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const treeItemDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const registerTreeItem: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/tree-item/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/lib/tree-item/tree-item.d.ts

@@ -1,7 +1,7 @@
-import { TreeItem as FastTreeItem } from '@microsoft/fast-foundation';
-import { AffixIcon } from '../../shared/patterns/affix';
-export declare class TreeItem extends FastTreeItem {
-    text?: string;
-}
-export interface TreeItem extends AffixIcon {
-}
+import { TreeItem as FastTreeItem } from '@microsoft/fast-foundation';
+import { AffixIcon } from '../../shared/patterns/affix';
+export declare class TreeItem extends FastTreeItem {
+    text?: string;
+}
+export interface TreeItem extends AffixIcon {
+}

package/lib/tree-item/tree-item.template.d.ts

@@ -1,4 +1,4 @@
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import type { TreeItem } from './tree-item';
-export declare const expandCollapseButton: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
-export declare const TreeItemTemplate: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { TreeItem } from './tree-item';
+export declare const expandCollapseButton: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
+export declare const TreeItemTemplate: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;

package/lib/tree-view/definition.d.ts

@@ -1,3 +1,3 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const treeViewDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTreeView: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const treeViewDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const registerTreeView: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/tree-view/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/lib/tree-view/tree-view.d.ts

@@ -1,3 +1,3 @@
-import { TreeView as FastTreeView } from '@microsoft/fast-foundation';
-export declare class TreeView extends FastTreeView {
-}
+import { TreeView as FastTreeView } from '@microsoft/fast-foundation';
+export declare class TreeView extends FastTreeView {
+}

package/lib/tree-view/tree-view.template.d.ts

@@ -1,2 +1,2 @@
-import type { TreeView } from './tree-view';
-export declare const TreeViewTemplate: () => import("@microsoft/fast-element").ViewTemplate<TreeView, any>;
+import type { TreeView } from './tree-view';
+export declare const TreeViewTemplate: () => import("@microsoft/fast-element").ViewTemplate<TreeView, any>;

package/listbox/index.js

@@ -10,8 +10,6 @@ import { c as classNames } from '../shared/class-names.js';
 import '../shared/focus.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/when.js';
 import '../shared/aria-global.js';
@@ -24,44 +22,42 @@ import '../shared/strings.js';
 import '../shared/numbers.js';
 import '../shared/node-observation.js';
 
-let _ = t => t,
-  _t;
 const getClasses = ({
   appearance,
   disabled
 }) => classNames('base', ['disabled', disabled], [`appearance-${appearance}`, Boolean(appearance)]);
 const ListboxTemplate = context => {
   const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
+  return html`
 <template
-	aria-activedescendant="${0}"
-	aria-multiselectable="${0}"
+	aria-activedescendant="${x => x.ariaActiveDescendant}"
+	aria-multiselectable="${x => x.ariaMultiSelectable}"
 	aria-label="listbox"
 	role="listbox"
-	@click="${0}"
-	@focusin="${0}"
-	@keydown="${0}"
-	@mousedown="${0}"
-	tabindex="${0}"
+	@click="${(x, c) => x.clickHandler(c.event)}"
+	@focusin="${(x, c) => x.focusinHandler(c.event)}"
+	@keydown="${(x, c) => x.keydownHandler(c.event)}"
+	@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+	tabindex="${x => !x.disabled ? '0' : null}"
 >
 	<div
-		class="${0}"
+		class="${getClasses}"
 	>
-		${0}
+		${() => focusTemplate}
 
 		<slot
-			${0}
-		></slot>
-	</div>
-</template>
-	`), x => x.ariaActiveDescendant, x => x.ariaMultiSelectable, (x, c) => x.clickHandler(c.event), (x, c) => x.focusinHandler(c.event), (x, c) => x.keydownHandler(c.event), (x, c) => x.mousedownHandler(c.event), x => !x.disabled ? '0' : null, getClasses, () => focusTemplate, slotted({
+			${slotted({
     filter: ListboxElement.slottedOptionFilter,
     flatten: true,
     property: 'slottedOptions'
-  }));
+  })}
+		></slot>
+	</div>
+</template>
+	`;
 };
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n:host {\n  display: block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  flex-direction: column;\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  gap: 4px;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\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.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\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(: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.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n:host {\n  display: block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  flex-direction: column;\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  gap: 4px;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\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.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\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(: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.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
 
 const listboxDefinition = Listbox.compose({
   baseName: 'listbox',

package/menu/index.js

@@ -4,8 +4,6 @@ import '../shared/definition20.js';
 import '../shared/definition7.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
@@ -23,7 +21,6 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/definition8.js';
-import '../shared/es.object.assign.js';
 import '../shared/definition31.js';
 import '../shared/direction.js';
 import '../shared/slotted.js';

package/menu-item/index.js

@@ -2,14 +2,11 @@ import { b as registerMenuItem } from '../shared/definition31.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
-import '../shared/es.object.assign.js';
 import '../shared/affix.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';

package/nav-disclosure/index.js

@@ -2,8 +2,6 @@ import { r as registerNavDisclosure } from '../shared/definition33.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';

package/nav-item/index.js

@@ -2,8 +2,6 @@ import { r as registerNavItem } from '../shared/definition34.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';

package/note/index.js

@@ -2,8 +2,6 @@ import { r as registerNote } from '../shared/definition35.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';

package/number-field/index.js

@@ -3,8 +3,6 @@ import '../shared/index.js';
 import '../shared/definition7.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
@@ -25,6 +23,5 @@ import '../shared/definition24.js';
 import '../shared/aria.js';
 import '../shared/form-elements.js';
 import '../shared/text-field2.js';
-import '../shared/es.regexp.to-string.js';
 
 registerNumberField();

package/option/index.js

@@ -2,8 +2,6 @@ import { r as registerOption } from '../shared/definition21.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.27.0",
+  "version": "3.29.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.js",
@@ -15,16 +15,17 @@
     "url": "https://github.com/Vonage/vivid-3/issues"
   },
   "license": "Apache-2.0",
-  "types": "./index.d.ts",
+  "types": "./src/index.d.ts",
   "dependencies": {
-    "rollup-plugin-postcss": "4.0.2",
-    "@microsoft/fast-foundation": "2.47.1-0",
-    "@microsoft/fast-element": "1.11.0",
-    "@microsoft/fast-web-utilities": "5.4.1",
-    "ramda": "0.28.0",
+    "@floating-ui/dom": "1.4.5",
+    "@microsoft/fast-element": "1.12.0",
+    "@microsoft/fast-foundation": "2.49.0",
+    "@microsoft/fast-web-utilities": "6.0.0",
     "dialog-polyfill": "0.5.6",
     "dropzone": "6.0.0-beta.2",
-    "@floating-ui/dom": "1.2.0"
+    "promise": "7.3.1",
+    "ramda": "0.28.0",
+    "rollup-plugin-postcss": "4.0.2"
   },
   "peerDependencies": {}
 }

package/pagination/index.js

@@ -3,8 +3,6 @@ import '../shared/definition7.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
@@ -21,10 +19,8 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/es.regexp.to-string.js';
-import '../shared/es.string.includes.js';
 import '../shared/node-observation.js';
-import '../shared/repeat.js';
 import '../shared/children.js';
+import '../shared/repeat.js';
 
 registerPagination();

package/popup/index.js

@@ -3,8 +3,6 @@ import '../shared/index.js';
 import '../shared/definition7.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
@@ -22,6 +20,5 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/definition8.js';
-import '../shared/es.object.assign.js';
 
 registerPopup();

package/radio-group/index.js

@@ -5,9 +5,9 @@ import '../shared/key-codes.js';
 import '../shared/aria.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';
-import '../shared/node-observation.js';
 import '../shared/aria2.js';
-import '../shared/slotted.js';
+import '../shared/node-observation.js';
 import '../shared/when.js';
+import '../shared/slotted.js';
 
 registerRadioGroup();

package/select/index.js

@@ -6,8 +6,6 @@ import '../shared/definition20.js';
 import '../shared/definition7.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
@@ -23,7 +21,6 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/definition8.js';
-import '../shared/es.object.assign.js';
 import '../shared/definition21.js';
 import '../shared/dom.js';
 import '../shared/form-elements.js';

package/shared/affix.js

@@ -1,9 +1,6 @@
 import { _ as __decorate, a as attr, b as __metadata, h as html } from './index.js';
 import { I as Icon } from './icon.js';
 
-let _ = t => t,
-  _t,
-  _t2;
 class AffixIcon {}
 __decorate([attr, __metadata("design:type", String)], AffixIcon.prototype, "icon", void 0);
 class AffixIconWithTrailing extends AffixIcon {
@@ -22,8 +19,8 @@ const affixIconTemplateFactory = (context, withWrapper = true) => {
     if (!icon) {
       return null;
     }
-    const iconTemplate = html(_t || (_t = _`<${0} :name="${0}"></${0}>`), iconTag, () => icon, iconTag);
-    return withWrapper ? html(_t2 || (_t2 = _`<span class="icon">${0}</span>`), iconTemplate) : iconTemplate;
+    const iconTemplate = html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
+    return withWrapper ? html`<span class="icon">${iconTemplate}</span>` : iconTemplate;
   };
 };
 

package/shared/anchor.js

@@ -30,7 +30,8 @@ class Anchor extends FoundationElement {
                 !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
                 ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                 this.focus = () => {
-                    this.control.focus();
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
                 };
             }
         };

package/shared/apply-mixins.js

@@ -1,4 +1,4 @@
-import { T as AttributeConfiguration } from './index.js';
+import { c as AttributeConfiguration } from './index.js';
 
 /**
  * Apply mixins to a constructor.

package/shared/definition.js

@@ -187,7 +187,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends Accordion$1 {
   constructor() {
@@ -203,17 +203,15 @@ class Accordion extends Accordion$1 {
   }
 }
 
-let _2 = t => t,
-  _t;
 const getClasses = _ => classNames('base');
-const AccordionTemplate = () => html(_t || (_t = _2`
-	<div class="${0}">
-		<slot ${0}></slot>
-	</div>
-`), getClasses, slotted({
+const AccordionTemplate = () => html`
+	<div class="${getClasses}">
+		<slot ${slotted({
   property: 'accordionItems',
   filter: elements()
-}));
+})}></slot>
+	</div>
+`;
 
 const accordionDefinition = Accordion.compose({
   baseName: 'accordion',

package/shared/definition10.js

@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Aug 2023 09:40:18 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-avatar-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-avatar-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-avatar-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-avatar-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.size-condensed {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n  line-height: 1;\n}\n.base.size-expanded {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n  font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n  line-height: 1;\n}\n.base:not(.size-condensed, .size-expanded) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  line-height: 1;\n}\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n.base.shape-pill {\n  border-radius: 50%;\n}\n.base .initials {\n  text-transform: uppercase;\n}\n.base ::slotted(*) {\n  block-size: 100%;\n  inline-size: 100%;\n  object-fit: cover;\n}";
 
 class Avatar extends FoundationElement {}
 __decorate([attr, __metadata("design:type", String)], Avatar.prototype, "connotation", void 0);
@@ -14,10 +14,6 @@ __decorate([attr, __metadata("design:type", String)], Avatar.prototype, "size",
 __decorate([attr, __metadata("design:type", String)], Avatar.prototype, "icon", void 0);
 __decorate([attr, __metadata("design:type", String)], Avatar.prototype, "initials", void 0);
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
 const getClasses = ({
   appearance,
   connotation,
@@ -25,28 +21,28 @@ const getClasses = ({
   size
 }) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)]);
 function renderIcon(iconTag) {
-  return html(_t || (_t = _`
+  return html`
 		<span class="icon">
-			<${0} name="${0}"></${0}>
+			<${iconTag} name="${x => x.icon ? `${x.icon}` : 'user-line'}"></${iconTag}>
 		</span>
-	`), iconTag, x => x.icon ? `${x.icon}` : 'user-line', iconTag);
+	`;
 }
 function renderInitials() {
-  return html(_t2 || (_t2 = _`
-		<span class="initials">${0}</span>
-	`), ({
+  return html`
+		<span class="initials">${({
     initials
-  }) => initials.substring(0, 2));
+  }) => initials.substring(0, 2)}</span>
+	`;
 }
 const AvatarTemplate = context => {
   const iconTag = context.tagFor(Icon);
-  return html(_t3 || (_t3 = _`
-	<span class="${0}">
+  return html`
+	<span class="${getClasses}">
 		<slot name="graphic">
-			${0}
-			${0}
+			${when(x => x.initials, renderInitials())}
+			${when(x => !x.initials, renderIcon(iconTag))}
 		</slot>
-</span>`), getClasses, when(x => x.initials, renderInitials()), when(x => !x.initials, renderIcon(iconTag)));
+</span>`;
 };
 
 const avatarDefinition = Avatar.compose({