@vonage/vivid 4.31.0 → 5.1.0

package/card/definition.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const elevation_definition = require('../unbundled/definition5.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 enums = require('../unbundled/enums.cjs');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+
+const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+
+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 Card extends linkable.Linkable(vividElement.VividElement) {
+  constructor() {
+    super(...arguments);
+    this.clickableCard = false;
+  }
+}
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "appearance");
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "headline");
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "subtitle");
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "text");
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "icon");
+__decorateClass([
+  fastElement.attr
+], Card.prototype, "elevation");
+__decorateClass([
+  fastElement.attr({
+    mode: "boolean",
+    attribute: "clickable-card"
+  })
+], Card.prototype, "clickableCard");
+__decorateClass([
+  fastElement.observable
+], Card.prototype, "footerSlottedContent");
+__decorateClass([
+  fastElement.observable
+], Card.prototype, "graphicSlottedContent");
+__decorateClass([
+  fastElement.observable
+], Card.prototype, "hasMetaSlottedContent");
+
+const getClasses = (_) => fastWebUtilities.classNames(
+  "base",
+  ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length],
+  ["hide-header", shouldHideHeader(_)]
+);
+function renderHeaderIcon(iconTag) {
+  return fastElement.html`
+		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
+}
+function Headline() {
+  return fastElement.html` <div class="header-headline">${(x) => x.headline}</div> `;
+}
+function Subtitle() {
+  return fastElement.html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
+}
+function headerContent() {
+  return fastElement.html`
+		<div class="header-content">
+			${fastElement.when((x) => x.headline, Headline())}
+			${fastElement.when((x) => x.subtitle, Subtitle())}
+		</div>
+	`;
+}
+function renderHeader(iconTag) {
+  return fastElement.html` <div class="header">
+		<slot name="graphic" ${fastElement.slotted("graphicSlottedContent")}
+			>${fastElement.when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${fastElement.when((x) => x.headline || x.subtitle, headerContent())}
+	</div>`;
+}
+function shouldHideHeader(card) {
+  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+function renderMetaSlot() {
+  return fastElement.html` <slot name="meta" ${fastElement.slotted("metaSlottedContent")}></slot> `;
+}
+function text() {
+  return fastElement.html` <div class="text">${(x) => x.text}</div> `;
+}
+function renderButtonElement(content) {
+  return fastElement.html`<button
+		class="${getClasses}"
+		type="button"
+		${delegatesAria.delegateAria()}
+	>
+		${content}
+	</button>`;
+}
+function renderCardBaseElement(x, content) {
+  if (x.href) {
+    return x._renderLinkElement(content, getClasses);
+  } else if (x.clickableCard) {
+    return renderButtonElement(content);
+  } else {
+    return fastElement.html`<div class="${getClasses}">${content}</div>`;
+  }
+}
+function renderCardContent(context) {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		${(x) => renderCardBaseElement(
+    x,
+    fastElement.html`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${renderHeader(iconTag)} ${renderMetaSlot()}
+							</div>
+							${fastElement.when((x2) => x2.text, text())}
+						</div>
+					</slot>
+					<div class="footer">
+						<slot name="footer" ${fastElement.slotted("footerSlottedContent")}></slot>
+					</div>
+				</div> `
+  )}
+	`;
+}
+const CardTemplate = (context) => {
+  const elevationTag = context.tagFor(elevation_definition.Elevation);
+  return fastElement.html`
+		${fastElement.when(
+    (x) => x.appearance !== enums.Appearance.Ghost && x.appearance !== enums.Appearance.Outlined,
+    fastElement.html`
+			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`
+  )}
+		${fastElement.when(
+    (x) => x.appearance === enums.Appearance.Outlined,
+    fastElement.html`
+			<${elevationTag} dp='0')}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`
+  )}
+		${fastElement.when(
+    (x) => x.appearance === enums.Appearance.Ghost,
+    fastElement.html` ${renderCardContent(context)} `
+  )}
+	`;
+};
+
+const cardDefinition = vividElement.defineVividComponent(
+  "card",
+  Card,
+  CardTemplate,
+  [icon_definition.iconDefinition, elevation_definition.elevationDefinition],
+  {
+    styles
+  }
+);
+const registerCard = vividElement.createRegisterFunction(cardDefinition);
+
+exports.VwcCardElement = Card;
+exports.cardDefinition = cardDefinition;
+exports.registerCard = registerCard;

package/{shared/definition14.js → card/definition.js}

@@ -1,14 +1,13 @@
-import { I as Icon, i as iconDefinition } from './definition28.js';
-import { E as Elevation, e as elevationDefinition } from './definition65.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { L as Linkable } from './linkable.js';
-import { A as Appearance } from './enums.js';
-import { d as delegateAria } from './delegates-aria.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, observable, when, html, slotted } from '@microsoft/fast-element';
+import { L as Linkable } from '../unbundled/linkable.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { A as Appearance } from '../unbundled/enums.js';
+import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
-const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.wrapper:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -178,4 +177,4 @@ const cardDefinition = defineVividComponent(
 );
 const registerCard = createRegisterFunction(cardDefinition);
 
-export { Card as C, cardDefinition as c, registerCard as r };
+export { Card as VwcCardElement, cardDefinition, registerCard };

package/card/index.cjs

@@ -1,5 +1,47 @@
-'use strict';
-
-const definition = require('../shared/definition14.cjs');
-
-definition.registerCard();
+"use strict";const f=require("../bundled/definition2.cjs"),m=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),b=require("../bundled/linkable.cjs"),c=require("../bundled/enums.cjs"),x=require("../bundled/delegates-aria.cjs"),i=require("../bundled/when.cjs"),v=require("../bundled/slotted.cjs"),g=require("../bundled/class-names.cjs"),w=":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";var y=Object.defineProperty,n=(e,a,o,h)=>{for(var l=void 0,d=e.length-1,u;d>=0;d--)(u=e[d])&&(l=u(a,o,l)||l);return l&&y(a,o,l),l};class r extends b.Linkable(t.VividElement){constructor(){super(...arguments),this.clickableCard=!1}}n([t.attr],r.prototype,"appearance");n([t.attr],r.prototype,"headline");n([t.attr],r.prototype,"subtitle");n([t.attr],r.prototype,"text");n([t.attr],r.prototype,"icon");n([t.attr],r.prototype,"elevation");n([t.attr({mode:"boolean",attribute:"clickable-card"})],r.prototype,"clickableCard");n([t.observable],r.prototype,"footerSlottedContent");n([t.observable],r.prototype,"graphicSlottedContent");n([t.observable],r.prototype,"hasMetaSlottedContent");const p=e=>g.classNames("base",["hide-footer",!e.footerSlottedContent||!e.footerSlottedContent.length],["hide-header",q(e)]);function $(e){return t.html`
+		<${e} class="icon" inline name="${a=>a.icon}"></${e}>`}function _(){return t.html` <div class="header-headline">${e=>e.headline}</div> `}function C(){return t.html` <div class="header-subtitle">${e=>e.subtitle}</div> `}function k(){return t.html`
+		<div class="header-content">
+			${i.when(e=>e.headline,_())}
+			${i.when(e=>e.subtitle,C())}
+		</div>
+	`}function S(e){return t.html` <div class="header">
+		<slot name="graphic" ${v.slotted("graphicSlottedContent")}
+			>${i.when(a=>a.icon,$(e))}</slot
+		>
+		${i.when(a=>a.headline||a.subtitle,k())}
+	</div>`}function q(e){return!e.headline&&!e.subtitle&&!e.icon&&(!e.graphicSlottedContent||!e.graphicSlottedContent.length)}function A(){return t.html` <slot name="meta" ${v.slotted("metaSlottedContent")}></slot> `}function E(){return t.html` <div class="text">${e=>e.text}</div> `}function H(e){return t.html`<button
+		class="${p}"
+		type="button"
+		${x.delegateAria()}
+	>
+		${e}
+	</button>`}function z(e,a){return e.href?e._renderLinkElement(a,p):e.clickableCard?H(a):t.html`<div class="${p}">${a}</div>`}function s(e){const a=e.tagFor(f.Icon);return t.html`
+		${o=>z(o,t.html`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${S(a)} ${A()}
+							</div>
+							${i.when(h=>h.text,E())}
+						</div>
+					</slot>
+					<div class="footer">
+						<slot name="footer" ${v.slotted("footerSlottedContent")}></slot>
+					</div>
+				</div> `)}
+	`}const D=e=>{const a=e.tagFor(m.Elevation);return t.html`
+		${i.when(o=>o.appearance!==c.Appearance.Ghost&&o.appearance!==c.Appearance.Outlined,t.html`
+			<${a} dp=${o=>o.elevation??"4"}>
+			  ${s(e)}
+			</${a}>
+		`)}
+		${i.when(o=>o.appearance===c.Appearance.Outlined,t.html`
+			<${a} dp='0')}>
+			  ${s(e)}
+			</${a}>
+		`)}
+		${i.when(o=>o.appearance===c.Appearance.Ghost,t.html` ${s(e)} `)}
+	`},F=t.defineVividComponent("card",r,D,[f.iconDefinition,m.elevationDefinition],{styles:w}),O=t.createRegisterFunction(F);O();

package/card/index.js

@@ -1,3 +1,163 @@
-import { r as registerCard } from '../shared/definition14.js';
-
-registerCard();
+import { I as b, i as x } from "../bundled/definition2.js";
+import { E as g, e as y } from "../bundled/definition4.js";
+import { V as _, a as l, o as f, h as o, c as $, d as w } from "../bundled/vivid-element.js";
+import { L as C } from "../bundled/linkable.js";
+import { A as d } from "../bundled/enums.js";
+import { d as k } from "../bundled/delegates-aria.js";
+import { w as i } from "../bundled/when.js";
+import { s as u } from "../bundled/slotted.js";
+import { c as S } from "../bundled/class-names.js";
+const E = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}@media (hover: hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+var H = Object.defineProperty, n = (e, t, a, m) => {
+  for (var c = void 0, s = e.length - 1, h; s >= 0; s--)
+    (h = e[s]) && (c = h(t, a, c) || c);
+  return c && H(t, a, c), c;
+};
+class r extends C(_) {
+  constructor() {
+    super(...arguments), this.clickableCard = !1;
+  }
+}
+n([
+  l
+], r.prototype, "appearance");
+n([
+  l
+], r.prototype, "headline");
+n([
+  l
+], r.prototype, "subtitle");
+n([
+  l
+], r.prototype, "text");
+n([
+  l
+], r.prototype, "icon");
+n([
+  l
+], r.prototype, "elevation");
+n([
+  l({
+    mode: "boolean",
+    attribute: "clickable-card"
+  })
+], r.prototype, "clickableCard");
+n([
+  f
+], r.prototype, "footerSlottedContent");
+n([
+  f
+], r.prototype, "graphicSlottedContent");
+n([
+  f
+], r.prototype, "hasMetaSlottedContent");
+const v = (e) => S(
+  "base",
+  ["hide-footer", !e.footerSlottedContent || !e.footerSlottedContent.length],
+  ["hide-header", L(e)]
+);
+function z(e) {
+  return o`
+		<${e} class="icon" inline name="${(t) => t.icon}"></${e}>`;
+}
+function A() {
+  return o` <div class="header-headline">${(e) => e.headline}</div> `;
+}
+function D() {
+  return o` <div class="header-subtitle">${(e) => e.subtitle}</div> `;
+}
+function F() {
+  return o`
+		<div class="header-content">
+			${i((e) => e.headline, A())}
+			${i((e) => e.subtitle, D())}
+		</div>
+	`;
+}
+function I(e) {
+  return o` <div class="header">
+		<slot name="graphic" ${u("graphicSlottedContent")}
+			>${i((t) => t.icon, z(e))}</slot
+		>
+		${i((t) => t.headline || t.subtitle, F())}
+	</div>`;
+}
+function L(e) {
+  return !e.headline && !e.subtitle && !e.icon && (!e.graphicSlottedContent || !e.graphicSlottedContent.length);
+}
+function O() {
+  return o` <slot name="meta" ${u("metaSlottedContent")}></slot> `;
+}
+function V() {
+  return o` <div class="text">${(e) => e.text}</div> `;
+}
+function B(e) {
+  return o`<button
+		class="${v}"
+		type="button"
+		${k()}
+	>
+		${e}
+	</button>`;
+}
+function G(e, t) {
+  return e.href ? e._renderLinkElement(t, v) : e.clickableCard ? B(t) : o`<div class="${v}">${t}</div>`;
+}
+function p(e) {
+  const t = e.tagFor(b);
+  return o`
+		${(a) => G(
+    a,
+    o`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${I(t)} ${O()}
+							</div>
+							${i((m) => m.text, V())}
+						</div>
+					</slot>
+					<div class="footer">
+						<slot name="footer" ${u("footerSlottedContent")}></slot>
+					</div>
+				</div> `
+  )}
+	`;
+}
+const M = (e) => {
+  const t = e.tagFor(g);
+  return o`
+		${i(
+    (a) => a.appearance !== d.Ghost && a.appearance !== d.Outlined,
+    o`
+			<${t} dp=${(a) => a.elevation ?? "4"}>
+			  ${p(e)}
+			</${t}>
+		`
+  )}
+		${i(
+    (a) => a.appearance === d.Outlined,
+    o`
+			<${t} dp='0')}>
+			  ${p(e)}
+			</${t}>
+		`
+  )}
+		${i(
+    (a) => a.appearance === d.Ghost,
+    o` ${p(e)} `
+  )}
+	`;
+}, P = w(
+  "card",
+  r,
+  M,
+  [x, y],
+  {
+    styles: E
+  }
+), T = $(P);
+T();

package/{shared/definition15.cjs → checkbox/definition.cjs}

@@ -1,18 +1,19 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const withSuccessText = require('./with-success-text.cjs');
-const formElement = require('./form-element.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const withErrorText = require('../unbundled/with-error-text.cjs');
+const withSuccessText = require('../unbundled/with-success-text.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked: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: var(--_connotation-color-primary-increment)}}.base.checked.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: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -92,7 +93,11 @@ class Checkbox extends delegatesAria.DelegatesAria(
       this.proxy.readOnly = this.readOnly;
     }
   }
-  ariaCheckedChanged() {
+  /**
+   * @internal
+   */
+  ariaCheckedChanged(oldValue, newValue) {
+    super.ariaCheckedChanged(oldValue, newValue);
     if (this.ariaChecked === "mixed") {
       this.indeterminate = true;
     } else {
@@ -112,22 +117,22 @@ class Checkbox extends delegatesAria.DelegatesAria(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "tabindex" })
+  fastElement.attr({ attribute: "tabindex" })
 ], Checkbox.prototype, "tabindex");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Checkbox.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Checkbox.prototype, "readOnly");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Checkbox.prototype, "defaultSlottedNodes");
 __decorateClass([
-  vividElement.attr({ attribute: "indeterminate", mode: "boolean" })
+  fastElement.attr({ attribute: "indeterminate", mode: "boolean" })
 ], Checkbox.prototype, "indeterminate");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Checkbox.prototype, "slottedContent");
 
 const getClasses = ({
@@ -140,7 +145,7 @@ const getClasses = ({
   successText,
   label,
   slottedContent
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   ["readonly", Boolean(readOnly)],
@@ -151,8 +156,8 @@ const getClasses = ({
   ["hide-label", !label && !slottedContent?.length]
 );
 const CheckboxTemplate = (context) => {
-  const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html`<template>
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`<template>
 		<div
 			class="${getClasses}"
 			aria-describedby="${(x) => x._feedbackDescribedBy}"
@@ -168,17 +173,17 @@ const CheckboxTemplate = (context) => {
 			@click="${(x, c) => x.clickHandler(c.event)}"
 		>
 			<div class="control">
-				${when.when(
+				${fastElement.when(
     (x) => x.checked && !x.indeterminate,
-    vividElement.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
+    fastElement.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
   )}
-				${when.when(
+				${fastElement.when(
     (x) => x.indeterminate,
-    vividElement.html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`
+    fastElement.html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`
   )}
 			</div>
-			${vividElement.html`<label
-				>${(x) => x.label}<slot ${slotted.slotted("slottedContent")}></slot
+			${fastElement.html`<label
+				>${(x) => x.label}<slot ${fastElement.slotted("slottedContent")}></slot
 			></label>`}
 		</div>
 		${(x) => x._getFeedbackTemplate(context)}
@@ -189,7 +194,7 @@ const checkboxDefinition = vividElement.defineVividComponent(
   "checkbox",
   Checkbox,
   CheckboxTemplate,
-  [definition.iconDefinition, mixins.feedbackMessageDefinition],
+  [icon_definition.iconDefinition, mixins.feedbackMessageDefinition],
   {
     styles,
     shadowOptions: {
@@ -199,6 +204,6 @@ const checkboxDefinition = vividElement.defineVividComponent(
 );
 const registerCheckbox = vividElement.createRegisterFunction(checkboxDefinition);
 
-exports.Checkbox = Checkbox;
+exports.VwcCheckboxElement = Checkbox;
 exports.checkboxDefinition = checkboxDefinition;
 exports.registerCheckbox = registerCheckbox;