@vonage/vivid 5.15.1 → 5.16.0

package/avatar/definition.cjs

@@ -1,117 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const linkable = require('../unbundled/linkable.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-
-const styles = ":host{display:inline-block}.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(--vvd-color-neutral-300)}.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{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;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.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:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.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:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Avatar extends linkable.Linkable(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.clickable = false;
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "shape");
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "appearance");
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "size");
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "icon");
-__decorateClass([
-  fastElement.attr
-], Avatar.prototype, "initials");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean",
-    attribute: "clickable"
-  })
-], Avatar.prototype, "clickable");
-
-const getClasses = ({ appearance, connotation, shape, size }) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  [`size-${size}`, Boolean(size)]
-);
-function renderIcon(iconTag) {
-  return fastElement.html`
-		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
-	`;
-}
-function renderInitials() {
-  return fastElement.html`
-		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
-	`;
-}
-function renderAvatarBaseElement(x, content) {
-  if (x.href) {
-    return x._renderLinkElement(content, getClasses);
-  } else if (x.clickable) {
-    return fastElement.html`<button
-			type="button"
-			class="${getClasses}"
-			${delegatesAria.delegateAria()}
-		>
-			${content}
-		</button>`;
-  } else {
-    return fastElement.html`<span class="${getClasses}">${content}</span>`;
-  }
-}
-const AvatarTemplate = (context) => {
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`
-		${(x) => renderAvatarBaseElement(
-    x,
-    fastElement.html`<slot name="graphic">
-					${fastElement.when((x2) => x2.initials, renderInitials())}
-					${fastElement.when(
-      (x2) => !x2.initials,
-      fastElement.html`<span class="icon"
-							><slot name="icon">${renderIcon(iconTag)}</slot></span
-						>`
-    )}</slot
-				>`
-  )}
-	`;
-};
-
-const avatarDefinition = vividElement.defineVividComponent(
-  "avatar",
-  Avatar,
-  AvatarTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerAvatar = vividElement.createRegisterFunction(avatarDefinition);
-
-exports.VwcAvatarElement = Avatar;
-exports.avatarDefinition = avatarDefinition;
-exports.registerAvatar = registerAvatar;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition15.cjs");
+exports.VwcAvatarElement = require_definition$1.Avatar;
+exports.avatarDefinition = require_definition$1.avatarDefinition;
+exports.registerAvatar = require_definition$1.registerAvatar;

package/avatar/definition.js

@@ -1,111 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, when, html } from '@microsoft/fast-element';
-import { L as Linkable } from '../unbundled/linkable.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { d as delegateAria } from '../unbundled/delegates-aria.js';
-
-const styles = ":host{display:inline-block}.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(--vvd-color-neutral-300)}.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{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;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.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:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.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:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Avatar extends Linkable(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.clickable = false;
-  }
-}
-__decorateClass([
-  attr
-], Avatar.prototype, "connotation");
-__decorateClass([
-  attr
-], Avatar.prototype, "shape");
-__decorateClass([
-  attr
-], Avatar.prototype, "appearance");
-__decorateClass([
-  attr
-], Avatar.prototype, "size");
-__decorateClass([
-  attr
-], Avatar.prototype, "icon");
-__decorateClass([
-  attr
-], Avatar.prototype, "initials");
-__decorateClass([
-  attr({
-    mode: "boolean",
-    attribute: "clickable"
-  })
-], Avatar.prototype, "clickable");
-
-const getClasses = ({ appearance, connotation, shape, size }) => classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  [`size-${size}`, Boolean(size)]
-);
-function renderIcon(iconTag) {
-  return html`
-		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
-	`;
-}
-function renderInitials() {
-  return html`
-		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
-	`;
-}
-function renderAvatarBaseElement(x, content) {
-  if (x.href) {
-    return x._renderLinkElement(content, getClasses);
-  } else if (x.clickable) {
-    return html`<button
-			type="button"
-			class="${getClasses}"
-			${delegateAria()}
-		>
-			${content}
-		</button>`;
-  } else {
-    return html`<span class="${getClasses}">${content}</span>`;
-  }
-}
-const AvatarTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return html`
-		${(x) => renderAvatarBaseElement(
-    x,
-    html`<slot name="graphic">
-					${when((x2) => x2.initials, renderInitials())}
-					${when(
-      (x2) => !x2.initials,
-      html`<span class="icon"
-							><slot name="icon">${renderIcon(iconTag)}</slot></span
-						>`
-    )}</slot
-				>`
-  )}
-	`;
-};
-
-const avatarDefinition = defineVividComponent(
-  "avatar",
-  Avatar,
-  AvatarTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerAvatar = createRegisterFunction(avatarDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerAvatar, r as Avatar, t as avatarDefinition } from "../unbundled/definition15.js";
 export { Avatar as VwcAvatarElement, avatarDefinition, registerAvatar };

package/avatar/index.cjs

@@ -1,18 +1,18 @@
-"use strict";const d=require("../bundled/definition2.cjs"),o=require("../bundled/vivid-element.cjs"),u=require("../bundled/linkable.cjs"),b=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs"),_=":host{display:inline-block}.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(--vvd-color-neutral-300)}.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{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;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.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:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.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:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";var m=Object.defineProperty,c=(a,e,t,n)=>{for(var i=void 0,l=a.length-1,v;l>=0;l--)(v=a[l])&&(i=v(e,t,i)||i);return i&&m(e,t,i),i};class r extends u.Linkable(o.VividElement){constructor(){super(...arguments),this.clickable=!1}}c([o.attr],r.prototype,"connotation");c([o.attr],r.prototype,"shape");c([o.attr],r.prototype,"appearance");c([o.attr],r.prototype,"size");c([o.attr],r.prototype,"icon");c([o.attr],r.prototype,"initials");c([o.attr({mode:"boolean",attribute:"clickable"})],r.prototype,"clickable");const s=({appearance:a,connotation:e,shape:t,size:n})=>f.classNames("base",[`connotation-${e}`,!!e],[`appearance-${a}`,!!a],[`shape-${t}`,!!t],[`size-${n}`,!!n]);function x(a){return o.html`
-		<${a} name="${e=>e.icon?`${e.icon}`:"user-line"}"></${a}>
-	`}function y(){return o.html`
-		<span class="initials">${({initials:a})=>a.substring(0,2)}</span>
-	`}function h(a,e){return a.href?a._renderLinkElement(e,s):a.clickable?o.html`<button
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.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(--vvd-color-neutral-300)}.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{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;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.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(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};r.t([e.l],c.prototype,`connotation`,void 0),r.t([e.l],c.prototype,`shape`,void 0),r.t([e.l],c.prototype,`appearance`,void 0),r.t([e.l],c.prototype,`size`,void 0),r.t([e.l],c.prototype,`icon`,void 0),r.t([e.l],c.prototype,`initials`,void 0),r.t([e.l({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=({appearance:e,connotation:t,shape:n,size:r})=>i.t(`base`,[`connotation-${t}`,!!t],[`appearance-${e}`,!!e],[`shape-${n}`,!!n],[`size-${r}`,!!r]);function u(t){return e.d`
+		<${t} name="${e=>e.icon?`${e.icon}`:`user-line`}"></${t}>
+	`}function d(){return e.d`
+		<span class="initials">${({initials:e})=>e.substring(0,2)}</span>
+	`}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.d`<button
 			type="button"
-			class="${s}"
-			${b.delegateAria()}
+			class="${l}"
+			${a.n()}
 		>
-			${e}
-		</button>`:o.html`<span class="${s}">${e}</span>`}const z=a=>{const e=a.tagFor(d.Icon);return o.html`
-		${t=>h(t,o.html`<slot name="graphic">
-					${p.when(n=>n.initials,y())}
-					${p.when(n=>!n.initials,o.html`<span class="icon"
-							><slot name="icon">${x(e)}</slot></span
+			${n}
+		</button>`:e.d`<span class="${l}">${n}</span>`}var p=e.o(`avatar`,c,r=>{let i=r.tagFor(n.r);return e.d`
+		${n=>f(n,e.d`<slot name="graphic">
+					${t.t(e=>e.initials,d())}
+					${t.t(e=>!e.initials,e.d`<span class="icon"
+							><slot name="icon">${u(i)}</slot></span
 						>`)}</slot
 				>`)}
-	`},g=o.defineVividComponent("avatar",r,z,[d.iconDefinition],{styles:_}),$=o.createRegisterFunction(g);$();
+	`},[n.t],{styles:s});e.s(p)();

package/avatar/index.js

@@ -1,93 +1,53 @@
-import { I as f, i as b } from "../bundled/definition2.js";
-import { V as u, a as c, h as n, c as m, d as _ } from "../bundled/vivid-element.js";
-import { L as x } from "../bundled/linkable.js";
-import { d as y } from "../bundled/delegates-aria.js";
-import { w as d } from "../bundled/when.js";
-import { c as z } from "../bundled/class-names.js";
-const h = ":host{display:inline-block}.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(--vvd-color-neutral-300)}.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{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:none;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.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:is(a,button){cursor:pointer;--focus-stroke-gap-color: transparent}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.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:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){block-size:100%;inline-size:100%;object-fit:cover}";
-var g = Object.defineProperty, i = (a, o, e, t) => {
-  for (var s = void 0, l = a.length - 1, p; l >= 0; l--)
-    (p = a[l]) && (s = p(o, e, s) || s);
-  return s && g(o, e, s), s;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/when.js";
+import { r as o, t as s } from "../bundled/definition2.js";
+import { t as c } from "../bundled/decorate.js";
+import { t as l } from "../bundled/class-names.js";
+import { n as u } from "../bundled/delegates-aria.js";
+import { t as d } from "../bundled/linkable.js";
+//#region src/lib/avatar/avatar.scss?inline
+var f = ":host{display:inline-block}.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(--vvd-color-neutral-300)}.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{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;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.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(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}", p = class extends d(i) {
+	constructor(...e) {
+		super(...e), this.clickable = !1;
+	}
 };
-class r extends x(u) {
-  constructor() {
-    super(...arguments), this.clickable = !1;
-  }
-}
-i([
-  c
-], r.prototype, "connotation");
-i([
-  c
-], r.prototype, "shape");
-i([
-  c
-], r.prototype, "appearance");
-i([
-  c
-], r.prototype, "size");
-i([
-  c
-], r.prototype, "icon");
-i([
-  c
-], r.prototype, "initials");
-i([
-  c({
-    mode: "boolean",
-    attribute: "clickable"
-  })
-], r.prototype, "clickable");
-const v = ({ appearance: a, connotation: o, shape: e, size: t }) => z(
-  "base",
-  [`connotation-${o}`, !!o],
-  [`appearance-${a}`, !!a],
-  [`shape-${e}`, !!e],
-  [`size-${t}`, !!t]
-);
-function $(a) {
-  return n`
-		<${a} name="${(o) => o.icon ? `${o.icon}` : "user-line"}"></${a}>
+c([t], p.prototype, "connotation", void 0), c([t], p.prototype, "shape", void 0), c([t], p.prototype, "appearance", void 0), c([t], p.prototype, "size", void 0), c([t], p.prototype, "icon", void 0), c([t], p.prototype, "initials", void 0), c([t({
+	mode: "boolean",
+	attribute: "clickable"
+})], p.prototype, "clickable", void 0);
+//#endregion
+//#region src/lib/avatar/avatar.template.ts
+var m = ({ appearance: e, connotation: t, shape: n, size: r }) => l("base", [`connotation-${t}`, !!t], [`appearance-${e}`, !!e], [`shape-${n}`, !!n], [`size-${r}`, !!r]);
+function h(t) {
+	return e`
+		<${t} name="${(e) => e.icon ? `${e.icon}` : "user-line"}"></${t}>
 	`;
 }
-function k() {
-  return n`
-		<span class="initials">${({ initials: a }) => a.substring(0, 2)}</span>
+function g() {
+	return e`
+		<span class="initials">${({ initials: e }) => e.substring(0, 2)}</span>
 	`;
 }
-function w(a, o) {
-  return a.href ? a._renderLinkElement(o, v) : a.clickable ? n`<button
+function _(t, n) {
+	return t.href ? t._renderLinkElement(n, m) : t.clickable ? e`<button
 			type="button"
-			class="${v}"
-			${y()}
+			class="${m}"
+			${u()}
 		>
-			${o}
-		</button>` : n`<span class="${v}">${o}</span>`;
+			${n}
+		</button>` : e`<span class="${m}">${n}</span>`;
 }
-const A = (a) => {
-  const o = a.tagFor(f);
-  return n`
-		${(e) => w(
-    e,
-    n`<slot name="graphic">
-					${d((t) => t.initials, k())}
-					${d(
-      (t) => !t.initials,
-      n`<span class="icon"
-							><slot name="icon">${$(o)}</slot></span
-						>`
-    )}</slot
-				>`
-  )}
+//#endregion
+//#region src/lib/avatar/index.ts
+r(n("avatar", p, (t) => {
+	let n = t.tagFor(o);
+	return e`
+		${(t) => _(t, e`<slot name="graphic">
+					${a((e) => e.initials, g())}
+					${a((e) => !e.initials, e`<span class="icon"
+							><slot name="icon">${h(n)}</slot></span
+						>`)}</slot
+				>`)}
 	`;
-}, B = _(
-  "avatar",
-  r,
-  A,
-  [b],
-  {
-    styles: h
-  }
-), C = m(B);
-C();
+}, [s], { styles: f }))();
+//#endregion

package/badge/definition.cjs

@@ -1,85 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const icon_definition = require('../icon/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const affix = require('../unbundled/affix.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Badge extends affix.AffixIconWithTrailing(vividElement.VividElement) {
-}
-__decorateClass([
-  fastElement.attr
-], Badge.prototype, "connotation");
-__decorateClass([
-  fastElement.attr
-], Badge.prototype, "shape");
-__decorateClass([
-  fastElement.attr
-], Badge.prototype, "size");
-__decorateClass([
-  fastElement.attr
-], Badge.prototype, "appearance");
-__decorateClass([
-  fastElement.attr
-], Badge.prototype, "text");
-
-const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.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.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
-
-const getClasses = ({
-  iconSlottedContent,
-  connotation,
-  appearance,
-  shape,
-  size,
-  iconTrailing,
-  text,
-  icon
-}) => fastWebUtilities.classNames(
-  "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-trailing", iconTrailing],
-  [
-    "icon-only",
-    !text && (Boolean(icon) || Boolean(iconSlottedContent?.length))
-  ]
-);
-const badgeTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return fastElement.html` <span class="${getClasses}">
-		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-		${fastElement.when(
-    (x) => x.text,
-    (x) => fastElement.html`<span class="text">${x.text}</span>`
-  )}
-	</span>`;
-};
-
-const badgeDefinition = vividElement.defineVividComponent(
-  "badge",
-  Badge,
-  badgeTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerBadge = vividElement.createRegisterFunction(badgeDefinition);
-
-exports.VwcBadgeElement = Badge;
-exports.badgeDefinition = badgeDefinition;
-exports.registerBadge = registerBadge;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition16.cjs");
+exports.VwcBadgeElement = require_definition$1.Badge;
+exports.badgeDefinition = require_definition$1.badgeDefinition;
+exports.registerBadge = require_definition$1.registerBadge;